frontend-design

このスキルは、個性が際立つ、実運用に耐えるフロントエンドインターフェースの作成を支援します。美的な細部に徹底的にこだわり、実際に動作するコードを実装してください。

プロンプトの例

• 「ブリーフに沿ってヒーローセクションを構築してください」
• 「北欧風のカードコンポーネントを作成してください」
• 「日本の雑誌のような雰囲気にしたいです。レイアウトを構築してください」
• 「設定ページを構築してください。スタイルは合うものを選んでください」

コードを書く前に

1. まず既存のコードベースを調べてください。 特に次の項目を確認してください。

   • コンポーネントディレクトリ：components/、ui/、shared/を調べ、すべてのコンポーネント名とそのprops／APIを一覧にします
   • CSS変数／トークン：tokens.css、variables.css、theme.cssという名前のファイルや、カスタムプロパティを含む:root宣言を調べます
   • Tailwind設定：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宣言、フォントのインポートを確認します
   • レイアウトのパターン：既存のページで、グリッド、コンテナ、ブレークポイント、余白をどのように扱っているか確認します
   • package.jsonのUI依存関係：tailwindcss、@mui/material、@chakra-ui/react、@radix-ui、lucide-react、framer-motionなどを確認します
   • 作成するものに一致する、または一部が一致するコンポーネントがあれば、それを拡張または組み合わせてください。重複して作成しないでください。

2. コンテキストを理解してください。

   • このインターフェースはどんな問題を解決しますか？誰が使いますか？
   • どのような感情的なトーンを意図していますか？
   • どのような厳格な制約がありますか（フレームワーク、デバイス、パフォーマンス、アクセシビリティなど）？

3. 美的な方向性を決めてください。 ユーザーが指定した方向性を採用するか（以下の考え方を参照）、またはコンテキストに合ったものを選んでください。コードを書く前に、何を選んだか、その理由とともに伝えてください。

美的な考え方

ユーザーが特定の考え方を指定したり、雰囲気を説明したりした場合は、以下を具体的な実装ガイドとして使用してください。それぞれの考え方で、タイポグラフィ、色、レイアウト、余白、動き、細部の扱い方を定義します。

Dieter Rams（機能主義）

少なく、しかし優れたものに。すべての要素に存在意義を持たせます。機能のない装飾は加えません。

• タイポグラフィ：すっきりとしたサンセリフ体（Helvetica Neue、Suisse Intl、Akkurat）。見出しの字間は詰めます。本文の行間にはゆとりを持たせます。文字サイズは一つのスケールで統一して厳密に使用します。
• 色：控えめにします。単色を基調とし、機能的なアクセントカラーを一つだけ使います。背景は白または薄いグレーにします。色は装飾ではなく情報として使います。
• レイアウト：厳格なグリッドを使います。機能的な階層を明確にし、空間のシステムに沿ってコンポーネントを配置します。意味のない非対称性は避けます。
• 余白：4px／8pxを基準とした、一貫性のある数学的なスケールを使います。パディングにはゆとりを持たせ、要素間には十分な余白を確保します。
• 動き：最小限にします。状態の変化や表示など、目的のあるトランジションだけを使います。装飾的なアニメーションは加えません。
• 細部：影よりも控えめな境界線や区切り線を使います。配置を正確に揃えます。角丸は控えめに、一貫して使います。

スイス／インターナショナル・タイポグラフィ

構造によって客観性を表現します。グリッドを重視し、コンテンツを主役にします。

• タイポグラフィ：力強いサンセリフ体（Neue Haas Grotesk、Univers、Aktiv Grotesk）を使います。見出しと本文のサイズに大きな差をつけます。小見出しは字間を広くとったすべて大文字にします。
• 色：コントラストを高くします。黒、白、原色を一つ使います。大胆な色面を構成要素として取り入れます。
• レイアウト：複数列の厳格なグリッドを使います。非対称な配置でバランスを取ります。テキストと画像を対話させます。要素間の整列は必ず守ります。
• 余白：グリッドのモジュールに沿って定義します。ガターは設計の一部として扱います。
• 動き：グリッドを尊重したページ遷移や、スクロールに応じた表示を使います。弾むような動きは避けます。
• 細部：水平線を構造要素として使います。グラデーションや影は使いません。フラットさを重視します。

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

余白もコンテンツの一部です。抑制が洗練を伝えます。派手さより静けさを重視します。

• タイポグラフィ：細字のサンセリフ体や上品なセリフ体（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経由で読み込む、個性のあるフォントを選びます。汎用的なデフォルト（Inter、Roboto、Arial、システムフォント）は避けます。ディスプレイフォントと本文用フォントを組み合わせます。
• カラー：一貫性を保つためにCSS変数を使います。無難で均等に配分されたパレットより、支配的な色に鋭いアクセントを加えるほうが効果的です。
• モーション：HTMLにはCSSトランジションを使います。ReactにはFramer Motion／Motionライブラリを使います。散発的なマイクロインタラクションよりも、影響の大きい場面（ページ読み込み時の表示、状態の変化）を重視します。
• 空間構成：意外性のあるレイアウトは注目を集めます。非対称、重なり、斜めの流れ、グリッドを崩す要素などです。あるいは、デザインの理念が求めるなら、厳密なグリッドを精緻に実行します。
• 背景と奥行き：雰囲気を作り出します。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねた透過表現、粒子状のオーバーレイなどを使います。選んだ理念に合わせます。

汎用的なAI風のデザインは絶対に作らないでください。白地に紫のグラデーション、Interフォント、予測可能なカードグリッド、画一的なコンポーネントレイアウトは避けます。すべての出力が、その固有のコンテキストに合わせてデザインされていると感じられるものにしてください。

実装の複雑さを、目指す美的表現に合わせます。Dieter Ramsのインターフェースなら、精緻なCSSを50行使います。Neo-Memphisのインターフェースなら、創造的なカオスを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メディアクエリを含めます。そのクエリ内では、すべてのアニメーションとトランジションを無効にするか、簡略化します。