ホームページの画面幅やファーストビューの高さはどうやって決めればいいの？

ホームページの画面幅やファーストビューの高さはどうやって決めればいいの？
「ホームページを作る際、横幅のサイズはどれくらいにしよう？」
「ファーストビューの高さはどのくらいにしよう？」と悩むこともあるかと思います。そんな時は、何を基準に要素の高さや横幅を決めていけばよいのでしょうか？

※ファーストビューとは、ホームページにアクセスした際に最初に表示される画面領域のことです。ファーストビューは、ユーザーの滞在時間に影響を与える要素として知られており、離脱の原因になりやすいポイントといわれています。

“何を基準に要素の高さや横幅を決めていけば良いのか”その解決への糸口は、Googleアナリティクスのデータに隠されています。これから、Googleアナリティクスでユーザーのビューポートサイズを調べ、それらを基準に決めていきましょう。

ビューポートサイズとは

ビューポートサイズとは、ユーザーが見ているブラウザのサイズのことを言います。これを見ることで、実際にどのくらいの大きさで自社のホームページがユーザーに見られているかを大まかに確認することができます。

実は、Googleアナリティクスには、ビューポートサイズを計測する機能が標準搭載されています。

ビューポートサイズの確認方法

冒頭にも記載しましたが、ビューポートサイズはGoogleアナリティクスで確認することができます。では、どのような手順でGoogleアナリティクスからビューポートサイズを確認すれば良いのでしょうか。ここでは、具体的なビューポートサイズの確認方法についてご説明します。

・Googleアナリティクスで確認する場所
Googleアナリティクスからビューポートサイズを確認する手順は、非常に簡単です。Googleアナリティクスの管理画面へアクセスし、下記の手順で進めてください。

「オーディエンス」－「モバイル」－「概要」のページを開いて、セカンダリディメンションで「ブラウザのサイズ」を選択します。

ビューポートサイズのデバイスカテゴリは、下記の3つから確認できます。

• mobile
• desktop
• tablet

たとえば、ブラウザのサイズの項目に1300×900と記されていれば、あるユーザーは横幅1300px、縦幅900 pxで閲覧していることがわかります。この時手っ取り早くPCでのビューポートサイズを調べるために、検索窓に「desktop」と入力して検索をかけましょう。そうすると、簡単にPCでのビューポートサイズのみを抽出することができます。

今までなら、「たぶん、これくらいのサイズで閲覧しているのだろうな…」という推測でしか、ビューポートサイズの情報について考察することができませんでした。Googleアナリティクス上のブラウザのサイズを定期的に確認することで、対応しなければいけない画面サイズのおおよその目安を見つけることができます。

ビューポートサイズの目安について

横幅サイズについては、スクロールバーが出ないように要素がはみ出さない大きさが見やすいとされています。

デバイスの画面サイズが大きくない方も閲覧していることを考慮すれば、横幅は1100px以下に抑えたいところでしょう。しかし、必ずしもそうしなければいけないというわけではないため、ホームページのコンセプトと相談しながらベストな横幅を決めてください。

そして、メッセージ性やインパクトのあるメインビジュアルが想定するファーストビューの幅よりはみ出してしまうデザインは、あまり良くありません。ファーストビューの高さは、ビューポートサイズをもとにメインビジュアルがきちっと収まる大きさが良いでしょう。

ブラウザの表示領域を知れば、ホームページのレイアウトを検討する際、具体的な提案がしやすくなります。ビューポートサイズに基づいて作業を進めれば、検索ユーザーのデバイスに応じた配置が可能となるため、社内で目安について相談しておくと良いでしょう。

まとめ

ホームページを開設される方やリニューアルを検討中の方は、ビューポートサイズも意識しながら制作することで、ユーザービリティが向上し、離脱率の低下が期待できます。

ホームページのリニューアルを考える際、また特設の新たなキャンペーンページなどを作る際にはぜひ自社のホームページのよく見られているビューポートサイズを確認してから、適切なサイズを設定しレイアウトを検討していきましょう！