最先端のWebマーケティングを発信するメディア

最先端のWebマーケティングを発信するメディア

ファーストビューはこれだ!Webサイトデザインの思考法

最終更新日:
SHARE
FacebookTwitterLineHatenaShare

Webサイトを作成するうえで重視したいのは、どのようなファーストビューにするかということです。ユーザビリティに配慮することももちろん大切ですが、それ以前にユーザーが「見たい」と感じるサイトでなければその先へ進んでもらえる、すなわちスクロールされる可能性は低いといえるでしょう。この記事では、Webサイトデザインにおけるファーストビューの重要性を伝えると同時に、失敗事例やいわゆる好ましい勝ちパターン、動画の配置などにも触れながら、解説していきます。

サイトを見るかどうかは最初の数秒で決まる

一般的にWebサイトに訪れたユーザーは、ほぼ一瞬で自身の期待できるコンテンツか否かを判断すると言います。半ば無意識に取捨選択しているのです。ファーストビューを一瞥したその刹那、勝負は始まっています。きちんと伝わるメッセージがあるか。目を引くデザインか。そこでの情報こそが、訪問者の滞在時間を大きく左右するのです。

そもそもファーストビューとは何か?

言わずもがなファーストビューとは、Webサイトを訪問したときにユーザーがはじめに目にする部分です。スクロールせずに一目で全体を見渡せるつくりもありますが、今や大抵のWeb、ホームページもポータルサイト、比較サイト関わらず、縦へとコンテンツが続きます。ランディングページは典型的ですね。
一応、よくみられるファーストビューとして、サイトのタイトルやショップなどの名称はもちろん、商品イメージなどをキャッチコピー・惹句として挿入し、訴求しているものが多い印象です。ユーザーの興味を刺激するためにキャンペーン動画を配置しているWebサイトもあります。

サイトに滞在するかどうかはここで決まる!

繰り返しとなりますが、ユーザーはWebサイトを訪れた際にそのままサイトに滞在したいかどうかをジャッジします。判断時間はわずか3〜4秒という言説が主流です。さらに補足すると、サイトから離れるユーザーの割合はコーポレートサイトの場合で50%前後、ランディングページになると70%以上というデータもあります。いずれも思いのほか高いように感じます。つまり、どれほど魅力的な商品やサービスであっても、ファーストビューで興味を引くことができなければ全体を伝えられないということになります。これでは、せっかくWebサイトを開設しても意味がありません。ほんの数秒だけで「興味を持てない」と判断される残酷な世界。悲しいかな、そのサイトに次のチャンスが巡ってくることはなかなか難しいはずです。リピートしてもらえる割合は低いと考えていいでしょう。

ファーストビューの役割とは何か理解しよう

Webデザインのサイトだとすぐに分かるファーストビュー

ファーストビューを一言で伝えるならば、Webサイト全体を集約した「アイキャッチ」という表現ができます。雑誌なら表紙のようなもので、どのような内容なのか見てすぐに判断できるデザインでなければなりません。雑誌の表紙から興味を持ち手に取ってもらえるように、最後までWebサイトを読みたいと思うきっかけをユーザーに与えるのがファーストビューの役割です。逆にいうとこの時点でユーザーを引きつけることができなければ、その先の購入ページや問い合わせコーナーまで誘導できません。

技術的な話をすると、サイズ、解像度も大切です。ファーストビューにどのような内容を入れてデザインをするか考える前に、どこまでの範囲がユーザーに見えているか把握しておくことが必要になります。パソコンのモニターサイズは、日本の場合1920×1080と1366×768が全体の40%ほどで、タブレットの場合でいえば768×1024が70%以上というのが大方信頼できる数値でしょう。ただし、実際にWebサイトを見るときはこれよりやや小さめのサイズで見ると考えて作った方がいいかもしれません。定着しているセオリーとしてほとんどのモニターサイズで問題なく、Webサイトを見ることができるサイズは横幅1000pxです。となれば見切れてしまうリスクをきちんとフォローしつつ、例えばパソコンの場合、ファーストビューのサイズを考えるなら550px×1000pxあたりを推奨します。
一方でモバイルは、画素が細かく、人間の目の限界を超えた細かさの解像度であるRetinaディスプレイを考慮して作るべきです。ちなみに画像解像度はSEOにおいても重要指標。そしてもちろんユーザーに対しても綺麗な画像、映像は興味を引くのに有効です。そういうわけでおすすめしたいのは、iPhoneなどで使われる通常ディスプレイの横幅の大きさである375pxの2倍、750pxとなります。なぜなら、このサイズがRetinaディスプレイ対応しているからです。

ランディングページでのファーストビューの失敗例

Webサイトのファーストビューで困惑する女性

ランディングページは英語表記で「Landing page」そのまま訳すと「着地ページ」という意味です。検索サイトやリンク元からユーザーが着地する場所。そう、最初に訪問するWebページを指しています。とはいえ、通常、コーポレートサイトは複数のWebページで構成されているため、ユーザーがどのキーワードで検索したかによって訪問するページは異なってきます。ここでは、ランディングページの狭義的な意味の方を取り上げます。
通称LP。Webページを複数に分けずに1ページだけの長いつくりにし、その中で商品の紹介から問い合わせフォーム、会社概要などすべてを完結させる特徴的なサイト構造。スクロールするだけですべてを閲覧でき、スマートフォンやタブレットのようなデバイスでも見やすく作れます。が、必ずしも良い方向へと導けるわけではありません。なにしろファーストビューで離脱されてしまえば、中身の良さに気づかれないままです。ということで、そうした失敗例を紹介していきます。

デザインでの商品イメージに失敗

デザインやキャッチコピーが商品やサービス内容と合っていなければ、ユーザーの興味を引くことはできません。例えば、オーガニックにこだわった食材を扱うWebサイトが派手な配色を使い、お得感をアピールするような文字ばかり並べたデザインだったらどうでしょうか。感じ方には個人差があるものの、健康的な食材を扱っているサイトという印象を持つ人は少ないはず。期待していたものと異なれば、直帰が容易に想像できます。ファーストビューでは、扱われている商品のイメージとデザインが合致していることが重要です。

ターゲットに刺さらない作りで失敗

どのような商品でも、どこをターゲットにするかでデザインは変わります。したがって、狙う層とのギャップがあれば、せっかくWebサイトを訪問してくれても最後まで読み進めてくれる可能性は低くなります。例えば、20代の女性に向けたメイク用品を扱っているにもかかわらず、暗い配色でシンプルなデザインにまとめてしまっては、若年層が自分事化していくことは困難でしょう。うまくセグメントしたデザインでなければ、購入はおろか、サイト自体もたいしてみられない原因となります。

リンク元とテイストにギャップが生じて失敗

ランディングページは、キャンペーンや個別の商品をアピールするための特設サイトとして作られることが多いです。メインのコーポレートサイトから興味を持ち、そのままリンク先のランディングページを訪問するユーザーも一定数存在します。ここで大事なのは誘導してくれるサイトとの整合性です。キャンペーンなどの場合、多少派手なフォントを使いデザイン処理を行うことはありますが、あまりにもリンク元とイメージにギャップがあると不信感を持たれるかもしれません。

テキストが少なくて失敗

当たり前ですが、ファーストビューで何のサイトかわかりにくいと、ユーザーは離れやすくなります。どのような商品を扱っているのか、単純に情報を提供するだけのページなのか、はたまた購入までできるのかどうか……。こうした大事な部分が不明瞭だと、非常に不親切です。閲覧する気が失せてしまうのも頷けます。そうならないようにファーストビューでは適切な情報量をきちんと盛り込むことが必要です。必要なテキストが少なく、ファーストビューを見ただけでは何のサイトかわからない。あってはならないことだと考えます。

ユーザーが「もっと見たい」と感じるファーストビューの成功例

ファーストビューで興味を惹きつけるWebサイト

さて、成功例もお伝えしましょう。ファーストビューがどのようなデザイン設計ならユーザーに最後まで読み進めてもらえるのか。具体的に説明していきます。

内容をイメージしやすい画像や配色を使い成功

まず必要なのは「何が購入できるのか」「どのようなサービスを提供しているのか」を視覚的に訴えることです。例えば、クリニックを紹介するWebサイトなら、看護師やドクターの画像をファーストビューに入れるとイメージしやすくなります。配色にはブルーやグリーンなどを使うと爽やかで誠実な印象をアピールできるでしょう。また、同じ医療関係でも淡いピンクを使うだけで女性専用のクリニックをアピールすることが可能です。

いわゆるキービジュアルにおける画像は刹那の間に多くの情報を伝えます。視認性を高める配色と、ベネフィットを自然と想起させるオブジェクトがうまくターゲットに訴求できれば、それだけでWebサイトひいては運営元に対するエンゲージメントが増す期待も持てるでしょう。

※キービジュアルについての記事はこちら!
キービジュアルとは?意味からWebでの役割、作り方のコツまで解説

控えめな広告露出が功を奏し成功

Webサイトの中で最初に目につくわけですから、企業によっては広告を入れたくなるのも分かります。うまく活用できれば、コンバージョンもアップし、有意義なものとなるでしょう。そんな中、注意点はその広告が何のサイトなのかを明確にすること。よくわからないものが目立ってしまってはいけません。また、広告を入れる場合はせいぜいメインのものを1つに絞り、さりげなく入れるようにしましょう。サイトもその誘導先も謙虚な姿勢が大事。ファーストビューだけでサイトの内容がわかりやすい作りで、さらにひかえめな広告でユーザーのご機嫌をうかがいましょう(笑)。

キャッチコピーに注力して成功

言うまでもなくファーストビューに入れるキャッチコピーは重要です。ユーザーからはユニークでわかりやすいものが好まれます。シンプルな考え方ですが、いざ実行するとなると簡単なようでなかなか難しいのがキャッチコピーです。企業目線になってしまうケースが多く、一般ユーザーはイメージしにくいかもしれません。例えば「健康にいい」という言葉だけではピンとこない商品でも「1本で1日分の鉄分がとれる!」という表現に変われば具体性が出ます。わかりやすくというのは、このようなものです。必要な情報を的確に適切に、見る人の心理を動かすキャッチコピーで表現しましょう。

訴えたい内容・テーマを少なめに絞り成功

テキストが少なすぎると良くないですが、詰め込みすぎてもユーザーをがっかりさせてしまいます。ユーザーに「もっと見たい」と感じてもらうには、ファーストビューに入れる内容・テーマは一つかせいぜい二つ程度に絞っておきましょう。さらに、その先まで読みたくなるような焦らし方もテクニックとして有効かもしれません。役に立つ情報を盛り込みつつ、ユーザーが疲れない見せ方を意識できれば、ちょうどいいバランスになると思います。

エントリーフォームを用意して成功

これは一聴するに、なかなか大胆な策。申し込みページへ誘導したいなら、最初からその導線を作ってあげればいいわけです。ここまでは普通。が、そこからさらに飛躍した施策となります。例えば、購入手続きといった入力シートもファーストビューに載せるというやり方です。訪問した時点ですでにエントリーフォームがあれば、ユーザーはワンクリック(で移動)する手間さえも省けることになります。結果、コンバージョンにもつながりやすく、制作する企業側にとってはもちろんプラス。ユーザーも案外、その手っ取り早さを便利に感じてくれるとのこと。このアイデア、高い確率で両者win-winになれるそうです。

ファーストビューで動画が人気の理由

ファーストビューの動画を見て笑顔になる女性

先の章で画像の訴求力について触れましたが、いまや多くのWebサイトで動画が使われているのを目にします。
とはいえ、やはり闇雲に載せるものではありません。あくまでユーザー目線に沿った活用の仕方でなければ、なかなか効果的には作用しないはずです。
まず、画像同様、なるべく上部に配置するようにしましょう。モバイルファーストインデックス時代となった今、もはや鉄則です。ワンポイント工夫するなら、テキストで補足すると尚良し。

動画が人気の理由は、即座にサイト訪問者の意識が向くというのも当然ありますが、何よりそこにはリアリティが存在しています。
時間軸がストーリーを生み、一つひとつのオブジェクトが躍動する様子は、少なからず見る人に対して何かしら感情を刺激するはずです。たとえそれがフィクションであっても、動画ならではの情報量の多さと奥行きの深さで以て、共感覚さえ生みだすこともあるでしょう。
それは、自身の悩みや課題を解決してくれるのではないかという期待に取って代わるものかもしれません。
いずれにせよ、ファーストビューでハートを掴むにはもってこいのコンテンツです。

ファーストビューでおさえておきたい主な3つのポイント

ここまで説明してきたことをまとめます。
ユーザーはWebサイトをこのまま見るべきかどうか、3、4秒弱のわずかな時間で判断することがほとんどです。その際に基準とするものを3つ挙げるならば、「誰がターゲットなのか」、「読むことで何かメリットはあるのか」、さらに「自分に必要なものか」。この3つの内容こそがファーストビューのデザインでおさえておきたいポイントです。これらを軸にして、ユーザーに「自分にとって有益なサイトである」と感じてもらえるようなサイト制作、とりわけファーストビューの設計を心がけましょう。

また、盲点になりやすいのが表示されるまでにかかる時間です。ネット環境にも左右されますが、ページスピードの遅いWebサイトはユーザーにとってストレスになります。ファーストビューが表示される前に離脱されるなんてことも少なくありません。確かに先述した通り、画像や動画を使うことで視覚的なアピールはできますが、データが重くなりすぎないように気を付けましょう。

ファーストビューの設計は人の気持ちに応えること!

拙稿に述べてきた内容は一貫して「人の気持ちを考える」に尽きます。
ユーザビリティへの配慮は絶対です。例えば、フォントや配色は視認性が良いものを選択するなんてことはファーストビューのみならず基本的なこととして知っておかなければなりません。ただ、先入観に支配されすぎても、うまくいかないでしょう。
その時々において、いつも考えることが大事です。

例えば、以下のやりとり。
「ユーザーがまず見たいページは、分かりやすくリンクをファーストビューに配置したいと思います」「ファーストビューでもその内容を見せていくのはどうでしょう?」「せっかくなら申し込み、問い合わせ、購入手続きもファーストビューで済ませられるようにしてあげてもいいですね」
いずれも根底には他人への思いやりがあります。

誰かのことを想うファーストビュー。ぜひ実行してみてください。

SHARE
FacebookTwitterLineHatenaShare

この記事を書いた人

いまい
サイト運営歴15年以上。立ち上げたサイトは数知れず。SEO、メルマガ、広告、YouTube、手あたり次第が過ぎて、何も身になってないことに最近気づく。もう少しだけ、Web業界にしがみついていたい。

UPDATE 更新情報

  • ALL
  • ARTICLE
  • MOVIE
  • FEATURE
  • DOCUMENT