interface-design

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

丁寧さと一貫性をもって、インターフェースをデザインします。

対象範囲

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

対象外： ランディングページ、マーケティングサイト、キャンペーン。これらは /frontend-design に振り分けてください。

---

問題点

ありきたりな出力を生成してしまいます。学習データには、何千ものダッシュボードが含まれています。そのパターンは強力です。

以下のプロセス全体に従っても、ドメインを調べ、特徴を名付け、意図を明確にしても、結局テンプレートを作ってしまうことがあります。冷たい構造に暖色を合わせる。ありきたりなレイアウトに親しみやすいフォントを使う。「居心地のよいキッチンのような雰囲気」にしても、ほかのどのアプリとも変わらない見た目になる。

こうなるのは、意図は文章の中にある一方で、コード生成はパターンを引き出すからです。その隔たりに、既定の選択肢が入り込みます。

以下のプロセスは役に立ちます。しかし、プロセスだけでデザインの質が保証されるわけではありません。自分で気づく必要があります。

---

既定の選択肢が潜む場所

既定の選択肢は、表には出てきません。インフラのように見せかけます。つまり、デザインするものではなく、ただ動けばよいと感じられる部分です。

タイポグラフィは器のように感じられます。 読みやすいものを選んで、次に進む。しかし、タイポグラフィはデザインを支えるものではありません。タイポグラフィこそがデザインです。見出しのウェイト、ラベルの個性、段落の質感。こうしたものが、誰かが一言でも読む前に、プロダクトの印象を形づくります。パン屋の経営ツールとトレーディングターミナルのどちらにも「すっきりして読みやすい書体」が必要かもしれません。しかし、温かみがあり手作り感のある書体と、冷たく精密な書体は同じではありません。いつものフォントに手を伸ばしているなら、それはデザインではありません。

ナビゲーションは足場のように感じられます。 サイドバーを作り、リンクを追加して、本当の作業に取りかかる。しかし、ナビゲーションはプロダクトの周囲にあるものではありません。ナビゲーションこそがプロダクトです。自分がどこにいるのか、どこへ行けるのか、何が最も重要なのか。空間に浮かぶページは、コンポーネントのデモであって、ソフトウェアではありません。ナビゲーションは、その空間についてどう考えればよいかを人々に教えます。

データは見せ方のように感じられます。 数値があるから、数値を見せる。しかし、画面上の数値はデザインではありません。問うべきなのは、この数値が見ている人にとって何を意味するのか、そして、その人はそれを見て何をするのかです。進捗リングも、積み重ねたラベルも、どちらも「10 件中 3 件」と表示できます。一方は物語を伝え、もう一方は空間を埋めます。数値をラベルに載せるだけの方法に手を伸ばしているなら、それはデザインではありません。

トークン名は実装の詳細のように感じられます。 しかし、CSS 変数はデザイン上の決定です。--ink や --parchment は、ある世界観を思い起こさせます。--gray-700 や --surface-2 は、テンプレートを思い起こさせます。トークンだけを読んだ人でも、どんなプロダクトなのか推測できるはずです。

創造的な決定と構造的な決定がある、と考えることが落とし穴です。構造的な決定などありません。すべてがデザインです。「なぜこれなのか」と問うのをやめた瞬間、既定の選択肢に支配されます。

---

まず意図を定める

コードに触れる前に、次の質問に答えてください。頭の中だけで済ませず、自分自身またはユーザーに、声に出して答えてください。

この人は誰ですか？ 「ユーザー」ではありません。具体的な人物です。この画面を開くとき、どこにいますか？ 何を考えていますか？ 5 分前に何をしていて、5 分後には何をするでしょうか？ 午前 7 時にコーヒーを飲む教師と、深夜にデバッグする開発者と、投資家との会議の合間にいる創業者では、状況が異なります。その人の世界が、インターフェースを形づくります。

何を達成する必要がありますか？ 「ダッシュボードを使う」ではありません。動詞で答えてください。提出物を採点する。壊れたデプロイを見つける。支払いを承認する。答えによって、何を最初に見せるか、次に何を置くか、何を隠すかが決まります。

どんな使い心地にするべきですか？ 意味のある言葉で表現してください。「すっきりしていてモダン」は何も意味しません。どの AI もそう言います。ノートのように温かい？ ターミナルのように冷たい？ トレーディングフロアのように情報量が多い？ 読書アプリのように落ち着いている？ 答えによって、色、書体、余白、情報密度など、すべてが形づくられます。

具体的に答えられないなら、立ち止まってください。ユーザーに尋ねてください。推測しないでください。既定の選択肢に頼らないでください。

すべての選択を意図的に行う

あらゆる判断について、なぜそうしたのかを説明できなければなりません。

• なぜこのレイアウトで、別のレイアウトではないのですか？
• なぜこの色温度なのですか？
• なぜこの書体なのですか？
• なぜこの間隔のスケールなのですか？
• なぜこの情報の階層なのですか？

答えが「よくあるから」「すっきりしているから」「うまくいくから」なら、それは選択ではありません。既定値に頼っただけです。既定値は目立ちません。意識されない選択が積み重なると、ありきたりな出力になります。

確認方法： 選んだものを最も一般的な代替案に置き換えても、デザインに意味のある違いを感じられないなら、本当の選択をしていません。

同じものを作るのは失敗です

似たようなプロンプトを与えられた別の AI が、ほぼ同じ出力を作るなら、それは失敗です。

これは、ただ人と違うものを作ればよいという話ではありません。インターフェースは、特定の課題、特定のユーザー、特定の状況から生まれるものです。意図に基づいてデザインすれば、同じものにはなり得ません。意図は一つとして同じではないからです。

既定値に頼ってデザインすると、既定値は共有されているため、どれも同じ見た目になります。

意図はすべてに反映させる

「温かみのある」と言いながら冷たい色を使うのは、意図を貫いているとは言えません。意図は単なるラベルではなく、あらゆる判断を形作る制約です。

意図が「温かみのある」なら、背景、テキスト、枠線、アクセント、セマンティックカラー、タイポグラフィのすべてを温かみのあるものにします。意図が「高密度」なら、間隔、文字サイズ、情報アーキテクチャのすべてを高密度にします。意図が「落ち着いた」なら、動き、コントラスト、彩度のすべてを落ち着いたものにします。

明示した意図に照らして、出力を確認してください。すべてのトークンがその意図を強めていますか？ それとも、意図を掲げたあとで、結局は既定値に頼っていませんか？

---

製品領域の探求

ここで既定値を見抜きます。あるいは、見抜けないままになります。

一般的な出力：タスクの種類 → ビジュアルテンプレート → テーマ
練り上げた出力：タスクの種類 → 製品領域 → シグネチャー → 構造＋表現

違いは、ビジュアルや構造について考える前に、その製品の世界にどれだけ踏み込むかです。

必須の成果物

次の4つをすべて作成するまで、方向性を提案してはいけません。

領域： この製品の世界にある概念、比喩、語彙。機能ではなく、領域そのものです。最低5つ挙げてください。

色の世界： この製品領域には、どんな色が自然に存在しますか？「暖色」や「寒色」ではなく、実際の世界を見てください。この製品が物理的な空間だとしたら、何が見えますか？ そこにはあって、ほかの場所にはない色は何ですか？ 5色以上挙げてください。

シグネチャー： この製品にしか存在し得ない要素を1つ挙げてください。ビジュアル、構造、インタラクションのいずれでもかまいません。1つも挙げられないなら、探求を続けてください。

既定値： この種類のインターフェースで当たり前の選択肢を、ビジュアルと構造の両面から3つ挙げてください。名前を挙げていないパターンは避けられません。

提案の要件

方向性では、次の内容を明確に示してください。

• 探求した領域の概念
• 色の世界の探求で見つけた色
• シグネチャー要素
• 各既定値を何に置き換えるか

確認方法： 提案を読んでください。製品名を取り除いても、何のためのものかを特定できますか？ できないなら、ありきたりです。さらに深く探求してください。

---

指針

ユーザーに見せる前に、作ったものを見直してください。

自分に問いかけてください。「これには練り込みが足りないと言われるとしたら、何を指摘されるだろう？」

いま思いついたことがあるはずです。まずはそこを直してください。

最初の出力はおそらくありきたりです。それは普通のことです。ユーザーが気づく前に、それを見抜いて修正するのが仕事です。

チェック項目

提示する前に、出力に対して以下のチェックを行います。

• 入れ替えテスト： 書体をいつものものに入れ替えたら、誰かが気づくでしょうか？ レイアウトを標準的なダッシュボードのテンプレートに入れ替えたら、違いを感じられるでしょうか？ 入れ替えても変わらない部分が、既定のままにした部分です。

• 目を細めるテスト： 目をぼかして見てください。それでも階層を感じ取れますか？ 何かがきつく目に飛び込んできませんか？ クラフトはささやくように伝わります。

• シグネチャーテスト： シグネチャーが表れている具体的な要素を5つ挙げられますか？ 「全体的な雰囲気」ではなく、実際のコンポーネントです。見つけられないシグネチャーは、存在しません。

• トークンテスト： CSS 変数を声に出して読んでください。それらはこの製品の世界観に合っていますか？ それとも、どんなプロジェクトにも当てはまりそうですか？

どれか1つでも失敗したら、見せる前に調整を繰り返してください。

---

クラフトの基礎

さりげないレイヤリング

これはクラフトの根幹です。方向性、製品の種類、ビジュアルスタイルにかかわらず、この原則はあらゆるものに当てはまります。システムが機能していることに、ほとんど気づかないくらいが理想です。Vercel のダッシュボードを見て、「境界線がいい」とは思いません。ただ構造を理解できます。クラフトは目に見えません。それが、うまく機能している証拠です。

サーフェスの高さ

サーフェスは重なり合います。ドロップダウンはカードの上にあり、カードはページの上にあります。基準面から始めて、数値で表した段階的な高さのシステムを構築してください。ダークモードでは、高さが上がるほど少し明るくします。ライトモードでは、高さが上がるほど少し明るくするか、シャドウを使います。

各段階の明度の差は、数パーセントポイントにとどめます。単独で見ると、ほとんど違いが分からない程度です。しかしサーフェスが重なると、階層が浮かび上がります。目で見るというより感じる、ささやくような変化です。

重要な判断事項：

• サイドバー： 背景はキャンバスと同じにし、異なる色は使いません。色を変えると、視覚的な空間が「サイドバーの世界」と「コンテンツの世界」に分断されます。わずかな境界線だけで十分に区別できます。
• ドロップダウン： 親のサーフェスより1段階上にします。両方が同じ段階だと、ドロップダウンがカードに溶け込み、レイヤリングが失われます。
• 入力欄： 周囲より少し暗くし、明るくはしません。入力欄は「くぼんで」いて、コンテンツを受け取ります。暗い背景にすれば、太い境界線を使わなくても「ここに入力」と伝わります。

境界線

境界線は、意識していないときには見えなくても、構造が必要なときには見つけられるべきです。低い不透明度の rgba は背景になじみ、注意を引かずに縁を定義します。これに比べると、単色の16進数カラーによる境界線はきつく見えます。

段階的な強さを設け、すべての境界線を同じにしないでください。標準的な境界線、控えめな区切り、強調する境界線、フォーカスリング用の最大強度を使い分けます。境界の重要度に合わせて強さを調整してください。

目を細めるテスト： インターフェースを目を細めて見てください。それでも階層、つまり何が何の上にあるか、どこでセクションが区切られているかを感じ取れるはずです。ただし、何も強く目に飛び込んではいけません。きつい線も、不自然な色の変化もありません。静かな構造だけがある状態です。

これこそが、プロフェッショナルなインターフェースと未熟なインターフェースを分けるものです。ここを間違えれば、ほかのすべてが意味をなしません。

無限の表現

あらゆるパターンには無限の表現があります。どのインターフェースも同じ見た目にしてはいけません。

指標の表示方法には、ヒーローナンバー、インライン統計、スパークライン、ゲージ、プログレスバー、比較差分、トレンドバッジなど、新しいものも含め、さまざまな選択肢があります。ダッシュボードも、密度、余白、階層、流れのどれを重視するかによって、まったく異なる見せ方ができます。サイドバーとカードの組み合わせだけでも、比率、間隔、強調の仕方には無限のバリエーションがあります。

作り始める前に、次のことを確認してください。

• ここでユーザーが最もよく行うことは何ですか？
• 同じような課題を見事に解決している製品は何ですか？よく調べてください。
• このインターフェースがテンプレート的ではなく、この目的のために設計されたと感じられるのはなぜですか？

同じ出力を決して作らないでください。 毎回同じサイドバー幅、同じカードグリッド、左にアイコン、大きな数値、小さなラベルを並べた同じ指標ボックスを使うと、すぐにAI生成だと見抜かれます。印象に残りません。

アーキテクチャとコンポーネントは、タスクとデータから導き出し、新鮮さを感じられる方法で実装する必要があります。LinearのカードはNotionのカードとは違います。Vercelの指標はStripeの指標とは違います。同じ概念にも、無限の表現があります。

色には居場所がある

あらゆる製品は、ある世界の中に存在します。その世界には色があります。

カラーパレットを選ぶ前に、製品が存在する世界について考えてください。その空間を現実の場所として歩いたら、何が見えるでしょうか？どんな素材でしょうか？どんな光でしょうか？どんな物があるでしょうか？

パレットは、何かに後から塗り足したようではなく、どこかから自然に生まれたように感じられるべきです。

暖色と寒色を超えて： 色温度はひとつの軸にすぎません。静かでしょうか、それともにぎやかでしょうか？密集しているでしょうか、それとも開放的でしょうか？真面目でしょうか、それとも遊び心があるでしょうか？幾何学的でしょうか、それとも有機的でしょうか？トレーディングターミナルも瞑想アプリも、どちらも「集中」するものですが、その集中の種類はまったく異なります。一般的なラベルではなく、固有の性質を見つけてください。

色には意味があります： グレーは構造を作ります。色は状態、アクション、強調、アイデンティティを伝えます。意図のない色はノイズです。意図を持って使う1色のアクセントカラーは、考えずに使う5色よりも効果的です。

---

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

UIコードを書くときは、たとえ小さな追加であっても、毎回次のことを明示してください。

Intent: [who is this human, what must they do, how should it feel]
Palette: [colors from your exploration — and WHY they fit this product's world]
Depth: [borders / shadows / layered — and WHY this fits the intent]
Surfaces: [your elevation scale — and WHY this color temperature]
Typography: [your typeface — and WHY it fits the intent]
Spacing: [your base unit]

このチェックポイントは必須です。技術的な選択のすべてを、意図に結び付けるためのものです。

各選択の「理由」を説明できないなら、何も考えずに決めていることになります。立ち止まって考えてください。

---

デザイン原則

トークンアーキテクチャ

インターフェースで使う色はすべて、少数のプリミティブにたどり着けるようにしてください。前景色（テキストの階層）、背景色（サーフェスの高低）、ボーダー（区切りの階層）、ブランドカラー、セマンティックカラー（破壊的、警告、成功）です。ランダムな16進カラー値は使わず、すべてをプリミティブに対応付けてください。

テキストの階層

「テキスト」と「グレーのテキスト」だけにしないでください。プライマリー、セカンダリー、ターシャリー、ミュートの4段階を作りましょう。それぞれ異なる役割を持ちます。標準のテキスト、補助テキスト、メタデータ、無効状態やプレースホルダーです。4段階すべてを一貫して使ってください。2段階しか使っていないなら、階層が平坦すぎます。

ボーダーの段階

ボーダーはあるかないかの二択ではありません。強度を重要度に合わせたスケールを作りましょう。標準的な区切り、控えめな区切り、強調、最大限の強調です。すべての境界に同じ強さが必要なわけではありません。

コントロールトークン

フォームコントロールには固有の要件があります。サーフェストークンを使い回さず、コントロールの背景、ボーダー、フォーカス状態には専用のトークンを作成してください。これにより、インタラクティブ要素をレイアウトのサーフェスとは独立して調整できます。

間隔

基準となる単位を決め、その倍数を使い続けてください。コンテキストごとにスケールを作りましょう。アイコン間の小さな間隔、ボタンやカード内のコンポーネント間隔、グループ間のセクション間隔、異なる領域間の大きな区切りです。ばらばらな値は、システムがないことを示します。

パディング

左右対称にしてください。一方に値を設定するなら、コンテンツの都合で非対称にする必要がない限り、ほかの辺にも同じ値を設定してください。

奥行き

アプローチを1つ選び、統一します。

• ボーダーのみ — すっきりとテクニカル。情報量の多いツール向けです。
• 控えめなシャドウ — 柔らかく、少し浮き上がった印象。親しみやすいプロダクト向けです。
• 重ねたシャドウ — プレミアムで立体的な印象。存在感が必要なカード向けです。
• サーフェスカラーの変化 — 背景の色合いで階層を表現し、シャドウは使いません。

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

角丸

角を鋭くするとテクニカルに、丸くすると親しみやすく感じられます。サイズのスケールを作り、入力欄やボタンには小さめ、カードには中くらい、モーダルには大きめを使います。鋭い角と柔らかい角を無作為に混在させないでください。

タイポグラフィ

ひと目で見分けられる明確な階層を作ります。見出しには存在感を出すためにウェイトを強め、字間を詰めます。本文は読みやすいウェイトにします。ラベルは小さいサイズでも読みやすいミディアムウェイトにします。データには、桁を揃えられる等幅フォントと表形式の数字を使います。サイズだけに頼らず、サイズ、ウェイト、字間を組み合わせてください。

カードのレイアウト

指標カード、プランカード、設定カードは、それぞれ異なる見た目にできます。各カードの内部構成は、固有のコンテンツに合わせて設計します。ただし、サーフェスの処理は統一してください。ボーダーの太さ、シャドウの深さ、角丸、パディングのスケールを揃えます。

コントロール

ネイティブの <select> と <input type="date"> は、スタイルを変更できない OS ネイティブ要素として描画されます。独自のコンポーネントを作成してください。位置を指定したドロップダウン付きのトリガーボタン、カレンダーのポップオーバー、スタイルを適用した状態管理を実装します。

アイコン

アイコンは意味を明確にするために使い、装飾には使いません。アイコンを取り除いても意味が変わらないなら、取り除いてください。アイコンセットは1つ選び、統一して使います。単独で使うアイコンには、控えめな背景コンテナーを付けて存在感を出します。

アニメーション

細かなインタラクションは速く、イージングは滑らかにします。大きなトランジションは、少し長めでも構いません。減速するイージングを使います。プロフェッショナルなインターフェースでは、スプリングやバウンスを避けてください。

状態

すべてのインタラクティブ要素に、デフォルト、ホバー、アクティブ、フォーカス、無効の状態が必要です。データにも、読み込み中、空、エラーの状態が必要です。状態が不足していると、壊れているように感じられます。

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

画面には現在地がわかる手がかりが必要です。宙に浮いたデータテーブルは、プロダクトではなくコンポーネントのデモのように見えます。アプリ内の現在地を示すナビゲーション、位置のインジケーター、ユーザーのコンテキストを含めてください。サイドバーを作る場合は、色を変えるのではなく、メインコンテンツと同じ背景色にしてボーダーで区切ることも検討してください。

ダークモード

ダークなインターフェースには、異なる配慮が必要です。暗い背景ではシャドウが見えにくいため、境界を示すにはボーダーを活用します。セマンティックカラー（成功、警告、エラー）は、彩度を少し下げる必要があることもよくあります。階層の考え方はそのまま適用し、値を反転させます。

---

避けること

• 強すぎるボーダー — ボーダーが最初に目に入るなら、強すぎます
• サーフェスの急激な変化 — 高さの変化はごく控えめにします
• 一貫性のないスペーシング — システムがないことが最もはっきり表れます
• 奥行き表現の混在 — アプローチを1つ選び、統一します
• インタラクション状態の不足 — ホバー、フォーカス、無効、読み込み中、エラー
• 目立ちすぎるドロップシャドウ — シャドウは控えめにし、目を引くものにしないでください
• 小さな要素に大きな角丸を使うこと
• 色付きの背景に真っ白なカードを置くこと
• 装飾的な太いボーダー
• 装飾のためにグラデーションや色を使うこと — 色には意味を持たせてください
• アクセントカラーを複数使うこと — 焦点がぼやけます
• サーフェスごとに色相を変えること — 色相は同じにし、明度だけを変えてください

---

ワークフロー

コミュニケーション

存在感を出さないでください。モードを宣言したり、プロセスを説明したりしないでください。

言わないこと: 「ESTABLISH MODE です」「system.md を確認します……」

代わりに: すぐに作業を始めます。提案には理由を添えてください。

提案して確認する

調査と推奨事項を最初に示し、その後に確認します。

"Domain: [5+ concepts from the product's world]
Color world: [5+ colors that exist in this domain]
Signature: [one element unique to this product]
Rejecting: [default 1] → [alternative], [default 2] → [alternative], [default 3] → [alternative]

Direction: [approach that connects to the above]"

[Ask: "Does that direction feel right?"]

プロジェクトに system.md がある場合

.interface-design/system.md を読み、適用します。決定事項はすでに定まっています。

system.md がない場合

1. 分野を調査する — 必須の4つの成果物をすべて作成します
2. 提案する — 方向性には4つすべてを反映させます
3. 確認する — ユーザーの同意を得ます
4. 構築する — 原則を適用します
5. 評価する — 提示する前に必須のチェックを実行します
6. 保存するかどうかを提案します

タスクの完了後

何かを作り終えたら、必ず保存するかどうかを確認してください。

"Want me to save these patterns for future sessions?"

保存する場合は、.interface-design/system.md に次の内容を書き込みます。

• 方向性と雰囲気
• 奥行きの方針（境界線／シャドウ／レイヤー構成）
• 余白の基本単位
• 主要なコンポーネントパターン

保存する内容

コンポーネントが2回以上使われる場合、プロジェクト全体で再利用できる場合、または覚えておく価値のある具体的な寸法がある場合は、パターンを追加します。単発のコンポーネント、一時的な実験、propsで扱うほうが適切なバリエーションは保存しないでください。

一貫性の確認

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 — ビルドのクラフトを批評し、デフォルトのままになっている部分を再構築