スマホ UI / UX レビュー 30 チェックリスト — 利用シーンに則しているか
この記事でわかること
Lesson 1-6 でレスポンシブの仕組みと崩れチェックを扱いました。 この Lesson はその発展編、デザインレビューの現場で使う 30 のチェックリスト に特化した実務リファレンスです。 レビュー会議で配布して、業者と一緒にそのまま使える形にしてあります。
1. Lesson 1-6 との位置づけ
本書には、スマホに関する Lesson が 2 つあります。 違いを最初に整理しておきます。
- Lesson 1-6:レスポンシブの「仕組み・崩れチェック」(表示の基礎)
- 本記事(4-4):「デザインレビューで使う実務チェックリスト」(UI / UX 視点)
重複を避け、本記事は 30 項目チェックリスト を中心に据えます。
2. 30 チェックリストの全体像
5 カテゴリ × 各 6 項目で構成しています。
- A:ボタン・タップ領域(6)
- B:フォーム(6)
- C:ヘッダー・ナビ(6)
- D:読みやすさ・情報量(6)
- E:利用シーン(6)
レビュー会議でそのまま使える形式にしています。
テンプレ DL:スマホ UI / UX レビュー 30 チェックリスト(印刷可)(本書のテンプレ集に収録予定)
3. カテゴリ A — ボタン・タップ領域(6 項目)
- A1. CV ボタンが 44 × 44px 以上
- A2. ボタン間隔が指の幅以上(8〜12px)
- A3. リンクテキストが小さすぎない
- A4. CV ボタンがファーストビューで見える(ただし詰め込みすぎない / Lesson 4-2)
- A5. CV ボタンの色がアクセントカラー
- A6. 「クリックエリアが大きすぎて誤タップ」を起こさない(独自視点)
4. カテゴリ B — フォーム(6 項目)
- B1. 入力欄が指で押しやすい(高さ 48px 以上)
- B2. キーボード種別が適切(電話番号は数字、メールはメール用 など)
- B3. 必須 / 任意が明確
- B4. エラーメッセージが分かりやすい(該当箇所・修正方法)
- B5. 送信ボタンが指で押しやすい(タップ領域)
- B6. 確認画面で戻ったら入力が消えない
5. カテゴリ C — ヘッダー・ナビ(6 項目)
- C1. ヘッダー高さが画面の 15% 以下
- C2. ハンバーガーメニューが片手で開ける位置
- C3. グローバルナビが指で押しやすい
- C4. パンくずが小さすぎない
- C5. CV ボタンの配置(ヘッダー内 or 別位置の戦略が明確)
- C6. スクロール時のヘッダー固定が邪魔になっていない
6. カテゴリ D — 読みやすさ・情報量(6 項目)
- D1. 本文 16px 以上
- D2. 行間 1.6〜1.8
- D3. 1 行の文字数が長すぎない(モバイル 25〜35 文字)
- D4. 余白が十分(Lesson 4-3 連動)
- D5. 画像が読み込み遅くない(Core Web Vitals)
- D6. ファーストビューに詰め込みすぎない(Lesson 4-2 連動)
7. カテゴリ E — 利用シーン(6 項目)— 独自視点
E1. 通勤・電車利用シーン
片手で持つ、揺れる、短時間で読む。 この前提でボタン位置や情報量を設計します。
E2. 隙間時間利用シーン
中断・再開、スクロール位置記憶。 数分の隙間で見られて、後で続きから読める構造が必要です。
E3. キッチン・家事中シーン
片手、濡れ手、読み上げ可能、適度な距離。 レシピ系のサイトでは特に重要なシーンです。
E4. 寝る前シーン
暗い部屋(ダークモード対応)、大画面端末。 寝る前にゴロゴロしながら見るシーンでは、明るすぎる画面が不快です。
E5. 屋外・営業先シーン
明るい屋外で見える(コントラスト)、素早く読める。 営業先で資料を見せるなど、外光下で使われるシーンを想定します。
E6. 古い端末・通信遅い環境
最新端末だけでデザインしていないか。 ターゲット層によっては、まだ数年前の端末を使っている層が多いです。
8. スマホ UI 全体の警告 — 4 つの罠
- タップしにくいボタン(A 関連)
- 使えないフォーム(B 関連)
- 重すぎるヘッダー / 差し込み型ロゴ・グローバルナビ・キャンペーンバナー(C 関連)
- 最新端末しか意識していない UI(E6)
9. 業者にチェックリストを渡してレビュー依頼
公開前に、この 30 項目を業者と一緒に確認してください。 自社で実機を触る + 業者の確認結果も貰う(Lesson 1-6 連動)。 不適合項目があれば、シーン視点で再提案を依頼します。