ui-principles

デザイン原則

このスキルは、エンタープライズソフトウェア、SaaS ダッシュボード、管理インターフェース、ウェブアプリケーションに、精密で練り上げられたデザインを徹底します。哲学の根幹にあるのは、意図的な個性を備えたジョニー・アイブ級の精密さです。すべてのインターフェースを磨き上げ、それぞれを固有のコンテキストに合わせて設計します。

デザインの方向性（必須）

コードを書く前に、デザインの方向性を決めてください。 安易に定番を選ばないでください。このプロダクトにふさわしい感触を考えてください。

コンテキストを考える

• このプロダクトは何をするものですか？ 金融ツールとクリエイティブツールでは、求められる雰囲気が異なります。
• 誰が使いますか？ パワーユーザーは情報の密度を求めます。たまに使うユーザーにはガイダンスが必要です。
• 感情面でどのような役割を果たしますか？ 信頼ですか？ 効率ですか？ 喜びですか？ 集中ですか？
• 記憶に残る要素は何ですか？ どのプロダクトにも、独自の印象を与える機会があります。

個性を選ぶ

エンタープライズ／SaaS の UI にも、考えている以上に多様な方向性があります。次のような方向性を検討してください。

精密さと密度 — 間隔を詰め、モノクロームで、情報を前面に出します。ツールを使い込むパワーユーザー向けです。Linear、Raycast、ターミナルの美学を参考にしてください。

温かみと親しみやすさ — ゆとりある間隔、柔らかなシャドウ、親しみやすい色使いです。人間味のある印象を目指すプロダクト向けです。Notion、Coda、コラボレーションツールを参考にしてください。

洗練と信頼 — 寒色系のトーン、重なりのある奥行き、金融サービスならではの重厚感です。資金や機密データを扱うプロダクト向けです。Stripe、Mercury、エンタープライズ B2B を参考にしてください。

大胆さと明快さ — 強いコントラスト、印象的な余白、自信に満ちたタイポグラフィです。モダンで決断力のある印象を目指すプロダクト向けです。Vercel、ミニマルなダッシュボードを参考にしてください。

実用性と機能性 — 落ち着いたカラーパレット、機能的な情報密度、明確な階層構造です。装飾よりも作業そのものが重要なプロダクト向けです。GitHub、開発者向けツールを参考にしてください。

データと分析 — チャートに最適化され、技術的でありながら分かりやすく、数値を最優先します。分析、指標、ビジネスインテリジェンス向けです。

1 つを選んでください。あるいは 2 つを組み合わせてもかまいません。ただし、プロダクトに合った方向性を必ず決めてください。

カラーファンデーションを選ぶ

温かみのあるニュートラルカラーを安易に選ばないでください。 プロダクトの特性を考慮してください。

• 温かみのあるファンデーション（クリーム色、温かみのあるグレー）— 親しみやすく、快適で、人間味のある印象
• 寒色系のファンデーション（スレート、ブルーグレー）— プロフェッショナルで、信頼でき、落ち着いた印象
• 純粋なニュートラルカラー（純粋なグレー、黒／白）— ミニマルで、大胆で、技術的な印象
• 色味を加えたファンデーション（わずかに色を帯びた色調）— 独自性があり、記憶に残り、ブランドを感じさせる印象

ライトとダークのどちらにしますか？ ダークモードは、ライトモードを反転させるだけではありません。ダークは技術的で、集中でき、プレミアムな印象を与えます。ライトは開放的で、親しみやすく、すっきりした印象を与えます。コンテキストに基づいて選んでください。

アクセントカラー — 意味のある色を 1 つ選んでください。信頼なら青、成長なら緑、エネルギーならオレンジ、創造性なら紫です。毎回同じアクセントカラーを安易に選ばないでください。

レイアウトのアプローチを選ぶ

コンテンツに合わせてレイアウトを決めます。

• 高密度のグリッドは、ユーザーが情報をざっと見て比較する、情報量の多いインターフェースに適しています。
• ゆとりのある間隔は、ユーザーが集中する必要のあるタスクに適しています。
• サイドバーナビゲーションは、遷移先が多い複数セクションのアプリに適しています。
• トップナビゲーションは、セクションが少ないシンプルなツールに適しています。
• 分割パネルは、コンテキストが重要なリストと詳細のパターンに適しています。

タイポグラフィを選ぶ

タイポグラフィは印象を決めます。いつも同じ定番に頼らないでください。

• システムフォント — 高速で、ネイティブで、目立ちません（実用性重視のプロダクトに適しています）。
• ジオメトリックサンセリフ（Geist、Inter）— モダンで、すっきりしていて、技術的です。
• ヒューマニストサンセリフ（SF Pro、Satoshi）— 温かみがあり、親しみやすい印象です。
• モノスペースの要素 — 技術的で、開発者向けで、データ量の多い印象です。

---

基本的な仕上げの原則

これらはデザインの方向性にかかわらず適用します。これが品質の最低ラインです。

4px グリッド

すべての間隔に 4px を基準とするグリッドを使用します。

• 4px - マイクロ間隔（アイコン間の隙間）
• 8px - 狭い間隔（コンポーネント内）
• 12px - 標準的な間隔（関連する要素間）
• 16px - ゆとりのある間隔（セクションのパディング）
• 24px - 広い間隔（セクション間）
• 32px - 大きな区切り

対称的なパディング

上下左右のパディングは同じ値にします。 上のパディングが16pxなら、左・下・右も16pxにします。例外：コンテンツによって自然に視覚的なバランスが生まれる場合。

/* Good */
padding: 16px;
padding: 12px 16px; /* Only when horizontal needs more room */

/* Bad */
padding: 24px 16px 12px 16px;

角丸の一貫性

4pxグリッドに沿って統一します。角が鋭いほど技術的な印象になり、丸いほど親しみやすい印象になります。システムを決めて、それを徹底します。

• シャープ：4px、6px、8px
• ソフト：8px、12px
• ミニマル：2px、4px、6px

システムを混在させないでください。一貫性が統一感を生みます。

奥行きと高さの方針

デザインの方向性に合わせて奥行きの表現を選びます。 奥行きは手段であり、必須ではありません。製品によって適したアプローチは異なります。

ボーダーのみ（フラット） — クリーンで技術的、情報密度の高いデザインです。視覚的な浮き上がりよりも情報密度を重視する、実用性重視のツールに適しています。Linear、Raycast、多くの開発者向けツールでは、影をほとんど使わず、領域を区切るための控えめなボーダーだけを使っています。これは手抜きではなく、意図的な抑制です。

控えめな単一シャドウ — 複雑さを加えずに、柔らかな浮き上がりを表現できます。シンプルな 0 1px 3px rgba(0,0,0,0.08) だけで十分な場合もあります。重ねたシャドウの重厚感を避けながら、穏やかな奥行きを加えたい親しみやすい製品に適しています。

重ねたシャドウ — 豊かで高級感があり、立体的な表現です。複数のシャドウレイヤーによって、重厚感のある製品にふさわしいリアルな奥行きを生み出します。StripeやMercuryがこのアプローチを採用しています。カードを物理的なオブジェクトのように見せたい場合に最適です。

サーフェスカラーの変化 — 背景の色味で階層を作り、シャドウを使わずに表現します。#f8fafc の背景に #fff のカードを配置するだけで、カードが浮き上がって見えます。シャドウで補強することもできますが、主役となるのは色です。

アプローチを1つ選び、徹底してください。カードによってフラットなボーダーと濃いシャドウを使い分けると、視覚的な一貫性が損なわれます。

/* Borders-only approach */
--border: rgba(0, 0, 0, 0.08);
--border-subtle: rgba(0, 0, 0, 0.05);
border: 0.5px solid var(--border);

/* Single shadow approach */
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

/* Layered shadow approach (when appropriate) */
--shadow-layered:
  0 0 0 0.5px rgba(0, 0, 0, 0.05),
  0 1px 2px rgba(0, 0, 0, 0.04),
  0 2px 4px rgba(0, 0, 0, 0.03),
  0 4px 8px rgba(0, 0, 0, 0.02);

仕上がりを左右するのは、複雑さではなく選択です。 余白とタイポグラフィが完璧なフラットなインターフェースは、細部が雑なシャドウだらけのインターフェースよりも洗練されています。

カードごとにレイアウトを変え、サーフェスの表現は統一する

単調なカードレイアウトは、手抜きのデザインです。指標カードとプランカード、設定カードが、すべて同じ見た目である必要はありません。スパークラインを使うカード、アバターを積み重ねるカード、進捗リングを使うカード、2列に分割するカードなど、それぞれ異なる構成にできます。

各カードの内部構成は、表示するコンテンツに合わせて設計します。ただし、サーフェスの表現は統一してください。ボーダーの太さ、シャドウの深さ、角丸、パディングのスケール、タイポグラフィを同じにします。統一感はコンテナーの外観から生まれるものであり、すべてのカードに同じレイアウトテンプレートを強いるものではありません。

独立したコントロール

UIコントロールには、コンテナーとしてのデザインが必要です。日付ピッカー、フィルター、ドロップダウンなどは、クリックハンドラーを付けただけのプレーンテキストではなく、ページ上に置かれた作り込まれたオブジェクトのように見せます。

スタイルを適用するUIに、ネイティブのフォーム要素を使わないでください。 ネイティブの <select>、<input type="date"> などの要素は、スタイルを適用できないOS標準のドロップダウンやピッカーとして表示されます。代わりに、カスタムコンポーネントを作成してください。

• カスタムセレクト：トリガーボタン＋位置を指定したドロップダウンメニュー
• カスタム日付ピッカー：入力欄＋カレンダーのポップオーバー
• カスタムチェックボックス／ラジオボタン：状態管理を備えたスタイル適用済みのdiv

カスタムセレクトのトリガーには、テキストとシェブロンアイコンが同じ行に収まるよう、display: inline-flex と white-space: nowrap を指定します。 これらを指定しないと、フレックスアイテムが次の行に折り返されることがあります。

タイポグラフィの階層

• 見出し：ウェイト600、文字間隔を詰める（-0.02em）
• 本文：ウェイト400～500、標準のトラッキング
• ラベル：ウェイト500、大文字表記にはわずかに正のトラッキング
• スケール：11px、12px、13px、14px（ベース）、16px、18px、24px、32px

データには等幅フォントを使用する

数値、ID、コード、タイムスタンプには等幅フォントを使います。列を揃えるには tabular-nums を使用します。等幅フォントは「これはデータです」と示します。

アイコン

Phosphor Icons（@phosphor-icons/react）を使用します。アイコンは装飾ではなく、意味を明確にするためのものです。アイコンを取り除いても意味が変わらないなら、取り除いてください。

単独で使うアイコンには、控えめな背景コンテナーを付けて存在感を持たせます。

アニメーション

• マイクロインタラクションは150ms、大きなトランジションは200～250ms
• イージング：cubic-bezier(0.25, 1, 0.5, 1)
• エンタープライズ向けUIでは、スプリングや弾むような効果を使わないでください

コントラストの階層

4段階のシステムを構築します。前景（プライマリ）→ セカンダリ → ミュート → フェイント。4段階すべてを一貫して使用します。

意味を伝える場合にのみ色を使う

グレーで構造を作ります。色を使うのは、ステータス、アクション、エラー、成功などを伝える場合に限ります。装飾目的の色はノイズです。

データ量の多いインターフェースを構築する際は、色を使うたびに、それが本当に必要かどうかを考えてください。スコアバーをパフォーマンスに応じて色分けする必要はありません。ミュートした単色で十分です。評価バッジに信号機のような色を使う必要もありません。タイポグラフィで階層を表現できます。GitHub のテーブルやリストの表示方法を見てみましょう。ほぼモノクロで、色はステータス表示や操作可能な要素にのみ使われています。

---

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

画面には位置づけが必要です。宙に浮いたデータテーブルは、製品ではなくコンポーネントのデモのように感じられます。以下を含めることを検討してください。

• ナビゲーション — アプリ内の現在位置を示すサイドバーや上部ナビゲーション
• 位置インジケーター — パンくずリスト、ページタイトル、または選択中のナビゲーション項目
• ユーザーのコンテキスト — ログイン中のユーザー、ワークスペース／組織

サイドバーを構築する際は、メインコンテンツ領域と同じ背景色を使うことを検討してください。Supabase、Linear、Vercel などのツールは、異なる背景色ではなく控えめなボーダーを使って区切っています。これにより視覚的な重さが軽減され、より一体感のある印象になります。

---

ダークモードで考慮すること

ダークなインターフェースには、異なる工夫が必要です。

シャドウよりボーダー — ダークな背景ではシャドウが見えにくくなります。境界を明確にするには、ボーダーをより活用してください。白の不透明度が10～15％のボーダーは、ほとんど見えないように感じても役割を果たしています。目立たせようとする衝動を抑えましょう。

セマンティックカラーを調整する — ステータスカラー（成功、警告、エラー）は、ダークな背景で強すぎる印象にならないよう、彩度を少し下げたり調整したりする必要がある場合があります。

構造は同じ、値は異なる — 階層システム（前景 → セカンダリ → ミュート → フェイント）は引き続き適用されますが、値は反転します。

---

アンチパターン

絶対に避けること

• 極端に目立つドロップシャドウ（box-shadow: 0 25px 50px...）
• 小さな要素に大きな角丸（16px以上）を使う
• 明確な理由のない非対称なパディング
• 色付きの背景に真っ白なカードを置く
• 装飾目的で太いボーダー（2px以上）を使う
• 過剰な余白（セクション間のマージンが48pxを超える）
• バネのように弾むアニメーション
• 装飾目的のグラデーション
• 1つのインターフェースで複数のアクセントカラーを使う

常に問い直すこと

• 「この製品に必要なものを考えたか。それとも既定のやり方に流されていないか？」
• 「この方向性は、コンテキストやユーザーに合っているか？」
• 「この要素には、細部まで作り込まれた印象があるか？」
• 「奥行きの表現に一貫性があり、意図的か？」
• 「すべての要素がグリッドに沿っているか？」

---

基準

あらゆるインターフェースは、1ピクセルの違いまで徹底的にこだわるチームがデザインしたように見えるべきです。単にそぎ落とすのではなく、細部まで作り込むこと。そして、その製品固有のコンテキストに合わせてデザインすること。

製品によって求められるものは異なります。開発者向けツールには、正確さと情報密度が求められます。共同作業を行う製品には、温かみと余白が求められます。金融製品には、信頼感と洗練さが求められます。製品のコンテキストに合わせて、美的表現を決めましょう。

目標は、適切な個性を備えた緻密なミニマリズムです。品質基準はそのままに、コンテキストに基づいて実現します。