フォーク公式サイトを全面的にリニューアルしました。
シンプルなデザインとともに、フロントエンド・バックエンドで先進的な技術を取り入れ、見やすく・快適にご利用いただけるWebサイトを目指しました。
リニューアルのポイントは以下の通りです。
表示速度の改善
近年コンバージョンに直結することからWebサイトのパフォーマンスを上げたい、あるいはリニューアル時の指標としてLighthouseで高いスコアを獲得したいといったご依頼が増えています。今回のリニューアルではLighthouseのパフォーマンス・スコアが95以上(※1)となるように設計、実装を行いました。
※1 デスクトップ(1280x720)で計測。ユーザーの環境によりスコアは変動します。
更新作業の簡易化
一般的なCMSでは、専門知識がなくともWebサイトの更新作業が行えますが、カスタマイズに手間がかかったり管理画面の速度がおそくなるといった声を聞くことがあります。 今回のリニューアルではGoogleのスプレッドシートから簡単に更新作業ができる仕組みとしながら、データポータルやフォーム機能を活用し、パフォーマンスとセキュリティを両立させました。
技術的な取り組みについて
PWA
本サイトはPWA(Progressive Web Apps)として構築しており、スマホアプリのようにインストールが可能で、オフラインでもサイトを利用できます。
Firebaseプラットフォーム
Googleのスマートフォン・WebアプリケーションプラットフォームであるFirebaseを活用し、GitHubと連携した本番・ステージング・開発のCI(継続的インテグレーション)環境を構築しています。主にHosting・Functions・Cloud Run・Firestore(データベース)・Storage・RemoteConfig(A/Bテスト)等を活用し、高負荷対応されたインフラ構築が短期間で安価に実現可能となっています。
スプレッドシートとマークダウンによるデータ管理
コンテンツの更新に管理画面を設けず、Googleスプレッドシートにマークダウン形式でテキストを入力し、ブラウザで都度HTMLに変換して表示しています。この変換にはWebAssembly(markdown-wasm)を使用しており、従来のJavaScriptで実行するのに比べて大幅に高速化されています。
Firestoreバンドルによる静的配信
上記のコンテンツデータはデータベースとしてのFirestoreに格納されていますが、配信時には都度読み出しをせず、事前に静的なデータファイル(bundle)を生成させることで読み込みの高速化、セキュリティの向上を図っています。
Webコンポーネント
フロントエンドはGoogleが開発主導している(LitライブラリによってWebコンポーネントを作成し、サイトの高速化とコードの簡略化、高いメンテナンス性を実現しています。
BudouX 🍇 による自動文字組み
当サイトはレスポンシブデザインに対応しているため、BudouXライブラリを使用することでデバイスの画面幅に応じた最適な文字の改行処理を自動で行っています。
DX化推進事業のご案内
コンテンツについては、昨年より開始したDX化推進事業のサービス内容・案件事例を掲載し、これまでのWebプロダクションからデジタルソリューションカンパニーとなる一歩を踏み出しました。
新しいフォークに是非ご期待ください。