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