はじめまして、カオツです。
地球生まれの地球育ちで、言語は日本語です。
初めてのブログですが、沢山の人と意思を共有できたらとても嬉しいです。
ぜひ最後まで読んでください。

「スクロールする?」「しない?」はここで決まる!
スマートフォンの常識になりつつあるファーストビューのデサインとは!?

ファーストビューはサイトをイメージさせる顔!

pc1

私が制作したサイトで恐縮ですが、まずはPCサイトの特徴を挙げていきます。

【PCサイトの特徴】
・当然ながら画面が広い
・その代わりにカーソル(ポインター)が小さい
・画像を使いダイナミックな動きをつけることが可能
・サイト内の下層ページを含め、共通部分が膨大

日本のPCサイトでは1ページ内に多くの情報量を詰め込んだり、どのページからでも行きたいページに遷移できるように構成されている傾向が強いです。

それでは対比としてスマートフォンサイトをご覧ください。

sp5

【スマートフォンサイトの特徴】
・スマートフォン本体に合わせているため画面が小さい
・マウスの代わりが指なのでカーソル(ポインター)の範囲が広い
・動きを入れる程の領域がない
・サイト内の共通部分を増やすとメインのコンテンツにたどり着くまでが長い

このようにPCの利点をそのままスマートフォンサイトで活用することは、ほぼ不可能と言えます。

スマホサイトの「ちょうどいい抜き差し」とは…

その1:グローバルメニューは隠すべし!

「ドロップダウン形式」
sp6

ページ上部にグローバルメニューが占拠してしまうと、本当に見せたいコンテンツが目立たなくなってしまう可能性を秘めています。

そんな時にオススメなのは「ドロップダウン形式」。ページ内にメニュータブを実装し、そのタブをクリックすることでグローバルメニューを表示させる方法です。

任意でメニューを表示させるこの方法なら、他ページへ遷移する必要のない来訪者に無駄なコンテンツを見せる必要もなく、それでいて離脱軽減につながるため、ページを見せるための有効な手段になります。

<主な利点>
・メインコンテンツが強調される。
・スクロールによるストレスが軽減される。

ファーストビューの見た目にもサイト全体の雰囲気が伝わりやすくなり、他ページへ遷移する必要のない来訪者に無駄なコンテンツを見せる必要もなくなるため、離脱軽減につながります。つまりユーザビリティの改善も期待できます。

その効果が認識されてか、現在主流のレイアウトとして多くのサイトで用いられていますね。

その2:画像で見せるべし!

sp4

スマートフォンの場合、ファーストビューで伝えられる情報は限られています。つまり文字の羅列を極力排除し、その代わりにサイトの「雰囲気」を伝えられる画像を見せることも重要なポイントとなります。

主にトップページに言えることですが、ページを開いて最初に見えるものが文字の羅列だった場合、そのサイトに対する期待感は削がれますよね。

つまり「サイトに興味を持たせる」ことが最重要なんです!

サイトの雰囲気や意図が伝わる画像は、限られた面積で多くの印象をエンドユーザに与えることができ、ページ下部へと続くコンテンツも見てみたいという意欲を沸かせることも期待できます。

本日のおさらい!

sp2

お分かりいただけたでしょうか!?

スマートフォンサイトでのちょうどいい抜き差し。
そしてエンドユーザがスクロールしたくなるサイトのファーストビュー。

デザインそのものに人の好みは付き物ですが、自分の好みだけを追求してしまうと制作者のエゴになりかねません。時代に合った見せ方やユーザビリティを考えて作ることは、閲覧数を増やす第一歩に繋がります。

かき氷を作りたいから作るのではなく、「夏だから冷たいものが食べたい!!!」と思うユーザに、的確にかき氷を「おもてなし」する先回りの気配りが大切ですね!