岡田 貴弘

🔸構築したWebサイト [nebonga.com](nebonga.com) 🔸プロジェクトの概要 私は映像・撮影制作会社のWebサイトリニューアルプロジェクトを担当しました。このプロジェクトでは、WordPressをヘッドレスCMSとして活用し、法人化に合わせて既存のWordPressテンプレートから完全カスタマイズ可能な設計へと移行しました。 🔸使用技術 フロントエンドはTypeScript、Next.js、Tailwind CSSを用いて構築し、データフェッチングにはGraphQLを採用しました。サイトのホスティングにはNetlifyを使用し、Netlify Formを通じてフォーム機能も実装しました。 🔸課題 以前のWordPressテンプレートではデザインの自由度が限られており、多くの映像と写真のためページの読み込み速度が著しく遅い状態でした。 🔸工夫 フロントエンドをオーダーメイドで設計することにより、顧客のニーズに合った魅力的なデザインを実現しました。Lighthouseのスコアを61から91まで改善し、ページの速度も大幅に向上しました。この改善は、テンプレートからの移行により不要なCSSやJavaScriptの読み込みが排除されたことが大きな要因です。 顧客の使い勝手を考慮して、入力画面と実際のブラウザ表示が一致するようデザインの調整を行い、プレビュー機能を実装しました。また、分析ツールが未設定だったため、Google AnalyticsとSearch Consoleの導入も行いました。 🔸思考のプロセス ・技術の観点 今回、メインビジュアルにアニメーションを使いたいというリクエストがあり試行錯誤しました。 アニメーションでテキストを表示後に動画を再生させるという処理に、一番最初はクエリセレクターでvideoの要素を取得して、テキストの表示が完了後に再生させるようにしました。ですが、公式ドキュメントを読みuseRefを使用した方が良いということを知りました。useRefを使用することで、宣言的にUIを構成することを保てるようになりました。 ・技術以外の観点 現状のWebサイトの課題をクライアントと顧客に寄り添って抽出しました。技術以外の点でいうと、写真や映像を依頼したいエンドユーザー向けの価格表がないことで、料金のイメージがつかないのではないかと仮説を立てて料金表を作成する提案をしました。 （効果の検証はこれからです） 🔸成果 クライアントは新しいデザインと機能の向上を非常に高く評価しました。私の提案した分析ツールの導入やWordPressのヘッドレスCMS化による速度改善にも満足していただきました。 🔸学び このプロジェクトで初めてNext.js、Tailwind CSS、GraphQLを使用しましたが、充実したドキュメントのおかげでスムーズに開発を進めることができました。また、WordPressをヘッドレスCMSとして実装する過程で何度か問題に直面しましたが、Githubや海外の開発者のリソースを参考にしながら解決策を見つけ出しました。特に、Next.jsのApp routerを使って動的ページ生成やHTMLデータの処理方法を学ぶことができ、これらの技術は今後のプロジェクトにも大いに役立つと感じています。