メインビジュアルとは？作成フローや含めるべき情報を解説

Webサイトの制作時に大切なのが「メインビジュアル」です。

メインビジュアルは「Webサイトに何を掲載しているか」を視覚的に伝えるものですが、このメインビジュアルが悪いとユーザーの直帰率が上がってしまいます。

今回はメインビジュアルの役割と作成手順、作成時に役立つ参考サイトなどを解説します。

メインビジュアルとは

「メインビジュアル」とはWebサイトを開いたときに最初に表示される大きな画像のことで、「ファーストビュー」とも呼ばれます。

メインビジュアルには「何を掲載しているサイトか、どういう目的で運営されているサイトか」を視覚的に伝える役割があり、これがあることでユーザーは「これは何のWebサイトか」を直感的にイメージすることができます。

例えば商品写真を掲載してのブランディングや企業ロゴの掲載、社員を写してユーザーへ安心感を与えることなどもメインビジュアルの役割です。

メインビジュアルに含めるべき要素

メインビジュアルはユーザーがWebサイトを表示した際に最初に目に入るものですから、ターゲットユーザーの行動や成約率などにも大きな影響を与えるコンテンツです。

メインビジュアルには以下の3種類があります。

• サービスを伝える
• 旬な情報を伝える
• イメージを伝える

これらは全て以下の要素を念頭に置いて制作されます。

• サイトのターゲットは誰か
• ベネフィットは何か
• ユーザーが欲しい情報は何か

つまりユーザーの利便性やサイトの訪問目的に応じたメインビジュアルを作るよう心がけ、そこでWebサイトのサービスやユーザーの知りたい情報を入れることで、より良い効果を生み出すことが可能なのです。

以下、メインビジュアルに含めるべき要素について解説します。

サイトのターゲットは誰か

まずはWebサイトのターゲットを選定します。

例えばコーポレートサイトの場合は、「自社サービスに興味を持ってくれたユーザー」をターゲットとし、「ユーザーに自社サービスの詳細がひと目で伝わるメインビジュアル」を作成するなどします。

ターゲットユーザーを定めることで、メインビジュアルのコンセプトも明確になります。

ユーザーが欲しい情報は何か

ユーザーがWebサイトを訪問する目的のひとつに「情報を得る」ということがあります。

そのためターゲットに選定したユーザー層が欲しい情報は何かを考え、彼らが求める情報を提示することがメインビジュアルの制作においては欠かせません。

例えば「企業コンセプトやビジョン」は「何を大切にしている会社か？」を伝える役割があり、企業情報を知りたいユーザーに刺さりますから、「何を大切にしている会社か？」を反映させたメインビジュアルを作るようにします。

また、メインビジュアルに「ユーザーがサイトに求めていることを刺激」し、「ユーザーの求めている情報がある」ことをヘッドコピー（Web ページでユーザーに最初に見せる文章）を載せることで、「Webサイトのターゲット」を明確に示せます。

このようにユーザーが欲しい情報を想定し、それに応じたメインビジュアルを作成し、Webサイトのターゲットを明確に示すことで直帰率を低下させられます。

ベネフィットは何か

ヘッドコピーで「Webサイトのターゲットが誰か」を示した後は、そのターゲットが「Webサイト閲覧で得られる利益（ベネフィット）」を明確にします。

このベネフィットが伝わる要素もメインビジュアルに入れるようにしましょう。

メインビジュアル作成時の注意点

メインビジュアルを作成する際には以下の2つのポイントを踏まえて作成することが大切です。

• ターゲットに合ったデザイン
• ベネフィットに訴求できるキャッチコピーを使う

ターゲットに合ったデザイン

ターゲットユーザーが求める情報がひと目で伝わるデザインを採用します。

例えば「企業サービスを知りたいユーザー」の訪問が想定されるサイトは、「企業サービスがひと目で分かるデザイン」を採用します。

また、売上や顧客満足度など「ターゲットがこのサービスはすごい！」となるような情報を掲載することも効果的ですが、その場合は競合サイトと比較して「競合よりもアピールにつながる数字」を掲載するようにします。

「競合よりもアピールにつながる数字」とは、例えば「顧客満足度」、「サービスの利用料」、「受賞歴」、「特許」などです。

ベネフィットに訴求できるキャッチコピーを使う

メインビジュアルには、Webサイトを読むことによるベネフィットをイメージできるキャッチコピーも使用し、ユーザーが興味を持って読んでくれる可能性を高めます。

また、LPの場合は読者が商品購入後に得られる利益を超え、その先の未来のイメージを明確にできるキャッチコピーを使えば、読者の中でWebサイトを読む動機が明確になります。

Webサイトのメインビジュアル作成フロー

メインビジュアルを作成する場合、以下のポイントを明確にして作業を進めます。

• 適切なデザインを選定する
• 顧客ターゲットを選定する
• 顧客がWebサイトを読むことで得られる利益を明確にする

参考サイトを見る

どのようなデザインが採用されているか、LPの場合は実際に成果を上げているメインビジュアルのデザインはどんなものかをリサーチします。

Webサイトをひとつずつ見ていくと時間がかかるので、Webデザインがまとめて掲載されているサイトを利用するようにし、競合サイトのメインビジュアルを一度にリサーチします。

顧客ターゲットを選定する

Webサイトをどのようなユーザー層に訴求するか（目的、背景）を考え、メインビジュアルのデザインを決定します。

ただ、Webサイトの目的、背景によって適切なデザインが変わってきます。

例えばLPの場合だと、「高い値段でも良質な服が欲しい」と考えているユーザーと、「なるべく値段の安い服が欲しい」と考えているユーザーでは、適切なデザインが変わるのです。

「高い値段でも良質な服が欲しい」ユーザーには「品格漂う服のデザインを強調」し、「なるべく値段の安い服が欲しい」ユーザーには「価格面とそれに反して服のデザインが優れていることを強調」するなど、ユーザーの目的、背景に合った適切なデザインを採用しましょう。

ベネフィットを感じられるようにする

メインビジュアルには、ターゲットユーザーがWebサイト閲覧によるベネフィットを感じられるデザインを採用します。

例えばLPはターゲットユーザーが直感的に「この商品だとこの問題を解決できるきっかけになるのでは？」と思えるデザイン設計を採用しますが、これもターゲットに商品購入後のベネフィットを感じてもらうためのものです。

また、人の視線は左から右へ流れるので、キャッチコピーを採用する場合はメインビジュアル左側に配置しましょう。

メインビジュアル作成の参考サイト3選

ここからはメインビジュアル作成の参考サイトを3つ選定し、紹介していきます。

ぜひ、Webサイトのメインビジュアル作成時の参考にしてみてください。

富士興業株式会社

https://www.fujikogyo.com/

企業理念をメインビジュアル左側に配置し、スライドで業務の様子や建設したプラントの写真などを映し出し、企業紹介をしています。

どんなサービスをしているかを伝えることを第一にしているので、「企業サービスを知りたいユーザー」へ訴求できるデザインになっています。

西日本旅客鉃道株式会社

https://www.my-fav.jp/

サイトを訪問するユーザーを想定して絞り込めるBtoCはメインビジュアルにイベント情報を掲載し、成約につなげます。

イベント情報を前面に押し出すことで、ユーザーがイベント内容に関心を持つようにし、詳細を確認するように誘導しています。

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

https://shop.adidas.jp/

ブランディングを意識している場合、ブランドイメージの訴求だけを行う場合があります。

サイト上部で写真をクローズアップし、見せたい商品やイメージを際立たせています。

まとめ

メインビジュアルはWebサイトの「顔」と言えるものです。

メインビジュアルを作るときはターゲットを選定し、それを踏まえてWebサイトの目的を明確にし、訴求力のあるデザインにするよう心がけましょう。