web-interface-design

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

概要

デザインは主要なものと副次的なものを分けるためにあります。ユーザーは、重要なものをすぐに認識できる必要があります。優れたインターフェースデザインは目立ちません。ユーザーは、インターフェースを意識することなく目的を達成できます。

このスキルでは、分野別のリファレンスファイルを使います。タスクに必要なものだけを読み込んでください。

リファレンスファイル一覧

タスク	読み込むリファレンス
フォントサイズ、行間、見出しの階層、垂直方向のリズム	references/typography.md
入力フィールド、バリデーション、チェックボックス、ラジオボタン、セレクト、テキストエリア	references/forms-and-inputs.md
ボタンの階層、サイズ、状態、CTA、ゴーストボタン	references/buttons.md
カラーパレット、ダークモード、色合い・濃淡、状態色	references/color-systems.md
ナビゲーション、カード、タブ、アコーディオン、モーダル、テーブル、トースト	references/ui-components.md
グリッド、間隔のスケール、レスポンシブパターン、余白	references/layout-and-spacing.md
注目を集める手法、階層の原則、アクションピラミッド	references/visual-hierarchy.md
コントラスト比、フォーカス状態、スクリーンリーダー、WCAG	references/accessibility.md
CSS の実装パターン、変数、一般的なスタイル	references/css-patterns.md

クイック判断：どのリファレンスを使うか？

What's the problem?
├─ Text hard to read, spacing feels off → typography.md
├─ Form not working well, validation issues → forms-and-inputs.md
├─ Users don't know what to click → buttons.md OR visual-hierarchy.md
├─ Colors look wrong, dark mode broken → color-systems.md
├─ Need nav/cards/tabs/modals/tables → ui-components.md
├─ Spacing inconsistent, layout cramped → layout-and-spacing.md
├─ Everything competes for attention → visual-hierarchy.md
├─ Accessibility audit or contrast issues → accessibility.md
└─ Need CSS implementation → css-patterns.md

汎用クイックリファレンス

間隔のスケール（4px を基準）

4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96

タイポグラフィの基本

• 本文：16px、行の高さ 1.5
• 見出しと本文の比率：最大 1:3（16px の本文に対して見出しは 48px）
• 段落間隔：行の高さ ÷ 1.5

タッチターゲット

• 最小：44×44px
• 推奨：48×48px

コントラストの最低基準（WCAG）

• 通常のテキスト：4.5:1
• 大きなテキスト（18px 以上、または太字の 14px 以上）：3:1
• UI コンポーネント：3:1

ボタンの階層

レベル	用途	表示スタイル
プライマリ	メインアクション（1 画面につき 1 つ）	ベタ塗り、高コントラスト
セカンダリ	代替アクション	アウトラインまたは控えめな塗り
ターシャリ	優先度の低いアクション	テキストのみ、またはゴースト

ダークモードの基本

• 背景：#121212（純粋な黒ではありません）
• テキスト：#E0E0E0（純粋な白ではありません）
• 色の彩度を下げる

よくある間違いのチェックリスト

• 1 画面にプライマリボタンが複数ある
• プレースホルダーを唯一のラベルとして使っている
• 純粋な黒に純粋な白を組み合わせている
• 細い、または軽いフォントウェイトを使っている
• 色だけでエラーを示している
• 中央揃えの長いテキストがある
• 間隔の値に一貫性がない

デザインレビュー手順

1. 階層：主要なアクションは明確ですか？何が重要か分かりますか？
2. 読みやすさ：テキストのコントラストは適切ですか？行の長さは適切ですか（45〜75 文字）？
3. フォーム：ラベルはフィールドの上にありますか？タッチターゲットは 44px 以上ですか？役立つエラーメッセージがありますか？
4. 間隔：スケールに一貫性がありますか？要素の周囲に十分な余白がありますか？
5. アクセシビリティ：色だけを唯一の手掛かりにしていませんか？フォーカス状態は見えますか？

このスキルを使わない場合

• 純粋なビジュアルブランディング／アイデンティティの制作
• マーケティングコピーの検討
• バックエンドアーキテクチャ
• モバイルネイティブのパターン（iOS／Android では異なります）

出典

• Aleksei Baranov（Imperavi）著『Web Interface Handbook』
• Imperavi 著『User Interface Typography』
• Wathan と Schoger 著『Refactoring UI』
• WCAG 2.1 アクセシビリティガイドライン