マッハチームとアセプロのサイトを公開しました
こんにちわ。リテールアプリ共創部マッハチームの西田です
今回は、マッハチームのサイトを立ち上げたので、AIを活用した作成の工程や、裏側の仕組みを紹介させていただきます
サイトについて
コンテンツ
サイトには以下のコンテンツがあります
- メンバー紹介
- グロースパックの紹介
- ブログ
このうち、ブログには、マッハチームが提供するサービスである、グロースパックのリリースノートなどを、投稿する予定です
メンバー紹介
Developers.IO から各メンバーのプロフィールページからプロフィール情報、RSSから記事の情報を取得し、メンバー紹介ページを作成しています
ブログ
マッハチームが提供するサービスであるグロースパックのリリースノートや、技術に関連しない Developers IOに投稿しないような、業界のトレンドなどを発信していく予定です
作成の過程
今回のマッハチームのサイト構築では、デザイナーなし、かつ案件の合間に作業を行う必要があったため、全ての工程でAIを活用し、高速に、工数をかけずに構築しました
以下の工程それぞれで、AIを活用しています
- デザイン
- 全体設計
- 実装
デザイン
筆者はバックエンド寄りのエンジニアなので、デザインの知見があまりありません。そこで Vercel 社の v0 を活用し、デザイン含めてモックの作成を行いました
参考にしたい、いくつかのサイトと、これから作成するサイトの構成、要件をプロンプトでわたし、プロトタイプを出力させました
そのままだと、「問い合わせリンク」など、要件にはないけど、LPサイトなどによくある要素も出力されるので、要素を削ったり、余計な説明を直してもらったりしました
ただ、自然言語だけで、指示を行っていくのは、微調整になればなるほど難しくなってくるので、v0上で調整するのは8割くらいの完成度にして、v0から Next.js のファイルをダウンロードし、後続の工程で微調整を行いました
全体設計
今回のサイトは
- 運用の人員が割けない
- とはいえ、ブログなどの動的要素がある
そのため、ベースは静的ページとしてホストし、ほとんと手間をかけずに、料金もほとんどかからないようにしました。動的部分は、更新があった時だけ、サイトをビルドし直し、デプロイするSSG方式を採用しました。ブログは執筆者も多くなく、不定期なため、ヘッドレスCMSで執筆を行い、投稿のたびにサイトをビルドしなおします。またビルドされたHTMLを単純にホストするだけなので、SEO観点でもSPAサイトより有利になります
こういった、全体の設計は筆者が行いますが、それをAI伝えるためのドキュメントの作成にAIを活用しました
筆者の経験上、AIを使った開発では以下の時につまづくことが多いです
- インフラ周りのIaCのコードをAIに一発で出力させるのはまだ難しく、トライエラーに時間がかかってしまい、全体的に手間取ることが多い
- すでにある程度出来上がってる(今回はv0で組み上がったファイル)ソースコードに、全く新しい機能を加えるのは手間取ることが多い
トライエラーをなん度も繰り返すことを想定して、最初に全体構成のドキュメントを出力させました
以下が、AIに drawio 形式で出力させた全体構成図です。左上の方にある処理フローが筆者がプロンプトに与えたものをAIが整形したものです
AIに構成図を出力させるのは、AIの理解が自分と一致してるのか、確認するのにも役立ちます
この構成図をもとに、次に仕様書を出力させます。小さな機能や、すでにソースに参考になる実装がある場合は、そのままプロンプトに指示するだけでも、開発を完了させれることが多いですが、今回は全く新しい機能を追加するため、トライエラー時にコンテキストを失わせないよう、また、事前にAIとの認識をソースでなく、設計レベルで合わせるために仕様書を一度出力させました
仕様書には以下の情報を与え
- 先ほど作成した構成図
- 使用するヘッドレスCMSのAPI仕様書
以下の指示を与え作成しました
- 開発ステップを明示的に分割する
- ヘッドレスCMSの認証情報は後からAPIKEYとして渡すので、セキュアに補完する箱を用意する
開発
開発は先ほど出力した仕様書に基づいて、ステップ毎に Claude Code で進めていきます。トライエラーしながら進めていき、仕様書も必要に応じて更新します
前述した通り、インフラのIaCのコードなどは、AIに全て出力させると余計に時間がかかることが多いので、８割ぐらいできてそうなコードを出力させてからは、コードを直接修正しました
また、今回はAWSアカウントは複数のサービスを提供してるアカウントなので、Route53 のレコード操作など、誤って他のレコードを削除されてしまうと困るところなどは、自分で設定を行いました
サイトの技術要素
使用技術とサービス
- Next.js (SSG)
- CloudFront + S3
- microCMS
レンダリング方式はSSG
前述の通り、低コストで安定した運用をしたかったため、Next.jsのレンダリング方式としては、事前にHTML, CSS, JSをビルドしておくSSG方式を採用しました。
HTML, CSS, JS は、スタンダードな CloudFront + S3 でホスティングしています。
今回は、Next.jsで作成したサイトを、静的なファイルとしてホスティングしたいので、 next build 時の挙動を変えるためにnext.config.js のoutput に export 指定をしています
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
output: 'export',
/* 省略 */
}
module.exports = nextConfig
参考How to create a static export of your Next.js application
Next.js を Static Export したファイルを CloudFront + S3 でホストする場合に、 index.html の省略に対応する必要があるので、以下のサイトを参考にしてください
動的コンテンツ
ブログ機能にはヘッドレスCMSであるmicroCMSをコンテンツデータの管理に使用しています。コンテンツの記述にはリッチエディタを使ってHTMLをGUIで書けるようにしてます
また、コンテンツの更新時に、microCMSの Webhook 連携機能を使用しています。設定手順は以下を参考にしてください
【コンテンツのWebhook連携】GitHub Actionsの設定方法について
ポイントとしては以下です
- Github Actions を用意し、 repository_dispatch イベントを登録
- Github Actions側に microCMS のAPI Key を secret として登録する
最後に
今回は、ブランディングサイトの立ち上げを、AIを使って、案件作業の片手間で対応しました。あまり工数もかけずに（なんならこのブログを書いてる時間が一番長いです、最低限動くものという方針で進めたので、ソースコードはあまり見ずに動作だけを確認して進めました。
継続追加開発を見込まれるプロジェクトで、このようなやり方をすると、どこかのタイミングで追加改修のコストが大きすぎて、AIで省力化した労力を、後から支払うことになりそうですが、作りきりだったり、非常に小規模なものだと、AIを使えばほとんど手間をかけずに構築できそうです
この記事が誰かの参考になれば幸いです
