スマホ 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)

レビュー会議でそのまま使える形式にしています。

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 つの罠

1. タップしにくいボタン(A 関連)
2. 使えないフォーム(B 関連)
3. 重すぎるヘッダー / 差し込み型ロゴ・グローバルナビ・キャンペーンバナー(C 関連)
4. 最新端末しか意識していない UI(E6)

9. 業者にチェックリストを渡してレビュー依頼

公開前に、この 30 項目を業者と一緒に確認しておくと安心です。 自社で実機を触りつつ、業者の確認結果ももらう形がおすすめです(Lesson 1-6 連動)。 不適合の項目があれば、シーン視点での再提案を依頼してみましょう。

30 項目は一度に全部を完璧にする必要はありません。 まずは A・B・C のような基本のカテゴリから一つずつ実機で触って確かめていけば、スマホでの使い心地は着実に良くなっていきます。 「誰が、いつ、どこで使うか」という利用シーンの視点を持っているだけで、レビューの精度はぐっと上がります。 チェックリストを片手に、自社サイトのスマホ体験を少しずつ磨いていきましょう。