1. 現状把握・与件ヒアリング

検索意図・流入経路・CV導線・速度や安定性と順位低下とCV減の因果関係を確認。更新頻度の少なさ、低パフォーマンス、情報設計が現在の課題だとわかりました。関係者を集めたMTGを設定し課題の共通認識化、与件を整理を行い、サイトリニューアルの方向性をまとめました。

2. 競合リサーチ・サイトマップ策定

SERPの観察と競合サイトの情報密度／E-E-A-Tの見せ方を比較し、不足しているコンテンツの洗い出し、どの情報をどの順で出すかを検討。サイトストラクチャを作成し現場とすり合わせ、構成を決定します。

実際に作成したサイトストラクチャ

3. キーワード選定

SEOで成果を上げるにはキーワード設計が欠かせません。まずはコアとなるキーワード群をカテゴリ別に洗い出します。その後すべてのキーワードの組み合わせを作成し、キーワードプランナーで効果の高いキーワードセットを絞り込みます。最終的に検索ボリュームなどを加味してページ単位で主要検索キーワードを選定し優先度を設定、それがコンテンツの内容の指針になります。

実際に作成したページ別のキーワードリスト

4. 技術選定

次に、使用技術について検討を始めました。旧サイトはWordpressで構築されており、カスタマイズの柔軟さが魅力ですが、プラグインやコンテンツが多くなるとサイトパフォーマンスが低下するという難点があります。そこで、今回はSSR（サーバーサイドレンダリング）やSSG（静的サイト生成）に対応したモダンなフレームワークを採用することにしました。さまざまな技術スタックを比較し、Next.js 15、React 19、Tailwind v4、shadcn/uiといったスタックで構築します。
今回はAIコーディングを前提とした開発ですが、AIコーディングの場合言語やフレームワークについて過去のバージョンの知識で開発をしてしまうことがあるため、「Tech Stack Version Guide & LLM Guardrails」というドキュメントも用意してContext 7 MCPと併用して参照するバージョンを間違えないような工夫をしました。

5. 要件定義

続いて要件定義を行いました。要件定義書ではSEO要件（キーワード以外）・IA方針・計測要件・運用要件をセットで定義。スコープは要件定義／情報設計／Webデザイン／フロント実装／アクセシビリティ配慮／SEO／CI/CD設計にまたがります。

6. デザイン方向性決め

デザインの方向性を決めるために競合サイトやWebデザインギャラリーなどを横断的に調査し、簡単なデザイン原則とそれに合うリファレンスを数パターン作成しドキュメント化しました。それをもとに現場と議論を重ね、ブラッシュアップを行いデザインの方向性を絞り込みます。

作成したデザインルールの提案ドキュメントの1案

7. AIコーディング手法の模索

当初はデザインファイルは作成せずに、デザイン原則をもとにAIコーディングで調整を重ねて公開をする予定でした。まず、これまでに作成した要件定義書やデザイン原則などのドキュメントをコンテキストに組み込みプロンプトのみで数ページのサイトの構築をいくつかの手法（Figma Makeでポン出し、Kiro IDEで仕様駆動開発など）で試みました。しかし、普遍的でテンプレート感が強く、ビジュアル的に納得の行くサイトは出力されませんでした。

Figma Makeで一発出力したサイト

そこで、Figmaでトップページを何セクションかデザインし、Figma Makeにアセットを読み込ませ同様のプロンプトでサイトを出力させたところ、多少崩れやデザイン意図と違う箇所はあるものの、7〜8割の精度でデザイン通りのコードが出力されました。Figmaのデザインデータを正確に読み込むことができれば、AIコーディングでもビジュアルや画面設計、UXを再現できることに気づきました。

8. デザイン

1ページだけデザインデータがあればAIがデザイン原則に沿ったデザインが出力してくれるわけではなく、やはり全ページのデザインデータが必要でした。　AIコーディングを何回か試す中で、HTML構造を意識したレイヤー構造やオートレイアウト設定などはある程度雑にやってもAIが補完してくれる肌感覚があったため、デザイン原則に沿ったビジュアル、回遊性・CV導線を意識した画面設計を最重視し、ある程度の雑さを許容してデザインを進めていきました。
下層ページも含め全11ページのデザイン制作を15hの稼働でFIXさせました。

実際のFigmaデータ。利用頻度が少ないパーツはコンポーネント化せずレイヤー名だけを揃えるなどデザイン工数を最小限に押さえる工夫をした。

9. フロントエンド実装

Figmaデザインを元にNext.js 15のコードベースを構築しました。初期実装ではFigma MCPからデザインデータの構造を取得、全11ページを一気に出力し、その後、Figma RestAPIから正確な画像アセットを取得してサイト全体の画像を更新。
デザイン修正や画像差し替えを繰り返し、レスポンシブ対応（モバイル・タブレット・デスクトップ）、カルーセル実装、スクロールアニメーションも段階的に調整。ホームのヒーローセクション改善やサービスカード統一、支援実績カルーセルのレイアウト最適化など、細かなUI調整を20回以上のコミットで実施しました。

10. テスト

JestによるユニットテストとPlaywrightによるE2Eテストを整備し、カバレッジ80%以上を達成。axe-coreによるアクセシビリティ監査ではWCAG 2.1AA準拠率96%（45/47項目）を実現し、見出し階層の修正、フォーカス可視化、フォームアクセシビリティの強化を実施しました。Lighthouse CIをGitHub Actionsに統合し、PR作成時に自動的にパフォーマンス（90+）、アクセシビリティ（90+）、SEO（90+）を検証。

11. 本番公開

Vercel本番環境へのデプロイに向けて、SEOメタデータの最適化、OGP画像の追加、robots.txtとsitemap.xmlの整備を完了。Preview環境のnoindex設定をmiddlewareで実装し、誤ってインデックスされることを防止しました。
本番公開後は、コンテンツ更新フローの文書化（CONTENT_GUIDE.md）、依存関係更新フロー（Renovate/Dependabot）の整備、CI/CDパイプライン（Lint/Jest/Playwright/axe/Lighthouse）の統合を完了。ブログ記事3件と事例記事を複数追加し、実際のコンテンツ運用を開始しました。公開後もUIの微調整（余白、タイポグラフィ、パンくずリスト）を継続し、チーム全体で運用できる体制を構築しました。