ファーストビューは、いまも重要か

境目は動いた。問いは変わっていない

もう共通の境目はありません。1440×900のノートPCでは、ブラウザのバーに取られたあと、ページが見えるのは約750ピクセルです。SafariのiPhoneでは650ピクセル前後、アドレスバーが下にあるともっと減ります。つまり訪問者ごとに、ファーストビューで見える範囲が違います。それでも、その範囲に求めるものは変わっていません。ここは自分が来るべき場所か。もう一度スクロールする価値はあるか。この2つです。

人はもうスクロールする。そして判断は速い

2010年ごろからスマホを使ってきた人は、何も考えずにスクロールします。文章を読み終える前に、親指が先に動きます。ファーストビューより下は読まれないという昔の心配は、もう古いです。それでも人はすぐ離脱します。広告をクリックして、見出しを読んで、広告で約束されたものが見つからず、数秒で消える。読者にとってスクロールはただです。足りないのは注意のほうです。

デザインの前に、自分のファーストビューを測る

アクセス解析に実際に出ている3機種で、自分のページを開いてください。私のクライアントの多くは、iPhone、13インチのMacBook、1080pの外部モニターです。スクロールせずに、それぞれでページ上部のスクリーンショットを撮ります。スマホではたいてい、見出しとボタンの半分だけが見えます。大きなモニターではたいてい、400ピクセルの余白に見出しが浮いています。この2つは別々にデザインしてください。

その場所を無駄にしがちなもの

最初の1画面を食べて、何も返さないものが3つあります。自動で回るカルーセルは1枚目で離脱されるので、2枚目と3枚目は見られません。「成長を、再定義する」のような抽象的な見出しは、どの業種のどのサイトに置いても違和感がありません。大きすぎるヒーロー画像は、スマホの画面からボタンを押し出します。最後の1つは実機で確認してください。Framerのキャンバスは、スマホと違って場所に余裕があります。

ファーストビューに置く価値があるもの

だいたい優先度の高い順に5つです。製品の名前と、それがどの分野のものか。買い手が得られる結果を、買い手の言葉で書いたもの。ロゴの列や、根拠を説明できる数字1つといった証拠。動詞が入ったメインのボタン。そして、笑顔のチームのストック写真ではなく、実物の製品か実際の制作物の写真です。

スクロールの行き先を見せる

最初の1画面の下端は、わざと途中で切れているように見せます。境目のすぐ上から次のセクションを始める。ロゴの列を半分だけ見せる。見出しを下から少しのぞかせる。ちょうどその位置にはっきりした線と広い余白があると、目はページが終わったと判断します。長いページでは、ヒーローの高さを画面の80%くらいに抑えて、次のセクションが必ず少し見えるようにしています。

10分でできる確認方法

社外の人に、ページの上部を5秒だけ見せてください。すぐ隠して、この会社は何を売っていて、誰向けかを聞きます。答えられないなら、そのファーストビューは失敗です。アニメーションをどれだけ足しても救えません。公開後はスクロールマップを見ます。2つ目のセクションに届かないセッションが多いなら、問題は最初の650ピクセルの中にあります。