直帰率を下げる！効果的なメインビジュアル6選

メインビジュアルとは、エンドユーザーがWebサイトを訪れたときに一番初めに目に入る場所。すなわち、サイトの第一印象を決める重要な部分です。メインビジュアルでエンドユーザーの心を掴まなければ、そのまま離脱し別のサイトに行ってしまいます。メインビジュアルの良し悪しは、直帰率にも影響するのです。

私たちが日頃からWebサイトのデザインで意識すべきことは、「ユーザーにとって必要なWebサイトだと思わせられるか」です。そのサイトによって「どんな効果が得られるのか」「それが自分にとって有益なのか」が分かれば、エンドユーザーの興味へと繋がります。そして、これを画像もしくはキャッチコピーで伝えられているかも重要になります。

今回は、6つの観点から優れたメインビジュアルのサイトをご紹介します！

画像＋キャッチコピーでエンドユーザーに有益さを伝える
要素の配置を工夫してスクロールを促す
イラストを用いてサービスを分かりやすく伝える
適切な画像・デザインでターゲット層に訴求する
インパクトを与える
LP（ランディングページ）では数字を使った権威づけを！
サイトのコンテンツやターゲットに合ったメインビジュアルを作りましょう！

画像＋キャッチコピーでエンドユーザーに有益さを伝える

Laxsleep：https://www.asahi-kasei.co.jp/advance/jp/laxsleep/index.html

そのサービスや商品によってどんな効果が得られるのか、メインビジュアルで適切なキャッチコピーと共に伝えることは非常に有用です。

参考サイトは、ベッドパッドの製品サイトです。
「良質な睡眠」や「スッキリとした目覚め」を連想させる画像を使用し、製品のメリットを一目で印象づけます。キャッチコピーの中で「ベッドパッド」と商材が明記されていることからも、何のサイトなのかすぐに理解できます。

要素の配置を工夫してスクロールを促す

BSCウォータースポーツセンター：https://bsc-int.co.jp/

メインビジュアル内の要素として、一般的なのは、以下の3つです。

画像
キャッチコピー
サブコピー

限られたスペースで情報を整理し、興味を持たせることでスクロールを促し、離脱率を下げることができます。

参考サイトは、自然体験学習施設のサイトです。
子供たちが生き生きとスポーツやアクティビティを体験する様子をスライドショーで掲載しています。サイトを訪れたターゲットユーザ（子を持つ親）に対して「自分の子にもこんな体験をさせたい」と興味を持たせ惹きつける効果があります。

画像にコピーを重ねることで「大きな画像→キャッチコピー→サブコピー」と自然な流れで伝えたい情報をエンドユーザーへ伝える配置です。

イラストを用いてサービスを分かりやすく伝える

pace:https://paces.jp/

写真で表現することが難しい内容も、イラストを用いることで分かりやすくエンドユーザーに伝えることができます。

参考サイトは、日報ソフトの製品サイトです。

メインビジュアルでサービスの概要が簡単に伝わるイラストを用いています。さらに、サブコピーにイラストの補足となる文章を加えることで、絵だけでは伝わらない情報伝達もカバーしています。
また、フラットなイラストがサービスの手軽さや親しみやすさを感じさせる効果を発揮しています。

適切な画像・デザインでターゲット層に訴求する

株式会社イシダ:https://0848ishida.jp/

「有益さ」「分かりやすさ」ももちろん重要ですが、「ターゲットの心を掴む」ことも忘れてはいけません。
サイトを制作する際には「ターゲット設定」が必要です。ターゲットがどんな物を好むのか、どんなものに興味があるのかに着目し、メインビジュアルに活かすことで、ターゲットをサイトに引き込むことができます。

参考サイトは、塗箸メーカーのサイトです。
和風で良質な印象を与えつつ敷居の高さも感じさせる商材ですが、カジュアルで若者向けに気軽な印象を与えるメインビジュアルに落とし込んでいます。

オフィスで働く女性のランチタイムを切り取った画像を使い、キャッチコピーも女性向け雑誌のようなデザイン。ターゲットユーザがサイトを訪れた際に、自分ごととして捉え、思わずスクロールしたくなるようなメインビジュアルです。

インパクトを与える

株式会社小野組採用サイト:https://ono-gumi-recruit.com/

インパクトのあるメインビジュアルは、印象強く記憶に残ります。エンドユーザーが同じようなサイトを比較する中で、印象に残ることはとても重要です。

参考サイトは、建設会社の採用サイトです。
大きな筆文字で書かれたキャッチコピーが目を引き、インパクトを与えます。就職活動中のユーザーは複数の企業サイトを比較しています。「どんな会社か」を伝えることも重要ですが、他のサイトに埋もれないよう印象づけることも一つの手です。

LP（ランディングページ）では数字を使った権威づけを！

THREe:https://three.ne.jp/

LP（ランディングページ）とは、検索エンジンやサイトの広告などを経由してアクセスするページのことです。LPを見にくるユーザーは、サイトを訪れた時点で「こういうサービス・商品を求めている」がある程度固まっています。そのため、ファーストビューで「このサイトには求める情報がない」と判断されると、すぐに離脱される可能性があります。

離脱を防ぐために有効なのが「権威づけ」です。
権威づけとは、商品やサービスの凄さ・魅力を定量化して数字化したものです。例えば、「加入者数10,000人！」や「売上5万個突破！」など、数字を用いて記載することで信頼性が増し、ユーザーの意欲を向上させます。

参考サイトは、広告運用プラットフォームのサイトです。
キャッチコピーですぐにサービス内容が分かることに加え、「利用実績5,000件突破しました！」から実績のある、信頼できる会社だと感じさせます。