メインビジュアルはWebサイトの「顔」。しかしスライドショーは時代遅れ？

 

こんにちは。

 

スターティアラボ　ブログ編集部です。

 

今回はWebサイト制作の視点から、「メインビジュアル（キービジュアル）の目的と動向」についてご紹介させて頂きます。

1.メインビジュアル（キービジュアル）とは

Webサイトにおけるメインビジュアル（キービジュアル）とは、「ファーストビューにある大きな画像領域」を指します。そしてメインビジュアルの目的は「何をしているサイトなのかを視覚的に伝える」ものです。

 

WEBサイトを閲覧した際に一番最初に目にするため、直帰率に大きな影響を与える非常に重要なコンテンツであり、制作側としては、WEBデザイナーの腕の見せ所でもあります。

 

人物を写した写真を使用してユーザーへ安心感を与えたり、商品写真を使用してブランディングをしたり、企業の想いを伝えたり・・・メインビジュアルでは様々なデザイン手法を使用してWebサイトの印象をユーザーへ伝えます。

2.メインビジュアルの種類

ここに掲載するものが全てではありませんが、メインビジュアルには大きく3つの種類があります。

1.サービスを伝える

2.旬な情報を伝える

3.イメージを伝える

①サービスを伝える

最近の主流です。

 

イメージ画像とキャッチコピーを組み合わせて、「どんなサービスをしているのか？」を表現します。コーポレートサイトの場合には、企業のビジョンや事業内容伝える場合もあるでしょう。

株式会社引越し侍

富士興業株式会社

Square

②旬な情報を伝える

サイトを訪れるユーザーを想定して絞り込めるBtoCサイトの場合には、イベントの詳細やピックアップした情報をメインビジュアルに起用して、直接コンバージョンに結びつける場合があります。

大阪ガス行動観察研究所株式会社

株式会社FM802

西日本旅客鉃道株式会社

③イメージを伝える

ブランディングを意識したサイトの場合は、ブランドイメージの訴求だけを行う場合もあります。

 

モニターいっぱいに広がる高解像度の画像を使用したメインビジュアル等が一例です。最近では動画を使用した例もこれにあたるでしょうか。

株式会社HIGASHIYA

アディダス ジャパン株式会社

株式会社ベイクルーズ

3.「スライドショー」は時代遅れ？

次に、メインビジュアルの「見せ方」ですが、1枚の画像になっている場合や、複数の画像をAjaxを使用してスライドさせたり、最近ではHTML5を用いて動画で表現する場合もあります。

 

サイトの種類にもよりますが、最近の主流は、複数の画像をスライドさせる手段が多いと思います。理由としては大きく以下の２点でしょうか。

サイトに動きが出る

伝えたいイメージを同じ領域内で複数紹介できる

そんな中、気になる記事を見ました。

「Appleがトップページで自動送りカルーセルをやめた理由 ?」

 

http://parashuto.com/rriver/development/no-carousel-no-on-apple-website

 

AppleがiPhone6の発売と同時にメインビジュアルのA/Bテスト行い、複数の画像をスライドさせる手段を10日ほどで辞めているということです。

 

理由としては、2枚目以降のクリック率が悪かったためだそう。※あくまでも推測のようですが。

 

記事内に含まれているデータでは「２枚目以降の画像データのクリック率は1%」という結果があります。記事にも書かれているように全てのサイトが同じような結果になることはないと感じますが、今後、WEB制作を行う上で非常に参考になった記事であります。

4.まとめ

改めて、メインビジュアルはサイトの「顔」といっても過言ではありません。

 

企業としての想いを込めて作り込む必要はありますが伝えたいことを詰め込んでしまうのではなく、サイトの目的に合った、訴求力のあるデザインを目指しましょう。