スマホ UI/UX の 30 項目チェックリスト — 利用シーンに合っているかで見る
この記事でわかること
- デザインレビューでそのまま使える 30 項目のチェックリスト
- スマホ UI でとくに気をつけたい 4 つの罠
- 「ボタンは大きければいい」がなぜ罠になるのか
- スマホ UX の核心「利用シーンに合っているか」という視点
第1章 Lesson 6 でレスポンシブの仕組みと崩れチェックを扱いました。 このページはその発展編、デザインレビューの現場で使う 30 のチェックリスト に特化した実務リファレンスです。 レビュー会議で配布して、業者と一緒にそのまま使える形にしてあります。
1. 第1章 Lesson 6 との位置づけ
本書には、スマホに関する Lesson が 2 つあります。 違いを最初に整理しておきます。
- 第1章 Lesson 6：レスポンシブの「仕組み・崩れチェック」(表示の基礎)
- このページ(第4章 Lesson 4)：「デザインレビューで使う実務チェックリスト」(UI / UX 視点)
重複を避け、このページは 30 項目チェックリスト を中心に据えます。
2. 30 チェックリストの全体像
5 カテゴリ × 各 6 項目で構成しています。
使い方はシンプルです。実機(自分のスマホ)を触りながら、1 項目ずつ ○ × を付けていく だけ。× が付いた項目は、利用シーンの視点を添えて業者に再提案を依頼します。
3. カテゴリ A — ボタン・タップ領域(6 項目)
利用シーンで見るポイント：通勤中や片手操作では、ボタンの小ささ・近さが誤タップにつながります。指で正確に押せるかを実機で確かめます。 数値の目安は タップ領域 44 × 44px 以上(px＝画面上の点の単位。指先が触れる大きさ)、ボタン間隔 8〜12px(隣を誤って押さない幅)です。
- A1. CV(問い合わせ・購入などの成果)ボタンが 44 × 44px 以上
- A2. ボタン間隔が指の幅以上(8〜12px)
- A3. リンクテキストが小さすぎない
- A4. CV ボタンがファーストビュー(開いた直後、スクロールせず見える範囲)で見える(ただし詰め込みすぎには注意)
- A5. CV ボタンの色がアクセントカラー(周囲と区別しやすい目立たせ色)
- A6. 「クリックエリアが大きすぎて誤タップ」を起こさない
4. カテゴリ B — フォーム(6 項目)
利用シーンで見るポイント：外出先での入力は、長い項目や入力消失が大きなストレスになります。少ない手数で、迷わず送信まで進めるかを見ます。 数値の目安は 入力欄の高さ 48px 以上(指で正確に押せる高さ)です。
- B1. 入力欄が指で押しやすい(高さ 48px 以上)
- B2. キーボード種別が適切(電話番号は数字、メールはメール用 など)
- B3. 必須 / 任意が明確
- B4. エラーメッセージが分かりやすい(該当箇所・修正方法)
- B5. 送信ボタンが指で押しやすい(タップ領域)
- B6. 確認画面で戻ったら入力が消えない
5. カテゴリ C — ヘッダー・ナビ(6 項目)
利用シーンで見るポイント：ヘッダーは常に見える便利さの反面、スマホでは表示領域を奪います。本文や CV ボタンが隠れていないかを見ます。 目安は ヘッダー高さが画面の 15% 以下。これを超えると、最初の画面で本文がほとんど見えません。
- C1. ヘッダー高さが画面の 15% 以下
- C2. ハンバーガーメニュー(三本線で開閉する格納メニュー)が片手で開ける位置
- C3. グローバルナビが指で押しやすい
- C4. パンくず(現在地を示すリンク)が小さすぎない
- C5. CV ボタンの配置(ヘッダー内 or 別位置の戦略が明確)
- C6. スクロール時のヘッダー固定が邪魔になっていない
6. カテゴリ D — 読みやすさ・情報量(6 項目)
利用シーンで見るポイント：屋外・寝る前・隙間時間では、文字サイズと情報量が読み進めやすさを左右します。スマホで実際に読んで確かめます。 数値の目安は 本文 16px 以上(スマホで無理なく読める最小サイズ)、行間は文字サイズの 1.6〜1.8 倍(行が詰まって読みにくくならない高さ)、1 行 25〜35 文字(視線が迷子にならない長さ)です。
- D1. 本文 16px 以上
- D2. 行間 1.6〜1.8
- D3. 1 行の文字数が長すぎない(モバイル 25〜35 文字)
- D4. 余白が十分に取られている
- D5. 画像の読み込みが遅くない
- D6. ファーストビューに詰め込みすぎていない
7. カテゴリ E — 利用シーン(6 項目・本書の独自視点)
E1. 通勤・電車利用シーン
片手で持つ、揺れる、短時間で読む。 この前提でボタン位置や情報量を設計します。
E2. 隙間時間利用シーン
中断・再開、スクロール位置記憶。 数分の隙間で見られて、後で続きから読める構造が必要です。
E3. キッチン・家事中シーン
片手、濡れ手、読み上げ可能、適度な距離。 レシピ系のサイトでは特に重要なシーンです。
E4. 寝る前シーン
暗い部屋(ダークモード＝暗い配色表示への対応)、大画面端末。 寝る前に横になって見るシーンでは、明るすぎる画面が不快になります。
E5. 屋外・営業先シーン
明るい屋外で見える(コントラスト)、素早く読める。 営業先で資料を見せるなど、外光下で使われるシーンを想定します。
E6. 古い端末・通信遅い環境
最新端末だけでデザインしていないか。 ターゲット層によっては、まだ数年前の端末を使っている層が多いです。
8. 特に起きやすい 4 つの罠 — NG例と修正依頼文
30 項目のなかでも、とくに起きやすいのが次の 4 つです。NG例と、業者にそのまま渡せる依頼文をセットにしました。
| 罠 | NG例 | 業者への修正依頼文 |
|---|---|---|
| タップしにくいボタン | ボタンが小さく、隣と近くて誤タップする | 「主要ボタンを 44px 以上に、間隔も広げてください」 |
| 使えないフォーム | 電話番号欄で文字キーボードが出る／戻ると入力が消える | 「入力欄ごとに適切なキーボードを出し、戻っても入力が残るようにしてください」 |
| 画面を圧迫するヘッダー | 固定ヘッダーで画面の 1/3 が隠れ、本文が見えない | 「スマホ時はヘッダーの高さを抑えるか、固定を外してください」 |
| 最新端末しか意識しない UI | 小さめの端末や数年前の端末でレイアウトが崩れる | 「小さめ端末・数年前の端末でも崩れないか確認してください」 |
9. 業者にチェックリストを渡してレビュー依頼
公開前に、この 30 項目を業者と一緒に確認しておくと安心です。 自社で実機を触りつつ、業者からも確認結果をもらう二重チェックの形がおすすめです。 合っていない項目があれば、利用シーンの視点を添えて再提案を依頼してみましょう。
30 項目は一度に全部を完璧にする必要はありません。 まずは A・B・C のような基本のカテゴリから一つずつ実機で触って確かめていけば、スマホでの使い心地は着実に良くなっていきます。 「誰が、いつ、どこで使うか」という利用シーンの視点を持っているだけで、レビューの精度はぐっと上がります。 チェックリストを片手に、自社サイトのスマホ体験を少しずつ磨いていきましょう。