agentic-website-design

エージェント主導のウェブサイトデザイン

AI コーディングエージェントがコードのすべての行を完全に制御できる、本番品質のウェブサイトを構築します。静的サイトジェネレーター（Astro を推奨）を使用してください。LLM の制御を制限する Framer や Webflow のようなノーコードツールは使用しないでください。

基本原則

1. コードを完全に制御する — LLM が HTML、CSS、JS、コンテンツをすべて生成します。ドラッグ＆ドロップ、ビジュアルエディター、ブラックボックスは使用しません。
2. ブラウザーをループに組み込む — エージェントは構築したものを必ず確認しなければなりません。ブラウザーツールを使って、変更のたびにライブサイトのスクリーンショットを撮影し、確認します。
3. スキルを活用したプロンプト — すべてを1つのプロンプトで行うのではなく、専門的な作業は専用スキル（frontend-design、copywriting など）に委任します。
4. 徹底的に反復する — 最初の出力を受け入れてはいけません。高い基準を設定し、結果が優れたものになるまで繰り返し改善します。

---

スタックの選定

デフォルト：Astro

Astro は、デフォルトでは JavaScript を一切出力せず、あらゆる UI フレームワークに対応し、LLM がテンプレートを完全に制御できるため、推奨する静的サイトジェネレーターです。

npm create astro@latest my-site
cd my-site
npm run dev

代替候補

ジェネレーター	使用する場面
Astro	デフォルトの選択肢 — DX が最も優れ、アイランドアーキテクチャを採用
Next.js	SSR、API ルート、または React エコシステムが必要な場合
Nuxt	Vue ベースのプロジェクト
SvelteKit	Svelte ベースのプロジェクト
11ty	可能な限りシンプルな静的サイト

1つを選び、使い続けてください。LLM がテンプレート、スタイル、コンテンツを完全に制御できなければなりません。

---

ブラウザーフィードバックループ

エージェントは変更をすべて必ず視覚的に確認しなければなりません。ブラウザーにアクセスできなければ、エージェントは手探りでコーディングすることになります。

セットアップ

Cursor：Browser プラグイン（browser-tools MCP）をインストールし、エージェントがスクリーンショット、コンソールログ、ネットワークリクエストにアクセスできるようにします。

Claude Code：Chrome DevTools の統合機能を使ってスクリーンショットを撮影し、DOM を確認します。

ワークフロー

意味のある変更を加えるたびに、次の手順を実行します。

1. ファイルを保存し、ホットリロードを待ちます
2. ページのスクリーンショットを撮影します — ビューポート全体をキャプチャします
3. 結果を確認します — レイアウト、余白、色、タイポグラフィをチェックします
4. 問題を特定します — 配置ずれ、はみ出し、レスポンシブ表示の不具合、状態の欠落を確認します
5. 修正して再度スクリーンショットを撮影します — セクションが正しく見えるまで繰り返します

Loop:
  Make change → Save → Screenshot → Evaluate → Fix → Screenshot
  Exit when: section meets quality bar

スクリーンショットの手順を省略してはいけません。 この視覚的なフィードバックループこそが、優れたエージェント主導のデザインと、崩れたレイアウトを分けます。

ブラウザーツールのセットアップ方法については、references/browser-setup.md を参照してください。

---

スキルを活用したプロンプト

専門的な作業は専用スキルに委任します。汎用的なプロンプトよりも、はるかに優れた結果が得られます。

パターン

サイトの特定の要素に取り組むときは、関連するスキルを明示的に呼び出します。

"Use the frontend-design skill to redesign the hero section with modern layout patterns"
"Use the copywriting skill to rewrite the homepage headline and subheading"
"Use the frontend-design skill to add micro-interactions to the CTA buttons"
"Use the copywriting skill to improve the feature descriptions — make them benefit-driven"

推奨スキル

スキル	用途
frontend-design	レイアウト、視覚的階層、コンポーネントパターン、レスポンシブデザイン
copywriting	見出し、CTA、機能の説明、ブランドのトーン
seo	メタタグ、構造化データ、パフォーマンス、Core Web Vitals
accessibility	ARIA ラベル、キーボード操作、色のコントラスト

スキルの組み合わせ

スキルを連続して使い、セクション全体を仕上げます。

1. "Use the copywriting skill to write compelling copy for the pricing section"
2. "Use the frontend-design skill to design the pricing cards layout with the copy above"
3. "Now screenshot and let's iterate on the visual design"

---

反復的な改善ワークフロー

このセクションが最も重要です。平凡な出力と優れた出力の違いは、反復回数にあります。

改善ループ

Task Progress:
- [ ] Step 1: Generate initial version
- [ ] Step 2: Screenshot and evaluate
- [ ] Step 3: Identify the weakest element
- [ ] Step 4: Improve that element specifically
- [ ] Step 5: Screenshot and compare
- [ ] Step 6: Repeat steps 3-5 at least 3 more times
- [ ] Step 7: Final polish pass

高い基準を設定する

変更を加えるたびに、次の点を確認します。

• 「今、変更した内容をさらに改善してください」
• 「アニメーションをより滑らかで意図的なものにしてください」
• 「これは良いですが、さらに磨きをかけてください。一流のデザインエージェンシーなら、どこを変えるでしょうか？」
• 「上質な印象になるよう、さりげないマイクロインタラクションを追加してください」
• 「余白のバランスが悪く感じます。引き締めつつ、適度なゆとりを持たせてください」

最初のバージョンで妥協してはいけません。 各セクションを少なくとも3ラウンド改善してください。

セクションごとのアプローチ

一度に1つのセクションに取り組み、次に進む前に完全に仕上げます。

1. ヒーロー — 最も重要です。最も時間をかけましょう。見出し、ビジュアル、CTAをしっかり仕上げます。
2. ソーシャルプルーフ — ロゴ、お客様の声、指標を掲載します。信頼感を高めましょう。
3. 機能 — 分かりやすく、メリットを伝え、ビジュアルやアイコンで補足します。
4. 料金 — 比較しやすく、推奨プランが一目で分かるようにします。
5. フッター — プロフェッショナルで、情報が網羅され、整理されたものにします。

各セクションで、生成 → スクリーンショット → 評価 → 改善 → スクリーンショット → 評価 → 改善 → 次へ、の順に進めます。

---

アニメーションとマイクロインタラクション

アニメーションによって、平坦なページは洗練されたプロダクトになります。必ず追加してください。

必須のアニメーション

要素	アニメーション
ヒーローの見出し	読み込み時にフェードインし、わずかに上へスライド
CTA ボタン	ホバー時に拡大し、色をトランジション
機能カード	スクロールをトリガーに、順番にフェードイン
ナビゲーション	スムーズスクロール、背景をぼかした固定ヘッダー
ページ遷移	ルート間のさりげないフェード
画像	遅延読み込みとフェードイン

実装

スクロールをトリガーにする効果には、CSS アニメーションと IntersectionObserver を使用します。必要な場合を除き、負荷の高い JS アニメーションライブラリは避けてください。

/* Scroll-triggered fade-in */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

Astro 固有のアニメーションパターンについては、references/animations.md を参照してください。

品質へのこだわり

アニメーションを追加した後は、次のような改善を行います。

• 「イージングが直線的に感じられます。より自然な動きになるよう、カスタムの cubic-bezier を使ってください」
• 「機能カードが一斉ではなく、順番にアニメーションするようにずらしてください」
• 「ヒーローの背景に、さりげない視差効果を追加してください」
• 「ホバー状態に個性が足りません。少し回転させるか、影で浮き上がらせてみてください」

---

レスポンシブデザイン

すべてのページは、モバイル、タブレット、デスクトップで必ず動作する必要があります。すべてのブレークポイントでスクリーンショットを撮影してください。

ブレークポイントのチェックリスト

- [ ] Mobile (375px) — single column, touch-friendly targets
- [ ] Tablet (768px) — adapted grid, readable line lengths
- [ ] Desktop (1280px) — full layout, max-width containers
- [ ] Wide (1536px+) — content doesn't stretch awkwardly

各セクションの作成後、最低でもモバイルとデスクトップでスクリーンショットを撮影します。次に進む前に、レイアウトの問題を修正してください。

---

プロジェクト構成（Astro）

my-site/
├── src/
│   ├── layouts/
│   │   └── Layout.astro          # Base HTML shell
│   ├── components/
│   │   ├── Hero.astro
│   │   ├── Features.astro
│   │   ├── Pricing.astro
│   │   └── Footer.astro
│   ├── pages/
│   │   └── index.astro
│   └── styles/
│       └── global.css
├── public/
│   └── fonts/
├── astro.config.mjs
└── package.json

セクションごとにコンポーネントを分けるアーキテクチャを使用します。スムーズに反復作業できるよう、各セクションを独立した .astro ファイルにします。

---

品質チェックリスト

ページを完成と判断する前に、次の項目を確認してください。

Visual Quality:
- [ ] Every section screenshotted and reviewed at mobile + desktop
- [ ] Typography hierarchy is clear (max 2-3 font sizes per section)
- [ ] Color palette is consistent (3-5 colors max)
- [ ] Whitespace is generous and intentional
- [ ] Images are optimized and properly sized

Animations:
- [ ] Hero has entry animation
- [ ] Scroll-triggered animations on content sections
- [ ] Hover states on all interactive elements
- [ ] No janky or stuttering animations
- [ ] Animations respect prefers-reduced-motion

Content:
- [ ] Headlines are benefit-driven, not feature-driven
- [ ] CTAs are clear and compelling
- [ ] No lorem ipsum or placeholder content
- [ ] Copy reviewed with copywriting skill

Technical:
- [ ] Lighthouse score 90+ on all categories
- [ ] Responsive at all breakpoints
- [ ] Semantic HTML throughout
- [ ] Accessible (keyboard nav, ARIA labels, contrast)
- [ ] Fast load time (minimal JS, optimized assets)

---

追加リソース

• ブラウザーのセットアップ — Cursor Browser プラグインと Claude Code の Chrome 連携
• アニメーション — Astro のアニメーションパターン、スクロール効果、マイクロインタラクション
• プロンプトのパターン — 各デザイン段階で使えるプロンプト例