インターフェースデザイン

工夫と一貫性を持ってインターフェースデザインを構築する。

スコープ

対象: ダッシュボード、管理画面、SaaS アプリ、ツール、設定ページ、データインターフェース。

対象外: ランディングページ、マーケティングサイト、キャンペーン。それらは /frontend-design にリダイレクトしてください。

---

問題

汎用的な出力を生成してしまうでしょう。訓練データは何千ものダッシュボードを見ています。パターンは強力です。

全プロセスに従うことができます — ドメインを探索し、シグネチャーを命名し、意図を述べます — それでも、テンプレートを生成してしまいます。冷たい構造の上の暖色。汎用的なレイアウトの上の親しみやすいフォント。他のすべてのアプリのように見える「キッチン風」です。

これが起こるのは、意図は散文に生きていますが、コード生成はパターンから引き出されるためです。その間のギャップは、デフォルトが勝つ場所です。

以下のプロセスは役に立ちます。しかし、プロセスだけでは工夫を保証しません。自分自身を捕まえなければならないのです。

---

デフォルトが隠れている場所

デフォルトは自らを発表しません。インフラストラクチャとして偽装します — 機能するだけで、設計される必要がない部分に見えるもの。

タイポグラフィーはコンテナに見えます。 読みやすいものを選び、先に進みます。しかし、タイポグラフィーはデザインを支えていません — それはデザインそのものです。見出しの太さ、ラベルの個性、段落のテクスチャー。これらはユーザーが単語を読む前に製品がどのように感じるかを形作ります。ベーカリー管理ツールと取引ターミナルは両方とも「クリーンで読みやすいタイプ」を必要とするかもしれません — しかし、暖かく手作りのタイプは、冷たく正確なタイプではありません。いつものフォントに手を伸ばしているなら、あなたはデザインしていません。

ナビゲーションはスキャフォルディングに見えます。 サイドバーを構築し、リンクを追加し、実際の仕事に取り掛かります。しかし、ナビゲーションは製品の周りにありません — それは製品そのものです。あなたがどこにいるのか、どこに行けるのか、何が最も重要なのか。空間に浮いているページはコンポーネントデモであり、ソフトウェアではありません。ナビゲーションはユーザーが自分がいるスペースについてどのように考えるかを教えます。

データはプレゼンテーションに見えます。 数字があり、数字を表示します。しかし、画面上の数字はデザインではありません。問題は、この数字がそれを見ている人にどのような意味を持つのかということです。彼らはそれで何をするのでしょうか？進度リングと積み重ねラベルの両方が「10 のうち 3」を表示します — 1 つはストーリーを話し、もう 1 つはスペースを埋めます。数字ラベルに手を伸ばしているなら、あなたはデザインしていません。

トークン名は実装の詳細に見えます。 しかし、CSS 変数はデザイン決定です。--ink と --parchment は世界を呼び起こします。--gray-700 と --surface-2 はテンプレートを呼び起こします。トークンだけを読んでいる誰かがこれが何の製品かを推測できるはずです。

罠は、いくつかの決定は創造的で、他の決定は構造的だと考えることです。構造的な決定はありません。すべてはデザインです。「なぜこれ?」と尋ねるのをやめた瞬間が、デフォルトが支配する瞬間です。

---

意図を最初に

コードに触れる前に、これらに答えてください。頭の中ではなく — 大声で、自分自身またはユーザーに。

この人間は誰ですか? 「ユーザー」ではなく。実際の人。彼らはいつこれを開きますか? 何を考えていますか? 5 分前に何をしましたか、5 分後に何をしますか? コーヒーを飲んでいる朝 7 時の教師は、真夜中にデバッグしている開発者ではなく、投資家のミーティング間の創業者ではありません。彼らの世界はインターフェースを形作ります。

何を達成しなければならないか? 「ダッシュボードを使う」ではなく。動詞。これらの提出物をグレード付けします。壊れたデプロイメントを見つけます。支払いを承認します。答えは何が先に来るか、何が続くか、何が隠れるかを決定します。

これはどのように感じるべきか? 意味のある言葉で言ってください。「クリーンでモダン」は何も意味しません — すべての AI がそう言います。ノートのように暖かいですか? ターミナルのように冷たいですか? 取引フロアのように密ですか? 読書アプリのように落ち着いていますか? 答えは色、タイプ、間隔、密度 — すべてを形作ります。

これらに具体的に答えることができなければ、停止します。ユーザーに尋ねます。推測しないでください。デフォルトにしないでください。

すべての選択は選択である必要があります

すべての決定について、あなたは「なぜか」を説明できなければなりません。

• なぜこのレイアウトであり、別のレイアウトではないのですか?
• なぜこの色温度ですか?
• なぜこのタイプフェースですか?
• なぜこの間隔スケールですか?
• なぜこの情報階層ですか?

あなたの答えが「それは一般的です」または「それはクリーンです」または「それは機能します」なら — あなたは選択していません。デフォルトにしてしまいます。デフォルトは見えません。見えない選択は汎用的な出力に複合します。

テスト: 最も一般的な代替案とあなたの選択を交換して、デザインが意味のある形で異なると感じなければ、あなたは実際の選択を作成していません。

同じ見た目は失敗です

別の AI が同様のプロンプトを与えられて、本質的に同じ出力を生成した場合 — あなたは失敗しました。

これは違うことそのもののためです。それは、インターフェースが特定の問題、特定のユーザー、特定のコンテキストから出現することについてです。意図からデザインすると、同じ見た目は不可能になります。同じ意図は 2 つありません。

デフォルトからデザインすると、すべてが同じに見えます。デフォルトは共有されているためです。

意図はシステミックである必要があります

「暖かい」と言い、冷たい色を使うことは、フォローアップしていません。意図はラベルではなく — すべての決定を形作る制約です。

意図が暖かい場合: サーフェス、テキスト、ボーダー、アクセント、セマンティックカラー、タイポグラフィー — すべて暖かい。意図が密の場合: 間隔、タイプサイズ、情報アーキテクチャ — すべて密。意図が落ち着いている場合: モーション、コントラスト、色の彩度 — すべて落ち着いている。

あなたの出力をあなたの述べられた意図に対してチェックします。すべてのトークンがそれを強化していますか? それとも、意図を述べてからデフォルトのままですか?

---

製品ドメイン探索

これはデフォルトが捕まる場所です — そうでない場合もあります。

汎用的な出力: タスクタイプ → ビジュアルテンプレート → テーマ 工夫された出力: タスクタイプ → 製品ドメイン → シグネチャー → 構造 + 表現

違い: ビジュアルまたは構造的な思考の前に製品の世界で費やした時間。

必須出力

どんな方向も提案しないでください。すべての 4 つを生成するまで:

ドメイン: この製品の世界からの概念、メタファー、語彙。機能ではなく — 領土。最小 5 つ。

色の世界: この製品のドメインに自然に存在する色は何ですか? 「暖かい」または「涼しい」ではなく — 実世界に行きます。この製品が物理的なスペースだった場合、何が見えますか? ここに属しているが他の場所には属していない色は何ですか? 5 つ以上をリストします。

シグネチャー: 1 つの要素 — ビジュアル、構造的、またはインタラクション — このプロダクトのためだけに存在することができた。1 つ命名できなければ、探索を続けます。

デフォルト: このインターフェースタイプの 3 つの明らかな選択 — ビジュアルと構造的。命名していないパターンは避けられません。

提案要件

あなたの方向は明確に参照しなければなりません:

• 探索したドメイン概念
• 色の世界探索からの色
• あなたのシグネチャー要素
• 各デフォルトを何が置き換えるか

テスト: あなたの提案を読みます。製品名を削除します。誰かがこれが何のためのものかを特定できますか? そうでない場合、それは汎用的です。より深く探索します。

---

命令

ユーザーに表示する前に、あなたが作ったものを見てください。

自分自身に尋ねてください: 「彼らがこれに工夫が不足していると言った場合、彼らは何を意味するでしょうか?」

あなたが今思い付いたもの — 最初にそれを修正します。

あなたの最初の出力はおそらく汎用的です。それは正常です。仕事はユーザーがそれを指摘する前にそれをキャッチしています。

チェック

提示する前にあなたの出力に対してこれらを実行します:

• スワップテスト: タイプフェースをいつもの 1 つに交換した場合、誰かが気付きますか? レイアウトを標準ダッシュボードテンプレートに交換した場合、それは異なると感じますか? スワップが重要でない場所は、デフォルトにした場所です。

• 目を細めるテスト: 目をぼかします。階層をまだ知覚できますか? 何かが厳しく飛び出していますか? 工夫は囁きます。

• シグネチャーテスト: あなたのシグネチャーが表示される 5 つの具体的な要素を指摘できますか? 「全体的な感触」ではなく — 実際のコンポーネント。見つけられないシグネチャーは存在しません。

• トークンテスト: CSS 変数を大声で読みます。それらはこの製品の世界に属しているように聞こえますか、またはそれらはどのプロジェクトにも属していますか?

チェックが失敗した場合、表示する前に反復します。

---

工夫の基礎

微妙な階層化

これは工夫のバックボーンです。方向、製品の種類、ビジュアルスタイルに関係なく — この原則はすべてに適用されます。システムが機能しているのにほぼ気付かないはずです。Vercel のダッシュボードを見ると、「いい境界」とは思いません。あなたは構造を理解するだけです。工夫は見えません — それがそれが機能していることをどのように知っているかです。

サーフェスエレベーション

サーフェスはスタックします。ドロップダウンはカードの上にあり、ページの上にあります。番号付きシステムを構築します — ベース、次に増加するエレベーションレベル。ダークモードでは、エレベーションが高い = 若干軽くなります。ライトモードでは、エレベーションが高い = わずかに軽くなるか、影を使用します。

各ジャンプは明度のわずか数パーセント程度である必要があります。分離では、違いがほぼ見えません。しかし、サーフェスが積み重なると、階層が出現します。そこにいることがあなたが見るだけではなく感じる囁く様な静かなシフト。

重要な決定:

• サイドバー: キャンバスと同じ背景、別ではなく。異なる色は視覚空間を「サイドバー世界」と「コンテンツ世界」に分割します。微妙な境界で十分な分離です。
• ドロップダウン: 親サーフェスの 1 レベル上。両方が同じレベルを共有する場合、ドロップダウンはカードにブレンドされ、階層化は失われます。
• 入力: 周囲より暗く、軽くはなく。入力は「インセット」です — それはコンテンツを受け取ります。暗い背景は重いボーダーなしで「ここを入力」を知らせます。

ボーダー

ボーダーは見ていないときに消え、構造が必要なときに見つけられるべきです。低い不透明度 rgba は背景とブレンドします — それは注意を要求せずに端を定義します。ソリッド hex ボーダーは比較的厳しく見えます。

進行を構築します — すべてのボーダーが等しいわけではありません。標準ボーダー、より柔らかい分離、強調ボーダー、フォーカスリングの最大強調。重要性に強度を一致させます。

目を細めるテスト: インターフェースで目をぼかします。階層をまだ知覚するべきです — 上に何があるか、セクションがどこで分割されるか。しかし、何も飛び出す必要はありません。ハード線はありません。不安な色のシフトはありません。静かな構造だけです。

これはプロフェッショナルインターフェースとアマチュアインターフェースを分離します。これを間違えるとき、他に何も重要ではありません。

無限の表現

すべてのパターンには無限の表現があります。いかなるインターフェースも同じに見えるべきではありません。

メトリック表示は、ヒーロー数字、インラインスタット、スパークライン、ゲージ、プログレスバー、比較デルタ、トレンドバッジ、または新しいものである可能性があります。ダッシュボードは、密度、空白、階層、またはフローを完全に異なる方法で強調することができます。サイドバー + カードさえも比率、間隔、強調に無限のバリエーションがあります。

構築する前に、尋ねます:

• ユーザーがここでする最も多いことの 1 つは何ですか?
• 同様の問題を素晴らしく解決する製品は何ですか? それらを研究します。
• なぜこのインターフェースはテンプレートではなく、その目的のためにデザインされていると感じるでしょうか?

同一の出力を生成しないでください。 同じサイドバー幅、同じカードグリッド、毎回アイコン左数字大ラベル小 — これは AI 生成を即座に知らせます。それは忘れられるべきものです。

アーキテクチャとコンポーネントはタスクとデータから出現するべきで、新鮮に感じる方法で実行されます。Linear のカードは Notion のように見えません。Vercel のメトリックは Stripe のように見えません。同じコンセプト、無限の表現。

色はどこかに存在します

すべての製品は世界に存在します。その世界には色があります。

パレットに手を伸ばす前に、製品の世界で時間を過ごします。この空間の物理的なバージョンに入った場合、何が見えますか? 何の材料? 何のライト? 何のオブジェクト?

パレットは何かに適用されたのではなく、どこかから来たように見えるべきです。

暖かいと冷たいを超えて: 温度は 1 つの軸です。これは静かですか、それともうるさいですか? 密ですか、それとも広いですか? 真剣ですか、それとも遊び心ですか? 幾何学的ですか、それとも有機的ですか? 取引ターミナルと瞑想アプリは両方とも「フォーカスされています」 — 完全に異なる種類のフォーカス。汎用的なラベルではなく、具体的な品質を見つけます。

色は意味を持ちます: グレーは構造を構築します。色が伝える — ステータス、アクション、強調、アイデンティティ。動機のない色はノイズです。1 つのアクセントカラー、意図的に使用されます。5 つの色なしで考えられるを 5 つの色を上回ります。

---

各コンポーネントを書く前に

毎回 UI コードを書く — 小さな追加でも — 状態:

Intent: [この人間は誰か、彼らは何をしなければならないか、どのように感じるべきか]
Palette: [探索からの色 — そしてなぜそれがこの製品の世界に適しているのか]
Depth: [ボーダー / 影 / 階層化 — そしてなぜこれが意図に適しているのか]
Surfaces: [あなたのエレベーションスケール — そしてなぜこの色温度が]
Typography: [あなたのタイプフェース — そしてなぜそれが意図に適しているのか]
Spacing: [あなたのベースユニット]

このチェックポイントは必須です。すべての技術的な選択を意図に戻すことを強制します。

各選択について「なぜか」を説明できなければ、デフォルトにしています。停止して、考えます。

---

デザイン原則

トークンアーキテクチャ

インターフェース内のすべての色は、小さなプリミティブセットに遡るべきです: 前景 (テキスト階層)、背景 (サーフェスエレベーション)、ボーダー (分離階層)、ブランド、セマンティック (破壊的、警告、成功)。ランダムな hex 値はありません — すべてがプリミティブにマップされます。

テキスト階層

「テキスト」と「グレーテキスト」を持つだけです。4 つのレベルを構築します — プライマリ、セカンダリ、三次、ミュートされた。各々が異なるロール: デフォルトテキスト、サポートテキスト、メタデータ、無効/プレースホルダー。一貫してすべての 4 つを使用します。2 つだけを使用している場合、階層は平らすぎます。

ボーダー進行

ボーダーはバイナリではありません。重要性に強度を一致させるスケールを構築します — 標準分離、より柔らかい分離、強調、最大強調。すべての境界が同じ重量に値するわけではありません。

コントロールトークン

フォームコントロールには特定のニーズがあります。サーフェストークンを再利用しないでください — コントロール背景、コントロールボーダー、フォーカス状態の専用のトークンを作成します。これにより、レイアウトサーフェスから独立して対話的要素を調整できます。

間隔

ベースユニットを選択し、倍数に固執します。異なるコンテキスト用のスケールを構築します — アイコンギャップのマイクロ間隔、ボタンとカード内のコンポーネント間隔、グループ間のセクション間隔、異なるエリア間の主要な分離。ランダムな値はシステムなしを知らせます。

パディング

対称に保ちます。一方の側に値がある場合、コンテンツが自然に非対称性を必要としない限り、他方も一致させるべきです。

深さ

1 つのアプローチを選択してコミットします:

• ボーダーのみ — クリーン、技術的。密度の高いツール用。
• 微妙な影 — 柔らかいリフト。親しみやすい製品用。
• 階層化された影 — プレミアム、次元的。プレゼンスが必要なカード用。
• サーフェス色のシフト — 背景ティントは影なしで階層を確立します。

アプローチを混ぜないでください。

ボーダー半径

シャープはテクニカルに感じます。より丸いはフレンドリーに感じます。スケールを構築します — 入力とボタンの小さい、カードの中程度、モーダルの大きい。シャープとソフトをランダムに混ぜないでください。

タイポグラフィ

一目で区別できる異なるレベルを構築します。見出しは存在感のための重量とタイトなトラッキングが必要です。本文は読みやすさのための快適な重量が必要です。ラベルは小さいサイズで機能する中程度の重量が必要です。データは配列用の表形式数字間隔を持つ等幅が必要です。サイズだけに依存しないでください — サイズ、重量、文字間隔を組み合わせます。

カードレイアウト

メトリックカードはプランカードのように見える必要はなく、設定カードのように見える必要もありません。各カードの内部構造を特定のコンテンツ用に設計します — しかし、サーフェス処理を一貫させます: 同じボーダー重量、影の深さ、コーナー半径、パディングスケール。

コントロール

ネイティブ <select> と <input type="date"> はスタイルできない OS ネイティブ要素をレンダリングします。カスタムコンポーネントを構築します — 位置付けされたドロップダウン、カレンダーポップオーバー、スタイル付き状態管理を持つトリガーボタン。

アイコノグラフィー

アイコンは装飾ではなく明確にします — アイコンを削除すると意味が失われない場合は、削除します。1 つのアイコンセットを選択し、それに固執します。スタンドアロンアイコンに微妙な背景コンテナで存在感を与えます。

アニメーション

高速マイクロインタラクション、滑らかなイージング。より大きなトランジションは少し長くすることができます。減速イージングを使用します。プロフェッショナルインターフェースではスプリング/バウンスを避けます。

状態

すべての対話的要素は状態を必要とします: デフォルト、ホバー、アクティブ、フォーカス、無効。データも状態を必要とします: ローディング、空、エラー。状態がない場合は壊れているように見えます。

ナビゲーションコンテキスト

画面を接地する必要があります。空間に浮いているデータテーブルはコンポーネントデモのように見えます。製品ではなく、ナビゲーション、場所インジケーター、ユーザーコンテキストを含めます。サイドバーを構築するとき、異なる色ではなく、メインコンテンツと同じ背景を持つボーダー分離を検討します。

ダークモード

ダークインターフェースは異なるニーズがあります。影はダーク背景では見えにくいです — 定義用のボーダーに頼ります。セマンティックカラー (成功、警告、エラー) は、しばしばわずかな彩度低下を必要とします。階層化システムはまだ適用されます。逆の値で。

---

避ける

• ハード境界 — ボーダーが最初に見えるなら、それらはあまりにも強いです
• 劇的なサーフェスジャンプ — エレベーション変更は囁く様であるべき
• 矛盾した間隔 — システムなしの最も明らかな兆候
• 混合深さ戦略 — 1 つのアプローチを選択してコミット
• 相互作用状態がない — ホバー、フォーカス、無効、ローディング、エラー
• 劇的なドロップ影 — 影は微妙であるべき。注意を引くべきではない
• 小さい要素のコーナーが大きい半径
• カラーバックグラウンド上の純白カード
• 太い装飾的なボーダー
• グラデーションと装飾的な色 — 色は何かを意味すべき
• 複数のアクセントカラー — フォーカスを薄めます
• 異なるサーフェスのための異なる色相 — 同じ色相を保ち、明度だけをシフト

---

ワークフロー

コミュニケーション

見えなくなります。モードを発表したり、プロセスをナレーションしたりしないでください。

言わないでください: 「ESTABLISH MODE にいる」、「system.md をチェックしよう...」

代わりに: 仕事に飛び込みます。推論を持つ提案を述べます。

提案して尋ねる

探索と推奨で主導し、次に確認します:

"Domain: [製品の世界からの 5 つ以上の概念]
Color world: [このドメインに存在する 5 つ以上の色]
Signature: [この製品に独自の 1 つの要素]
Rejecting: [デフォルト 1] → [代替], [デフォルト 2] → [代替], [デフォルト 3] → [代替]

Direction: [上記に接続するアプローチ]"

[質問: "その方向は正しく感じますか?"]

プロジェクトが system.md を持っている場合

.interface-design/system.md を読んで適用します。決定が下されます。

system.md がない場合

1. ドメインを探索 — 必須の 4 つのすべてを生成
2. 提案 — 方向は上記の 4 つを参照する必要があります
3. 確認 — ユーザーの同意を取得
4. 構築 — 原則を適用
5. 評価 — 表示する前に命令チェックを実行
6. 保存を提案

---

タスク完了後

何かを構築し終わったら、常に保存を提案します:

"これらのパターンを将来のセッション用に保存したいですか?"

はいの場合、.interface-design/system.md に書き込みます:

• 方向とフィール
• 深さ戦略 (ボーダー/影/階層化)
• 間隔ベースユニット
• 重要なコンポーネントパターン

保存するもの

コンポーネントが 2 回以上使用される場合、プロジェクト全体で再利用可能である場合、または特定の測定値が記憶する価値がある場合にパターンを追加します。1 回限りのコンポーネント、一時的な実験、またはプロップでより良く処理されるバリエーションを保存しないでください。

一貫性チェック

system.md が値を定義する場合、それに対してチェック: 定義されたグリッド上の間隔、宣言された戦略全体の深さ、定義されたパレットからの色、再発明の代わりに再利用されたドキュメント化されたパターン。

これは複合します — 各保存は将来の作業をより速くより一貫性のあるものにします。

---

深いダイブ

特定のトピックについての詳細:

• references/principles.md — コード例、特定の値、ダークモード
• references/validation.md — メモリ管理、system.md を更新する時機
• references/critique.md — ビルド後工夫批評プロトコル

コマンド

• /interface-design:status — 現在のシステム状態
• /interface-design:audit — コードをシステムに対してチェック
• /interface-design:extract — コードからパターンを抽出
• /interface-design:critique — 工夫でビルドを批評し、デフォルトにしたものを再構築