「スマートフォン対応でお願いします」と始まった制作でも、実際の利用場面を聞くと、現場ではタブレットを横向きで使う、社内では小さめのノートPCが多い、古い端末ではなく特定のブラウザ設定が問題になる、と前提が変わることがあります。
私たちも、最初の想定をそのまま仕様にせず、使う人と場所を確認して優先端末を見直したことがあります。逆に、端末名だけを増やすと確認量は膨らみますが、本当に使われる場面の品質が上がるとは限りません。
ここでは、対応表を埋めるためではなく、利用者が目的を完了できる範囲を決めるための端末・ブラウザ確認を整理します。
端末名より先に、誰が・どこで・どう使うかを聞く
同じスマートフォンでも、移動中に片手で見る場合と、店頭で説明を受けながら操作する場合では、必要な文字サイズやボタンの位置が変わります。端末は利用場面と一緒に整理します。
- 個人の端末か、会社や施設から支給される端末か
- 立ったまま、座って、片手で、複数人で見るのか
- 通信が安定した場所か、移動中や屋外か
- 閲覧だけか、長文入力、検索、予約、決済まで行うか
- 社内規定でブラウザや設定が固定されていないか
利用場面が分かれば、画面幅だけでなく、タップ領域、入力のしやすさ、通信失敗時の案内まで確認対象にできます。
「対応する」を、同じ見た目に揃えることだと思わない
端末ごとに数ピクセルまで同じ見た目へ揃えることが、対応の目的ではありません。情報を読める、操作できる、入力内容を失わない、次の行動へ進めることを優先します。
大きな演出や横長の表は、狭い画面では並び方を変える場合があります。ホバーで見せる情報にはタップやキーボードでも到達できる手段を用意します。動きが使えない環境でも、内容と操作が残る形を先に決めます。
検証範囲を、優先・代表・簡易確認に分ける
すべての端末とブラウザを同じ深さで確認することはできません。実際の利用割合、業務上の重要度、機能の複雑さから深さを分けます。
- 優先環境：主要な利用者が使い、フォームなど重要操作を最初から最後まで確認する
- 代表環境：画面幅やブラウザエンジンの違いを代表し、主要ページと操作を確認する
- 簡易確認：利用可能性は低いが、閲覧不能や重大な崩れがないかを見る
- 対象外：対応しない理由と、必要な場合の代替手段を明示する
対応範囲を狭める場合も、単に切り捨てるのではなく、利用状況と代替手段から判断します。
きれいなサンプルではなく、境界の内容を試す
端末差は、トップページだけでは見つかりません。長い見出し、画像なし、表、入力エラー、メニューの最下部、画面回転など、崩れやすい条件を選びます。
- 最長と最短の見出し・本文
- 画像がない、または縦横比が異なる状態
- 入力エラーが複数表示されたフォーム
- 横に広い表、絞り込み、タブ、モーダル
- 文字サイズを拡大した状態
- 低速回線や読み込み途中の状態
手元にない端末は、再現情報を揃えて判断する
制作側に同じ端末がない場合、スクリーンショットだけでは原因を追えません。端末名、OS、ブラウザ、画面の向き、URL、操作手順、発生時刻、毎回起きるかを揃えます。
確認できない環境を「問題なし」とは扱いません。確認した範囲、相手側で確認する範囲、修正後に再確認する人を分け、証跡を残します。
端末・ブラウザ確認のチェックリスト
- 利用者、場所、姿勢、主な操作を確認したか
- 会社や施設で指定される端末・ブラウザがあるか
- 優先、代表、簡易確認、対象外を分けたか
- 見た目ではなく、目的を完了できることを基準にしたか
- 長文、画像なし、エラーなど境界の内容を試したか
- ホバーや動きが使えない場合の代替があるか
- 手元にない環境の再現情報と確認担当を決めたか
- 確認した端末・OS・ブラウザ・日時を残したか
