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

※2025年8月10日のサイトリニューアルに伴い、以下に記載している内容は現行のサイト環境には反映されておりません。
リプレイスの際には、今後の管理や機能追加をしやすくするため、サイト構造を大きく見直しています。

プロジェクト概要

リニューアルにあたっては、まず「全体的に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やノーコードツールと現場の知見を組み合わせて、より良いサイトづくりを目指していきます。