ux-ui-premium-direction-style-selector

スタイルセレクター

比較用に、自己完結型のビジュアルディレクションデモページを8種類生成し、選択したディレクションをプロジェクトに適用します。

ワークフロー

1. プロジェクトのコンテキストを収集する

デモを生成する前に、次の情報を収集します。

• プロジェクトの種類（ランディングページ、ウェブアプリ、SaaS、ダッシュボード、eコマース、ポートフォリオ）
• ビジネスの種類（コンサルティング、SaaS、エージェンシー、eコマース、ポートフォリオなど）
• ビジネス名とタグライン
• 主な実績（表示する数値 — ユーザー数、クライアント数、年数など）
• サービス／製品（短い説明付きで3〜4項目）
• CTA（主な行動喚起 — 通話を予約、登録、購入など）
• 言語（スペイン語、英語など）
• トーン（コーポレート、親しみやすい、高級感のある、技術的、反骨的、遊び心のあるなど）

プロジェクトにすでにコンテンツ（既存のページ、仕様書、CLAUDE.md）がある場合は、質問せずにこのコンテキストを自動的に抽出します。

2. プロジェクトのセットアップを確認する

プロジェクトが Next.js App Router と Tailwind CSS を使用していることを確認します。次の項目をチェックします。

• src/app/ または app/ ディレクトリが存在する
• tailwind.config.ts または tailwind.config.js が存在する
• globals.css に @tailwind base/components/utilities または @import "tailwindcss" ディレクティブがある

重要：globals.css のカスタムスタイルが @layer base { } 内に記述されていることを確認してください。レイヤーに属さない CSS は、CSS カスケードレイヤーにより Tailwind のユーティリティクラスを上書きします。* { margin: 0; padding: 0; } や body { ... } が @layer の外にある場合は、@layer base { } 内に移動してください。

3. デモのインフラストラクチャを作成する

次のファイルを作成します。

デモレイアウト（src/app/demo/layout.tsx）：

'use client'
export default function DemoLayout({ children }: { children: React.ReactNode }) {
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 99999, overflow: 'auto', background: '#ffffff', fontFamily: 'system-ui, sans-serif', color: '#000' }}>
      <style>{\`body { overflow: hidden !important; }\`}</style>
      {children}
    </div>
  )
}

デモのインデックスページ（src/app/demo/page.tsx）：8種類のディレクションをクリック可能なカードとして一覧表示する 'use client' ページです。各カードには、ディレクション名、サブタイトル／参考情報、説明、4色のカラースウォッチを表示します。インデックスページの背景色はダーク（#0a0a0a）にします。

4. プロジェクトの種類に応じてディレクションを選ぶ

8種類すべてのディレクションが、すべてのプロジェクトの種類に適しているわけではありません。最も合う5種類を事前に選びます。

プロジェクトの種類	推奨する5種類	除外する種類
ランディングページ（一般）	エディトリアル、ミニマル、ラグジュアリー、コーポレート、Kinfolk	—
SaaS／ウェブアプリ	ミニマル、コーポレート、プレイフル、ブルータリスト、レトロ	ラグジュアリー、Kinfolk、エディトリアル
eコマース	ミニマル、ラグジュアリー、コーポレート、プレイフル、Kinfolk	ブルータリスト、レトロ、エディトリアル
ダッシュボード	ミニマル、コーポレート、プレイフル、レトロ、ブルータリスト	ラグジュアリー、Kinfolk、エディトリアル
ポートフォリオ／クリエイティブ	エディトリアル、ラグジュアリー、Kinfolk、ブルータリスト、プレイフル	ミニマル、コーポレート、レトロ
開発者向けツール	ミニマル、ブルータリスト、レトロ、プレイフル、コーポレート	ラグジュアリー、Kinfolk、エディトリアル

ユーザーが「8種類すべてを見せて」と言った場合は、条件にかかわらず8種類すべてを生成します。それ以外の場合は、プロジェクトの種類に応じた推奨の5種類を使用します。5種類を表示した後は、常に8種類すべてを見たいかどうかを尋ねます。

5. デモページを生成する

各ビジュアルディレクションのパレット、タイポグラフィ、レイアウト、アニメーション、アクセシビリティ、モバイル仕様を含む完全な仕様については、references/directions.md を参照してください。

各デモページは、次の要件を満たす必要があります。

• 自己完結型（共有コンポーネントはインポートしません。使用できるのは next/link と next/font/google のみです）
• モバイルファーストのレスポンシブ対応（まず375px向けに設計し、Tailwind のブレークポイントで拡張します）
• 完全な構成（スキップリンク + ナビゲーション + ヒーロー + ストーリーテリング + 実績 + サービス + CTA + フッター）
• ディレクションごとに固有のフォント（CSS 変数と next/font/google を使用）
• カスタムカラー（プロジェクトの Tailwind テーマに依存せず、インラインの style 属性を使用）
• 各ディレクションの仕様に沿ったアニメーション（スクロール時の表示、ホバー効果、マイクロインタラクション）
• アクセシブル（WCAG AA のコントラスト、focus-visible のアウトライン、44px 以上のタッチターゲット、スキップリンク）
• モーションセーフ（prefers-reduced-motion を尊重し、すべてのアニメーション／トランジションを無効にします）
• フッターに /demo への戻るリンク

イベントハンドラー（onMouseEnter、useState、useEffect）を使用するページでは、先頭に 'use client' を記述する必要があります。'use client' を記述したページでは、metadata をエクスポートしてはいけません。

速度を上げるため、Agent ツールを使ってすべてのページを並列で生成します。

6. プロジェクトに合わせてコピーを調整する

各方向性について、プロジェクトの背景に合うようコピーを書き換えます。

• 見出しを、事業内容とトーンの方向性に合わせる
• ストーリーを、創業者や会社の歩みに合わせる
• 実際のプロジェクトの数値を使って統計情報を記載する
• 実際に提供しているサービスを列挙する
• 実際の連絡手段につながる CTA を設置する

コピーの品質ルール（AI らしい文章を避けるため）：

• 多少ぎこちなくても、会話調の文章にする
• ありきたりなバズワードではなく、具体的な詳細を盛り込む
• 短い段落にし、リズムに変化をつける
• 企業的な言い回しより、意見や個性を大切にする
• 読者への問いかけを入れる
• 適切な場合は一人称を使う

方向性ごとのコピーのトーン（一覧表の全容は references/directions.md を参照してください）：

• Editorial：権威ある、落ち着いた
• Minimal：率直で、簡潔
• Luxury：親密で、洗練された
• Corporate：自信に満ちた、構成の整った
• Kinfolk：思慮深く、静かな
• Brutalist：ぶっきらぼうで、型破りな
• Playful：活気があり、現代的な
• Retro：ドライで、技術的、開発者らしいユーモアのある

7. ビルドして検証する

npx next build を実行し、すべてのデモルートがコンパイルされることを確認します。エラーがあれば修正します。

• イベントハンドラーのあるページで 'use client' が不足している
• クライアントコンポーネント内に metadata エクスポートがある（削除する）
• 未使用の変数がある（削除する）

開発サーバーを起動して、以下を確認します。

1. 各デモのスクリーンショットをデスクトップ（1280px）で撮影する
2. ビューポートの幅を変更し、モバイル（375px）でスクリーンショットを撮影する
3. 以下を確認する：
   • モバイルで横方向にはみ出さない
   • すべてのテキストが読みやすい（モバイルの本文は 16px 以上）
   • すべてのボタンがタップしやすい（高さ 44px 以上）
   • どちらの画面サイズでもナビゲーションが機能する
   • アニメーションが再生され、動きを減らす設定では停止する
   • Tab キーで移動したとき、フォーカス枠が見える
   • スキップリンクが機能する

8. ユーザーに提示する

デモのインデックス URL（/demo）と、各方向性のビジュアルアイデンティティをまとめた表をユーザーに提示します。以下を含めてください。

方向性	雰囲気	主な特徴	最適な用途
Editorial	知的な権威	セリフ体のタイポグラフィ、ゴールドのアクセント	コンサルティング、メディア、ソートリーダーシップ
Minimal	機能的な明快さ	最大限の抑制、赤い CTA のみ	SaaS、ツール、開発者向け製品
Luxury	温かみのある親密さ	ダークな背景、銅色のアクセント、ゆったりした動き	プレミアムサービス、ホスピタリティ、美容
Corporate	自信に満ちた権威	ネイビーと白のリズム、紫のアクセント	エンタープライズ、B2B、コンサルティング
Kinfolk	静かな洗練	幅を抑えたカラム、オリーブ色のアクセント、静けさ	クリエイティブ、ウェルネス、エディトリアル
Brutalist	飾らない型破りさ	強い影、モノスペースの大文字、太い境界線	スタートアップ、開発者向けツール、クリエイティブエージェンシー
Playful	現代的な活気	グラデーションテキスト、ガラス風カード、動きのあるグラデーション	SaaS、現代的なスタートアップ、テクノロジー
Retro	ハッカーらしい信頼感	ターミナルの美学、タイプライター、黒地に緑	開発者向けツール、CLI 製品、テクノロジー

どの方向性がよいか、または複数の方向性から要素を組み合わせたいかを尋ねます。

9. 方向性を適用する（選択後）

ユーザーが方向性を選んだら、プロジェクトに適用します。

9a. Tailwind テーマトークンを生成する

選択した方向性のデザイントークンを使って tailwind.config.ts を作成または更新します。

// Example for "Luxury Dark Warm" direction
const config = {
  theme: {
    extend: {
      colors: {
        background: '#171614',
        foreground: '#F0EBE1',
        accent: '#C4956A',
        muted: '#8A8174',
        card: '#1E1D1A',
        border: 'rgba(196,149,106,0.3)',
      },
      fontFamily: {
        display: ['var(--font-cormorant)', 'serif'],
        body: ['var(--font-outfit)', 'sans-serif'],
      },
      animation: {
        'fade-in': 'fadeIn 800ms ease-out',
        'slide-up': 'slideUp 800ms ease-out',
      },
      keyframes: {
        fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } },
        slideUp: { '0%': { transform: 'translateY(20px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } },
      },
    },
  },
}

9b. CSS 変数を生成する

globals.css に追加します。

@layer base {
  :root {
    --background: <bg-color>;
    --foreground: <text-color>;
    --accent: <accent-color>;
    --muted: <secondary-color>;
    --card: <card-bg>;
    --border: <border-color>;
    --focus-ring: <focus-color>;

    /* Animation tokens */
    --reveal-y: <direction-value>;
    --reveal-duration: <direction-value>;
    --reveal-stagger: <direction-value>;
    --reveal-easing: <direction-value>;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

9c. ベースコンポーネントを生成する

選択した方向性のパターンを組み込んだ、再利用可能なコンポーネントを作成します。

src/components/ui/Button.tsx — 方向性のスタイルに合わせたプライマリとセカンダリのバリエーション：

• Editorial：ゴールドの枠線、セリフ体のテキスト
• Minimal：赤い背景（プライマリ）、矢印付きのテキストリンク（セカンダリ）
• Luxury：銅色の背景、細字のテキスト
• Corporate：紫の塗りつぶしとアウトラインのバリエーション
• Kinfolk：オリーブ色のアウトライン、ミニマル
• Brutalist：黒い枠線と硬い影、大文字の等幅フォント
• Playful：グラデーションの枠線、ガラス効果
• Retro：ターミナルコマンド風のスタイル、等幅フォントのテキスト

src/components/ui/Card.tsx — 方向性に合わせたカードコンポーネント：

• Editorial：カードなし、ゴールドの左側の枠線のみ
• Minimal：下枠線の区切り、カード背景なし
• Luxury：浮き上がった暗い背景、上部に銅色の枠線
• Corporate：薄いグレーの背景、スレート色の枠線
• Kinfolk：カードなし、テキストのみ
• Brutalist：3px の黒い枠線、硬い影
• Playful：グラスモーフィズム（白 5%、backdrop-blur）
• Retro：緑の 30% の枠線、ターミナル背景

src/components/ui/Section.tsx — 方向性に適した間隔、区切り、スクロール表示アニメーションを備えたセクションラッパー。

src/components/ui/Container.tsx — 方向性に合わせたコンテンツ幅の最大幅コンテナ。

src/components/ui/Nav.tsx — 方向性に適したモバイルパターンを備えたナビゲーション。

src/components/ScrollReveal.tsx — IntersectionObserver を使った再利用可能なスクロール表示フック／コンポーネント。

9d. フォントを設定する

ルートレイアウト（src/app/layout.tsx または src/app/demo/layout.tsx）に追加します：

import { FontDisplay, FontBody } from 'next/font/google'

const fontDisplay = FontDisplay({
  subsets: ['latin'],
  variable: '--font-display',
  display: 'swap',
})

const fontBody = FontBody({
  subsets: ['latin'],
  variable: '--font-body',
  display: 'swap',
})

// Add to <html> or <body> className:
// `${fontDisplay.variable} ${fontBody.variable}`

9e. クリーンアップする

• /demo/ ディレクトリとすべてのデモページを削除する
• デモレイアウトを削除する
• テーマを適用した後に npx next build が成功することを確認する

10. 適用した方向性を検証する

選択した方向性を適用した後：

1. 開発サーバーを起動する
2. メインページに移動する
3. デスクトップとモバイルでスクリーンショットを撮る
4. 以下を確認する：
   • 色が選択した方向性に合っている
   • フォントが正しく読み込まれる
   • アニメーションが機能する（かつ視覚効果を抑える設定に従う）
   • モバイルレイアウトが適切である
   • すべてのコンポーネントが正しく描画される
5. 最終確認のため、スクリーンショットをユーザーと共有する

8 つの方向性

ID	名前	リファレンス	背景	アクセント	フォント
editorial	エディトリアル・セリフ	The Economist	クリーム #FAFAF5	ゴールド #B8860B	Playfair Display + Source Serif 4
minimal	スイス・ミニマル	Dieter Rams	ホワイト #FFFFFF	レッド #D42B2B	Space Grotesk + Inter
luxury	高級感のある温かみのあるダーク	Aesop	チャコール #171614	カッパー #C4956A	Cormorant Garamond + Outfit
corporate	大胆なコーポレート	Accenture	ホワイト／ネイビー #0F1923	パープル #5B21B6	Plus Jakarta Sans
kinfolk	控えめなエレガンス	Kinfolk	ボーン #F5F2ED	オリーブ #6B705C	Libre Baskerville + Karla
brutalist	ネオ・ブルータリスト	Gumroad	オフホワイト #FFFDF7	イエロー #FFE600 + ピンク #FF3366	Space Mono + DM Sans
playful	遊び心のあるグラデーション	Linear/Stripe	ほぼ黒 #0C0C0C	ブルー→バイオレット→ピンクのグラデーション	Satoshi/Inter
retro	レトロなターミナル	Stripe CLI	ターミナルブラック #0D1117	グリーン #00FF41 + アンバー #FFB000	JetBrains Mono

詳細な仕様（全パレット、レイアウト、アニメーション、アクセシビリティ、モバイル）については、references/directions.md を読んでください。

方向性の選択ガイド

ユーザーの希望	推奨
「プロフェッショナルだけど退屈ではない」	Editorial または Corporate
「すっきりしていてモダン」	Minimal または Playful
「プレミアム／高級感」	Luxury または Kinfolk
「楽しい／スタートアップらしい雰囲気」	Brutalist または Playful
「開発者向け」	Retro または Minimal
「一味違う／大胆なもの」	Brutalist または Retro
「温かみがあり、親しみやすい」	Luxury または Kinfolk
「データ重視／エンタープライズ向け」	Corporate または Minimal
「クリエイティブ／芸術的」	Kinfolk または Brutalist
「テック／SaaS」	Playful または Retro

プロジェクトタイプ別の調整

共通のセクション構成（ナビゲーション、ヒーロー、ストーリーテリング、統計、サービス、CTA、フッター）はランディングページに適しています。他のプロジェクトタイプでは、デモの構成を調整してください：

Web アプリ／SaaS

ストーリーテリングと統計を次の内容に置き換えます。

• 機能紹介 — モック UI のスクリーンショットまたはイラストを使った、主要な 3 つの機能
• 仕組み — 3 ステップのフロー（登録 → 設定 → 起動）
• 料金プラン — 3 つのプラン（Free、Pro、Enterprise）またはシンプルな料金カード 維持する項目：ナビゲーション、ヒーロー、サービス／機能、CTA、フッター

ダッシュボード

ヒーローとストーリーテリングを次の内容に置き換えます。

• ダッシュボードのプレビュー — モックデータの可視化（チャートのプレースホルダー、KPI カード）
• サイドバー — ナビゲーションパターンのプレビュー
• データテーブル — デザインのスタイルに合わせたサンプルテーブル 維持する項目：ナビゲーション（サイドバー版）、機能カード、CTA、フッター

E コマース

ストーリーテリングを次の内容に置き換えます。

• 商品グリッド — 画像のプレースホルダー、価格、CTA を含む 4～6 個の商品カード
• カテゴリー — カテゴリーナビゲーション
• 信頼性を示す情報 — レビュー、配送情報、保証 維持する項目：ナビゲーション（カートアイコン付き）、ヒーロー（商品中心）、CTA、フッター

ポートフォリオ

サービスを次の内容に置き換えます。

• プロジェクトグリッド — 画像、タイトル、カテゴリーを含む 4～6 個のプロジェクトカード
• 自己紹介セクション — 写真のプレースホルダー付きのプロフィール
• お客様の声 — クライアントからの引用 2～3 件 維持する項目：ナビゲーション、ヒーロー（名前中心）、ストーリーテリング、CTA（依頼する）、フッター