frontend-design-ultimate

フロントエンドデザイン・アルティメット

テキストの要件だけで、個性的で本番環境に対応した静的サイトを作成できます。モックアップも Figma も不要です。作りたいものを説明するだけで、大胆で記憶に残るデザインが完成します。

スタック: React 18 + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion
出力: Vite（静的 HTML）または Next.js（Vercel 対応）

クイックスタート

"Build a SaaS landing page for an AI writing tool. Dark theme, 
editorial typography, subtle grain texture. Pages: hero with 
animated demo, features grid, pricing table, FAQ accordion, footer."

---

デザインの考え方（まずはここから）

コードを書く前に、大胆な美的方向性を決めましょう。

1. 背景を理解する

• 目的: このインターフェースはどんな問題を解決しますか？誰が使いますか？
• 対象ユーザー: 開発者向けツールですか？コンシューマー向けアプリですか？エンタープライズ向けですか？クリエイティブエージェンシー向けですか？
• 制約: パフォーマンス要件、アクセシビリティのニーズ、ブランドガイドラインはありますか？

2. 極端なトーンを選ぶ

次から1つ選び、徹底しましょう。中途半端なデザインではうまくいきません。

トーン	特徴
徹底的にミニマル	要素を絞り、モノクロ、大胆なタイポグラフィ、粗削りなエッジ
マキシマリストな混沌	重層的で高密度、要素を重ね、制御された無秩序
レトロフューチャー	ネオンのアクセント、幾何学的な形、CRT の美学
オーガニック／ナチュラル	柔らかな曲線、アースカラー、手描きの要素
ラグジュアリー／洗練	控えめなアニメーション、高級感のあるタイポグラフィ、抑制された配色
エディトリアル／マガジン	明確なグリッド、ドラマチックな見出し、余白をデザインの一部として活用
ブルータリスト／生々しさ	構造を露わにし、強いコントラスト、アンチデザイン
アールデコ／幾何学	ゴールドのアクセント、シンメトリー、装飾的なパターン
ソフト／パステル	丸みのある角、穏やかなグラデーション、親しみやすさ
インダストリアル／実用本位	機能的、等幅フォント、データ密度が高い

3. 忘れられない要素を決める

見る人の記憶に残るものを1つだけ挙げるとしたら何ですか？ヒーローアニメーションですか？タイポグラフィの表現ですか？色の組み合わせですか？意外性のあるレイアウトですか？

---

美的表現のガイドライン

タイポグラフィ — ありきたりなものは絶対に使わない

禁止: Inter、Roboto、Arial、システムフォント、Open Sans

推奨: デザインを引き立てる、個性と表情のある選択肢を使いましょう。

用途	アプローチ
ディスプレイ／見出し	強い個性 — Clash、Cabinet Grotesk、Satoshi、Space Grotesk（控えめに）、Playfair Display
本文	読みやすさを追求 — Instrument Sans、General Sans、Plus Jakarta Sans
等幅／コード	DM Mono、JetBrains Mono、IBM Plex Mono
フォントの組み合わせ方	ウェイトに差をつける（細いディスプレイ＋太い本文）、スタイルに差をつける（セリフ＋幾何学的なサンセリフ）

サイズの段階: 控えめな1.5倍刻みではなく、3倍以上の差をつけましょう。

色とテーマ

禁止: 白地に紫のグラデーション、5色を均等に配したパレット

推奨:

• 支配色＋鋭いアクセント: 70-20-10のルール（プライマリー、セカンダリー、アクセント）
• CSS変数: --primary、--accent、--surface、--text
• ダークかライトのどちらかに決める: 中間的なグレーで曖昧にしない
• コントラストの高い CTA: ボタンを際立たせましょう

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --text-primary: #fafafa;
  --text-secondary: #a1a1a1;
  --accent: #ff6b35;
  --accent-hover: #ff8555;
}

モーションとアニメーション

優先事項: ページ読み込み時の一貫した演出を、散発的なマイクロインタラクションより優先しましょう。

印象に残る演出:

• 時差をつけたヒーロー要素の表示（animation-delay）
• スクロールをきっかけにしたセクションの表示
• 意外性のあるホバー状態（拡大、色の変化、影の奥行き）
• 滑らかなページ遷移

実装方法:

• シンプルなアニメーションには CSS のみを使用
• React では Framer Motion を使用（初期化スクリプトでインストール済み）
• 持続時間は200〜400msに保つ（キビキビとした動きにし、もたつかせない）

空間構成

禁止: 中央揃え、左右対称、ありきたりなレイアウト

推奨:

• 意図のある非対称
• 要素の重ね合わせ
• 斜めの流れ／グリッドを崩す構成
• 広々としたネガティブスペース、または制御された高密度（どちらかを選ぶ）
• グリッドから外したヒーローセクション

背景と雰囲気

禁止: 白やグレーの単色背景

推奨:

• グラデーションメッシュ（派手すぎないもの）
• ノイズ／粒状テクスチャ（SVG フィルターまたは CSS）
• 幾何学模様（ドット、線、図形）
• 透明度を重ねる
• 奥行きを生むドラマチックな影
• グラスモーフィズムのためのぼかし効果

/* Subtle grain overlay */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url("data:image/svg+xml,...") repeat;
  opacity: 0.03;
  pointer-events: none;
}

---

モバイルファーストのパターン

詳しい CSS については、references/mobile-patterns.md を参照してください。

重要なルール

パターン	デスクトップ	モバイルでの修正
ビジュアルを非表示にしたヒーロー	2 列グリッド	display: flex に切り替えます（グリッドではありません）
選択項目の多いリスト	横スクロール	カテゴリ見出し付きのアコーディオン
複数列のフォーム	横並び	縦に積み重ねます
ステータス／アラートカード	インライン	align-items: center + text-align: center
機能グリッド	3～4 列	1 列

ブレークポイント

/* Tablet - stack sidebars */
@media (max-width: 1200px) { }

/* Mobile - full single column */
@media (max-width: 768px) { }

/* Small mobile - compact spacing */
@media (max-width: 480px) { }

フォントのスケーリング

@media (max-width: 768px) {
  .hero-title { font-size: 32px; }      /* from ~48px */
  .section-title { font-size: 24px; }   /* from ~32px */
  .section-subtitle { font-size: 14px; } /* from ~16px */
}

---

ビルドのワークフロー

オプション A：Vite（静的サイトのみ）

# 1. Initialize
bash scripts/init-vite.sh my-site
cd my-site

# 2. Develop
npm run dev

# 3. Build static files
npm run build
# Output: dist/

# 4. Bundle to single HTML (optional)
bash scripts/bundle-artifact.sh
# Output: bundle.html

オプション B：Next.js（Vercel にデプロイ）

# 1. Initialize
bash scripts/init-nextjs.sh my-site
cd my-site

# 2. Develop
npm run dev

# 3. Deploy to Vercel
vercel

---

プロジェクト構成

Vite 静的サイト

my-site/
├── src/
│   ├── components/     # React components
│   ├── lib/           # Utilities, cn()
│   ├── styles/        # Global CSS
│   ├── config/
│   │   └── site.ts    # Editable content config
│   ├── App.tsx
│   └── main.tsx
├── index.html
├── tailwind.config.ts
└── package.json

Next.js

my-site/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── privacy/page.tsx
├── components/
├── lib/
├── config/
│   └── site.ts
└── tailwind.config.ts

---

サイト設定のパターン

編集可能なコンテンツはすべて 1 つのファイルにまとめます。

// config/site.ts
export const siteConfig = {
  name: "Acme AI",
  tagline: "Write better, faster",
  description: "AI-powered writing assistant",
  
  hero: {
    badge: "Now in beta",
    title: "Your words,\nsupercharged",
    subtitle: "Write 10x faster with AI that understands your style",
    cta: { text: "Get Started", href: "/signup" },
    secondaryCta: { text: "Watch Demo", href: "#demo" },
  },
  
  features: [
    { icon: "Zap", title: "Lightning Fast", description: "..." },
    // ...
  ],
  
  pricing: [
    { name: "Free", price: 0, features: [...] },
    { name: "Pro", price: 19, features: [...], popular: true },
  ],
  
  faq: [
    { q: "How does it work?", a: "..." },
  ],
  
  footer: {
    links: [...],
    social: [...],
  }
}

---

実装前のチェックリスト

デザインを確定する前に、以下を実行してください。

デザインの品質

• タイポグラフィに独自性がある（Inter／Roboto／Arial は使用しない）
• カラーパレットに明確なベースカラーとアクセントカラーがある（均等に配分しない）
• 背景に雰囲気がある（単色の白／グレーではない）
• 記憶に残る、忘れがたい要素が少なくとも 1 つある
• アニメーションに統一感がある（あちこちに散在していない）

モバイル対応

• モバイルではヒーローが中央に配置される（グリッドに空きスペースがない）
• すべてのグリッドが 1 列に折りたたまれる
• フォームが縦に積み重なる
• 大きなリストは横スクロールではなくアコーディオンを使用する
• フォントサイズが適切に縮小される

フォームの一貫性

• 入力欄、セレクト、テキストエリアのスタイルが一貫している
• ラジオボタン／チェックボックスが見やすい（透明な境界線のスタイルを確認する）
• ドロップダウンの選択肢の背景が読みやすい
• ラベルに CSS 変数を使用している（色をハードコードしていない）

アクセシビリティ

• 色のコントラストが WCAG AA を満たしている（テキストは 4.5:1、UI は 3:1）
• フォーカス状態が見える
• セマンティック HTML（nav、main、section、article）を使用している
• 画像に代替テキストがある
• キーボード操作が機能する

---

shadcn/ui コンポーネント

一般的な 10 種類のコンポーネントがあらかじめインストールされています（button、badge、card、accordion、dialog、navigation-menu、tabs、sheet、separator、avatar、alert）。npx shadcn@latest add [name] で追加するか、npx shadcn@latest add --all ですべてインストールできます。

コンポーネントの詳細については、references/shadcn-components.md を参照してください。

ランディングページでよく使われるもの：

• Button、Badge — CTA とラベル
• Card — 機能カード、料金プラン
• Accordion — FAQ セクション
• Dialog — モーダル、動画プレーヤー
• NavigationMenu — ヘッダーナビゲーション
• Tabs — 機能紹介
• Carousel — お客様の声

---

参考資料

• references/design-philosophy.md — AI らしいありきたりなデザインを避けるための詳しいガイド
• references/mobile-patterns.md — レスポンシブ CSS の詳細
• references/shadcn-components.md — コンポーネントのクイックリファレンス
• templates/site-config.ts — siteConfig の完全な例

---

例

プロンプト → 出力

入力：

「写真家のポートフォリオサイト。ミニマルで、エディトリアルな雰囲気。 ライトボックス付きのグリッドギャラリー、概要セクション、お問い合わせフォーム。」

デザインの決定：

• トーン：エディトリアル／雑誌風
• タイポグラフィ：Cormorant Garamond（ディスプレイ）+ Inter……待って、これは禁止。代わりに Plus Jakarta Sans（本文）
• 色：ほぼ黒の背景（#0c0c0c）、温かみのある白のテキスト（#f5f5f0）、銅色のアクセント（#b87333）
• 忘れがたい要素：スクロールするとテキストが現れる、画面いっぱいのヒーロー画像
• 動き：スクロールに合わせてギャラリー画像がずらしてフェードインする

出力：レスポンシブなギャラリー、ライトボックスコンポーネント、バリデーション付きのお問い合わせフォームを備えた、完全な Next.js プロジェクト。

---

Anthropic の frontend-design、web-artifacts-builder、およびコミュニティの frontend-design-v2 スキルに基づいています。