2015.10.21
Webデザイナーが知っておきたい直帰率の低いメインビジュアルの作り方
あなたはウェブサイトにおけるメインビジュアル(別名：キービジュアル/メイン画像)が、直帰率やその後のコンバージョン率(成約率)に大きな影響を及ぼすことをご存知でしょうか？メインビジュアルはお客さまがサイトに訪問した際、最初に目にする要素なので、メインビジュアルの「発言力」や「インパクト」がないとウェブサイトの直帰率(そのページだけ見て離脱してしまう割合)やその後のコンバージョン率に大きく影響してしまいます。
では一体、どのようにすれば「発言力」や「インパクト」を持ったメインビジュアルを作ることができるのでしょうか？それは「キービジュアルの基本原則と基本レイアウト」を知ることが重要です。メインビジュアルにどのような役割があるかを理解することで、どのような要素を配置する必要があって、どんなレイアウトを組めばいいのか理解することができるからです。事実、メインビジュアルをリニューアルしただけで直帰率やコンバージョン率が大きく改善した例は数多くあり、特にランディングページではその効果は絶大です。
そこで今回は「直帰率の低いメインビジュアルの作り方」をご紹介します！
そもそもメインビジュアルとは？
そもそも一体、メインビジュアルとは何のことでしょうか？メインビジュアルとは、お客さまが最初に目にする要素で主に「ウェブサイトのトップページ上部に表示されるメイン画像」のことです。近年では強いインパクトを与えるために高さや幅が大きめに取られているキービジュアルも多く、コンテンツを複数表示させるスライドが実装されていることもあります。
なぜメインビジュアルが重要なのか？
では一体なぜ、メインビジュアルが重要なのでしょうか？メインビジュアルはお客さまがサイトに訪問した際、最初に目にする要素なので、メインビジュアルの「発言力」や「インパクト」がないとウェブサイトの直帰率(そのページだけ見て離脱してしまう割合)やその後のコンバージョン率に大きく影響してしまうからです。
あなたも経験があると思いますが、ウェブサイトを開いたときに「このサイトに目的のものはないな」と判断し、一瞬でサイトを閉じてしまうという経験があると思います。最初に目にするメインビジュアルを見てそういう判断に至るケースが多いのです。
ですからいくらメインビジュアル下のコンテンツが良質であっても、ファーストビューで「このサイトに目的のものはないな」と思われてしまっては、その後のコンテンツを読んでもらうことすらできないのです。
多くのコンバージョンを得るためには、直帰率をいかに低くするかが重要です。なので「発言力・インパクト・デザイン性」を兼ね備えたメインビジュアルを作り、出来る限り直帰率を低くすることが重要になります。
メインビジュアルの基本原則(事前設計)
それでは早速「メインビジュアルの基本原則」をご紹介します！ウェブサイトにも同じことが言えますが、いきなり作業に入らず、まずは「事前設計」を綿密に行いましょう。この部分を誤るとどんなにデザインが良くても「お客さまを引き付けるメインビジュアル」には繋がらないからです。そこで、メインビジュアルを制作する際は下記の項目をしっかり事前設計しましょう。
- メインビジュアルで伝えたいこと(目的と背景)
- 顧客ターゲット(誰に)
- 必要なコンテンツ(何を)
目的と背景を明確にする
まず初めに「メインビジュアルの目的と背景」を明確にしましょう。メインビジュアルの目的が明確でないと、そもそもそのメインビジュアルが「良いのか悪いのか」判断できないからです。
例えば「ある化粧品の写真を大きめに使用し、化粧品の機能性やメリットを述べたメインビジュアル」と「化粧品の製造工程や製造工場を背景にしたメインビジュアル」があるとします。あなたはどちらのほうが「お客さまを引き付けるメインビジュアル」だと思いますか？答えは「これだけでは判断ができない」です。
例えば、化粧品を扱うショッピングサイトは「商品の特徴や魅力を伝えたい」という背景と「購入してほしい」という目的があるので前者のメインビジュアルが最適です。逆に、化粧品の製造元である企業のウェブサイトは「信頼性を伝えたい」という背景と「取引するお店やお客さまを増やしたい」という目的があるので後者のメインビジュアルが最適です。
つまりメインビジュアルの目的と背景を誤ると「良いのか悪いのか」すら判断できませんし、結果として直帰率に大きく影響してしまいます。あなたの制作するメインビジュアルの目的とそのビジネス背景は何でしょうか？
顧客ターゲットを明確にする
メインビジュアルの目的と背景を明確にしたら続いて「顧客ターゲット」を明確にします。顧客ターゲットによってそのデザインやテイスト、そして効果的なコンテンツが大きく異なるからです。
顧客ターゲットは「男性・女性」という簡単な選定ではなく「年齢やその人の目的」まで絞り込みましょう。例えば「乾燥肌に悩む40代女性で、仕事に忙しいので合間にケアが出来るような化粧品を求めている人」などです。顧客ターゲットを厳密にすることは、ウェブサイトと同様で「直帰率が低く成約率が高いサイト」を実現するために必要不可欠だからです。あなたの制作するメインビジュアルはどんな目的や悩みを持った方に伝えますか？
コンテンツを設計する
最後に「背景・目的・顧客ターゲット」を踏まえた上で「コンテンツ」を設計します。ずばり、メインビジュアルでお客さまに感じてもらいたい点は下記の3つです。
- お客さまがベネフィットを感じるか
- お客さまが「目的のものがある」と感じるか
- 他にはない差別化要素があるか
特に「お客さまがベネフィットを感じるか」というのが一番重要です。ベネフィットとは「お客さまがその商品やサービスを利用した時に得られるメリット」のことです。例えば「コンパクトでスリムな体重計」のベネフィットは「狭い場所にも収納できる」などです。お客さまに「これはいい！」と感じてもらうためには、機能などの紹介よりベネフィットのほうが遥かに効果的です。ですから、必ず「ベネフィットを盛り込んだキャッチコピー」をメインビジュアルに配置しましょう。
その他には具体的に下記を意識することで「お客さまが「目的のものがある」と感じるか」と「他にはない差別化要素があるか」というポイントも攻略できます。
- ファーストビューに大きな画像が使用されているか
- 商品やサービスのメリット・特徴が瞬時に分かるか
- 主要なモニタサイズに収まっているか
- 権威付けとなる要素を配置しているか
- ターゲットが明確であるか
いますぐ使えるメインビジュアルのレイアウト
続いて「いますぐ使えるメインビジュアルのレイアウト」をご紹介します！メインビジュアルの基本原則や考え方が理解できても、それを形にするのって本当に難しいですよね。私なんかはよく試行錯誤を繰り返しています(結果、結構時間を取ってしまうことも…)。そこで、おしゃれで機能的なメインビジュアルをスムーズに作るための、私がよく使うレイアウトパターンをご紹介します！
1:左側にキャッチコピー・右側に画像
まず初めに「左側にキャッチコピーを配置し右側に製品やサービスに関連する画像を配置する」レイアウトで、これはメインビジュアルの基本パターンになります。
人は左から視線移動を開始しますので、左側にキャッチコピーを配置することで高い発言力を持ち、右側の写真で製品やサービスをイメージしやすくなるからです。このレイアウトを採用しているメインビジュアルはとても多く、特にランディングページのファーストビューはこのレイアウトが基本です。
まさに「急ぎの申告もでき、スポット料金のみで安心」というベネフィットがイメージしやすく、「決算も申告も～」という悩みを汲み取る文言が、訪れたお客さまに「自分のことだ(=目的のものがありそう)」と感じてもらえますね。背景写真上のキャッチコピーなどが読みづらい場合は、背景写真に適度にぼかしをいれてあげましょう。
▼サイトリンク
専門の税理士による年一決算サービス
都合上、背景写真をぼかすことができないこともありますが、そのような時は上記のように白やサイトのキーカラーなどで塗りつぶしたスペースの上にキャッチコピー等を配置しましょう。キャッチコピーと画像が明確に切り分けられるので読みやすいですし、またスタイリッシュさを演出することができます。
▼サイトリンク
石神井公園の歯科と矯正歯科
背景全面に画像を配置せず(サイトのキーカラー等で塗りつぶす)、右側にはイラストなど解説となるものを配置するパターンで、製品やサービスの写真より、何か解説となるものを配置したいときにおすすめです。背景全面に画像があると、いくらぼかしても解説となるイラストなどが見づらくなってしまうからです。
▼サイトリンク
みんなでつくる新北陸マガジン
2:画像をグリッド状に並べる
続いては「複数の画像をグリッド状に並べる」レイアウトです。初めにご紹介した「左側にキャッチコピー・右側に画像」のレイアウトの次によく目にするレイアウトで、ショッピングサイト等で商品のボリューム感を演出したいときや、企業サイト等で企業の雰囲気や信頼感を伝えたいときにおすすめです。グリッドパターンや、キャッチコピーの配置場所は非常に悩むところなのですが、私が特に「これはおすすめ！」と思うものをご紹介します！
ANA Travel & Life ※現在はメインビジュアルが異なります
ココナラ ※現在はメインビジュアルが異なります
3:とにかく大きな画像とシンプルなテキスト
続いては「ブラウザ全体に表示されるくらいの大きな画像にシンプルなテキストを配置する」レイアウトで、商品やサービスのインパクトを絶大に与えたいときや、ブランドイメージを表現する際におすすめです。画像を大きめに使用することで大きなインパクトを与えることができ、また画像だけで十分にベネフィットを想像させることができるからです。そのためキャッチコピー等のテキストは最小限にし、テキストよりも画像を見てもらうという導線でデザインしましょう。
4:輪郭に動きをつける
続いては「メインビジュアルの輪郭を曲線や幾何学的な図形にする」手法で、事業やウェブサイトのコンセプト(もしくは表情)を強く与えたいときにおすすめです。本来は直線であるメインビジュアルの輪郭に動きをつけることでインパクトを与えることができ、それが曲線であれば「優しさや親身さ」を、幾何学的な図形であれば「斬新さや先進さ」を与えることができるからです。
まとめ
いかがでしたか？メインビジュアルはデザインやレイアウトの幅が広いのでウェブデザイナーとしては腕の見せ所でもあり、悩みに悩む部分でもありますよね。またお客さまが最初に目にする要素なので、本当に驚くほど直帰率に影響します。
多くのコンバージョンを得るためには、低い直帰率が必要不可欠なので、事前設計など若干面倒に感じる部分もありますが、しっかりメインビジュアルを作りこむことが大切です。お客さまをぐっと引きつける「発言力」や「インパクト」のあるメインビジュアルを制作し、直帰率を下げましょう！良いメインビジュアルが完成したときは、とても達成感のあるものです。