frontend-design

このスキルは、distinctive で production-grade なフロントエンドインターフェイスの作成をガイドします。見た目の細部に対する例外的な注意を払って、実際に動作するコードを実装します。

例となるプロンプト

• 「ブリーフからヒーローセクションをビルドして」
• 「スカンジナビアンスタイルのカードコンポーネントを作成」
• 「日本の雑誌のような雰囲気がほしい。レイアウトをビルドして」
• 「設定ページをビルドして。フィットするスタイルなら何でもいい」

コードを書く前に

1. 既存のコードベースをまず探索する。 具体的に以下をスキャン：

   • コンポーネントディレクトリ: components/、ui/、shared/ の全コンポーネントを名前と props/API とともにリストアップ
   • CSS 変数 / トークン: tokens.css、variables.css、theme.css という名前のファイル、または :root の custom properties 宣言
   • Tailwind config: tailwind.config.js または tailwind.config.ts、theme.extend のカスタム値をチェック
   • UI フレームワークテーマ: Material UI の createTheme、Chakra の extendTheme、shadcn の globals.css と components.json
   • Storybook: .storybook/ ディレクトリまたはドキュメント化されたコンポーネントを示す *.stories.* ファイル
   • フォント読み込み: Google Fonts リンク、@font-face 宣言、フォントインポート
   • レイアウトパターン: 既存ページが grid、コンテナ、ブレークポイント、スペーシングをどう扱っているか
   • package.json の UI 依存関係: tailwindcss、@mui/material、@chakra-ui/react、@radix-ui、lucide-react、framer-motion など
   • ビルドしようとしているものにマッチするか部分的にマッチするコンポーネントが存在する場合は、それらを拡張または組成する。重複は作らない。

2. コンテキストを理解する:

   • このインターフェイスはどの問題を解決するのか？誰が使うのか？
   • 意図された感情的なトーンは何か？
   • ハード制約（フレームワーク、デバイス、パフォーマンス、アクセシビリティ）は何か？

3. 美的方向性にコミットする。 ユーザーが指定したもの（下記の philosophies 参照）か、またはコンテキストに合ったものをあなたが選ぶ。コード作成前に選択と理由を述べる。

美的フィロソフィー

ユーザーがフィロソフィーを指定するか、雰囲気を説明するとき、これらを具体的な実装ガイドとして使う。各フィロソフィーはタイポグラフィ、カラー、レイアウト、スペーシング、モーション、細部の処理を定義します。

ディーター・ラムス（機能主義）

少ないがより良い。すべての要素が存在を正当化する必要がある。機能なしの装飾は存在しない。

• タイポグラフィ: クリーンなサンセリフ（Helvetica Neue、Suisse Intl、Akkurat）。見出しは緊密なレターヘッド。本文は寛容な行高。1つのサイズスケール、厳密に使用。
• カラー: 抑制的。単色で単一の機能的なアクセント。白または薄いグレー背景。カラーは装飾ではなく情報。
• レイアウト: 厳密なグリッド。明確な機能的階層。空間システムに配置されたコンポーネント。独断的な非対称性なし。
• スペーシング: 一貫性があり、数学的スケール（4px/8px ベース）。寛容なパディング。要素間の呼吸スペース。
• モーション: 最小限。目的のあるトランジションのみ（状態変化、表示）。装飾的なアニメーションなし。
• 細部: 影よりも繊細なボーダーと分割線。正確なアライメント。角丸はまばらで一貫性がある。

スイス / インターナショナルタイポグラフィック

構造を通じた客観性。グリッドは神聖。コンテンツは王。

• タイポグラフィ: 強力なサンセリフ（Neue Haas Grotesk、Univers、Aktiv Grotesk）。見出しと本文間のドラマティックなスケールコントラスト。すべて大文字のサブ見出しで寛容なレターヘッド。
• カラー: 高コントラスト。黒、白、および1つのプライマリカラー。太いカラーブロックが構成要素として。
• レイアウト: 厳密なマルチカラムグリッド。非対称バランス。テキストと画像が対話。要素間のアライメントは譲れない。
• スペーシング: グリッドモジュールで定義。ガッター設計の一部であり、後付けではない。
• モーション: グリッドを尊重するページトランジションとスクロールトリガー表示。遊び心のあるバウンスなし。
• 細部: 構造要素としてのルール（水平線）。グラデーションなし。影なし。フラットネスがポイント。

日本のミニマリズム（間）

ネガティブスペースはコンテンツ。抑制は洗練を伝達。静かさが大きさを上回る。

• タイポグラフィ: シン・ウェイトサンセリフまたはエレガントセリフ（Noto Sans、Cormorant）。寛容な行高（1.8-2.0）。大きなホワイトスペースマージンを持つ小さい本文サイズ。
• カラー: 落ち着いた自然色（温かいグレー、石、セージ、和紙）。硬いコントラストよりも繊細なトーンシフト。ほぼモノクロ。
• レイアウト: 非対称だがバランス。オフセンターコンテンツ。大きな空エリアは意図的。コンテンツは空間を漂う。
• スペーシング: 極端なホワイトスペース。パディングとマージンは「正常」の 2-3 倍。要素は呼吸する。
• モーション: 遅い、優しいフェード（400-600ms）。バウンスなし、オーバーシュートなし。位置シフトよりも不透明度トランジション。
• 細部: 毛細管ボーダー。繊細なテクスチャ（用紙グレイン、リネン）。シャープな影なし。やさしい、拡散効果。

ブルータリスト / ロー

構造は可視。研磨なし。反美学は美学。

• タイポグラフィ: システムフォント、モノスペース（JetBrains Mono、IBM Plex Mono、Courier）、または積極的なディスプレイフェイス。混合サイズ。テクスチャとしてのテキスト。
• カラー: 黒と白がプライマリ。カラーがあれば、生で衝突（建設黄、危険オレンジ、ターミナルグリーン）。グラデーションなし。
• レイアウト: 可視ボーダー。ボックスモデル露出。スタックされたブロック。意図的な粗さ。コンテンツ優先、美しさなし。
• スペーシング: 密または意図的に不均等。圧縮されたように感じるパディング。
• モーション: なし、またはいきなり（即座の状態変化、硬いカット）。イージングなし。
• 細部: 可視アウトライン。デフォルトブラウザフォーム要素は意図的になる可能性がある。テキスト専用インターフェイス。機能的でない限りアイコンなし。

スカンジナビアン

温かさと抑制。機能的な美しさ。デフォルトでアクセス可能。

• タイポグラフィ: 丸い、フレンドリーなサンセリフ（Nunito、Poppins、Circular、Cera Pro）。中程度のウェイト。快適な読みやすいサイズ。
• カラー: 自然なパレット。温かい白、やさしい青、ミュートグリーン、粘土。パステルアクセント。純黒なし（チャコールを使用）。
• レイアウト: クリーンでオープン。カードベース。角丸（8-12px）。快適で寛容なレイアウト。
• スペーシング: 寛容だが極端ではない。すべてがアプローチ可能で雑然としていない。
• モーション: 優しい、自然なイージング。繊細なホバーリフト。コンテンツが落ち着く。
• 細部: やさしい影（大きいぼかし、低不透明度）。丸い要素。グレーの温かい下地調。イラストフレンドリー。

アール・デコ / 幾何学的

大胆な対称。装飾的な精密さ。ステートメントと豪華さ。

• タイポグラフィ: 幾何学的なディスプレイフェイス（Futura、Poiret One、Josefin Sans）。すべて大文字の見出しで極端なレターヘッド。対比としてのセリフ本文。
• カラー: 豊かで深い。ゴールド/シャンパン、エメラルド、紺、バーガンディ、黒。金属アクセント（ゴールドグラデーション、シマー効果）。
• レイアウト: 対称と中央揃え。強い垂直軸。装飾的なフレームとボーダー。レイヤー化された深さ。
• スペーシング: 構造化と形式的。パディングは建築的。
• モーション: エレガントな表示。段階的なエントランスアニメーション。視差の深さ。
• 細部: 幾何学的パターン（シェブロン、放射状、ファンシェイプ）。装飾的なボーダー。テクスチャ（大理石、ブラッシュ金属）。ヒーロースケールでのステートメント タイポグラフィ。

ネオメンフィス

楽しい混乱。反企業。文字としてのシェイプ。

• タイポグラフィ: ウェイトとスタイルの混合。衝突するフォントは意図的。超大型の見出し。角度のあるテキスト。
• カラー: 大胆なプライマリとネオン。衝突する組み合わせ（ピンクと黄、青とオレンジ）。ミュートトーンなし。フラットカラー、グラデーションなし。
• レイアウト: 破れたグリッド。重なるエレメント。シェイプ（円、三角形、波線）を構成要素として。意図的に非対称。
• スペーシング: 一部の領域で密、他で空。リズムは不規則。
• モーション: バウンシー、遊び心がある。誇張されたホバー効果。ウィグル、回転、ポップするエレメント。
• 細部: 太いボーダー。装飾としての幾何学的シェイプ。パターン（ドット、ダッシュ、ジグザグ）。ハードエッジと明るいカラーのドロップシャドー。

エディトリアル / マガジン

コンテンツ主導のデザイン。タイポグラフィが重いリフティングを行う。すべてのページはスプレッド。

• タイポグラフィ: 見出し用のディスプレイセリフ（Playfair Display、Fraunces、Instrument Serif）。本文用クリーンサンセリフ（DM Sans、Source Sans）。ドラマティックなスケール（ヒーロー見出しは 72-120px）。プルクォート。ドロップキャップ。
• カラー: 最小限。黒と白で1つのアクセント。編集的にカラーを使用（装飾ではなくハイライト）。
• レイアウト: 強いカラムグリッド（3-5 列）。フルブリード画像。テキストラッピング。混合カラム幅。垂直リズム。
• スペーシング: 寛容なマージン。見出しはタイトなリード、本文はオープン。スペーシングとしてのホワイトスペース。
• モーション: スクロールトリガー表示。画像上の視差。スムーズなページトランジション。
• 細部: 薄いルールをディバイダーとして。キャプションタイポグラフィ。イシュー/日付メタデータ。印刷に触発された詳細（フォリオ番号、実行中ヘッダー）。

実装ガイドライン

• タイポグラフィ: Google Fonts または CDN 経由でロードされた distinctive なフォントを選択。ジェネリックなデフォルト（Inter、Roboto、Arial、システムフォント）を回避。ディスプレイフォントと本文フォントをペアリング。
• カラー: 一貫性のために CSS 変数を使用。支配的なカラーに鋭いアクセントが安全で均等に分散したパレットを上回る。
• モーション: HTML には CSS トランジション。React には Framer Motion / Motion ライブラリ。散らばったマイクロインタラクションよりも高インパクトなモーメント（ページロード表示、状態変化）に焦点。
• 空間構成: 予期しないレイアウトが注目を集める。非対称、オーバーラップ、対角フロー、グリッド破損要素。または、フィロソフィーが要求する場合は、精密に実行された厳密なグリッド。
• 背景と深さ: 雰囲気を作成。グラデーションメッシュ、ノイズテクスチャ、幾何学的パターン、レイヤー化透明、グレインオーバーレイ。選択したフィロソフィーにマッチ。

ジェネリック AI 美学を決して生成しない：紫グラデーション白、Inter フォント、予測可能なカードグリッド、使い古されたコンポーネントレイアウト。すべての出力は特定のコンテキストのために設計されているように感じるべき。

実装の複雑さを美的ビジョンにマッチ。ディーター・ラムスのインターフェイスは 50 行の精密 CSS。ネオメンフィスのインターフェイスは 300 行の創造的な混乱。両方が正しい。

モバイルファースト

モバイルレイアウトを最初にビルド、その後スケールアップ。これは譲れない。

• 375px 幅での単一カラムレイアウトから始める。
• 各ブレークポイント（max-width ではなく min-width メディアクエリ）で複雑性を追加。
• タッチターゲットは モバイルで最低 44x44px。
• 本文テキストはモバイルで最低 16px（iOS の入力フォーカスでのズーム防止）。
• ナビゲーションはモバイル固有のパターン（ハンバーガー、ボトムタブ、ドローワー）が必須。オーバーフローする横ナビゲーションに依存しない。
• すべてのブレークポイントで行の長さが快適（45-75 文字）に保つことをテスト。

ダークモード

デザイントークンファイルが存在する場合（/design-tokens から）、そのダークモードパレットを使用。存在しない場合は、ライトテーマと並行してダークモードサポートを生成。

• CSS カスタムプロパティを使用すれば、テーマ切り替えは変数値の変更を意味し、コンポーネント書き換えではない。
• prefers-color-scheme メディアクエリ（システムプリファレンス）と [data-theme="dark"] 属性（手動切り替え）の両方をサポート。
• 単に色を反転させない。ダークバックグラウンドはフィロソフィーにマッチする温かいまたはクールであるべき（スカンジナビアンは温かいチャコール、スイスはクール色スレート、ブルータリストはほぼ黒）。
• 純白テキストを防ぐため低減（例 #E5E5E5 または rgba(255,255,255,0.87)）。目の疲れを減らす。
• ダークモードの影は暗くより透明であるべき、ライトモードと同じ値ではない。
• アクセント色はダークバックグラウンドに対する WCAG コントラスト比を維持するために明度調整が必要な場合がある。
• prefers-reduced-motion メディアクエリを含める。そのクエリ内のすべてのアニメーションとトランジションを無効化またはシンプル化。