スマホ対応・UIの基本チェックリスト｜公開前に発注者が自分で確かめたい項目
パソコンでは問題なく見えても、スマホでは押しにくい、読みにくいことがよくあります。専門知識がなくても確認できるスマホ表示とUIの基本チェック項目を、手順と一覧表にまとめました。
デザイン案の確認や公開前のチェックを、会議室の大きなモニターだけで済ませていないでしょうか。多くの業種で、サイトの訪問者の相当な割合がスマホから見ていると言われます。自社の実際の比率はアクセス解析で確認できますが、スマホでの見え方を確認しないまま公開するのは避けたいところです。
スマホで見たときの「押しにくい」「読みにくい」「探しにくい」は、問い合わせの減少に直結します。しかし、こうした問題の多くは専門知識がなくても、実際に触ってみれば気づけるものです。
この記事では、UI（ユーザーインターフェース：ボタンやメニューなど、利用者が画面上で操作する部分）の基本を押さえながら、発注者やWeb担当者が自分で確認できるチェック項目と、効率よく確認する手順を紹介します。
スマホ確認はなぜ実機で行うべきか
パソコンのブラウザでも、画面の幅を狭めればスマホ表示に近い見た目は確認できます。制作者も開発ツールで確認しているはずです。それでも、発注者や担当者が実際のスマホで確認する意味は大きいと言えます。
- 指で操作したときの感覚は、マウス操作では分かりません。ボタンが小さい、隣のリンクを誤って押してしまう、といった問題は実機で初めて気づきます。
- 片手で持ったときの使い勝手も、実機でないと確かめられません。
- 通信環境による表示の遅さは、社内の高速な回線では見落としがちです。
- 文字の読みやすさは、画面の明るさや屋外の光でも変わります。
可能であれば、iPhoneとAndroidの両方、画面の小さい機種と大きい機種で確認すると安心です。社内で使っているスマホを数台集めるだけでも、十分な確認ができます。
基本チェックリスト
次の表は、公開前に確認したい基本項目です。印刷して、チェックしながら使ってください。
| 分類 | 確認項目 | 見るポイント |
|---|---|---|
| 文字 | 本文の文字が小さすぎないか | 拡大しなくても無理なく読めるか |
| 文字 | 1行が長すぎたり、短すぎたりしないか | 不自然な位置で改行されていないか |
| ボタン | 指で押しやすい大きさか | 押し間違いが起きないか、ボタン同士が近すぎないか |
| ボタン | 押せる部分と押せない部分の区別がつくか | ただの文字や画像をボタンと誤解しないか |
| メニュー | メニューの開き方が分かるか | メニューを開いて目的のページにたどり着けるか |
| 表示 | 横にはみ出す要素がないか | 画面が左右に揺れたり、横スクロールが出たりしないか |
| 表示 | 表や画像が崩れていないか | 表が読める形で表示されているか、画像の重要な部分が切れていないか |
| 表示 | 表示が遅すぎないか | モバイル回線でも待たされすぎないか |
| 導線 | 問い合わせ・電話ボタンが見つけやすいか | どのページからも迷わずたどり着けるか |
| 入力 | フォームが入力しやすいか | 入力項目が多すぎないか、数字の欄で数字キーボードが出るか |
| 入力 | エラー表示が分かりやすいか | どこをどう直せばよいかが分かるか |
色の見やすさや画像の代替テキストなど、より幅広い人にとっての使いやすさは、アクセシビリティの観点で別途確認しましょう。
効率よく確認する手順
チェック項目を上から順に見るだけでは、実際の使われ方に沿った問題を見落としがちです。次のように、訪問者になりきって目的を達成する流れで確認するのがおすすめです。
- 確認するシナリオを決める：「初めて訪れた人が、サービス内容を確認して問い合わせる」「既存顧客が電話番号を探す」など、主な利用場面を3つほど書き出します。
- シナリオどおりに操作する：トップページから実際に操作して、目的を達成できるか試します。迷った箇所、指が止まった箇所をメモします。
- チェックリストで補う：シナリオで通らなかったページも含め、上の表の項目を確認します。
- スクリーンショットで記録する：問題を見つけたら、画面を保存して、機種名とともに記録します。
- 社外の人にも触ってもらう：サイトを初めて見る家族や知人に、シナリオだけ伝えて操作してもらいます。説明なしで迷うかどうかを横で観察します。
- まとめて制作者に伝える：問題点を一覧にし、重要度をつけて共有します。
5つ目は特に効果的です。作った側や社内の人は、どこに何があるかを知っているため、迷う体験ができません。初見の人が数分操作する様子を見るだけで、多くの気づきが得られます。
AIを確認作業に活用する方法
生成AIは、確認作業の準備や記録の整理に役立ちます。例えば次のような使い方があります。
- 「当社は住宅リフォームの会社です。スマホでサイトを訪れる人の代表的な利用場面を5つ挙げ、それぞれで確認すべき操作の流れを手順にしてください。」
- 「スマホで撮ったこの画面のスクリーンショットを見て、文字の読みやすさ、ボタンの押しやすさ、情報の優先順位の観点で気になる点を挙げてください。」
- 「以下は確認作業で見つかった問題点のメモです。制作会社に伝えるために、ページ名・問題・期待する状態・重要度の表に整理してください。」
画像を読み取れるAIであれば、スクリーンショットを見せて意見を求めることもできます。ただし、AIの指摘は実際の操作感に基づくものではないため、最終的には人が実機で確かめて判断してください。画面に顧客情報などが映り込んでいないかにも注意しましょう。
制作者への伝え方
問題を見つけたら、制作者が再現しやすい形で伝えることが大切です。「スマホで見にくい」だけでは、どこをどう直せばよいかが伝わりません。
- どの機種、どのブラウザで見たか
- どのページの、どの部分か（スクリーンショットに印をつける）
- 何をしようとして、何が起きたか
- どうなっていれば問題ないと考えるか
この4点をそろえて伝えれば、修正のやり取りが少なくて済みます。また、すべてを公開前に直す必要はありません。問い合わせや購入に関わる問題を優先し、それ以外は公開後の改善として計画するのも現実的な判断です。
まとめ
スマホでの見え方と使いやすさは、専門知識がなくても、実機で目的に沿って操作すれば多くの問題に気づけます。シナリオで操作し、チェックリストで補い、初見の人にも触ってもらう。この流れを公開前の定番にしましょう。
次にやることとして、まずは自社サイト（または確認中のデザイン）で、自分のスマホから「トップページを開いて問い合わせフォームを送信する直前まで進む」操作をしてみてください。途中で一度でも迷った箇所があれば、それが最初の改善ポイントです。