スマホで見づらいサイトにしないために｜文字・ボタン・フォームの確認ポイント

パソコンで見るときれいなページでも、スマホで開くと文字が重なったり、ボタンが押しにくかったりすることがあります。

スマホ向けの確認は、「画面に収まっているか」だけではありません。読む、押す、入力する、という一連の操作を、利用者の立場で試してみましょう。

まずは、文字と写真を読める状態にする

架空の体操教室のページを例に考えてみます。保護者がスマホで対象年齢を確認し、体験申込みへ進む場面です。

• 文字が背景と重なって、読みにくくなっていないか。
• 文章が横にはみ出し、何度も横スクロールしなくてよいか。
• 写真を優先するあまり、対象年齢や費用の説明が隠れていないか。
• 画面を拡大しても、内容が読めるか。

文章を画像だけで見せると、拡大時に読みにくかったり、読み上げで伝わらなかったりすることがあります。大切な説明は、画像の外でも読める文章として用意しましょう。

指で押して、次に進めるか

次に、実際に指で操作します。

1. メニューを開き、別のページへ移動する。
2. 「体験を申し込む」などのボタンを押す。
3. 近くの別のボタンを、間違って押してしまわないか見る。
4. 固定された案内が本文や操作ボタンを隠していないか確認する。
5. 前の画面に戻ったとき、どこにいるか分かるか確認する。

画面の見た目を縮小した画像だけでは、押しやすさや入力のしやすさは分かりません。実際の操作で確かめることが大切です。

フォームは、入力してみる

フォームがある場合は、お客様の許可を得た検証環境で、架空の内容とテスト用の受信先を使います。

• 入力欄の名前と、必須かどうかが分かる。
• 入力時に表示されるキーボードで、必要な文字を入力できる。
• 不足があるとき、どの欄を直せばよいか分かる。
• 送信後に何が起きたか分かる。

送信画面の表示だけでなく、実際の受信確認も必要です。個人情報を入力する前に、テストの方法を管理者と決めておきましょう。

確認できた端末と、できていない端末を分ける

一台のスマホで表示できたからといって、すべての機種やブラウザーで同じように使えるとは限りません。

お客様が想定する利用者を聞き、どの端末・ブラウザーで確認するかを決めます。使える範囲で実機を試し、試せなかった環境も記録します。MDNの案内でも、対象とする環境を決め、複数のブラウザーやモバイル環境で確かめることが紹介されています。［参考1］

確認メモを残して、次の制作に生かす

例：「検証環境でスマートフォンの画面表示、メニュー、申込みボタン、入力欄を確認。別の端末では未確認」

確認したことを具体的に伝えれば、お客様も、これから何を試せばよいか判断しやすくなります。

無料ガイドでは、AIを使いながら制作や仕事を進めるための基本もお伝えします。最初の練習作品でも、見る人が迷わず読めるか、一つずつ確認してみましょう。