refactoring-ui

Refactoring UI デザインシステム

実践的で、明確な方針に基づく UI デザインのアプローチです。フロントエンドコードの生成、デザインのレビュー、ビジュアル面の改善に関するアドバイスに、これらの原則を適用してください。

核となる原則

まずグレースケールでデザインし、色は最後に加えます。 色に頼る前に、余白、コントラスト、タイポグラフィで適切な階層を作る必要が生まれます。

基盤となる考え方： 優れた UI は才能ではなく、システムによって実現します。余白、文字、色、シャドウに制約のあるスケールを用いることで、一貫してプロフェッショナルな仕上がりになります。まずは余白を多めに取り、あとから減らしてください。レイアウトと階層が機能するまでは、細部（アイコン、シャドウ、マイクロインタラクション）は後回しにします。

スコアリング

目標：10/10。 簡易診断（はい／いいえで答える8項目）の該当数を数えてスコアを算出します：score = round(satisfied / 8 × 10)。スコアの基準は次のとおりです。10 = 8項目すべて合格（ぼかして見てもグレースケールでも階層がわかり、すべての値がスケールに沿っている）。9 = 不備がちょうど1つ（通常は階層が弱い、または余白が不足している）。6-8 = 不備が2〜3つ。<=5 = 不備が4つ以上（余白が場当たり的、階層が担うべき役割を色に頼っている、またはコントラストが不十分）。現在のスコアと、10/10に到達するために修正すべき診断項目を必ず明示してください。

Refactoring UI フレームワーク

デザイナーなしでプロフェッショナルなインターフェースを構築するための7つの原則です。

1. ビジュアル階層

核となる概念： すべてを重要にすることはできません。サイズ、ウェイト、色という3つの要素で階層を作ります。

効果がある理由： すべての要素が注目を奪い合うと、際立つものがなくなります。二次コンテンツを意図的に目立たなくすることで、対比によって主要コンテンツを引き立てます。

主なポイント：

• 要素を組み合わせ、すべてを重ねない — 主要なテキストは、大きくするか、太字にするか、暗くするかのいずれかにします。3つすべてを使うのは、最も重要な1つの要素だけにします
• ラベルは二次的な要素 — フォームラベル、テーブルヘッダー、メタデータはデータを支えるものであり、データと競合させません。小さく、薄くするか、小さな大文字にします
• セマンティックカラー ≠ ビジュアル上の強さ — 日常的な破壊的操作には、目立ちすぎる赤よりも、控えめな二次ボタンのほうが適していることがよくあります

プロダクトへの適用例：

コンテキスト	階層化の手法	例
フォームフィールド	ラベルを目立たなくし、値を強調する	大きな値の上に小さな大文字のラベル
ダッシュボード	主要な指標を大きく、補足情報を小さくする	「$42,300」を大きく、「先月比」を小さく
テーブル	ヘッダーを目立たなくし、データを強調する	ヘッダーは小さな大文字のグレー、データは通常のスタイル

デザインパターン：

• 3段階の階層：サイズ（大／標準／小）、ウェイト（太字／中／通常）、色（濃いグレー／中間のグレー／薄いグレー）
• ボタンの階層：プライマリー（塗りつぶし）、セカンダリー（アウトラインまたは控えめ）、ターシャリー（テキストのみ）

倫理的な境界： 価格、利用規約、解約方法などの重要な情報を隠すために、階層化のテクニックを使わないでください。

静的なレイアウトを超えるコンポーネントをデザインする場合は、references/advanced-patterns.mdを参照してください。インタラクション／ホバー／フォーカス状態、フォームのデザイン、空の状態、ボーダー半径のシステム、テキストの省略表示、レスポンシブのブレークポイントを扱っています。

2. 余白とサイズ

基本概念： 任意の値ではなく、制約のある余白スケールを使います。余白は要素間の関係を定義します。要素同士が近いほど、より関連性が高いと認識されます。

効果がある理由： 任意の余白（padding: 13px）は一貫性を損ないますが、固定スケールを使うと意図的な判断が促され、調和の取れたレイアウトになります。余白を広く取ると高級感が生まれ、詰め込みすぎると圧迫感が出ます。

重要なポイント：

• 次のスケールを使います：4、8、16、24、32、48、64px
• まずは余白を多めに取り、その後で減らします。十分に減らせることはほとんどありません
• グループ間の余白は、グループ内の余白より大きくします
• 幅を制限します。テキストは45～75文字（max-w-prose）、フォームは300～500pxを目安にします。全幅が適切なケースはほとんどありません

プロダクトでの適用例：

コンテキスト	余白の方針	例
アイコン＋ラベル	密接に配置（4px）	小さな間隔で関連性を保つ
カード内のセクション	セクションを分離（24px）	タイトル、コンテンツ、フッターの各ブロック
ページ内のセクション	大きなセクション（48-64px）	ヒーロー、機能、推薦コメント

CSS のパターン：

• p-1(4px) p-2(8px) p-4(16px) p-6(24px) p-8(32px) p-12(48px) p-16(64px)
• max-w-prose(65ch) max-w-md(28rem) max-w-lg(32rem) max-w-xl(36rem)
• 関連する項目には gap-2、セクションの分離には gap-6 を使います

3. タイポグラフィ

基本概念： モジュラータイプスケールを使い、コンテキストに応じて行の高さを調整し、フォントファミリーは最大2種類に制限します。

効果がある理由： モジュラースケール（各段階で約1.2倍ずつ大きくなる）は自然な視覚的リズムを生み出します。見出しの行の高さを詰め、本文ではゆったりさせることで、それぞれのコンテキストで読みやすくなります。

重要なポイント：

• スケール：12、14、16、18、20、24、30、36px（約1.2倍のモジュラー。手動で調整）
• 見出し：行の高さを詰める（1.0-1.25）。本文：ゆったりさせる（1.5-1.75）。テキスト幅が広いほど、行の高さも大きくします
• 本文には400未満のウェイトを使わず、強調には太字（600-700）を使い、何にでも使うのは避けます
• フォントは最大2種類にします。見出し用と本文用に分けるか、1種類のファミリーでウェイトを変えます

プロダクトでの適用例：

コンテキスト	タイポグラフィのルール	例
ヒーローの見出し	36px、行の高さ1.1、太字	大きくインパクトのあるメッセージ
本文	16px、行の高さ1.75、標準	無理なく読めるテキスト
キャプション／ラベル	12-14px、行の高さ1.5、ミディアムグレー	補足情報

CSS のパターン：

• text-xs(12px) text-sm(14px) text-base(16px) text-lg(18px) text-xl(20px)
• font-normal(400) font-medium(500) font-semibold(600) font-bold(700)
• leading-tight(1.25) leading-normal(1.5) leading-relaxed(1.75)

4. 色

中核となる考え方： 各色につき5〜9段階の明度を持つ体系的なパレットを作り、グレーにも控えめに彩度を加え、まずグレースケールでデザインします。

効果がある理由： 無秩序な色は互いに調和しません。あらかじめ定義された明度の体系を使えば一貫性を保てます。また、HSLで調整すると、自然に感じられる明るい色と暗い色のバリエーションを作れます。

重要なポイント：

• 各色に、ほぼ白からほぼ黒までの5〜9段階の明度（50〜900）が必要です。最も暗い色も純粋な黒にはせず、#000000ではなく#111827を使用します
• 純粋なグレーは生気がありません。色味を加えます（寒色系のUI：#64748bのような青、暖色系のUI：#78716cのような黄や茶色）
• HSL：明るくするには明度を上げ、彩度を下げ、色相を60°に近づけます。暗くするにはその逆で、色相を0°または240°に近づけます
• コントラストの最低基準：本文テキストは4.5:1、大きなテキスト（18px以上）は3:1です。白地には、より明るいグレーではなく#374151（gray-700）を使用します

製品への応用：

コンテキスト	色の方針	例
プライマリパレット	ブランドカラーの明度を9段階（50〜900）用意します	Blue-500のボタン、Blue-100の背景
セマンティックカラー	成功／警告／エラーに明度の範囲を用意します	Green-500の成功、Red-500のエラー
テキストカラー	暗・中・明の3段階にします	text-gray-900、text-gray-600、text-gray-400

CSSのパターン：

• text-gray-900（暗）text-gray-600（中）text-gray-400（明）
• 控えめな背景にはbg-blue-50、主要なアクションにはbg-blue-500を使用します
• 控えめな境界線にはborder-gray-200、より強調する境界線にはborder-gray-300を使用します

ダークテーマを作成する場合は、references/theming-dark-mode.mdを参照してください。16進数による明度の段階、最も暗い色に黒ではなく#111827を使う理由（ハレーション）、影ではなく明度で奥行きを表現する方法を解説しています。コントラスト、フォーカスリング、キーボード操作、スクリーンリーダー対応が対象範囲に含まれる場合は、references/accessibility-depth.mdを参照してください。WCAG 2.1 AAのチェックリストと修正方法を網羅しています。

5. 奥行きと影

中核となる考え方： 影の段階を使って高さを表現します。少し浮かせる要素には小さな影、浮遊感を持たせる要素には大きな影を使います。

効果がある理由： 人の目は影の大きさからページ上の高さを読み取ります。一貫した段階を使うと高さが分かりやすくなり、ユーザーは何が操作可能で、浮遊していて、背景にあるのかを直感的に把握できます。

重要なポイント：

• 小さな影はわずかに浮かせます（ボタン、カード）。大きな影は浮遊感を与えます（モーダル、ドロップダウン）
• 良い影は2つの要素で構成されます。輪郭をはっきりさせるタイトで濃い影と、雰囲気を加える大きく柔らかな影です
• 影を使わずに奥行きを出す方法：上部を明るく、下部を暗くした境界線、控えめなグラデーション、要素の重なり
• 使いすぎないようにします。すべてが浮いていると、何にも奥行きがなくなります。影の色には透明な暗色を使い、不透明なグレーは使いません

製品への応用：

コンテキスト	影のレベル	例
ボタン	shadow-sm（控えめに浮かせる）	表面からわずかに浮き上がります
ドロップダウン	shadow-lg（浮遊）	メニューがコンテンツより明確に上に表示されます
モーダル	shadow-xl（最も高い）	オーバーレイがページから浮き上がります

CSSのパターン：

• shadow-sm：0 1px 2px rgba(0,0,0,0.05)
• shadow-md：0 4px 6px rgba(0,0,0,0.1)
• shadow-lg：0 10px 15px rgba(0,0,0,0.1)
• shadow-xl：0 20px 25px rgba(0,0,0,0.15)

インタラクティブな要素に動きを加える場合は、references/animation-microinteractions.mdを参照してください。継続時間、イージング曲線、読み込み状態、prefers-reduced-motionルールを解説しています。

6. 画像とアイコン

基本概念： 画像は後付けではなく、デザイン要素として扱います。アイコンのサイズを意識的に設定し、オーバーレイを使って画像上のテキストを読みやすくします。

効果がある理由： サイズの不適切なアイコンは不格好に見え、スタイルの整っていない画像は一貫性を損ないます。オーバーレイ、object-fit、角丸などを意識的に取り入れることで、インターフェースの仕上がりが良くなります。

重要なポイント：

• アイコンは用途に応じたサイズにし、線の太さとスタイルが統一されたセットを使います
• 画像を引き伸ばしたり歪めたりしてはいけません。固定のアスペクト比と object-fit: cover を使い、意図的にトリミングします
• 画像上にテキストを重ねる場合は、オーバーレイ（半透明のグラデーション）が必要です
• 空の状態は活用のチャンスです。テキストだけでなく、イラストと明確な CTA を使います

製品への適用例：

コンテキスト	画像／アイコンの手法	例
ヒーロー画像	半透明のグラデーションオーバーレイ	どんな写真の上でもテキストを読みやすくする
アバター	サイズを統一し、角丸にして、イニシャルをフォールバック表示	40px の円形、object-fit cover
空の状態	カスタムイラスト + CTA	「始める」を添えた親しみやすいイラスト

CSS パターン：

• 一貫した表示のため、固定の aspect-ratio と object-fit: cover を使用します
• アイコンのサイズ：インラインは w-4 h-4、ナビゲーションは w-6 h-6、機能アイコンは w-8 h-8
• オーバーレイ：画像上のテキストには bg-gradient-to-t from-black/60 to-transparent を使用します

7. レイアウトと構成

基本概念： すべてを中央揃えにするのは避けます。配置、重なり、強弱の変化を使って、目を引く構成を作ります。

効果がある理由： 左端が揃っていると、各行で視線を戻す位置が固定されるため、内容をスキャンする負担が軽くなります。一方、複数行のテキストを中央揃えにすると、行ごとにその位置が変わり、読む速度が落ちます。

重要なポイント：

• 基本は左揃えにし、中央揃えは短い見出し、ヒーロー、単一アクションの CTA、空の状態に限ります
• カードにすべてを収める必要はありません。画像を端まで広げたり、コンテナに重ねたりします
• リストやフィードでは視覚的な扱いに変化をつけ、一部の項目を目立たせ、ほかは控えめにします
• 配置を使って、関連性のない要素同士に関係性を持たせます

製品への適用例：

コンテキスト	レイアウト戦略	例
ヒーローセクション	テキストを中央揃えにし、余白を広く取る	短い見出し + 補足テキスト + 単一の CTA
ブログフィード	強調する項目に合わせてカードのサイズを変える	最初の記事を大きくし、残りは 2 列のグリッドにする
コンテンツページ	幅を制限し、左揃えにする	テキストを左揃えにした max-w-prose コンテナ

CSS パターン：

• 基本は text-left を使用し、ヒーローや短い見出しに限って text-center を使います
• 特集グリッドには grid grid-cols-3 gap-6、ページコンテナには max-w-4xl mx-auto を使います
• 端まで広がる object-fit: cover の画像を含むカードには overflow-hidden を使います

チャート、表、ダッシュボードのレイアウトについては、チャートの種類の選択、チャートの色の使い方、表の密度、ダッシュボードの構成を解説した references/data-visualization.md を参照してください。

よくある間違い

間違い	問題になる理由	修正方法
「素人っぽく見える」	余白が足りず、幅が制限されていない	余白を増やし、コンテンツの幅を制限します
「平坦に感じる」	奥行きに差がない	控えめなシャドウを使い、セクションに border-bottom を追加します
「テキストが読みにくい」	行の高さが不適切、幅が広すぎる、コントラストが低い	行の高さを上げ、幅を制限し、コントラストを強めます
「すべてが同じに見える」	視覚的な階層がない	主となる要素と副次的な要素で、サイズ、太さ、色に変化をつけます
「ごちゃごちゃしている」	どこも同じ間隔になっている	関連する項目をまとめ、グループ間の間隔を広くします
「色がちぐはぐ」	選択に一貫性がなく、システムがない	彩度を下げ、グレーを増やし、パレットの色数を絞ります
「ボタンが目立たない」	周囲とのコントラストが低い	コントラストを上げ、シャドウを追加します
任意の値を使う	13、17、23 のような px 値が一貫性を損なう	間隔と文字サイズのスケールに従います

簡易診断

あらゆる UI デザインをチェックします。

質問	いいえの場合	対応
目を細めても階層がわかりますか（ぼかしテスト）？	要素同士が競合しています	主要要素と副次要素のコントラストを強めます
グレースケールでも機能しますか？	色に頼りすぎています	サイズ、ウェイト、間隔による階層を強めます
十分な余白がありますか？	おそらくありません。ほとんどのデザインは密集しすぎています	特にグループ間の間隔を広げます
ラベルは値より目立たないようになっていますか？	ラベルがデータと競合しています	ラベルを小さく、薄くするか、小さな大文字にします
間隔は一貫したスケールに沿っていますか？	不規則な間隔は視覚的なノイズになります	4/8/16/24/32/48/64 のみを使用します
テキストの幅は制限されていますか？	行が長いと読者が疲れます	max-w-prose（約 65ch）を適用します
色には十分なコントラストがありますか？	アクセシビリティ上の問題があります	WCAG に準拠しているか確認し、白背景では gray-700 以上を使用します
影は高さに適していますか？	要素が適切でない高さに浮いて見えます	影のスケールを要素の目的に合わせます

さらに読む

ビジュアルの変更前・変更後の例を含む完全なシステムについては、以下をご覧ください。

• 「Refactoring UI」 Adam Wathan と Steve Schoger 著（数百点のビジュアル例を収録した完全版）
• 「The Design of Everyday Things」 Don Norman 著（デザイン思考とユーザビリティの基礎）
• 「Don't Make Me Think」 Steve Krug 著（Refactoring UI を補完するウェブユーザビリティの原則）
• Refactoring UI — リソースや例を掲載した公式サイト

著者について

Tailwind CSS の開発者である Adam Wathan と、そのデザイン言語を手がけたビジュアルデザイナーの Steve Schoger は、体系的で再現可能なデザイン技法を開発者に教えるために Refactoring UI を執筆しました。彼らの手法では、芸術的な才能の代わりに、間隔、タイポグラフィ、色、影の固定スケールといった制約のあるシステムを使い、プロ品質の成果を生み出します。