UI/UX上級

第1回

UXデザインの基礎・リサーチ

UXとUIの違い

項目	UI（User Interface）	UX（User Experience）
対象	見た目・操作要素	サービス全体の体験
焦点	ボタン・フォーム・色・フォント	感情・満足度・使いやすさ
範囲	画面内の要素	タッチポイント全体（認知〜購買〜after）

ユーザー中心設計（UCD）

1. 調査 — ユーザーインタビュー・アンケート・観察でニーズを把握
2. 分析 — アフィニティダイアグラムで課題を整理・カテゴリ化
3. 設計 — ペルソナ・カスタマージャーニーマップ・ワイヤーフレームを作成
4. 検証 — プロトタイプでユーザーテストを実施し、改善する

ユーザーインタビューの進め方

• インタビューは5人程度で主要な課題の80%が発見できる（ニールセン理論）
• オープンエンドな質問（「どのように〜しますか？」）で深掘りする
• 誘導質問（「〜は便利だと思いますか？」）を避ける
• 「なぜ？」を5回繰り返して根本的な課題を見つける

第2回

情報アーキテクチャ・IA設計

カードソーティングとナビゲーション設計

カードソーティングはユーザーにコンテンツ名が書かれたカードを渡し、自由にグループ分けしてもらう調査手法です。ユーザーのメンタルモデルに合ったナビゲーション構造を設計するために使います。

パターン	説明	適したサイト
グローバルナビ	全ページ共通のメインメニュー	コーポレート・EC
ハンバーガーメニュー	アイコンタップで展開するモバイル向けナビ	モバイルサイト
パンくずリスト	現在地を階層で表示。SEOにも有効	深い階層のサイト
タブナビ	コンテンツを切り替えるタブ型ナビ	ダッシュボード・アプリ

第3回

UIパターン・デザインシステム

UIパターンライブラリ

アクセシビリティ（a11y）

• コントラスト比 — 本文テキストと背景のコントラスト比は4.5:1以上（WCAG AA基準）
• キーボード操作 — マウスなしでも全機能をTabキーで操作できること
• alt属性 — すべての意味のある画像にalt属性で説明テキストを付与

第4回

ユーザビリティテスト・改善

ユーザビリティテストの進め方

1. テスト目的を明確にする（「カートに商品を追加できるか」など）
2. テスト対象者を募集（ターゲットユーザーに近い人5名程度）
3. タスクシナリオを作成（「このサイトでXXXを購入してください」）
4. テスト実施・録画（Zoomの録画・画面録画・発話思考法）
5. 結果を集計・分析・改善提案をまとめる

ヒューリスティック評価（ニールセンの原則）

原則	内容
システム状態の可視性	今何が起きているかをユーザーに常にフィードバックする
エラーの防止	エラーが起きにくい設計をする（入力制約・確認ダイアログ）
柔軟性と効率	初心者向けと上級者向けの操作を両方提供する
美的で最小限のデザイン	不要な情報・要素は排除する