Frontend Design

このスキルは、エージェントが視覚的に洗練され、レスポンシブで、アクセシブル、保守性の高いフロントエンドインターフェースを設計・実装することを可能にします。エージェントはデザインシステム（コンポーネントライブラリ、スペーシングスケール、カラートークン、タイポグラフィスケール）と連携して、一貫性のあるUIコードを生成します。本番環境対応のHTML、CSS（Tailwind CSSを含む）、フレームワークコンポーネント（React、Vue、Svelte）をWCAG準拠のアクセシビリティとダークモード対応を組み込んで出力します。

ワークフロー

1. 要件と制約を分析する: ターゲットプラットフォーム（デスクトップ、タブレット、モバイル）、使用フレームワーク（React、Vue、プレーンHTML）、スタイリングアプローチ（Tailwind、CSS Modules、styled-components）、既存のデザイントークンまたはブランドガイドラインを特定します。必要な主要なページまたはコンポーネントと優先順位を決定します。

2. デザインシステムの基礎を確立する: コンポーネントコードを書く前にコアトークンを定義します。これにはスペーシングスケール（4pxベース：4、8、12、16、24、32、48、64）、タイプスケール（xsから4xlまでの対応する行高）、ライトとダークの両バリアントを持つカラーパレット（プライマリ、セカンダリ、成功、警告、エラー、ニュートラル）、ボーダーラディウスとシャドウトークンが含まれます。これらのトークンにより、すべてのコンポーネントが視覚的に一貫性を持ちます。

3. バリアント付きのコンポーネントを構築する: 明確に定義されたバリアント（サイズ、色、状態）を持つ各コンポーネントを実装します。マークアップを複製するのではなく、propsまたはCSSクラスを使用してバリアントを制御します。すべてのインタラクティブ状態を含めます：デフォルト、ホバー、フォーカス表示、アクティブ、無効。すべてのインタラクティブ要素がキーボードナビゲーション用の可視フォーカスリングを備えていることを確認します。

4. レスポンシブレイアウトを実装する: 2次元ページレイアウトにはCSS Gridを、1次元コンポーネント配置にはFlexboxを使用します。ブレークポイント（sm: 640px、md: 768px、lg: 1024px、xl: 1280px）を定義し、モバイルファーストで設計し、より大きいブレークポイントで複雑性を層化します。水平スクロールが発生しないこと、タッチデバイスでのタップターゲットが44x44pxの最小値を満たしていることを確認します。

5. 最初からアクセシビリティを統合する: ARIA属性を追加する前に、セマンティックHTML要素（nav、main、article、section、aside）を適用します。色のコントラストがWCAG 2.1 AA（標準テキストは4.5:1、大きいテキストは3:1）を満たしていることを確認します。セマンティックHTMLでは不十分な場合にのみaria-label、aria-describedby、role属性を追加します。TabキーとShift+Tabキーでキーボードナビゲーション順序をテストします。

6. ダークモード対応を追加する: CSSカスタムプロパティ戦略またはTailwindのdark:バリアントを使用してダークモードを実装します。背景、テキスト、ボーダートークンを交換しながら、十分なコントラスト比を保持します。純黒（#000）の背景は避け、目の疲れを軽減するためダークグレー（#0f172aまたは#1e293b）を使用します。画像、シャドウ、エレベーションレベルが適切に適応することを確認します。

使用方法

エージェントに、必要なインターフェースの説明を、フレームワーク、スタイリングアプローチ、既存のデザイントークンを含めて提供します。エージェントはレスポンシブ動作、アクセシビリティ属性、ダークモード対応を組み込んだコンポーネントコードを生成します。

例

例1：Tailwind CSSバリアント付きのReactカードコンポーネント

ユーザーリクエスト: 「Tailwind CSSで再利用可能なCardコンポーネントをReactで作成してください。デフォルト、エレベーション、アウトラインバリアント、およびダークモード対応が必要です。」

エージェント応答:

function Card({ variant = 'default', children, className = '' }) {
  const base = 'rounded-lg p-6 transition-colors duration-200';

  const variants = {
    default:
      'bg-white text-gray-900 dark:bg-slate-800 dark:text-gray-100',
    elevated:
      'bg-white text-gray-900 shadow-lg hover:shadow-xl dark:bg-slate-800 dark:text-gray-100 dark:shadow-slate-900/30',
    outlined:
      'bg-transparent text-gray-900 border border-gray-200 dark:text-gray-100 dark:border-slate-700',
  };

  return (
    <div className={`${base} ${variants[variant]} ${className}`}>
      {children}
    </div>
  );
}

function CardHeader({ title, subtitle }) {
  return (
    <div className="mb-4">
      <h3 className="text-lg font-semibold leading-tight">{title}</h3>
      {subtitle && (
        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
          {subtitle}
        </p>
      )}
    </div>
  );
}

function CardFooter({ children }) {
  return (
    <div className="mt-6 flex items-center gap-3 pt-4 border-t border-gray-100 dark:border-slate-700">
      {children}
    </div>
  );
}

コンポーネントの使用法:

<Card variant="elevated">
  <CardHeader title="Monthly Revenue" subtitle="Jan 2026" />
  <p className="text-3xl font-bold">$48,250</p>
  <CardFooter>
    <span className="text-sm text-green-600 dark:text-green-400">+12.5% from last month</span>
  </CardFooter>
</Card>

例2：CSS Gridを使用したレスポンシブダッシュボードレイアウト

ユーザーリクエスト: 「サイドバー、トップナビ、メインコンテンツエリアを備えたレスポンシブダッシュボードレイアウトを構築してください。サイドバーはモバイルで折りたたまれるべきです。」

エージェント応答:

<div class="dashboard">
  <nav class="dashboard__topbar" role="navigation" aria-label="Primary">
    <button class="sidebar-toggle" aria-label="Toggle sidebar" aria-expanded="false">☰</button>
    <h1 class="topbar-title">Dashboard</h1>
    <div class="topbar-actions"><!-- user avatar, notifications --></div>
  </nav>
  <aside class="dashboard__sidebar" role="navigation" aria-label="Sidebar">
    <ul role="list">
      <li><a href="/overview" aria-current="page">Overview</a></li>
      <li><a href="/analytics">Analytics</a></li>
      <li><a href="/settings">Settings</a></li>
    </ul>
  </aside>
  <main class="dashboard__content" id="main-content" role="main">
    <!-- page content -->
  </main>
</div>

.dashboard {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 56px 1fr;
  min-height: 100vh;
}
.dashboard__topbar { grid-column: 1 / -1; }
.dashboard__sidebar { display: none; }

@media (min-width: 768px) {
  .dashboard {
    grid-template-columns: 240px 1fr;
    grid-template-rows: 56px 1fr;
  }
  .dashboard__sidebar { display: flex; flex-direction: column; }
  .sidebar-toggle { display: none; }
}

768pxより小さい画面ではサイドバーが非表示になり、ハンバーガートグルボタンがトップバーに表示されます。タブレットおよびデスクトップでは、サイドバーは240pxの幅で持続的に表示され、メインコンテンツが残りのスペースを埋めます。

ベストプラクティス

• スタイリングの前にセマンティックHTMLで始める: <button>は常にスタイル付きの<div onClick>よりも優れています。セマンティック要素はキーボード処理、スクリーンリーダーアナウンスメント、フォーム送信動作を無料で提供します。
• ハードコードされた値ではなくデザイントークンを使用する: すべての色、スペーシング値、フォントサイズ、シャドウはトークンを参照する必要があります。これによりテーマの変更とダークモードは、コンポーネントファイルを探し回るのではなく、トークンセットを交換することになります。
• モバイルファーストで設計してから拡張する: 最小のビューポート用にベーススタイルを記述します。min-widthメディアクエリで大きいブレークポイントで複雑性を追加します。これにより、デスクトップの前提がモバイルレイアウトを破壊するのを防ぎます。
• 出荷前にキーボードでテストする: TabキーのみでエスケープTab、Enter、Space、Escape、矢印キーを使用してすべてのインタラクティブフローをナビゲートします。マウスなしでタスクを完了できない場合、コンポーネントにアクセシビリティギャップがあります。
• コンポーネントAPIを最小限に保つ: 15個のpropsを持つコンポーネントは正しく使用するのが難しいです。構成（children、slots）を設定（flags、mode strings）よりも優先します。大きなコンポーネントを小さな構成可能なピースに分割します。
• 実機でパフォーマンスを測定する: スロットルされた接続上でミッドレンジのAndroidフォンでテストします。大きなDOMツリー、最適化されていない画像、過度なJavaScriptバンドルは、制限されたハードウェア上で目に見えるジャンクを引き起こします。

エッジケース

• ユーザーがデザイントークンまたはブランドガイドラインを提供しない: ニュートラルシステムをデフォルトにします：InterまたはSystem-uiフォントスタック、スレートグレーニュートラルパレット、青いプライマリアクセント。これらはプロフェッショナルで無難であり、後で簡単にカスタマイズできます。
• コンテンツの長さがインスタンス間で大きく異なる: 固定heightではなくmin-heightを使用し、カード説明にtext-overflow: ellipsisと-webkit-line-clampを使用し、レイアウト安定性を確認するため単語と段落全体でテストします。
• ダークモードの画像が色褪せたり明るすぎたりして見える: ダークモードの写真画像に微妙なbrightness(0.9)フィルターを適用します。装飾的なSVGの場合、currentColorまたはCSSカスタムプロパティを使用して塗りつぶし色を交換します。
• 右から左（RTL）言語対応が必要: 論理的なCSSプロパティを使用します（margin-leftの代わりにmargin-inline-start、padding-rightの代わりにpadding-inline-end）。ルート要素にdir="rtl"を設定し、レイアウトが正しくミラーリングされることを確認します。
• ターゲットフレームワークが不明であるか、ユーザーがプレーンHTMLを望んでいる: セマンティックHTMLとバニラCSSカスタムプロパティをデフォルトにします。出力は、リファクタリングなしで任意のフレームワークに採用できます。