F2T相談してみる

Claude Codeだけで企業サイトを構築・公開した全手順【Next.js + microCMS】

Claude Codeだけで企業サイトを構築・公開した全手順【Next.js + microCMS】

Claude Codeでサイト制作は本当にできるのか？

できる。実際にやった。本記事はその全記録だ。

前提を整理する。

  • 誰が: F2T（AIエージェント開発の会社）が自社コーポレートサイトを制作
  • 何を: Next.js 16 + Tailwind CSS 4 + microCMS + Vercelという構成のサイト一式
  • どこまで: 企画・デザイン方針は人間が決め、実装・デバッグ・デプロイはすべてClaude Code（AIエージェント）が実行

「AIがコードを書ける」という話はもう珍しくない。しかし、企業サイトを新規構築してドメイン移行まで完了させた事例は少ない。この記事では、AI活用で直面しがちな課題を踏まえつつ、再現可能な手順をすべて公開する。

人間の役割はレビュー、方向性の指示、最終的な公開判断。AIの役割はコーディング、CMS連携、デプロイ、モバイル表示のデバッグ。この分業で、企画からデプロイ完了まで約1日で終わった。

技術スタックの選定 ― Next.js 16 + Tailwind CSS 4 を選んだ理由

2026年時点でSSG+ISRが使え、AIとの相性が良い構成はこれだった。

技術選定で重視したのは「AIエージェントが正確にコードを書けるか」という一点だ。見栄えの良いフレームワークは他にもあるが、Claude Codeとの相性を軸に選んだ。

Next.js 16の特徴

Next.js 16には企業サイトに適した3つの機能がある。

  • SSG（Static Site Generation）: ビルド時にHTMLを生成する。サーバーに問い合わせる必要がないため表示が速い
  • ISR（Incremental Static Regeneration）: ブログ記事を更新したら、そのページだけを自動で再生成する。サイト全体をビルドし直す必要がない
  • React 19 Server Components: サーバー側でデータを取得し、必要最小限のHTMLをクライアントに送る。ページの読み込みサイズが小さくなる

Tailwind CSS 4を選んだ理由

Tailwind CSSはユーティリティクラスベースのCSSフレームワークだ。text-lg、mt-4のように、クラス名がそのままスタイルの意味を持つ。

これがAIとの相性を決定的に良くする。CSSファイルを別途書く必要がほぼなく、HTMLの中にスタイルが完結するため、Claude Codeが「このコンポーネントのスタイルはどこに書いてあるのか」と迷うことがない。

WordPress / Webflow / Next.js + microCMS 比較

項目

WordPress

Webflow

Next.js + microCMS

AI活用のしやすさ

△ PHPテンプレートの編集が煩雑

× クローズドな独自構文

◎ React/TSでAIが正確に書ける

表示速度

△ プラグイン依存

○ CDN配信

◎ SSG + Vercel Edge

運用コスト（月額）

△ サーバー + 保守費用

× プラン制約あり

◎ Vercel無料枠で十分

カスタマイズ性

○ プラグイン豊富

△ デザイン自由だがロジック制限

◎ フルコントロール

WordPressはプラグインのエコシステムが強力だが、AIがPHPテンプレートを正確に編集するのは難易度が高い。Webflowはデザインツールとしては優秀だが、独自の構文体系があり、AIエージェントがコードレベルで操作できない。

Next.js + microCMSの構成なら、すべてがTypeScript/Reactのコードとして透明に見える。Claude Codeにとって「読めて、書けて、テストできる」環境だ。

ブログ機能をmicroCMSで実装する手順

microCMSのAPIをNext.jsから叩くだけ。Claude Codeに指示すれば一気通貫で実装できる。

microCMSを選んだ理由

microCMSは日本製のヘッドレスCMS（管理画面とフロントエンドが分離したコンテンツ管理システム）だ。選定理由は4つ。

  • 管理画面が日本語で、非エンジニアでも記事を投稿・編集できる
  • APIがシンプルで、Claude Codeが正確にデータ取得コードを書ける
  • 無料枠が実用的（月間APIリクエスト10,000回）
  • 画像のCDN配信が標準で付いており、表示速度を別途最適化する手間がない

実装した機能

Claude Codeに指示して実装した機能は以下のとおり。

  • ブログ一覧ページ: カテゴリフィルタと検索に対応。記事が増えてもユーザーが目的の記事にたどり着ける
  • 記事詳細ページ: アイキャッチ画像、公開日、カテゴリラベルを表示
  • 目次の自動生成: 記事本文のH2/H3見出しを抽出し、アンカーリンク付きの目次を自動構築する
  • サイドバー: サイト内検索、カテゴリ一覧、最新記事5件を表示
  • 関連記事セクション: 同一カテゴリの記事を最大4件表示し、回遊率を高める

これらの機能はF2Tブログで実際に稼働している。

Claude Codeへの指示のコツ

精度を上げるポイントは「参考URLを渡す」こと。たとえば以下のような指示が有効だった。

microCMSブログの記事ページに、https://blog.microcms.io のようなサイドバーとTOC（目次）を追加して。カテゴリ一覧と最新記事5件をサイドバーに表示。

「〜のような」と参考サイトを添えるだけで、レイアウト構成・機能要件・見た目の方向性が一度に伝わる。抽象的な指示（「見やすいブログにして」）よりも、具体的な参考URLのほうが圧倒的に精度が高い。

ハマりポイント

トップページのブログセクションが、旧Webflowサイトの記事URLにリンクしていた。microCMSに移行したのにリンク先が旧サイトのままだったため、クリックすると404になる状態だ。

microCMSのAPIからブログ記事を動的に取得し、リンク先を /blog/[記事ID] に差し替えて解決した。静的にハードコードしていたURLを動的取得に変更するだけの修正だが、移行時に見落としやすいポイントだ。

自社サイトのAI構築、何から始める？

技術選定からCMS連携まで、AIエージェントを活用したサイト制作の進め方を一緒に整理します。

壁打ちしてみる →

WebflowからVercelへの移行 ― ドメイン切り替えの全手順

DNS設定の変更だけ。ダウンタイムはほぼゼロだった。

なぜWebflowから移行したか

F2TはもともとWebflowでサイトを運用していた。デザインツールとしては十分だったが、AIエージェントで自由にコードを書ける環境が必要になった。Webflowの独自構文はClaude Codeが直接操作できず、「AIに実装を任せる」というワークフローが成立しない。

移行手順

  1. vercel --prod コマンドでVercelに本番デプロイを実行
  2. Vercelダッシュボードでカスタムドメイン（f2t.jp、www.f2t.jp）を追加
  3. DNSレコードを変更:
    • Aレコード → 76.76.21.21（Vercelの公開IPアドレス）
    • www CNAME → cname.vercel-dns.com
  4. SSL証明書（通信を暗号化する証明書）がVercelで自動発行されるのを確認。数分で完了する
  5. 旧WebflowサイトのDNSレコードを削除

移行のポイント

TTL（DNSキャッシュの有効期間）が3600秒の場合、最大1時間で切り替わる。その間は旧サイトが表示されることもあるが、ユーザーに実害はない。切り替え前にTTLを短く（300秒など）に設定しておくと、浸透が速くなる。

Vercelのデプロイ自体はClaude Codeが vercel --prod を実行するだけで完了する。DNS設定の変更もドメイン管理画面での操作であり、技術的な難易度は低い。

AIが自律的にモバイル表示をデバッグした方法

Chrome DevTools MCPにより「スクリーンショット撮影 → 問題特定 → CSS修正 → 再検証」のループをAIが自律実行した。これが本記事の核心だ。

Chrome DevTools MCPとは

Chrome DevTools MCP（Model Context Protocol）は、ブラウザの開発者ツールをAIエージェントが直接操作できるプロトコルだ。スクリーンショットの撮影、DOM（ページの構造）の操作、ネットワーク通信の確認などを、AIがプログラム的に実行できる。

従来のモバイルデバッグは「人間がChromeのデベロッパーツールを開いて、画面サイズを変えて、目視で確認して、CSSを修正する」という流れだった。Chrome DevTools MCPはこの一連の作業をAIに委譲する。

デバッグの流れ

  1. AIがiPhone（375×812px）のビューポートをエミュレートする
  2. スクリーンショットを撮影し、画像を目視確認する
  3. 問題箇所を特定する（はみ出し、崩れ、重なりなど）
  4. CSSを修正し、Vercelにデプロイする
  5. 再度スクリーンショットを撮影して修正結果を検証する
  6. 問題が残っていれば3に戻る

このループを人間の介入なしにAIが回す。最終的にJavaScriptで document.documentElement.scrollWidth === window.innerWidth を実行し、横スクロールがゼロであることをプログラム的に確認するところまで自動で行った。

事例1: 横スクロール問題

比較表（min-width: 640px が指定されていた）とコードエディタ風UIが、375px幅のスマートフォン画面からはみ出していた。ページ全体に横スクロールが発生し、ユーザー体験を大きく損ねる状態だ。

AIの修正内容:

  • コンテナに overflow-hidden を追加して、はみ出した要素を非表示に
  • max-width の制約を追加し、テーブルが画面幅を超えないように制御
  • whitespace-nowrap（折り返し禁止）をモバイルでは解除する条件付きスタイルを適用

事例2: パンくずリストの崩れ

「Home / Blog / 記事タイトル」というパンくずリストが、狭い画面で途中改行され「Ho me / Bl og」のように単語が分断されていた。

AIの修正内容:

  • リンク要素に shrink-0（縮小禁止）を追加し、「Home」「Blog」のテキストが潰れないようにした
  • 記事タイトル部分は truncate（長い場合は「...」で省略）を適用し、画面幅に収まるようにした

事例3: フォームのステップインジケーター

「1 入力 → 2 確認 → 3 完了」という3ステップの進捗表示が、モバイル画面の右側にはみ出していた。

AIの修正内容:

  • サークルのサイズとgap（要素間の余白）をモバイル向けに縮小（w-8 / gap-2）
  • カードコンテナに overflow-hidden を追加して、はみ出しを防止

このプロセスで人間がやったこと

「スマホで右にずれてます」とスクリーンショットを1枚送っただけだ。問題箇所の特定、原因の分析、修正コードの記述、デプロイ、修正後の検証。これらはすべてAIが実行した。

人間が同じ作業をやったら、3つの事例で30分〜1時間はかかる。Claude Codeは一連の修正を10分程度で完了した。速度の差もさることながら、「スクリーンショットを撮って確認して、また修正して」という繰り返し作業から人間が解放される点が大きい。

人間は何をしたのか ― AIエージェント時代の「仕事」

人間の仕事は「何を作るか決める」と「品質を判断する」の2つに集約された。

今回のプロジェクトで人間がやったこと

  • サイトのコンセプトとブランド方針の決定
  • 「相談してみる」「実践知見をみる」などのコピーライティング方針
  • 各機能の要件定義（「microCMSブログっぽいサイドバーを入れて」「パンくずリストが崩れている」など）
  • モバイル表示の最終確認（実機スクリーンショットのフィードバック）
  • 本番公開の判断

AIに任せて正解だったこと

  • CSS調整: レスポンシブ対応は「画面幅ごとに条件分岐」の繰り返しで、AIが得意な領域
  • API連携: microCMSのAPIドキュメントを読み、データ取得コードを正確に生成
  • デプロイ作業: コマンド実行とダッシュボード操作はミスが起きにくい定型作業
  • デバッグのループ: 「確認→修正→再確認」の繰り返しはAIが疲れない

まだ人間が必要なこと

  • ブランドの意思決定: 「F2Tはこういうトーンで話す会社だ」という判断はAIにはできない
  • ユーザー体験の直感的判断: 「このボタン配置、何か違う」という感覚的なフィードバック
  • ビジネス上の優先順位: 「この機能は後回しにして、先にブログを公開しよう」という判断

AIエージェントは「実行力の拡張」だ。何を作るかを考える力は人間が持ち、実行をAIが担う。この分業を正しく設計することが、AIエージェント時代の仕事の核心になる。それがF2Tが提供するAIエージェント活用設計の考え方だ。

よくある質問

Q. Claude Codeは無料で使えますか？

Claude Code自体はClaude Proプラン（月額$20）以上で利用可能だ。Maxプラン（月額$100）ではより多くのAPI呼び出しが含まれる。今回のサイト構築ではMaxプランを使用した。無料プランでは利用できない。

Q. プログラミング知識がなくても使えますか？

指示の出し方次第で、プログラミング経験がなくても基本的な操作は可能だ。ただし、出力されたコードの品質判断やエラー時の方向修正には、ある程度の技術理解があると効率が上がる。「コードは書けないが、何が起きているかは理解できる」レベルが理想的だ。

Q. WordPressからの移行にも使えますか？

使える。WordPressからNext.js + ヘッドレスCMS（microCMS、Contentful等）への移行にClaude Codeを活用できる。既存コンテンツのエクスポートとインポートもAIに指示可能だ。ただし、WordPressのプラグインで実現していた機能を再現する場合は、要件整理に時間がかかることがある。

Q. セキュリティは大丈夫ですか？

APIキーは環境変数で管理し、コードにハードコード（直接書き込み）しない。Vercelの環境変数機能で本番環境とプレビュー環境を分離している。Claude Code自身がセキュリティのベストプラクティスに従ったコードを生成し、シークレット情報がリポジトリに混入しないようチェックする仕組みもある。

Q. 今回の制作にかかった期間は？

企画からデプロイ完了まで約1日だ。ただし、ブランド方針やコンテンツの事前準備は別途行っている。純粋な実装作業（コーディング、CMS連携、デプロイ、デバッグ）は数時間で完了した。従来の外注制作では数週間〜数ヶ月かかる工程が、AIエージェントの活用で大幅に短縮された。

Claude Codeを使った制作・運用の相談はこちら

「自社でも同じことができるのか」「何から始めればいいのか」。AIエージェント活用の壁打ち相手として、一緒に整理します。

相談してみる →

← 記事一覧に戻る相談してみる