当サイトを、パープレキシティラボを活用してリニューアルしました。

プロジェクト概要

リニューアルにあたっては、まず「全体的に3D Webアニメーションを取り入れ、よりリッチなサイトにしたい。CMSはmicroCMSで構築している」という大まかなイメージを伝えました。その結果、最初はヘッダーと箱だけのシンプルなデザインができあがりました。

その後、何度かやりとりを重ねて細部を調整し、最終的に現在のデザインに仕上げることができました。

パープレキシティラボからは、デザイン済みの静的コーディングデータの生成やThree.jsを使った3Dアニメーションの実装といった成果物が得られています。また、レスポンシブ対応やHoverアニメーションの再現、ハンバーガーメニューなどのJavaScriptもきちんと反映されていました。

さらに、下層ページの指示を出すことで、そちらの生成も可能でした。自分が確認したのはトップページと同一ファイル内で、擬似的なSPAタイプの挙動となっていました。

全体を通して、デザイン作成からコーディングまで、かなりの作業を任せられた点が非常に良かったです。

一方で、ファイル形式がレガシーなHTML方式だったため、Next.jsなどの雛形として一式生成できると、さらにスピードアップできそうだと感じました。Next.jsについては、試した限りでは、雛形ではなくパッケージ.jsonやpage.tsxといった単位で生成されたため、もう少し使い勝手が良ければと感じています。

パープレキシティラボに任せた箇所

  • デザイン作成
  • 静的コーディング（Pc・Sp）
  • Three.jsを利用したアニメーション実装

一方で、手動で対応した箇所もありました。

手動で対応した箇所

  • Next.jsへの組み込みや、microCMSとの連携
  • Cloudflareへの反映作業

Three.jsについては、vanilla（素のJavaScript）で大量のコードが生成されていたため、Next.jsへの組み込みがやや手間となりました。次回からは、もう少し指示の仕方を工夫したいと考えています。

microCMSはリニューアルに伴い、既存のロジックを流用できたため、そこまで大きな負担にはなりませんでした。ヘッドレスCMSの柔軟さが活きた形です。

まとめ

今回のリニューアルは、AIやノーコード・ローコードツールと現実の開発現場をどう共存させるか、という観点からも大きな学びがありました。デザインやコーディングの自動化が進むことで、作業効率は飛躍的に向上しましたが、一方で、実際のプロダクトに組み込む際には、エンジニアとの連携や手動での調整が不可欠だと改めて実感しました。

また、microCMSのようなヘッドレスCMSの柔軟さも、リニューアルをスムーズに進める上で大きな助けとなりました。今後も、AIやノーコードツールと現場の知見を組み合わせて、より良いサイトづくりを目指していきます。