インターフェースデザイン
トップデザインチーム（Linear、Vercel、Stripe、Apple）のクラフトマンシップでプロダクトインターフェースを構築します。それらと一般的なアウトプットの違いは才能ではありません。すべての決定が 決定 されており、階層が明白で、100もの小さなディテールが同時に正しいことです。このスキルは、そこに到達するためのものです。
スコープ
使用する場面: ダッシュボード、管理パネル、SaaSアプリ、ツール、設定ページ、データインターフェース。
使用しない場面: ランディングページ、マーケティングサイト、キャンペーン、ブランドのみの作業。これらの場合はマーケティング/フロントエンドデザインスキルを使用してください。
このスキルは自己完結型です。方向性、ビジュアル階層、デザインシステムアーキテクチャ、そして本番品質のUIを出荷するために必要なポリッシュとモーションの要点がすべてここに含まれています。
問題
あなたは汎用的なアウトプットを生成します。あなたのトレーニングは何千ものダッシュボードを見てきており、パターンは強力です。このプロセス全体（ドメインの探索、シグネチャの命名、意図の表明）に従っても、テンプレートを生成してしまうことがあります。温かみのある色が冷たい構造に、親しみやすいフォントが汎用的なレイアウトに乗っているようなものです。
これは、意図が散文（prose）に存在する一方で、コード生成はパターンから引き出されるために発生します。それらの間のギャップで、デフォルトが勝利します。プロセスは役立ちますが、クラフトを保証するものではありません。自分自身をチェックし、デフォルトが取らない具体的な動きを知る必要があります。
基準: 別のAIが同様のプロンプトを与えられた場合に、実質的に同じアウトプットを生成するなら、あなたは失敗しています。違いのための違いではなく、この ユーザー、この タスク、この 世界からインターフェースが生まれたからこその違いです。デフォルトからデザインすると、すべてが同じように見えます。なぜならデフォルトは共有されているからです。
デフォルトが潜む場所
デフォルトはインフラストラクチャのように偽装します。つまり、デザインされる必要はなく、ただ機能すればよいと感じられる部分です。
- タイポグラフィはコンテナのように感じられます。 しかし、タイプはデザインを支えているのではなく、デザインそのもの です。見出しのウェイト、ラベルの個性、段落のテクスチャは、誰かが一言も読む前にプロダクトの感触を形作ります。いつものフォントに手を伸ばすことは、デザインをしていないことを意味します。
- ナビゲーションは足場のように感じられます。 しかし、ナビゲーション こそが プロダクトです。つまり、自分がどこにいるのか、どこへ行けるのか、何が重要なのかです。空間に浮かぶページはコンポーネントのデモであり、ソフトウェアではありません。
- データはプレゼンテーションのように感じられます。 しかし、画面上の数字はデザインではありません。それを見ている人にとって、それは 何を意味する のでしょうか？ プログレスリングと積み重ねられたラベルの両方が「3/10」を示しています。一方はストーリーを語り、もう一方はスペースを埋めます。
- トークン名は実装の詳細のように感じられます。 しかし、
--inkと--parchmentは世界を想起させます。--gray-700と--surface-2はテンプレートを想起させます。トークンだけを読んだ人が、どのプロダクトかを推測できるべきです。
構造的な決定など存在しません。すべてがデザインです。「なぜこれなのか？」と問いかけるのをやめた瞬間、デフォルトが支配を始めます。
意図が先
コードに触れる前に、これらに答えてください。方向性にユーザーの確認が必要でない限り、コンパクトな作業用ブリーフにまとめてください。
- この人間は誰ですか？ 「ユーザー」ではありません。実際の人物です。彼らはこの画面を開くとき、どこにいますか？ 5分前には何をしていて、5分後には何をする予定ですか？ 朝7時にコーヒーを飲む教師は、深夜にデバッグする開発者でも、投資家ミーティングの合間にいる創業者でもありません。
- 彼らは何を達成しなければなりませんか？ 動詞で表現してください。これらの提出物を評価する。壊れたデプロイを見つける。支払いを承認する。その答えが、何が先行し、何が続き、何が隠れるかを決定します。
- これはどのように感じられるべきですか？ 意味のある言葉で表現してください。「クリーンでモダン」は何も意味しません。どのAIもそう言います。ノートのように温かい？ ターミナルのように冷たい？ トレーディングフロアのように密度が高い？ 読書アプリのように落ち着いている？ これが色、タイプ、スペーシング、密度、すべてを形作ります。
プロンプトが人間、タスク、感触を特定するには曖昧すぎる場合は、簡潔な質問を1つしてください。コンテキストが責任ある推測を可能にする場合は、簡潔に述べて先に進んでください。
意図はシステム全体に及ぶ必要があります。 「温かみのある」と言いながら冷たい色を使うのは、フォロースルーではありません。意図が温かみのあるものであれば、サーフェス、テキスト、ボーダー、アクセント、セマンティックカラー、タイプのすべてが温かみのあるものでなければなりません。密度が高い場合は、スペーシング、タイプサイズ、情報アーキテクチャのすべてが密度が高くなければなりません。表明された意図に対してすべてのトークンをチェックしてください。すべての選択（レイアウト、色温度、タイプフェイス、スペーシングスケール、階層）に対して、「なぜ」を言えなければなりません。「一般的だから」「うまくいくから」は、デフォルトを使ったことを意味します。
プロダクトドメインの探索
ここでデフォルトがキャッチされるか、されないかが決まります。汎用的なパス: タスクタイプ → ビジュアルテンプレート → テーマ。クラフトされたパス: タスクタイプ → プロダクトドメイン → シグネチャ → 構造 + 表現。違いは、視覚的な思考の前にプロダクトの世界に費やす時間です。
方向性を提案する前に、これら4つすべてを生成してください:
- ドメイン — このプロダクトの世界に存在する概念、メタファー、語彙。機能ではなく、領域です。最低5つ。
- 色の世界 — ここに 自然に 存在する色は何ですか？ 「暖色」「寒色」ではありません。実際の世界に行ってください。このプロダクトが物理的な空間だとしたら、何が見えますか？ 5つ以上挙げてください。
- シグネチャ — このプロダジェクトに しか 存在し得ない、1つの要素（ビジュアル、構造、またはインタラクション）。名前を挙げられなければ、探索を続けてください。
- デフォルト — このインターフェースタイプに対する、3つの明白な選択肢（ビジュアルと構造の両方）。名前を付けていないパターンを避けることはできません。
テスト: プロダクト名を削除して提案を読んでください。誰かがそれが何のためのものかを特定できますか？ できない場合は、より深く探索してください。
可能な場合はレンダリングする
セッションでインラインのビジュアルレンダリングツールが利用可能な場合（例：会話内でHTMLやSVGをインラインでレンダリングする show_widget / visualize ツール）、説明するよりもデザインを 表示する ことを優先してください。散文に閉じ込められた方向性は、ユーザーが見ることができるものよりもはるかに価値が低くなります。これは条件付きです。そのようなツールが存在しない場合（CI、ヘッドレスエージェント、プレーンなターミナル）は、コード、トークン、書面による提案にフォールバックしてください。ツールが存在するかどうかを決して想定せず、確認してから使用してください。
3つのタイミングでレンダリングします:
- 方向性の提案時。 「Suggest + Ask」ブロックと一緒に、小さなライブサンプルをレンダリングします。実際のスウォッチとしてのパレット、実際のタイプフェイスでのタイプスケール、サーフェスエレベーションのステップを積み重ねたカード、実際のコンポーネントとしてのシグネチャ要素。ユーザーは「ノートのように温かい」という言葉を読むのではなく、見る べきです。
- コンポーネントのデザイン時。 実際のコンポーネント（またはタイトなbefore/after、両方のバリアントを並べて）をレンダリングし、クラフトの決定（スペーシング、ボーダー、階層、状態）が主張されるのではなく、見える ようにします。重要な場合は、実際の状態（デフォルト、ホバー、空、エラー）をレンダリングします。
- 批評または監査時。 現在のバージョンと改善されたバージョンを一緒にレンダリングし、ギャップが語られるのではなく、示される ようにします。
レンダリング時のルール:
- ウィジェットは ビジュアルのみ を表示します。すべての推論、ドメイン探索、拒否されたデフォルトのリスト、推奨事項は応答テキストに残します。ウィジェットに散文を貼り付けないでください。
- レンダリングツール自身のデザインシステム契約に従ってください（ツールに
read_me/ガイダンスがある場合はロードしてください）。そのテーマ変数を使用して、サンプルがライト/ダークモードを継承し、ホストにネイティブに表示されるようにします。ホストのクロムと戦わないでください。 - サンプルは以下のチェックを通過する必要があります。レンダリングされたデフォルトは依然としてデフォルトです。レンダリングはクラフトを 見えるようにする ためのものであり、その代わりになるものではありません。
- これは 会話 にレンダリングされ、プロジェクトにはレンダリングされません。実際の実装は、通常の編集によってコードベースに反映されます。
ポイント: 「これが私の考えです」と「これがどのように見えるかです」の間のループを、ユーザーが反応できる単一のメッセージに短縮します。
ビジュアル階層と構成
「これはデザインされているように見える」と「これは生成されたように見える」を分ける最大の要因。デフォルトは 平坦さ を生み出します。すべてが同じサイズ、ウェイト、スペーシングになるため、何も導かず、目は行き場を失います。クラフトは 階層 を生み出します。目は何が重要かを瞬時に理解します。これらは雰囲気ではなく、具体的な動きです。
ビューごとに1つのフォーカルポイント
すべての画面には、ユーザーが実行するために来た1つのことがあります。そのことが、サイズ、コントラスト、位置、またはその周りのスペースを通じて支配的になります。すべてが同等に競合すると、何も勝ち残らず、インターフェースは駐車場のように読み取られます。構築する前に、フォーカル要素を声に出して名前を付けてください。そして、それを勝たせてください。より大きく、より高いコントラストで、またはホワイトスペースで囲んでください。他のすべては意図的に格下げしてください。
タイプスケールは比率であり、ウェイトはサイズに勝る
サイズを感覚で選ばないでください。比率を選び、それを段階的に適用してください。密度が高く落ち着いたUIには約1.2（短三度）、ほとんどのプロダクトUIには約1.25、表現力豊かなものには約1.333。14〜16pxのボディから、目に見えて 異なるスケール（15/16/17のようなぼんやりしたものではなく）を生成します。14pxベースで1.25の場合: caption 11 · body 14 · h4 16 · h3 18 · h2 22 · h1 28 · display 44+。整数ピクセルとスペーシンググリッドに丸めてください。
Apple/Linearの動き: ウェイトとカラーは、サイズよりも多くの階層の仕事をします。 単一の14pxサイズで、ウェイトと透明度の組み合わせにより3つのティアを保持できます。value: 600 / primary、label: 500 / secondary、meta: 400 / muted。これは、2ポイント離れた2つの通常のウェイトよりも明確に分離します。3つのレバー（サイズ、ウェイト、カラー/透明度）を一緒に構築し、サイズだけに依存しないでください。目を細めて見出しとボディとラベルを区別できない場合、階層は弱すぎます。
実例 — メトリクス、平坦 vs 決定済み。平坦: Revenue / $48,200 両方とも14pxの通常のグレー、3つの同一のボックス、フォーカルポイントなし。決定済み: REVENUE 11px/500/muted/トラッキング · $48,200 28px/600/primary/タブラニュラー数字（ヒーロー） · ↑12% 12px/500/success。同じデータ、真逆の可読性。数値がサイズ+ウェイト+1つのアクセントでリードし、ラベルは格下げされ、セカンダリメトリクスは下位ティアに落ちます。
密度は決定であり、pxで表現される
Linearはタイト、Stripeは風通しが良い。どちらもデフォルトではありません。両方とも 選択 されており、その選択はどこでも同じ数値で表現されています。密度を事前に決定し、値を指定してください。ツールパネルが12〜16pxのパディングであれば、作業台のようにタイトに感じられます。同じカードが24pxであれば、パンフレットのように感じられます。同じ数値が、あるコンテキストでは正しく、別のコンテキストでは怠惰である可能性があります。意図的に選び、それを維持してください。
空間リズム — 不均等に呼吸する
優れたインターフェースは、すべてを均等にスペーシングしません。密集したコントロールゾーンは開放的なコンテンツに道を譲り、重い要素は軽い要素と釣り合いを取り、目は目的を持って移動します。単調なレイアウト（どこも同じカードサイズ、同じギャップ、同じ密度）は、誰も決定していないことの証です。意図的にリズムを変えてください。密接に関連するものをグループ化し、グループ間には実際の空気を入れてください。
プロポーションが語る
280pxのサイドバーと全幅のコンテンツは「ナビゲーションはコンテンツに仕える」と言っています。360pxのサイドバーは「これらは同等である」と言っています。特定の数値は、何が重要かを宣言します。プロポーションが何を言っているのかを明確に説明できないなら、それは何も言っていません。関係性を述べる幅と比率を選んでください。
分散と抑制（「高級」な外観）
- 約60/30/10: 支配的なニュートラルサーフェス、セカンダリトーン、そして約10%のアクセント。カラーは希少なリソースです。画面の大部分は構造です。
- 意図的に使用される1つのアクセント は、考えなしに使用される5つの色よりも優れています。グレーは構造を構築し、カラーは 伝達 します（ステータス、アクション、アイデンティティ）。動機のない色はノイズです。
- 線ではなく、スペースとウェイトによる階層。 ボーダーや仕切りに頼る前に、ホワイトスペースとトーンシフトに手を伸ばしてください。最もプレミアムなインターフェースは、ほとんどが目に見えない構造です。
- 大きなタイプの光学的サイジング: タイプが大きくなるにつれて、文字間隔を狭くします（見出しはわずかにネガティブトラッキング）。ボディの行間は読みやすさのために広くします（約1.5）。タイトなタイプはクラフトされたものとして読まれます。32pxの見出しのデフォルトのトラッキングは、ドキュメントとして読まれます。
クラフトの基礎
微妙なレイヤリング（背骨）
方向性に関係なく、これはすべてに適用されます。システムが機能していることに ほとんど気づかないはず です。Vercelのダッシュボードを見るとき、「いいボーダーだ」とは思いません。ただ構造を理解します。見えないクラフトが機能するクラフトです。
サーフェスエレベーション。 サーフェスは積み重なります。ドロップダウンはカードの上に、カードはページの上に配置されます。番号付きのシステムを構築します。ベース、次に増加するレベル。各ジャンプは明度のわずか数パーセントポイントです。例えば、ダークモードのベース → +7% → +9% → +12%。ライトモードは明るいままで、代わりにシャドウを追加します。単独のステップはほとんど見えませんが、積み重なると階層が現れます。感じるだけで見えない、ささやくようなシフト。
- サイドバー: キャンバスと同じ背景色にします。異なる色にしないでください。異なる色はスペースを「サイドバーの世界」と「コンテンツの世界」に断片化します。微妙なボーダーで十分です。
- ドロップダウン/ポップオーバー: 親サーフェスの1つ上のレベルにします。そうしないと溶け込んでしまい、レイヤリングが失われます。
- 入力フィールド: 周囲よりわずかに 暗く し、明るくしないでください。入力フィールドはインセット（埋め込まれている）であり、コンテンツを受け入れます。暗い塗りつぶしは、重いボーダーなしで「ここに入力」を示します。
ボーダー。 探していないときは見えなくなるが、構造が必要なときは見つけられるようにする必要があります。低透明度のrgbaは背景と調和し、注意を要求せずにエッジを定義します。ソリッドな16進数のボーダーは、比較すると粗く見えます。ダークモードは rgba(255,255,255,0.06–0.12) 程度、ライトモードはわずかに高くなります。進行形を構築します。標準、よりソフトな分離、強調、フォーカスリング。境界の重要度に強度を合わせてください。
目を細めてテスト: インターフェースで目を細めてください。それでも階層を認識できるはずです。何が何の上にあるか、セクションがどこで分割されているか。しかし、何も飛び出してはいけません。粗い線、不快なシフトがあってはなりません。ただ静かな構造だけです。これを間違えると、他の何も重要ではなくなります。
無限の表現
すべてのパターンには無限の表現があります。2つのインターフェースが同じように見えるべきではありません。 メトリクス表示は、ヒーロー数値、インライン統計、スパークライン、ゲージ、プログレスバー、比較デルタ、トレンドバッジのいずれかになり得ます。毎回同じサイドバー幅、同じカードグリッド、同じアイコン-左-数字-大-ラベル-小のメトリクスボックスは、すぐにAI生成とわかる ものであり、記憶に残りません。LinearのカードはNotionのカードのように見えません。VercelのメトリクスはStripeのメトリクスのように見えません。同じ概念、無限の表現。構築する前に、自問してください。ユーザーがここで行う唯一のことは何か、そして同様の問題を華麗に解決しているプロダクトは何か？
色はどこかに存在する
すべてのプロダクトは
…
[翻訳のため以下省略]