ホームページは第一印象が大切！ファーストビュー（メインビジュアル）作成のポイント

ファーストビュー（メインビジュアル）は、ユーザーの感情やSEOに影響を与えるものなので、ウェブサイトの中でも重要な部分です。

しかし、効果的な画面の作り方が分からなくて困っている人もいるでしょう。

今回は、ファーストビューの重要さを解説しているので、自社のウェブサイトと合わせて確認してください。

ファーストビューはなぜ重要か

自社のウェブサイトに訪れたユーザーは、わずか3秒でその場所に滞在するか否かを決めています。

とくにファーストビューは滞在するか否かに大きく関わっているので、ユーザーファーストのウェブサイトを作るようにしましょう。

ファーストビューと直帰率

ウェブサイトのファーストビューは直帰率に影響を及ぼすので、ユーザーファーストのシンプルで分かりやすいデザインを心がけます。

自社のウェブサイトに訪れたユーザーが、ほかのページに移動せずに離脱した割合を表す数値が「直帰率」です。

ウェブサイトからコンバージョンに繋げることを最終目的としている場合は、コンバージョン成立までユーザーに興味を持ってもらうことが大切です。

ファーストビューはSEOにも影響がある

SEOでは、「ファーストビューがユーザーに対して有益なものになっているか」が重視されます。

検索エンジン最適化のことを「SEO」といいますが、Googleもユーザーにとって有益な情報を届けることを考えています。

ファーストビューにたくさんの広告を掲載していると、Googleから「ユーザーファーストのページではない」と判断されるでしょう。

それだけではなく、ユーザーがウェブサイトに不信感を持ってしまうので、広告を掲載するのは必要な場所だけにします。

ウェブサイトのファーストビューにおけるポイント

ここでは、ウェブサイトのファーストビューを魅力的に作るポイントを紹介します。

アイキャッチとコンテンツの内容を合わせる

ウェブサイトにおいてアイキャッチは、ユーザーが自分の悩みを解決できるページかどうかを判断する大切なポイントです。

ウェブサイトのファーストビューから自分のイメージとは違う印象を持ってしまうと、「求めているコンテンツではない」と思ってしまいます。

実際に、上位表示していたウェブサイトにて、アイキャッチの変更を実施したところユーザーに読まれるようになった例があります。

本文より前の段階でユーザーが離脱していることが分かったので、関連性が高いアイキャッチに変更したわけです。

キャッチコピーを考える

ユーザーの視点から、自社におけるキャッチコピーが適切かどうかを考えます。

分かりやすく簡潔な内容にすることで、ユーザーは頭を使わずにウェブサイトの内容を理解できるでしょう。

ターゲットを具体的に絞り込んで伝えたい内容を明確にすれば、伝わりやすいキャッチコピーになります。

読み手の心に刺さるキャッチコピーは、短い文章の中でも言いたいことがはっきりと分かるようになっています。

アクションを起こすボタンを配置する

ユーザーが自社のウェブサイトに興味を持ってくれたのに、次のアクションが分からなければ離脱の原因になります。

ファーストビューからすぐコンバージョンに繋げることは難易度が高いですが、分かりやすい場所にお問い合わせフォームへのボタンを設置することがおすすめです。

また、合わせてお問い合わせの電話番号を記載することで、つぎのアクションが視覚的にわかります。

つぎのアクションについては、ほかにもグローバルメニューをシンプルかつ分かりやすいデザインにすると、ユーザーに優しいウェブサイトになります。

数字を使って具体性を高める

具体的な数字を使って表現することで、ユーザーからの信頼が高まります。

販売している企業がどれだけメリットやベネフィットを伝えても、ユーザーの共感を得られないことがあるからです。

ベネフィットとは、顧客が商品やサービスから得られるプラスの効果という意味です。

実際に根拠がある具体的な数字を使いながらメリットを伝えると、ユーザーの注目を集められるでしょう。

キャッチコピーは呼びかける形にする

キャッチコピーでは、ユーザーが一目見ただけで「自分のことを言っている」と感じられる文章を作成します。

ファーストビューで自分のことを言われていると理解できれば、そのウェブサイトに滞在する可能性があるからです。

ターゲットに合わせて、具体的なベネフィットを使って呼びかける形の文章にすれば、興味を持ってもらえるでしょう。

シンプルな画面にする

ここまで以下のポイントをお伝えしてきましたが、全て使おうとすると情報量が多くなってしまう人もいると思います。

• アイキャッチとコンテンツの内容を揃える
• キャッチコピーを考える
• アクションを起こすボタンを配置する
• 数字を使って具体性を高める
• 呼びかける形にする

情報量が多くなってしまうと、ターゲットを絞っていないときと同様に言いたいことが伝わらないウェブサイトになってしまいます。

3秒以内にユーザーの心を掴むためにも、シンプルな画面の中で言いたいことが相手に伝わる文章を作成するのがおすすめです。

内容がイメージしやすいデザインにする

ウェブサイトに訪問したユーザーにまず伝えたいのは、「自社ではどんな商品を扱っているのか」ということです。

たとえば整骨院のウェブサイトなら、施設の内部や施術中の写真などを使用すると、ユーザーにイメージしてもらいやすくなります。

誠実で爽やかなイメージを与えたいのなら、青や緑などの配色をするといいでしょう。ピンクは攻撃性や怒りを和らげる効果があると言われています。

私たち人間は、視覚から得る情報が最も多いと考えられているので、内容をイメージしやすいデザインにするとユーザーに注目してもらえるでしょう。

ファーストビューで使えるデザイン

スライドショーやアニメーションなど、ファーストビューで使うとユーザーに強い印象を与えられるデザインを紹介します。

スライドショー

同じエリアやギャラリーの中で、複数の写真が入れ替わって表示されるものをスライドショーといいます。

今では、写真を入れ替える際の効果などにもさまざまな種類が出ているので、簡単にクリエイティブなデザインの作成が可能です。

自社で扱っている商品やサービスの内容によっては、スライドショーを使った方がユーザーに強い印象を与えられます。

新しい商品を追加する頻度が高い場合や、ウェブサイトの更新頻度が高い場合はスライドショーがおすすめです。

しかし、スライドショーはシンプルな画面で情報発信をした方がいいウェブサイトには不向きです。

扱う商品やサービスの内容によって、写真と合わせて以下を伝えるといいでしょう。

• 企業のこだわりやサービスの説明を入れる
• 季節ごとのおすすめや旬の情報を伝える
• 写真のみで商品のイメージを伝える

アニメーション

ウェブサイトにアニメーションを導入することで、ユーザーの注目を集めたり意図的に視線を動かしたりする効果があります。

一見シンプルなウェブサイトでも、一部をアニメーションにするだけでオリジナリティが高いコンテンツの作成が可能です。

アニメーションの動きをつけるときは、全ての情報がスムーズに閲覧できるようにすると、ウェブサイトの利便性を高められます。

複数の動きを待つ時間ができてしまうと、それだけでユーザーが離脱する原因になってしまいます。

ウェブサイトのファーストビューを考えよう

ウェブサイトのファーストビューは、おしゃれさよりもユーザーにとっての分かりやすさが大切なのです。ユーザーファーストで考えたうえで、デザインなどの工夫をすればオリジナリティが高いものになるでしょう。

「BARIYOKA-ばりよか-」はホームページを制作している会社です。ユーザーの満足度が高まるデザインの提案ができますので、どなたでもご利用ください。