新規プロダクトの公式サイトをリリースした話とリリース後の運用やリファクタについて
はじめに
自己紹介
グロービスでエンジニアをしている松原です！
最近フルリモートが当たり前になったこともあり思い切って逗子・葉山エリアに引っ越しました🏝
引っ越してからというもの、毎日海岸沿いを散歩するのにハマってます！
この記事について
こちらの記事はGLOBIS Advent Calendar 2022の19日目の記事として、今年リリースしたグロービスナノ単科の公式サイトについて記事にしたいと思います！
グロービス経営大学院 ナノ単科について
ナノ単科はグロービス経営大学院が提供している教育プログラムです。動画学習はもちろん、AIを使った学習コンテンツや大学院講師によるライブ授業、受講生同士で学習理解を深めるグループワークなどを通じて、6週間で仕事に活かせる基礎スキルを身につけることができ、修了することで大学院の単位を獲得することができます。
ちなみにナノ単科の内部はFlutterで開発してあり、iOS、Android、そしてWebとクロスプラットフォームにて利用することが可能です。
ナノ単科公式サイト
グロービスナノ単科 iOSアプリ
グロービスナノ単科 Androidアプリ
もくじ
プロダクトの公式サイトを開発するまでの経緯
リリースのスケジュールや開発に際して考慮したこと
技術選定や設計について
開発について
大学院のサイトならではの大変だったポイント
素材撮影
リリース
サイトを運用していく中での気づき、改善したポイント
振り返りと今後
プロダクトの公式サイトを開発するまでの経緯
プロダクト開発とセットで出てくるのはプロダクトの公式サイトだと思います。
サイトって技術的にはあまり難しいことをしないので割と軽視されがちですが、プロダクトにとってはユーザーにプロダクトのイメージや提供価値を伝える必要がある大事な存在だと思います。
近年はノーコードでサイトが制作できるサービスが増えてきたので、サイトはエンジニアが作らない、というケースも増えてきているかなと思います
実際にナノ単科も初期リリースの段階ではSTUDIOでLPを作成していました。STUDIOはLPを開発するのにとても便利なツールだなと感じています。
ではなぜプロダクトの公式サイトをノーコードのLPから乗り換えることになったのか？
こちらは大きく分けて理由が4点ありました。
LPでは紹介しきれない情報量になってきた
クリエイティブにこだわり、サイトを通してプロダクトの価値を伝えたい
科目など個別情報を伝える必要がある。また今後も科目が追加されていく。
外部に運用を委託している既存の大学院のサイトとの連携をする必要があり自由度が高い方がいい
特に学期ごとに更新されるプロダクトになので運用に強いこと、社会人教育としてのブランディングにふさわしいクリエイティブなどが求められました。
リリースのスケジュールや開発に際して考慮したこと
サイト開発のスケジュールは下記のような流れで進みました。
サイト開発のスケジュール感
2月初旬
サイト開発の話があがる
2月中旬
サイト開発に着手
技術選定、サイト設計
3月
ガッツリ開発
4月第一週
素材を撮影
4/12
サイトをリリース
PRtimesにてプレスリリースを刊行
開発人員について
2名
僕(フロントエンドエンジニア)
デザイナーの方
個人でウェブ制作会社を長年担当
動きのあるサイトなどが得意
フロントエンドの経験が長かった自分と、サイト制作経験の長いコードも書けるデザイナーの方の2名体制で開発しました。
技術選定や設計について
技術選定について
サイトの要件やスケジュール感ををまとめたのち、技術選定を行いました。
2022年12月現在だとモダンフロントエンドでサイトの開発を行うなら以下のような候補が挙がるのではないかなと思います。
Gatsby.js
Reactベース
静的サイトといえばこれ！
パフォーマンスがとにかく高い
Next.js
こちらもReactベース
Vrcel製のcliが便利
Nuxt.js
Vueベース
Vite.jsを内部エンジンにしたVue3系が登場
フロントエンドの技術動向については昨年の動向をまとめた下記のページが参考になったので貼っておきます。
今回選択したのはNuxtでした
上記の候補があった中で今回のサイトでは人員、スケジュールを加味してNuxtを選定しました。
デザイナーの方がjQueryメインでの開発が多く、jQueryと書き方が近いVueベースのNuxtを選定しました。Reactベースだとガッツリjsを書くことになるのでキャッチアップに時間がかかってしまいそうだったためです。
またグロービスの方針としてグローバルへのワープを掲げてており、今後海外展開を控えており、多言語展開をしていくため、それに備えておく必要がありました。
Nuxtでの多言語サイト開発経験がありその知見をそのまま活かせるなと思いました。Nuxtでの多言語サイトの開発に関しては下記の記事にまとめているのでご参考になれば幸いです。
※2022年2月の段階ではVue3がアルファ版で触ってみたのですが、まだバグも多かったためプロダクションで使用するのは控え今回は安定版の2系を選択しました。
※候補にあがったGatsby.jsは個人ブログで、Next.jsは個人プロダクトで使っており、どちらもとても好きなのでまたの機会に記事にしたいと思います。
設計について
設計はアトミックデザインを採用しました。
このサイトの場合だと、科目ページなどで同じUIでデータの中身が違うページにも対応がしやすくメンテナンスが楽になるためです。
アトミックデザインについてはこちらの記事が分かりやすいので貼っておきます。
アトミックデザインの難点として、チーム(複数名)での運用が難しいと言うのがあるかと思います。特にメンバー数が増えれば増えるほどにコンポーネントの共通認識を持つのが難しい(特にAtomsの認識合わせ)と言うのがアトミックデザインの運用フェーズでよく聞く声だと思いますが、今回は2名だけだったので今のところ難しさは感じなかったです。
アトミックデザインはサイトのみならず、Flutterで開発しているWebアプリとモバイルアプリでも採用しております。
開発について
上記までのスケジュール感や技術選定を1週間ほどでまとめました。
最終的に決まった技術スタックは以下になりました。
技術スタック
Nuxt.js
Story Book
UIの確認
Firebase
ホスティング先
Github Actions
デプロイなどを自動化
Firebase hostingはサービス側もFirebaseを使用していたので既存のスタックに合わせる形で選定しました。
また、開発初期段階でGithub Actionsでデプロイなどを自動化していたので開発がかなり楽でした。自動化できるところは多少面倒でも早めに自動化しておくのが自分を助けてくれるなと学びました。
その他開発で注意した点
大量のクリエイティブを使うので画像を圧縮して配信し、表示速度を最適化
大量の画像を使用するサイトだったので画像の配信の最適化を行いました。
before: デザイナーがFigma書き出し時の画像 5.9MB
after: 変換後の画像 159KB
変換ツールは手前味噌ですが僕が書いた下記の記事が参考になるかなと思いますので貼っておきます。
ローカル環境に変換ツールを置いておくと開発や写真の整理でまとめて変換できるので便利です。
webpという画像フォーマットが容量削減と画質の低減が少ないため導入しました。しばらく前までsafariが対応していないので導入を躊躇っていましたが、safariがwebp対応したこともあり今回導入に踏み切りました。
その他の開発の取り組み
TOPに動画クリエイティブを挿入
マイクロインタラクションを付与
スクロールアニメーションを追加
他にも細かい設計などはあるのですが、特に難しいことをやっているわけでもないので今回は割愛します。
大学院のサイトならではの大変だったポイント
今回は大学院の科目サイトということで普通にサイトを作る場合と比較して文科省指定の学校法人ということもあり、文言について何度も修正しながら進める必要がありました。
ナノ単科は開発チーム以外にも、大学院の学校法人、学習コンテンツを考えるチームなどさまざまな社内のステークホルダーとの連携をしながら進める必要がありました。
ミーティングやSlackで柔軟に対応いただいた社内の皆さんにはこの場を借りて改めてお礼を申し上げたいです！
素材撮影について
サイトの写真素材ですがスタジオでの撮影を行いました。
これはチーム総出で撮影やエキストラに加わりとても楽しい思い出になりました。
撮影の様子の写真を貼っておきます。
普段からこういう楽しい振り返りと今後で働けているのは本当にありがたいと思ってます！
僕自身、20代前半でエンジニアになるか写真家になるか迷うくらいには写真が好きだったので撮影にも関われて嬉しかったです。
出来上がった素材をサイトのダミー画像と置き換えていく際は一気に雰囲気が変わっていくのでとてもワクワクしました。
リリースについて
無事順調に開発が進み、2022/4/12にオンスケジュールでサイトをリリースすることができました。
声がかかってからリリースまでの2ヶ月間は、リリースに向けてチーム一丸となって開発を行いました。
かなりタイトなスケジュールでしたが、リリースした達成感をみんなで味わうことができ、一人で頑張るのではなく、個々人の強みを活かして皆で何かを成し遂げるというチームで仕事の醍醐味を味わうことがたことは個人的にも大きく成長できたポイントかなと思っています。
この場を借りてナノ単科チームのみなさん、撮影や衣装やメイクで関わっていただいた関係していただいた方々、外部とのインフラ設定を行なってくれたSREチームのみなさん、大学院のみなさんにこの場を借りて感謝を伝えたいです。本当にお世話になりました。
今回の開発でリリースしたプロダクトの公式サイト
今回リリースしたサイトはこちらになります。
余談ですが、サイトのリリースまでにかかったコストの総額は400万円ちょいでした。
この金額は開発に関する人件費、購入したクリエイティブ素材、独自の撮影に関するコストの合算になります。
開発に関する情報は多いですが、コスト感まで出している情報は少ないのでこちらも記載させていただきました。
PR timesさんに出稿したリリース記事
プロダクト自体もα版、β版と水面下で開発しておりましたがサイトのリリースと同じタイミングでリリースいたしました。
プロダクトは2020年10月期に当初1科目から始まり、2023年1月期現在は5科目のラインナップに広がり英語版のnano-MBAもリリースされております。
これからも、オンラインを通して国内・国外のさまざまなユーザーに学習機会を提供できるようにチーム一丸となって取り組んでいければと思います。
サイトを運用していく中での気づき、改善したポイント
こちらのサイトはリリースから半年以上経過したのですが、運用していく中で大変だと感じたところをリファクタリングしました。
主だったリファクタリングは以下になります。
運用工数の削減
大学院のサイトである都合上、学期ごとに情報の更新が必要になります。
当初は静的サイトとしてリリースしていましたが、運用における動的データと静的なデータに分けて運用工数の最適化を行いました。
モバイルアプリのリリースなどに工数を割いたためまだ着手できていないですが、今後はプロダクト側のDBの値をAPI経由で受け取り自動で更新されるところまで開発していきたいなと考えております。
カレンダーのUIをプラグインでの再現
リリース当初は工数とUIの都合からカレンダーを画像で表示しておりましたが、3ヶ月ごとに各科目のカレンダー画像を置き換えるのはデザイナー的に中々の手間だったため、プラグインを用いて切り替わりの自動化を行いました。
振り返りと今後
今回はプロダクトの裏で開発を進めていたサイトのリリースと運用について記事にしました。
改めてチームとして正式リリースから科目の拡大、グローバル化にモバイルアプリのリリースなど、大きく飛躍できた1年だったと思います。
ナノ単科チームは歴戦のベテランエンジニアが多く、日々学びの機会に恵まれているので来年はプロダクトとしても個人としてもより飛躍ができる1年にしていきたいなと思います。
そして何よりも、オンラインで教育の制約を徐々に無くしていきより多くの方へ教育機会の提供ができるようユーザーに価値を提供し続けていけるように今後とも精進していきたいなと思います。
さいごに
SNSをフォローしていただけると喜びます！
この記事が気に入ったらサポートをしてみませんか？