今回はNewfrontの事例つについて、ご紹介いたします
マーケティングチームとプロダクトチームを切り離さなければならないときはどうしますか？そういう場合はスタックをアップグレードしましょう。
著者：Bruno Aderaldo 2020年8月10日
原文：https://bejamas.io/blog/upgrading-the-stack-newfront-case-study/
以前、ウェブサイトの再構築の必要性と、古いウェブサイトがビジネスに悪影響を及ぼす可能性があることをお話しました。Newfrontのサイトではそうではありませんでしたが、使用しているスタックのせいで、ワークフローがやや大変でした。
このマーケティングサイトでは、もともと複雑なテンプレートシステムが使われており、何かを公開したいときにはチーム間でのやりとりが必要でした。その上、チームは自動再構築とデプロイに凝ったウェブフックを設定していたので、完成までに時間がものすごくかかっていました。結局、エンジニアリングの速度、ウェブサイトのパフォーマンス、そしてユーザーエクスペリエンスにまで影響を与えました。
使ったスタックが間違っていたわけではありません。というよりも、その能力を十分に発揮できなかったということです。
##1. ニューフロントストーリー
保険業界は、旧態依然としていて硬直した業界のため、テクノロジーの導入が遅れているといわれています。Newfrontは、自分たちの仕事に現代的なアプローチを取り入れ、テクノロジーを活用して顧客やブローカーの体験を簡素化することを決めた、業界でも数少ない企業の一つです。
特に保険のような広大で複雑な業界では、変革を提唱することは決して容易ではありません。初日から明確なビジョンとミッションを持つことで、Newfrontは革新的で効果的なソリューションを提案するだけでなく、業界を変革することができました。
##2. 概要
同じような考え方やワークカルチャーを持つ会社と一緒に働くことで、コミュニケーションやコラボレーションがよりスムーズになります。初日から、彼らのニーズを明確に理解することができましたし、我々の提案した変更がどのように役立つかを彼らも理解することができました。
ウェブサイトの表示速度や反応が遅く、私たちが気にかけているクラフトマンシップのレベルからはかけ離れていました。
Anthony Short
Newfront保険会社のエンジニアリング・マネージャー
彼らのウェブサイトは、Next.jsを使って1つの巨大なアプリとして構築されていました。つまり、Webサイト、クライアントのダッシュボード、内部のアプリがすべて1つの大きなNext.jsアプリになっていたのです。そのため、構築に時間がかかり、操作性も悪くなっていました。また、パフォーマンスやSEOを考慮して作られていなかったので、これも変更する必要がありました。
もう一つの問題は、このアプリが古いバージョンのNext.jsを実行していたことです。性能が低いだけでなく、彼らの生活をより快適にすることができる新機能もありませんでした。
最終的には、ウェブ開発チームが更新情報を本番環境に公開することではなく、マーケティングチームが自由に実験できるソリューションに重きをおくことにしました。
##3. 使用したスタック
同社のベーススタックは、アプリのReactフレームワークとしてのNext.js、コンテンツ管理のPrismic、CI/CDソリューションのVercelなど、すでに充実していました。そのため、スタックを維持しており、Next.jsを最新のバージョンにアップグレードするなど、いくつかの変更を行ったことで、スタックの良さを最大限に引き出すことができました。
##4. 今回のプロジェクトでの最大の課題
最大の課題は、CMSユーザーがページを追加・編集し、その変更をすぐに本番で確認できるようなウェブサイトを作ることでした。社内のアプリと一緒にサイトが詰まっているため、ビルドが遅いという問題がありました。このサイトを別のプロジェクトとして扱い、移動させる必要がありましたが、これにより彼らはより多くのコントロールと迅速なビルドが可能になりました。
また、両方のテーマに対応したコンポーネントを用意することも考えました。このブランドではダークな色調を使用していますが、特定のページではライトなテーマをサポートしたいと考えました。つまり、両方のテーマに対応するためには、再利用可能なコンポーネントにもっと注意を払う必要があったのです。そのために、テーマ性のあるユーザーインターフェースを簡単に作れる「Theme UI」と、CSS-in-JSが使える「Emotion」を使うことにしました。その結果、ダイナミックで再利用可能なコンポーネントを作ることができました。
ナビゲーションメニューや一部のページタイトルなど、特定の要素にアニメーションを使用することで、モダンなデザインを実現しています。framer-motionを採用したことで、パフォーマンスを落とさずにアニメーションを追加することができました。
##5. 結果
Newfront保険会社にとって最大の収穫は、マーケティングチームとプロダクトチームを切り離すことができたことです。Anthonyの説明によると、マーケティングチームが自分たちでCMSを使い、変更を加え、それをすぐにサイトに反映させることができるようになったのです。
私は、クラフトマンシップと品質の価値が同じチームと仕事をしたいと思いました。また、Next.jsを使ってサイトを構築するチームが社内で使われているテクノロジーの数を減らすことも望んでいました。
Anthony Short
Newfront保険会社のエンジニアリング・マネージャー
新しいウェブサイトでは、ワークフローが簡素化され、より迅速な作業が可能になったため、エンジニアリングチームは本来の仕事である製品の開発に専念できるようになりました。
最後まで読んで下さり、ありがとうございました
Jamstackに関心がある方はこちらまでお問合せください！
株式会社ヒューマンサイエンス
https://www.science.co.jp/