感覚ではなく、論理でデザインする。
UIデザインの意思決定の多くは、明確で論理的なガイドラインに導かれる。THE PERSONのデジタルプロダクトに一貫性と品質を保つために、スペーシング・コントラスト・階層・レイアウトのルールを定義する。これらは「正解を出す」ためではなく、「迷わず進む」ための道標。
関連性の高い要素は近く、低い要素は遠く。
余白は「何もない場所」ではなく、関係性を伝えるデザイン要素。8ptグリッドをベースに、要素間の距離で情報のまとまりを表現する。
スペースが不規則 — 13px / 27px / 6px
8の倍数で統一 — 同グループ8px / 別グループ24px
8ptグリッドは「迷わないための最小ルール」。すべてのマージン・パディングを8の倍数（4ptは微調整用）に揃えることで、画面全体に秩序が生まれる。同じグループの要素間は狭く、別グループとの間は広く取る。
- 関連する要素同士は 8px で近づける
- グループの切れ目には 24px 以上を確保
- 端数（13px、27px など）が出たら 8pt グリッドに丸める
不要なコンテナは削除する。
スペースやタイポグラフィだけでグループ化できるなら、ボーダーやカードで囲む必要はない。余計な線を減らすことで、画面がクリーンになる。
枠の中に枠 — 情報が埋もれる
余白とラベルで十分グループ化できる
テキストのコントラスト比は 4.5:1 以上。
小さいテキスト（18px未満）は 4.5:1 以上、大きいテキスト（18px太字以上 / 24px標準以上）は 3:1 以上を確保する。WCAG 2.1 レベル AA 準拠。
注意: ブランドオレンジ #E2792E は白背景上の小テキストには使わない。小テキストには #1C1C1C（Black）を使用し、オレンジは見出し・ボタン・アクセントに限定する。
UIコンポーネントのコントラスト比は 3:1 以上。
ボタン、入力フォーム、チェックボックスなどのUIコンポーネントは、背景に対して最低 3:1 のコントラスト比を確保する。
ボーダー・ボタンのコントラストが不足
ボーダー・ボタンとも 3:1 以上を確保
色だけを情報の手がかりにしない。
色覚特性のあるユーザーにも情報が伝わるよう、色以外の視覚的手がかり（アイコン、下線、塗りつぶし、テキストラベル）を併用する。
色のみで選択状態を表現
下線で選択状態を補強
プライマリボタンは画面に1つだけ。
最も重要なアクションだけにプライマリ（塗り）ボタンを使う。それ以外はセカンダリ（枠線）またはターシャリ（テキスト）で階層を作る。色ではなく「重み」で視線を導く。
全部プライマリ — どれが重要か分からない
視線が自然に「予約する」へ向かう
タップターゲットは最低 48 × 48pt。
指で操作するモバイルUIでは、ボタンやリンクのタップ領域を最低48×48pt確保する。ボタン間の余白は最低8pt。WCAG推奨の44ptより少し大きく取ることで、誤タップを防ぐ。
高さ 28px / 間隔 4px — 指で押しにくい
高さ 48px / 間隔 8px — 指で確実にタップできる
重要なアクションは隠さない。
スペースに余裕があるなら、重要な操作をメニューやハンバーガーの中に隠さない。見える場所にあるボタンは、存在しないボタンより確実にタップされる。
トレーナー: 田中
「予約変更」が ⋯ の中に隠れている
トレーナー: 田中
アクションが常に見える
アライメントは1種類に統一する。
左揃え・中央揃え・右揃えを1画面内で混在させない。目線の移動が増え、認知負荷が上がる。THE PERSONでは左揃えを基本とし、ヒーロー領域のみ中央揃えを許容する。
一歩一歩の変化を大切にします。
中央 → 左 → 右 → 中央 → 左 — 目線が迷走
一歩一歩の変化を大切にします。
すべて左揃え — 視線が自然に下へ流れる
大きい文字ほど、文字間を詰める。
フォントサイズが大きくなるほど文字間が広く感じられる。見出しや大きなテキストでは letter-spacing を 0 またはマイナスに調整し、本文はデフォルトのまま保つ。
36px + letter-spacing: 4px — 間延びして見える
36px + letter-spacing: -1px — 引き締まって力強い
フォントウェイトは Regular と Bold の2つだけ。
UIで使うウェイトは Regular（400）と Bold（700）の2つに絞る。Light・Medium・Black を混在させると画面が雑然とし、階層が不明確になる。THE PERSONでは Gotham Book + Bold、Noto Sans JP Regular + Bold を使用する。
4つのウェイト混在 — 階層が不明確
Bold + Regular の2つで明快な階層
アイコンとテキストの視覚的な重みを揃える。
アイコンが目立ちすぎる、またはテキストに負けている — どちらもバランスが悪い。アイコンとテキストが同じ「声量」で語るように、サイズ・色・太さを調整する。
スケジュール確認
プロフィール設定
達成履歴
アイコンが強く、テキストが弱い
スケジュール確認
プロフィール設定
達成履歴
アイコンを小さく・薄くし、テキストと均衡
同じ要素は同じ見た目で。例外を作らない。
ボタンの角丸、カードの影、アイコンのスタイル — 一度決めたルールはすべての画面で統一する。見た目が揃っていれば、ユーザーは「次に何が起こるか」を予測できる。
角丸が 4px / 16px / 50% — ルールが不明
すべて 8px — 一貫した印象
小部品
ボタン
カード
モーダル
アバター
ミニマルとシンプルを混同しない。
「削ること」が目的ではない。ユーザーが迷わず目的を達成できることがゴール。必要な情報やディテールまで削ると、美しいが使えないUIになる。THE PERSONの「寄り添い」は、ユーザーが困らないだけの情報を丁寧に残すこと。
何の予約？ 誰と？ どこで？ が不明
シンプルだが、必要な情報はすべてある
01 LOGICAL SPACING
8ptグリッドで余白を制御する。関連する要素は近く、異なるグループは遠く。距離が関係性を語る。
02 ACCESSIBLE CONTRAST
テキスト 4.5:1、UIコンポーネント 3:1。色だけに頼らず、形・線・テキストで情報を補う。誰もが使えるUIへ。
03 CLEAR HIERARCHY
ボタンは3段階。ウェイトは2種類。アライメントは1種類。制約が明快な階層を生み、ユーザーの迷いを減らす。
04 THOUGHTFUL SIMPLICITY
削ることではなく、迷わせないこと。必要な情報は残し、不要な装飾だけを取り除く。THE PERSONの「寄り添い」をUIでも。