公開前に確認したい、スマートフォンでの見え方チェックリスト

公式サイトを訪れる人の多くは、SNSのリンクからスマートフォンでアクセスします。パソコンの大きな画面で時間をかけて調整したレイアウトも、スマートフォンで開くと文字が小さすぎたり、ボタンが押しにくかったりすることが少なくありません。公開前に、スマートフォンでの見え方を一通り確認しておくことをおすすめします。

なぜパソコンだけの確認では足りないのか

サイトを作る作業自体は、多くの場合パソコンで行われます。そのため、作っている本人はパソコンの画面での見た目に慣れてしまい、スマートフォンでどう見えるかを見落としがちです。

しかし、SNSのプロフィール欄からのアクセス、投稿に貼ったリンクからのアクセスは、その大半がスマートフォンです。パソコンでの見た目がどれだけ美しくても、実際に多くの人が使う環境で崩れていては、その努力が伝わりません。パソコンとスマートフォンでは、画面の縦横比も、操作の方法(マウスかタップか)も違うため、片方で問題なく見えても、もう片方では別の問題が起きることがあります。

確認しておきたい項目

文字の大きさと行間

パソコンでちょうどよく見えた文字サイズも、スマートフォンの画面では小さすぎることがあります。特に、小さめのフォントで凝ったデザインを組んでいる場合、スマートフォンでは読みにくくなりがちです。

• 本文の文字が、スクロールせずに無理なく読める大きさか
• 行と行の間隔が詰まりすぎて、読みにくくなっていないか
• 見出しと本文の大きさの差が、スマートフォンでも十分についているか

ボタン・リンクの押しやすさ

指で操作するスマートフォンでは、ボタンやリンクの大きさ、間隔が重要です。

• ボタンが小さすぎて、意図しない別の要素を押してしまわないか
• 近くに並んだリンクどうしの間隔が狭すぎないか
• 「戻る」「次へ」などのボタンが、画面の端に寄りすぎて押しにくくなっていないか

画像・動画の表示

• 画像が画面幅からはみ出して、横スクロールが発生していないか
• 動画や埋め込みプレーヤーが、スマートフォンの画面に収まっているか
• 画像の読み込みに時間がかかりすぎていないか

横スクロールが発生してしまうページは、多くの場合レイアウトの設定に問題があります。パソコンでは気づきにくい不具合なので、スマートフォンでの確認が特に重要な項目です。

メニュー・ナビゲーション

パソコンでは横並びのメニューも、スマートフォンでは「三本線」のアイコンをタップして開く形式(ハンバーガーメニュー)に変わることがよくあります。

• メニューのアイコンが、意図した位置に表示されているか
• メニューを開いたときに、項目がすべて表示され、押しやすい大きさになっているか
• メニューを閉じる操作がわかりやすいか

表(テーブル)の見え方

料金比較などで表を使っている場合、スマートフォンの狭い画面では表が崩れやすくなります。

• 列数が多い表が、画面からはみ出していないか
• はみ出す場合、横にスクロールできる、あるいは縦に並び替わるなど、何らかの対応がされているか
• 文字が縮小されすぎて読めなくなっていないか

複雑な表は、スマートフォンでの見え方を優先して、列数を絞ったシンプルな形に作り直すのも一つの方法です。

動画・音声の自動再生

トップページに動画や音声を自動再生で埋め込んでいる場合、スマートフォンではブラウザの設定によって自動再生がブロックされることがあります。自動再生に頼らず、タップして再生するボタンを明示しておくと、環境による表示の違いに左右されにくくなります。

フォームの入力しやすさ

お問い合わせフォームなどを設置している場合、スマートフォンのソフトウェアキーボードが表示されたときに、入力欄が隠れてしまわないかも確認しておきたい点です。特にメールアドレスや電話番号の入力欄は、専用のキーボードが表示されるよう設定されているかどうかで、入力のしやすさが変わります。

確認の仕方

実機で確認する

もっとも確実なのは、実際に自分のスマートフォンでサイトを開いて確認することです。パソコンのブラウザにある「スマートフォン表示のシミュレーション機能」も便利ですが、実機での表示とは細かい違いが出ることがあります。可能であれば、複数の機種(iPhoneとAndroidなど)で確認できるとより安心です。

家族や友人に見てもらう

自分の環境だけでなく、家族や友人のスマートフォンで開いてもらうことで、自分の端末では気づかなかった不具合(画面サイズや回線速度の違いによるもの)に気づけることがあります。可能であれば、ふだんあまりインターネットに詳しくない人にも見てもらうと、操作に迷う箇所を見つけやすくなります。

公開直後にもう一度確認する

サイトを公開・更新した直後は、キャッシュの関係で最新の状態が反映されていないことがあります。公開作業が終わったら、少し時間を置いてから、あるいはブラウザのキャッシュを削除してから、もう一度スマートフォンで開いて確認する習慣をつけておくと安心です。

チェックリストとしてまとめる

毎回すべてをゼロから確認するのは手間なので、次のような簡単なチェックリストを作っておき、更新のたびに見返すのがおすすめです。

• トップページを開いて、最初の画面に必要な情報が収まっているか
• メニューが正しく開閉するか
• すべてのボタン・リンクが押せる大きさか
• 画像・動画が画面に収まっているか
• 横スクロールが発生していないか
• 文字が無理なく読める大きさか
• フォームがある場合、入力欄が隠れずに操作できるか

このチェックリストを、新曲のリリースやページの更新のたびに一通り確認する工程に組み込んでおくと、公開してから慌てて直す、という事態を防ぎやすくなります。

サイトの構成そのものについては、初めて来た人が離脱しないサイト構成の考え方でも詳しく紹介しています。