📚 ナレッジベース
02-06_UI-UX設計
最終更新 2026年08月25日 ／ 21_ナレッジベース/マニュアル_ナレッジ/制作部署/02-06_UI-UX設計.md
出典: 制作部署マニュアル UI/UX設計（自動ミラー・正本は /Users/oogushiyuuki/manual-terasu）
UI と UX の違い
- UI（User Interface）：見た目・操作面（ボタン・フォーム等）
- UX（User Experience）：体験全体（ストレスなく目的達成できるか）
→ UIは「目に見える部分」、UXは「目的達成までの全体感」。両方大事。
ボタンの設計
階層を明確に
| 種類 | 用途 | スタイル |
|---|---|---|
| プライマリ | 主要アクション（購入・登録・問合せ） | ブランド色 / ベタ塗り / 大きめ |
| セカンダリ | 補助アクション（詳細・キャンセル） | 枠線のみ / グレー |
| テキストリンク | 軽い遷移（ヘルプ・規約） | 下線のみ / 色のみ |
→ 1ページに大きいプライマリは1個まで。複数あると視線が分散。
ボタンのサイズ
| 状態 | サイズ |
|---|---|
| 最小タップ範囲 | 44×44px（iOS推奨）/ 48×48px（Android推奨） |
| 推奨パディング | 上下12-16px / 左右24-32px |
| フォントサイズ | 14-16px、太字 |
| 角丸 | 4-8px（モダン）/ 999px（カプセル型） |
ホバー・押下状態
- hover: 背景色がわずかに変化（暗くor明るく10-15%）or 影が出る
- active: わずかに沈む（transform: translateY(1px)）or 暗くなる
- disabled: 透明度50%、カーソル禁止マーク
.btn {
background: var(--y);
color: #000;
padding: 14px 28px;
border-radius: 6px;
font-weight: 700;
transition: all .15s ease;
}
.btn:hover { background: var(--y-soft); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
フォーム設計の原則
入力項目を最小化
- 入力項目1個増えると CVR が10%下がる（業界データ）
- 必須項目だけにする
- 後で聞ける項目は後で
良いフォーム例（問い合わせ）
お名前* : [______]
会社名 : [______]
メール* : [______]
電話番号 : [______]
ご相談内容: [____________]
[____________]
[____________]
[送信する]
→ 必須は名前とメールのみ、電話は任意。
NG例
お名前* / 会社名* / 役職* / 電話* / メール* / 住所* / 興味のあるサービス（複数選択）* / お問い合わせ内容* / どこで知った* / ...
→ 入力前に離脱される。
フォームのUIポイント
| 要素 | ポイント |
|---|---|
| ラベル | 入力欄の上に配置（プレースホルダ内ラベルはNG） |
| 必須マーク | * or「必須」赤色で明示 |
| プレースホルダ | 入力例「山田 太郎」「example@gmail.com」 |
| エラー表示 | 入力欄の真下に赤字で具体的に |
| 送信ボタン | 「送信」じゃなく「無料相談を申し込む」等 |
| 完了画面 | 「次に何が起こるか」を明示 |
ナビゲーションの設計
上部ナビゲーション
- ロゴ（左）+ メニュー（中央 or 右）+ CTA（右端）
- メニュー項目は5-7個まで
- 多いなら「ドロップダウン」で整理
階層が深い場合：パンくずリスト
ホーム > サービス > Web制作 > LP制作
→ 現在位置がわかる + SEOにも効く
モバイル：ハンバーガーメニュー
- 右上に三本線アイコン
- タップで全画面メニュー展開
- 閉じる×ボタン明示
- 主要CTAは展開メニュー内にも置く
サイドナビ（管理画面・ドキュメント）
- 左固定が標準
- 現在地ハイライト
- 階層は最大3レベルまで
ホバー・フィードバックの基本
ユーザーが「操作可能」と分かるための視覚信号：
| 要素 | ホバー時の反応 |
|---|---|
| ボタン | 色変化 + わずかに浮く（影） |
| リンク | 下線または色変化 |
| カード | 影が深くなる、border が表示 |
| 画像 | わずかに拡大（scale 1.02）or オーバーレイ |
| アイコン | 色変化 |
→ 「クリックできるよ」を0.15秒〜0.3秒のトランジションで伝える。
* {
transition: all .15s ease;
}
ローディング・スケルトンUI
ページ読み込み中の演出：
ローディングスピナー（昔）
[ぐるぐる]
→ 待たされてる感が強い。最近は避ける傾向。
スケルトンUI（モダン）
■■■■■■■ ← タイトル風
■■■■■■■■■■■■ ← 本文風
■■■■■■■■ ← 本文風
→ コンテンツの「形」を先に見せて、流し込みで完成。体感速度UP。
プログレスバー
- ファイルアップロード等は％表示
- 残り時間が見えると安心
マイクロインタラクション
ちょっとした動きで体験を豊かにする：
| 場面 | インタラクション例 |
|---|---|
| いいねボタン | タップで色変化＋ハート飛ぶ |
| フォーム送信成功 | チェックマークがフェードイン |
| エラー | 入力欄が左右に振動 |
| メニュー開閉 | スライドアウト・フェード |
| スクロール | 要素がフェード・スライドで出現 |
→ やりすぎNG。目的達成を邪魔しない範囲で。
アコーディオン（FAQ等の畳む式）
仕様
- クリックで開閉
- 開いてる時：
▲or−アイコン - 閉じてる時：
▼or+アイコン - アニメーション：0.2-0.3秒の高さ変化
使い時
- FAQ
- 仕様の詳細（長文を畳む）
- スマホでセクションを圧縮
使ってはいけない場面
- メインコンテンツ（隠すべきでない情報）
- 重要なCTA直前
モーダル（ポップアップ）
使い時
- 確認ダイアログ（削除前の確認等）
- 画像の拡大表示
- 設定画面
鉄則
- 必ず閉じるボタン×を右上に設置
- 背景クリックでも閉じる
- ESCキーで閉じる
- 開いた時はスクロールロック
NG使い方
- 訪問直後のメルマガ登録モーダル（離脱率UP）
- 閉じるボタンが小さい・見つけにくい
- 連続で複数モーダル表示
ナビゲーション・パターン
スティッキーヘッダー（追従ヘッダー）
- 上部ヘッダーがスクロールしても画面上部に残る
- メリット：いつでもナビ可能、CTAが常時見える
- 注意：スマホで画面占有しすぎない・透過 or 半透明にする
フッターナビゲーション
- 全ページ共通の網羅的リンク
- カテゴリ別に整理
- SNS・著作権・連絡先・サイトマップ
エラー・成功フィードバック
4種類のメッセージ
| 種類 | 色 | 使い時 |
|---|---|---|
| エラー | 赤 | 入力ミス・通信失敗 |
| 警告 | 黄/オレンジ | 注意喚起・確認 |
| 成功 | 緑 | 完了・送信成功 |
| 情報 | 青 | 補足説明・お知らせ |
トースト通知
- 画面下 or 右上に一時表示（3-5秒で消える）
- 「保存しました」「コピーしました」等の小さな成功通知
モバイルUXの鉄則
| 項目 | ルール |
|---|---|
| タップ範囲 | 44×44px以上 |
| 文字サイズ | 14px以上（本文16px推奨） |
| ボタン間隔 | 8px以上開ける |
| 横スクロール | 絶対NG |
| 横向き対応 | 1カラム→2カラムに対応 |
| キーボード考慮 | フォームが隠れない |
| 重い動画・画像 | モバイル回線で読めない（軽量化必須） |
アクセシビリティ視点のUI
- すべてのインタラクティブ要素はキーボードのTabで移動可能
- フォーカス時のアウトライン表示（青枠等）を消さない
- 色だけで情報を伝えない（アイコン・テキストも併用）
- 読み上げソフト対応（aria-label等）
→ 詳細はチャプター10「アクセシビリティ」で。
UI/UX NG
| NG | 何が悪い |
|---|---|
| ボタンがリンクと区別つかない | 操作可能性が不明 |
| フォーム必須項目10個以上 | 離脱激増 |
| エラーメッセージが「エラーです」のみ | 何を直せば良いか分からない |
| ホバー時の変化なし | クリック可能と気づかない |
| モーダルの閉じ方が分からない | 操作不能 |
| スマホでタップ範囲30px以下 | 押せない・押し間違う |
| ローディングのフィードバックなし | 「壊れた？」と思われる |
チェックリスト：UI/UX完成度
- [ ] ボタンの階層（プライマリ・セカンダリ）が明確
- [ ] 全てのボタンに hover/active 状態がある
- [ ] フォーム必須項目が最小化されてる
- [ ] エラーメッセージが具体的
- [ ] モバイルでタップ範囲44px以上
- [ ] ローディングのフィードバックある
- [ ] ナビが5-7項目以内
- [ ] パンくずリスト or サイドナビで現在地が分かる
- [ ] フォーム完了後の次のアクション案内ある
- [ ] エラー・成功メッセージの色分け統一
参考：UI/UXが秀逸なサイト
| サイト | 学べる点 |
|---|---|
| Linear | 美しいUIインタラクションの教科書 |
| Stripe | フォーム設計の極み |
| Vercel | ダッシュボードUI |
| Notion | エディタUI |
| GitHub | 機能多いサービスのUI整理 |