frontend-design

フロントエンドデザイン

このスキルを使うと、エージェントは洗練された外観で、レスポンシブかつアクセシブルで、保守しやすいフロントエンドインターフェースをデザインし、実装できます。エージェントは、デザインシステム（コンポーネントライブラリ、スペーシングスケール、カラーのトークン、タイポグラフィスケール）を活用し、一貫性のある UI コードを作成します。WCAG 準拠のアクセシビリティとダークモード対応を組み込んだ、本番環境ですぐに使える HTML、CSS（Tailwind CSS を含む）、およびフレームワークのコンポーネント（React、Vue、Svelte）を出力します。

ワークフロー

1. 要件と制約を分析する：対象プラットフォーム（デスクトップ、タブレット、モバイル）、使用するフレームワーク（React、Vue、プレーンな HTML）、スタイリング方法（Tailwind、CSS Modules、styled-components）、既存のデザイントークンやブランドガイドラインを確認します。必要なページやコンポーネントと、その優先順位を決定します。

2. デザインシステムの基盤を確立する：コンポーネントのコードを書く前に、コアとなるトークンを定義します。これには、スペーシングスケール（4px を基本単位とする：4、8、12、16、24、32、48、64）、タイプスケール（xs から 4xl までと、それぞれに対応する行の高さ）、セマンティックトークン（primary、secondary、success、warning、error、neutral）を使ったライトモードとダークモード両方のカラーパレット、角丸とシャドウのトークンが含まれます。これらのトークンにより、すべてのコンポーネントの見た目に一貫性が生まれます。

3. バリエーションを備えたコンポーネントを作成する：各コンポーネントに、明確に定義されたバリエーション（サイズ、色、状態）を実装します。マークアップを重複させるのではなく、props または CSS クラスでバリエーションを制御します。デフォルト、ホバー、フォーカス表示、アクティブ、無効など、すべてのインタラクティブな状態を含めます。キーボード操作時に、すべてのインタラクティブ要素でフォーカスリングが視認できるようにします。

4. レスポンシブなレイアウトを実装する：二次元のページレイアウトには CSS Grid を使用し、コンポーネントの一次元の配置には 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）を満たすようにします。aria-label、aria-describedby、role 属性は、セマンティックな HTML だけでは不十分な場合に限り追加します。Tab と Shift+Tab によるキーボード操作の順序をテストします。

6. ダークモードに対応する：CSS カスタムプロパティを使う方法、または Tailwind の dark: バリアントを使ってダークモードを実装します。十分なコントラスト比を維持しながら、背景、テキスト、境界線のトークンを切り替えます。目の疲れを軽減するため、純粋な黒（#000）の背景は避け、ダークグレー（#0f172a または #1e293b）を使用します。画像、シャドウ、高さの表現も適切に切り替わるようにします。

使用方法

必要なインターフェースについて、フレームワーク、スタイリング方法、既存のデザイントークンを含めてエージェントに説明してください。エージェントは、レスポンシブな動作、アクセシビリティ属性、ダークモード対応を備えたコンポーネントコードを作成します。

例

例 1：Tailwind CSS のバリエーションを備えた React カードコンポーネント

ユーザーのリクエスト：「Tailwind CSS を使って、再利用可能な React の Card コンポーネントを作成してください。デフォルト、浮き上がった表示、アウトライン表示のバリエーションに加え、ダークモードにも対応させたいです。」

エージェントの回答：

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"></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">
    
  </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 を使います：スタイルを設定した <div onClick> より、常に <button> を使うほうが適切です。セマンティック要素を使えば、キーボード操作、スクリーンリーダーへの通知、フォームの送信動作を追加の実装なしで利用できます。
• ハードコードした値ではなく、デザイントークンを使います：色、余白、フォントサイズ、シャドウはすべてトークンを参照するようにします。これにより、コンポーネントファイルを一つずつ確認することなく、トークンセットを切り替えるだけでテーマやダークモードを変更できます。
• モバイルファーストで設計し、その後拡張します：最小のビューポート向けに基本スタイルを記述します。大きなブレークポイントでは、min-width メディアクエリを使って機能を追加します。こうすることで、デスクトップを前提とした設計がモバイルのレイアウトを崩すのを防げます。
• リリース前にキーボードでテストします：Tab、Enter、Space、Escape、矢印キーだけを使って、すべてのインタラクティブな操作を試します。マウスなしではタスクを完了できない場合、コンポーネントにはアクセシビリティ上の課題があります。
• コンポーネントの API は最小限に保ちます：15 個の props を持つコンポーネントは正しく使うのが困難です。設定（フラグやモード文字列）よりも、コンポジション（children、スロット）を優先します。大きなコンポーネントは、組み合わせて使える小さなパーツに分割します。
• 実機でパフォーマンスを測定します：ミドルレンジの Android スマートフォンで、通信速度を制限してテストします。大きな DOM ツリー、最適化されていない画像、過剰な JavaScript バンドルは、性能に制約のあるデバイスで目に見えるカクつきを引き起こします。

エッジケース

• ユーザーからデザイントークンやブランドガイドラインが提供されない場合：Inter または system-ui のフォントスタック、スレートグレーのニュートラルなパレット、青を基調としたアクセントカラーを使った、ニュートラルなシステムをデフォルトにします。プロフェッショナルで癖がなく、後から簡単にカスタマイズできます。
• インスタンスによってコンテンツの長さが大きく異なる場合：固定の height ではなく min-height を使い、カードの説明には -webkit-line-clamp と text-overflow: ellipsis を使います。レイアウトが安定することを確認するため、1 語の場合と段落全体の場合の両方でテストします。
• ダークモードで画像が色あせたり、明るくなりすぎたりする場合：ダークモードでは、写真画像に控えめな brightness(0.9) フィルターを適用します。装飾用 SVG では、currentColor または CSS カスタムプロパティを使って塗りつぶしの色を切り替えます。
• 右から左へ書く言語（RTL）のサポートが必要な場合：margin-left の代わりに margin-inline-start、padding-right の代わりに padding-inline-end など、論理 CSS プロパティを使います。ルート要素に dir="rtl" を設定し、レイアウトが正しく反転することを確認します。
• 対象のフレームワークが不明、またはユーザーがプレーンな HTML を希望する場合：セマンティック HTML とバニラ CSS カスタムプロパティをデフォルトにします。出力はリファクタリングせずに、どのフレームワークにも取り込めます。