はじめてのSaaSプロダクトの開発3ヵ月目（振り返り）
SaaSプロダクト開発1ヵ月目、2ヶ月目に続き、3ヶ月目（2020年5月）の進捗まとめです。
引き続きAPIの開発
バックエンドエンジニアが担当しているAPI開発3ヵ月目ですが、こちらベータ版に必要なAPIはだいたい完成といったところまできました。あとはAWS SES含めたメールや通知の設定、その他細々したものがが残っていますが。今後Web以外にモバイルアプリの開発や、他のサービスへのAPI提供など考えるとやはりAPIファーストな設計は大切だと考えています。
次はAdmin（自社側）コンソールの開発とそれに付随するAPIを整えていく予定です。
WebアプリケーションのBeta v1
先月末時点でだいたいできていたベータ版の原型レベルのものにUIの修正や多少の機能追加といったことを行い、ざっくり目標としていたBeta v1がほぼ出来上がりました。本当に最低限の機能が使える程度のレベルではありますが、GWがあったもののだいたい予定通りの進捗。
ただ、React.jsのプリレンダリングで実装していたところ、一部予想できていなかった問題が発生したため、Next.jsのSSRに移行する作業が発生しました。そこに少し時間を要しているので、一部は4ヵ月目に持ち越しています。
そのNext.jsへの移行の完了後は、Beta v2, v3と機能追加していくスケジュールです。
ランディングページの制作と公開
先月とりあえずできたランディングページ（LP）のベータ版をデザイナー兼フロントエンドコーダーが引き継いで、見栄えの良いものに仕上げました。とはいってもまだまだランディングページもversion 1といったところで、これからどんどん改良が必要なレベルです。
コーディングが終わった段階でエンジニアが引継ぎ、デプロイを行いました。LPには一部（主にbackgroundに）アニメーションも少し加えました。アニメーションに関しても今後さらに改良してきたい部分です。
出来上がったLPは実際にDNSも設定し、実際にアクセスできる状態にしています。そして同時にアプリケーション側もパブリックにアクセスできる公開状態に。
今後さらにページを追加し、LPからサイトへとスケールアップさせる予定です。
ちなみにLPもアプリも日本語、英語両方サポートしています。
利用規約やプライバシーポリシーなどのページ追加
上のLPに付属というレベルですが、別ページとして利用規約（Terms of Service）、プライバシーポリシー（Privacy Policy）、英語版はCookie Policyも作成しました。
テキストはすでに出来上がっていたので、今月やったのはテキストのコードへの流し込みです。
これらは後からでもいいと思っていたのですが、GoogleとのAPI連携に審査が必要で、その審査の時に規約関係が見られるらしいということで、このタイミングでの作成・公開になりました。
サーチコンソールへの登録
今回はまったく新しいドメインを使うということで、Googleでプロダクト名を検索しても上位に表示されるまで少し時間がかかると予想し、SEOの観点からLP公開直後にGoogle Search Consoleへの登録を行いました。
サーチコンソールへの登録時に注意した点としては、
* http --> https のリダイレクト設定
* wwwなしへの統一
* 各種OGP設定
* 多言語サイトにおける hreflangタグ の設定
* 必要な（アプリ側の）ページには noindex, nofollow 設置
くらいでしょうか。
各種リデザインやUIデザイン
プロトタイプレベルのままだったアプリケーション内のページや細々したUIのデザインを整えていきました。大きなページ単位のデザインはユーザーダッシュボードの下層ページ以外はだいたい出来上がった印象ですが、細かいUIの修正は無限にあるので来月以降も継続してdetailsにこだわったデザイン改良を継続していきます。
---
以下は自分が担当した（開発以外の）タスクです。
ロゴデータからローディングアイコンなど作成
今回のアプリやサイトではアニメーションにLottie（Airbnbが開発したiOS、 Android、React Native対応のアニメーションライブラリ）を使うことにしました。主にアイコンに動きを加える目的に使う予定で、その多くはインターネット上にある無料・有料のリソースを使うつもりなのですが、ローディングアイコンなど一部はロゴのデータから自分で作れそうだったので、プロダクト全体としての統一感やブランディング向上という意味でトライしてみました。
とりあえずAdobe After Effectsの体験版を契約し、ロゴのイラレデータからコンポジションを作って、という感じで進めました。After Effectsは人生初ながら、ネット上のブログやらYouTubeやらを参考に半日ほどいじって、なんとかある程度満足いく動きのものを作ることができました。ちなみに作成したのはローディングアイコンと、何かアクションが成功した時に表示するチェックマークタイプのアニメーションアイコンの2つ。
After Effects上でアニメーションさえできればあとは簡単で、Bodymovinというプラグインをインストールして、それを使ってアニメーションをJSON形式でエクスポートします。あとはLottieがJSONデータをパースして動きをつけてくれます。（実際の実装部分はエンジニアが対応。）
Webflow Universityの以下の動画を参考にしました。
イラストレーターですら本当にベーシックなことしかできない自分ですが、After Effectsの体験版だけで2つのアニメーションを作成できたので個人的には満足です。
G Suite の契約
そろそろ独自ドメインで使うメールアドレスも必要になってきそうということもあり、G SuiteのBasicプランを契約しました。もちろん14日間の無料トライアルもありで。
独自ドメインの登録にはAWS側でのMXレコードの設定が必要なのでそこはエンジニアに依頼。
とりあえずいくつかグループも作成しておきました。
インターンのトライアル開始
ほぼ身内まわりで募集したインターンにありがたいことに神戸大学の学生がひとり興味を持ってくれたので、ちょっとした課題を与えた上で、実務としてまずは（日本語）コンテンツマーケティング関係でトライアルを開始しました。
無事続けられるようであれば、コンテンツマーケティングの他にもカスタマーサクセスなど順次いろいろトライしていってもらおうと思っています。
---
毎回のことですが、これ以外にも細かい作業はいろいろあります。LPやアプリ内で使っているテキストをメッセージ性という観点からあーでもないこーでもないと変えてみたり、他社サイトで使えそうなデザインパターンやUIをまとめてみたり、開発のロードマップを描いてみたり、中長期戦略をMoatsも踏まえて検討してみたり...