概要
モバイルビューとは、スマートフォンでWebサイトを表示したときの見え方です。
PCでは整って見えるサイトでも、スマホでは文字が小さい、見出しが不自然に折れる、リンクが押しづらい、表が画面外にはみ出る、ヘッダーが邪魔になる、といった問題が起きることがあります。
Webサイトの確認は、PC表示だけで判断できません。コーポレートサイト、コラムサイト、ランディングページ（LP）、問い合わせ導線を持つサイトでは、スマホで普通に読めるかどうかが成果に直結します。
モバイルビューとは
モバイルビューは、スマートフォンの画面幅でWebページを表示した状態です。
同じページでも、PCとスマホでは見え方が大きく変わります。PCでは横並びだった記事一覧が縦並びになり、ナビゲーションが折り返され、画像や表の見え方も変わります。
現在は、検索、SNS、地図、問い合わせ、予約、資料確認など、多くの行動がスマホ上で行われます。スマホで見づらいサイトは、それだけで読まれにくく、次の行動にもつながりにくくなります。
まず見るべきは読めるかどうか
最初に確認したいのは、本文が自然に読めるかどうかです。
文字サイズが小さい、行間が詰まっている、段落間の余白が足りない、見出しが長く折り返されすぎている。こうした状態だと、内容が良くても読み進めてもらいにくくなります。
太字の使い方にも注意が必要です。PCでは目立って見える太字でも、スマホでは圧が強く、記事一覧やリンクタイトルが読みにくくなることがあります。
押せるかどうか
スマホでは、リンクやボタンを指でタップします。
リンク同士の間隔が狭い、クリック範囲が文字だけになっている、フッターリンクが詰まりすぎている、といった状態は誤タップにつながります。
ナビゲーション、記事一覧、カテゴリ一覧、関連記事、問い合わせボタン、電話番号、フォームへのリンクは、実際にスマホで押しやすいかを見ます。
色が薄すぎる、背景と同化している、カード全体が押せるのか文字だけなのか分かりにくい。この小さな分かりにくさも、サイト内の回遊を止める原因になります。
邪魔しないか
モバイルビューでは、画面が狭いぶん、邪魔な要素が目立ちます。
固定ヘッダーが高すぎると、本文を読む領域が狭くなります。目次が長すぎると、本文に入るまでに時間がかかります。大きな画像や余白が続くと、何のページか分かりにくくなります。
特にファーストビューは確認したい場所です。最初の画面で、何のサイトか、何の記事か、次に何を読めばよいかが分かるかを見ます。
横にはみ出ないか
スマホ表示でよくある問題が、ページ全体の横スクロールです。
画像、表、長いURL、コード、横並びレイアウト、幅固定の要素などが原因で、ページ全体が左右に揺れることがあります。これだけで作りが粗く見えます。
表は特に注意が必要です。スマホで収まらない場合は、横スクロールできるようにする、項目を減らす、表ではなく箇条書きに変えるなどの判断が必要です。
画像も同じです。画面幅に収まっているか、文字入り画像が小さく潰れていないか、余白が不自然に出ていないかを確認します。
記事ページで見るポイント
コラムサイトでは、本文だけでなく、記事一覧や関連記事もモバイルビューで確認します。
最新記事の一覧では、日付、カテゴリラベル、タイトルが窮屈になっていないか。カテゴリ一覧では、ただのリンク群として読みやすいか。関連記事では、押せることが分かるか。
問い合わせ、カテゴリ一覧、関連記事、トップページ、サービスページなど、次に進むための導線がスマホで見つけやすいかも確認します。
まとめ
モバイルビューとは、スマートフォンでWebサイトを表示したときの見え方です。
確認するポイントは、読めるか、押せるか、邪魔しないか、横にはみ出ないかです。
PCで整って見えるサイトでも、スマホでは問題が出ることがあります。まずはこの4点で見るだけでも、Webサイトの改善点はかなり見つけやすくなります。