designing-frontend-interfaces

フロントエンドインターフェースの設計

概要

個性のあるインターフェースは、一つの美的方向性に徹し、一貫した価値体系で仕上げることから生まれます。ありきたりなインターフェースは、必要になったときにその都度、場当たり的に値を選ぶことで生まれます。

基本原則： コンポーネントを書く前に、システムを決めます。完成した CSS のすべての数値は、意図的に選んだスケールに基づいている必要があります。

このスキルでは、ビジュアルの仕上げを扱います。インターフェースの品質のその他の要素は、次の2つの関連スキルで扱います。

• フロー、フォーム、または複雑な状態を含むものには、必須サブスキルとして designing-user-experience を使用します
• リリース前には、必須サブスキルとして building-accessible-interfaces を使用します
• 完成した UI を評価するには、reviewing-interface-quality を使用します

鉄則

NO COMPONENT CODE BEFORE THE DESIGN BRIEF AND TOKEN BLOCK EXIST

概要は8行です。トークンブロックは1つの CSS ブロックです。合わせても約90秒で済み、これこそが、設計されたインターフェースと装飾されただけのインターフェースを分けるものです。

先にコンポーネントを書いてしまいましたか？ その値はすでに場当たり的なものです。続ける前に、実際のスケールとして整理してください。たまたま入力した数値を正当化してはいけません。

チェックリスト

各項目のタスクを作成し、順番に完了してください。

1. デザイン概要を書く — ファイルを作成する前に、回答内に8行で記述します
2. 美的方向性を選ぶ — references/aesthetic-directions.md から選ぶか、新しく考案して名前を付けます
3. トークンブロックを確定する — 文字サイズのスケール、カラースケール、余白のスケール、角丸、シャドウ、モーションを1つの CSS ブロックにまとめます
4. レイアウトの骨組みを作る — まずは構造と余白だけにし、装飾は加えません
5. コンポーネントを作る — すべてのインタラクティブ要素に5つの状態を用意します
6. 記憶に残る瞬間を加える — 使う人の記憶に残る、たった一つの要素です
7. 評価基準に照らして自己レビューする — 下記の自己レビューを参照し、基準を満たさない部分を修正します
8. 見た目を確認する — レンダリングし、実際に見て確認します

ステップ1：デザイン概要

ファイルを作成する前に書き出してください。これは回答内に記述する、プレーンテキスト8行です。ドキュメントでもファイルでもありません。

Purpose:    What job does this interface do?
Audience:   Who uses it, in what context, on what device?
Tone:       One named direction (see references/aesthetic-directions.md)
Reference:  A real-world visual analogue — a magazine, a era, a discipline
Palette:    Base / surface / ink / one accent — as hue intentions, not hex yet
Type:       Display face + text face, and why this pairing
Memorable:  The one thing someone will describe to a friend
Restraint:  What this design deliberately does NOT do

Restraint の行が最も重要です。明確な抑制方針が示されていないデザインでは、すべての効果が一度に適用されてしまいます。

記入例：

Purpose:    Changelog for a developer infrastructure tool
Audience:   Engineers skimming on a wide monitor, 30 seconds per visit
Tone:       Technical Broadsheet — newspaper density meets terminal precision
Reference:  Financial Times print edition, 1990s man pages
Palette:    Warm newsprint base, near-black ink, one signal red for breaking changes
Type:       Instrument Serif display / IBM Plex Mono text — editorial authority, machine detail
Memorable:  Version numbers set enormous in the left margin, hanging outside the text column
Restraint:  No cards. No shadows. No rounded corners. Rules and space only.

ステップ2：トークンブロックを確定する

インターフェースで使う値はすべて、ここから取得します。このブロックにない数値は、コンポーネントに含めてはいけません。

:root {
  /* TYPE — one ratio, applied consistently. 1.200 minor third (dense UI),
     1.250 major third (general), 1.333 perfect fourth (marketing),
     1.500 perfect fifth (editorial/poster). Pick ONE. */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-text:    "IBM Plex Mono", ui-monospace, monospace;
  --step--1: 0.833rem;  --step-0: 1rem;     --step-1: 1.25rem;
  --step-2:  1.563rem;  --step-3: 1.953rem; --step-4: 2.441rem;
  --step-5:  3.052rem;  --step-6: 3.815rem;

  /* SPACE — one base unit and its multiples. Never a value in between. */
  --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem;
  --space-s:   1rem;    --space-m:   1.5rem; --space-l:  2rem;
  --space-xl:  3rem;    --space-2xl: 4.5rem; --space-3xl: 7rem;

  /* COLOR — a ramp, not a set of one-offs. One accent, used sparingly. */
  --base:    #f4f1ea;   /* page */
  --surface: #ffffff;   /* raised */
  --ink:     #12100e;   /* primary text */
  --ink-2:   #55504a;   /* secondary text */
  --ink-3:   #8b857c;   /* tertiary / meta */
  --line:    #ddd7cc;   /* borders, rules */
  --accent:  #c1362f;   /* <10% of visible surface */

  /* FORM */
  --radius: 0;          /* commit: 0, or 2-4px, or a full 999px pill. Not "some of each". */
  --border: 1px solid var(--line);
  --shadow: none;       /* if using shadows, define 2 — near and far. Never 5. */

  /* MOTION */
  --dur-fast: 120ms; --dur: 220ms; --dur-slow: 420ms;
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

ブロックのルール：

トークン	ルール
文字サイズのスケール	ページ全体で比率を一つに統一します。目分量でサイズを決めると、階層が曖昧になります。
余白のスケール	すべてのマージン／パディング／ギャップを --space-* トークンにします。13px は使いません。0.85rem も使いません。
カラースケール	インクの濃さは3段階で十分です。4段階必要なら、階層が不明確です。
アクセントカラー	明確にマキシマリストな方向性を取る場合を除き、必ず一つだけにします。面積の10％未満に抑えます。
角丸	値は一つだけにします。角丸の混在は、素人っぽさが最も目立つサインです。
シャドウ	なし、または二つにします。二つ使う場合は、狭い接地シャドウと広い環境シャドウを一つずつにします。
モーション	所要時間は3種類、イージングは2種類にします。インターフェースに必要なすべてのトランジションをカバーできます。

ステップ3：階層

一度に変えるのは一つの要素だけです。 素人っぽい階層づけでは、サイズ と ウェイト と 色 と 余白を同時に変えます。すべてが主張し、何も目立たなくなります。

目的	変更するもの	固定するもの
セクション見出しと本文の区別	サイズ（2段階以上）	ウェイト、色
段落内の強調	ウェイト	サイズ、色
メタデータ／キャプション	色（--ink-3 にする）	サイズ、ウェイト
グループ化	余白（1段階分）	その他すべて

グループ化には、線やボックスより余白が効果的です。 枠線やカードを追加する前に、グループ間のギャップを2倍にし、グループ内のギャップを半分にしてみてください。「カードが必要」という直感の多くは、実際には「適切な余白が必要」だということです。

ステップ 4：スロップを避ける

汎用的な AI インターフェースの出力には、具体的で列挙可能な特徴があります。これはスタイルの好みではなく、ひと目で出力を見分けられるようにする、まさにそのデフォルト設定です。

避けるもの	代わりに使うもの
ディスプレイ用書体としての Inter、Roboto、Arial、system-ui	個性のある書体。references/typography.md を参照してください
白地に紫／バイオレットから青へのグラデーション	実在する参考資料から、本格的なパレットを選んでください
あらゆるものに rounded-lg ／ rounded-xl を使うこと	半径を 1 つ決めるか、角を丸めないでください
あらゆる面に shadow-md を付けること	実際に浮いているものにだけ影を付けてください
ヒーロー → 3 つの機能カード → CTA	コンテンツに合わせて構成を決めてください
ページ全体を中央揃えの max-w-4xl カラムに収めること	コンテンツの種類に応じて文字幅を変え、少なくとも一度はグリッドを崩してください
白地に text-gray-500 の本文	意図のある本物のインクカラーを使い、本文は十分なコントラストを確保してください
アイコンの代わりに絵文字を使うこと	本物のアイコンセットを使うか、アイコンを使わないでください
1 種類のニュートラルなサンセリフ体で 6 つのウェイトを使うこと	2 種類の書体、最大 3 つのウェイトにしてください
すべてのセクションで同じ縦方向の間隔を使うこと	重要度が伝わるよう、セクションごとに間隔を変えてください

収束の罠： 別々の生成で、同じ「無難で個性的」な選択肢に頼り続けないでください。Space Grotesk、ダークスレートの背景、ライムグリーンのアクセントという組み合わせは、今ではそれ自体が陳腐な定番です。デザインごとに、ライトとダーク、セリフ体とサンセリフ体とモノスペース体、密とゆったりを変えてください。references/aesthetic-directions.md を確認し、前回選ばなかった方向性を選んでください。

合理化の一覧：

考え	実際のところ
「ユーザーはスタイルを指定していないから、ニュートラルが最も無難だ」	指定がないなら、自分で選ぶのです。ニュートラルも選択肢の 1 つですが、最悪の選択です。
「簡単なデモにすぎない」	人々が目にするのはデモです。依頼内容を読むのにかかる時間は 90 秒です。
「Inter は本当に優れた書体だ」	そのとおりです。しかし、汎用的な AI らしさを示す最も強いサインでもあります。本文で使うとしても、それ以上には使わず、ディスプレイ用には決して使わないでください。
「機能を見せるならカードグリッドが最もわかりやすい」	それは最もよくある方法です。表、罫線付きリスト、段違いのレイアウト、エディトリアルな見開きなどを試してください。
「最後に個性的な要素を加えよう」	個性は構造に宿ります。最後に付け足すと、装飾に見えてしまいます。
「Tailwind のデフォルト設定はデザインシステムだ」	それはデフォルト設定のパレットです。設定を調整しないと、誰もが使うデフォルト設定のまま公開することになります。

ステップ 5：コンポーネントの状態

すべてのインタラクティブ要素に、5 つすべての状態を用意してください。状態の欠落は、生成された UI で最もよくある問題です。

.btn              { /* rest */ }
.btn:hover        { /* pointer only — must not be the sole affordance */ }
.btn:active       { /* pressed — a real transform, not just a color shift */ }
.btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled     { /* visibly inert, and still readable */ }
.btn[aria-busy]   { /* loading — reserve the space, don't collapse the layout */ }

フォーカスアウトラインは決して削除しないでください。デフォルトのアウトラインが見栄えの悪いものであれば、スタイルを変更してください。outline: none は設定しないでください。building-accessible-interfaces を参照してください。

ステップ 6：見た目を確認する

コードをレンダリングして読み返すだけでは、確認になりません。実際のピクセルを見てください。

# Static HTML
python3 -c "
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    b = p.chromium.launch()
    pg = b.new_page(viewport={'width':1440,'height':900})
    pg.goto('file:///abs/path/index.html'); pg.wait_for_timeout(600)
    pg.screenshot(path='/tmp/desktop.png', full_page=True)
    pg.set_viewport_size({'width':390,'height':844})
    pg.screenshot(path='/tmp/mobile.png', full_page=True)
    b.close()"

次に、両方の PNG を読み込み、評価基準に照らし合わせて確認してください。開発サーバーには、testing-webapps スキルの with_server.py ヘルパーを使ってください。

レンダリングして初めてわかる確認事項： コンテナからはみ出すテキスト、390px で崩れるレイアウト、コントラスト不足で見えないテキスト、ビューポートの端に接しすぎた要素、最後の 1 語だけが改行されて孤立する見出し、レイアウトシフトの原因となる寸法未指定の画像。

自己レビュー

各項目を正直に採点してください。いいえ が 1 つでもあれば、説明するのではなく修正してください。

• CSS のすべての間隔の値が、ブロック内のトークンになっている
• 文字サイズのスケールには 1 つの比率を使い、目視でサイズを選んでいない
• アクセントカラーは 1 色のみで、表示面積の 10% 未満である
• 半径の値は全体で 1 つに統一されている
• スクリーンショットを見た人が、デザインの方向性を言い当てられる
• 依頼内容の Memorable の項目が、実際のビルドに反映されている
• Restraint の項目が実際に守られている
• Anti-Slop の表にあるものが何も使われていない
• すべてのインタラクティブ要素に 5 つすべての状態がある
• フォーカスが見えており、決して抑制されていない
• スクリーンショットを目視し、1440px と 390px で確認した
• 本文テキストは 4.5:1、大きなテキストは 3:1 のコントラスト比を満たしている

参考ファイル

該当する判断が必要になったときに読み込んでください。最初から読み込む必要はありません。

ファイル	読み込むタイミング
references/aesthetic-directions.md	ステップ 1 — 方向性の選択とパラメーター設定
references/typography.md	書体の選択、スケールの構築、テキストの設定
references/color-and-theme.md	色の段階の構築、ダークモード、コントラストの計算
references/layout-and-composition.md	グリッド、ブレークポイント、グリッドからの逸脱、z-index
references/motion.md	ホバー時の色変更を超えるアニメーション全般

よくある間違い

トークンを宣言したのに使っていない。 :root ブロックがあるのに、コンポーネントでは padding: 14px を使っています。仕上げる前に、CSS 内に生の px 値がないか grep してください。

書体だけ個性的で、それ以外はすべてデフォルト。 Inter をディスプレイ書体に替えても、カードのグリッド、均一な角丸、グレーの本文テキストがそのままでは、ありきたりな出力に衣装を着せただけです。

一貫性のなさをマキシマリズムの口実にする。 マキシマリストな方向性にも、書体スケール、スペーススケール、パレットはそれぞれ 1 つずつ必要です。要素を増やしても、システムは同じです。

概要に書かれたデザインが、実装で実現されていない。 ステップ 7 で概要を読み直してください。Restraint: no shadows とあるのに実装に影があれば、その実装は誤りです。

ビジョンと複雑さが釣り合っていない。 洗練されたミニマルな方向性を、複雑なスクロールアニメーションで実装すると、意図が不明瞭に見えます。実装の手間は、示されたトーンに合わせてください。