PCとスマホで変わる、ホームページの見え方と伝わり方

ホームページを見る環境は、人によってさまざまです。会社やサービスについてじっくり調べるときはパソコンで見る人もいますし、移動中や空き時間にスマホで見る人もいます。

同じホームページであっても、パソコンで見たときとスマホで見たときでは、印象や伝わり方が大きく変わります。

そのため、ホームページを設計するときは「パソコンでもスマホでも表示が崩れない」だけではなく、それぞれの画面で情報がきちんと伝わるかを考えることが大切です。

PCは、全体を見渡しやすい

パソコンは画面が広いため、複数の情報を一度に見せやすいという特徴があります。

たとえば、サービスを横並びで比較したり、写真と文章を並べて見せたり、上部にメニューを常に表示したりすることができます。ユーザーも画面全体を見ながら、「どこに何があるのか」を把握しやすくなります。

一方で、画面が広いからといって情報を詰め込みすぎると、どこを見ればよいかわからない印象になってしまいます。

パソコンでは、たくさんの情報を見せられる分、余白や見出し、配置の強弱を使って、情報を整理して見せることが大切です。

スマホでは、情報の順番が伝わり方を左右する

スマホは画面が小さく、縦にスクロールしながら見ることが基本です。

パソコンでは横に3つ並んでいた情報も、スマホでは1つずつ縦に並びます。そのため、パソコンではすっきり見えていた内容でも、スマホでは長く感じられることがあります。

スマホで特に大切なのは、情報の順番です。

ユーザーは上から順番に内容を見ていくため、最初に何を伝えるか、どの流れで読ませるかによって、理解のしやすさが変わります。

ただパソコン版の要素を縦に並べるだけではなく、スマホで見たときに自然な流れになっているかを確認する必要があります。

ファーストビューは、画面サイズで伝わる情報が変わる

ホームページで最初に表示されるファーストビューは、パソコンとスマホで見え方が大きく変わる部分です。

パソコンでは、メインコピー、写真、説明文、ボタンなどを比較的広い範囲に配置できます。しかしスマホでは、表示できる範囲が限られるため、大きな写真を入れるだけで、肝心の説明文やボタンが下に押し出されてしまうことがあります。

スマホでは特に、

• 何のホームページなのか
• 誰に向けた内容なのか
• 何ができるのか
• 次にどこを見ればよいのか

が短い時間で伝わることが重要です。

見た目の印象だけでなく、最初の画面で必要な情報が伝わっているかを確認することが大切です。

スマホでは、次の行動への導線を見つけやすくする

パソコンでは、ヘッダーにメニューを横並びで表示できるため、ユーザーは目的のページへ移動しやすくなります。

一方、スマホではメニューがハンバーガーメニューの中に入ることが多く、常に見えているわけではありません。そのため、スマホでは「メニューを開いて探してもらう」前提にしすぎない方がよいです。

• サービス紹介の下に詳細ページへのボタンを置く。
• 実績紹介の後にお問い合わせへの導線を入れる。
• 関連する情報へ自然に進めるリンクを設ける。

このように、ページを読み進める流れの中で、次の行動へ進める設計が大切です。

ボタンや画像は、スマホでの見え方まで確認する

スマホでは指で操作するため、ボタンやリンクの押しやすさも重要です。

ボタンが小さい、リンク同士が近い、余白が狭いと、見た目は整っていても使いにくいホームページになってしまいます。特にお問い合わせや資料請求など、成果につながるボタンは、スマホで押しやすいサイズや配置になっているかを確認する必要があります。

また、画像の見え方にも注意が必要です。

パソコンではきれいに見えていた横長の写真が、スマホでは左右が切れたり、被写体が小さく見えたりすることがあります。人物写真や商品写真を使う場合は、スマホで見ても主役がきちんと伝わるかを確認しておくと安心です。

大切なのは、PCとスマホそれぞれで伝わる設計にすること

ホームページは、レスポンシブ対応されていればそれで十分、というわけではありません。表示が崩れていなくても、スマホで見ると読みにくい、長すぎる、ボタンが見つけにくいということはあります。

パソコンは、全体を見渡しやすい画面。スマホは、順番に読み進める画面。

この違いを理解したうえで、どの情報を先に見せるか、どこで安心してもらうか、どこで行動してもらうかを考えることが大切です。

パソコンでもスマホでも大切なのは、ただきれいに見えることではありません。見る人が迷わず内容を理解し、次の行動へ進みやすいことです。

ホームページを設計するときは、画面サイズに合わせて見た目を調整するだけでなく、それぞれの環境での「伝わり方」まで意識することが、成果につながるホームページづくりにつながります。ことで、より伝わりやすく、成果につながるものになります。

あわせて読みたい記事

• フォントサイズの考え方。文字の大きさでホームページの印象はどう変わるのか
• ホームページで使う写真が、会社の印象に与える影響
• ホームページの配色で、会社の印象はどう変わる？