エムタメ!について facebook twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

  1. TOP
  2. デザイン
  3. メインビジュアルはWebサイトの「顔」。しかしスライドショーは時代遅れ?

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/10/01
メインビジュアルはWebサイトの「顔」。しかしスライドショーは時代遅れ?

こんにちは。

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

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

1.メインビジュアル(キービジュアル)とは

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

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

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

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

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

1.サービスを伝える

2.旬な情報を伝える

3.イメージを伝える

①サービスを伝える

最近の主流です。

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

株式会社引越し侍

株式会社引越し侍

富士興業株式会社

富士興業株式会社

Square

Square

②旬な情報を伝える

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

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

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

株式会社FM802

株式会社FM802


西日本旅客鉃道株式会社

西日本旅客鉃道株式会社

③イメージを伝える

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

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

株式会社HIGASHIYA

株式会社HIGASHIYA

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

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

株式会社ベイクルーズ

株式会社ベイクルーズ

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

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

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

サイトに動きが出る

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

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

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

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

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

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

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

4.まとめ

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

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

セミナー情報

セミナー情報

無料資料ダウンロード

展示会の効果を最大化させる12の手法

展示会の効果を最大化させる12の手法(ノウハウ)

無料ダウンロード

デジタルマーケティングのすすめ

無料ダウンロード

関連キーワード

Web制作

エムタメ!ニュース

デジタルマーケティングについての
最新情報やお役立ち資料を自動受信

登録する(無料)

イベント情報

特集

WEBリニューアル物語

WEB制作のよくある失敗に全て引っ掛かるけど憎めない青木の奮闘記

はじめての展示会物語

はじめての展示会出展までの道のりを描いたドッタンバッタン劇場

メールマーケティング