Original

第一印象で変わる!メインビジュアル(ヘッダー画像)の選定方法

メインビジュアル(ヘッダー画像)のコツを紹介!

メインビジュアル(ヘッダー画像)とは上記の画像(赤枠)のことを指します。 

ひとまずメインビジュアルを選んで入れてみたけれど、なんだかしっくりこない。サイトと合っていない、見にくい、Topページで直帰率(※1)が高い…。一体どうしたらいいのか迷うことがあると思います。
そんなときは漠然と選ばず、下記で紹介するコツをみていきましょう。

(※1)直帰率…Webサイトのアクセス全体のうち、1ページだけを閲覧してWebサイトから離脱したアクセスの割合のことを言います。直帰率が高いということは、検索エンジンから「キーワード」を検索してサイトに訪れたユーザーであれば、期待するサービス、情報がないと判断されたことを示します。)
 

 メインビジュアルとは…

メインビジュアルとは、アイキャッチ・キービジュアルとも呼ばれ、ページの中で最初に見える範囲にある画像のことです。つまり、サイトの顔です。

サイトを訪れたユーザーは、開いた瞬間にそのページが「何を」「誰に向けて」「どうやって」提供しようとしているのか、瞬時に判断します。人は第一印象が大事と言いますが、それはサイトも同じことです。一目で何を伝えたいものなのか分からないとユーザーは見てくれません。
 

悪い例のメインビジュアルを見ていきましょう

例えばこのようなサイトがあったとします。

  • 結婚式場のサイト
  • ターゲットは20代〜40代のカップル
  • 教会式もできるが、神前式(和婚)の結婚式を売りにしている



 

メインビジュアルはこちら。
いかがでしょうか?
上記の内容は伝わってきますか?

今回は極端な例ですが、メインビジュアルを作るときは以下のコツを踏まえながら考えてみましょう。

 

メインビジュアルを改善する6つのコツ

 

●コツ①ターゲットを意識する
こちらのサイトでは「20〜40代のカップル」なおかつ「神前式をしたい」ユーザーがターゲットになっています。ターゲットを意識して、教会の画像ではなく、神前式の様子を示した画像や、着物を来た人物の方が伝わるでしょう。

●コツ②サイトで伝えたいことを明確にする
神前式で挙式をあげたいと考えているユーザーが多いので、キャッチコピーも売りとなるものを絞った方が分かりやすいでしょう。

●コツ③不快に思われない画像選定
幸せな結婚式なので、表情は明るくカップルの画像の方が望ましいです。美しい着物の画像もいいでしょう。
参考に競合のサイトを見てみるのも手です。

●コツ④キャッチコピー&リード文を読みやすく
背景画像に透過させた白か黒を置いて文字を見やすく工夫をします。

●コツ⑤サイト上で綺麗に見えているか
画像の解像度・スクロールしたときに違和感がないか見てみましょう。
モバイルで表示されたときも意識して作成してみてください。

●コツ⑥、どの画像が迷ったら…
複数の画像で迷ったら、期間を決めてA/Bテスト(※)をしてみるといいでしょう。

※A/Bテスト…サイトページの一部、もしくはサイトページ全体が異なる2ページを用意し、どちらがより高い効果が見込めるページか検証することです。

 

6つのコツを踏まえた上での改善点

 

メインビジュアル改善案

  • 教会式もできるが、神前式(和婚)の結婚式を売りにしている、というのであれば、画像を見直す。
  • キャッチコピーで売りを伝えきれていない。ターゲットの立場になって言葉を選ぶ。
  • 人物を選ぶ場合は明るい表情をしている方が好ましい。メインビジュアルにおいては、不快な表情は避けた方が無難。
  • 文字が見にくい。背景画像と文字の色が近くて読みにくい部分がある。強調したつもりで下地を引いているが、色味が似てしまって行って視認性が低くなっている。
  • サイト上で綺麗に見えているか。画像によっては固定にしているとスクロールしたときに違和感が出る場合がある。


以上のことを踏まえて作成したメインビジュアルがこちらです。


 

 

まとめ

サイトの一番の顔となるメインビジュアルはとても重要です。一番最初に目に止まるところなので、サイトの直帰率に関わります。メインビジュアル一つでサイト・ページの印象や伝えたいことを表現できます。

記事で紹介したコツを抑えて、これはどのようなサイトなのか伝わるような画像を選定しましょう。