WEBサイトは「お問合せ」や「購入」など目的があります。
では、どこからお問合せや購入につなげるのでしょう。
もちろん、お問合せページなど専用のページを作ります。
しかし「動線」が無ければ誰もお問合せページには飛びません。
そこで動線としての「コンバージョンエリア」を作ります。
コンバージョンエリアとは、各ページからお問合せや購入ページにつなげるエリアです。
基本的には、テキストと、ボタン、リンクなどを大きく表示させます。
押してもらうことが目的ですから、より見やすく押しやすくする必要がありますね。
押してもらえなければ、意味を成しません。
設置場所は基本的にフッターの前です。
※ こちらのレイアウトは基本形の一例です。状況によって作り変えましょう。
位置は、コンテンツの一番最後のエリアに設置します。
すべてのコンテンツを読み終わって、モチベーションが上がったタイミングです。
また、コンバージョンエリアは全ページに設置しましょう。
お問合せの機会は、しつこいくらい存在すべきです。
少し鬱陶しいかな、と思う程度がちょうどいいと思ってください。
全ページのフッター上に表示させるようにしましょう。
コンバージョンエリアはWEBサイトの成果を出すために重要なエリアです。
デザインや文言1つで、大きく結果が変わることもあります。
実際は何パターンも試し、最も成果が出る形を導き出してみてください。
では、コンバージョンエリアについてデザインの解説を進めていきます。
今回も、まずデザインの引き出しを増やしていきましょう。
スタンダードなデザインの解説
基本的にコンバージョンエリアの形は2タイプに分けられます。
シンプルにボタンで問い合わせる形。
もう1つが会社概要と合わせるタイプです。
コンバージョンエリアは、基本的にこの2つの派生系であることがほとんどです。
細部の工夫はあったとしても、そこまで大きくは変わりません。
コンバージョンエリアの目的は、お問合せや購入につなげることです。
わかりやすさとクリック、およびタップしやすさを重視します。
押しにくい、目立たない、なんてことがあってはなりません。
軸は常にシンプルで目立ち、押しやすいことです。
常に、デザインの中で一番目立つようにしましょう。
エリアを大きめに取り、どんな場合でも押しやすいことを意識してください。
では、いくつかデザインについて解説していきます。
お問合せボタンタイプ
まず、ボタンが大きく載せてあるタイプです。
コンバージョンエリアのほとんどは、この形が取られます。
お問合せボタンは、もちろん用途によって変化します。
リクルートであれば、求人申し込みだったり。
商品の説明であれば、購入だったり。
ボタンの役割は、目標によって変化させます。
こちらはリクルートタイプですね。
ボタンを2つに分割して職ごとにわけています。
このようにコンバージョンエリアのボタンで分岐することもあります。
何を目的とするかによってボタンの数も減ったり増えたりします。
コンバージョンエリアの目的が2つある時は、左右に分けても良いでしょう。
リクルートとお問合せ、両方募集しているケースです。
上記は、先程ご紹介したボタンの分け方よりも、より明確に目的が分かれています。
求人と問合せでは目的が大きく異なるので、分け方も大胆ですね。
このように、様々なバリエーションがあります。
何度も試して、最も結果の出るデザインを選びましょう。
適切な情報と動線の形を、徹底的に研究してください。
会社概要と一緒に
コンバージョンエリアの別パターンです。
会社情報などを入れて、フォームではなく連絡先を直接載せます。
メールフォームを設置しない場合に、よく使われます。
お問合せがメールではなく「電話番号主体」のビジネスの時もよく使います。
特に高額な商品やサービスでは、電話番号主体になるでしょう。
例えば病院などは電話で問い合わせるケースがほとんどです。
大きく電話番号を表示させて、メールへの誘導を控えます。
会社概要と、フォームへのリンクを併用する場合もあります。
客層によっては、どんな会社か強く気にします。
そんな時、会社概要ページとお問合せが隣同士にあればどうでしょう。
どんな会社なのか信頼感を獲得しつつ、お問合せに誘導できます。
こちらも、お問合せと会社情報を並列するケースですね。
今回は「本社」と「Design Film」というように拠点を分けています。
いくつか拠点を持っている時には、こうしたレイアウトもまた効果的です。
メールだけでなく、直接電話で各拠点に連絡できますからね。
ただ、基本的に誘導したいのはメールフォームであることが伺えます。
ボタンの大きさで、どこに連絡させたいかは一目瞭然ですね。
何を一番メインの動線にするか、しっかり優先順位をつけましょう。
このように、コンバージョンエリアにも複数のタイプがあります。
制作するWEBサイトに、どれが一番ベストの形か考えてみてください。
今回のミッション
なんとなく、イメージがつかめたでしょうか。
それでは、さっそく、今回のミッションに入っていきましょう。
今回のミッションは「コンバージョンエリアの作成」です。
前回作ったエリアの続きで作ってみてください。
テーマもこれまでと合わせて、1つのサイトを作っていくイメージです。
コンバージョンエリアのレイアウトを作る
さっそく、コンバージョンエリアを作っていきましょう。
まずコンバージョンエリアに必要な要素の確認です。
- コピーライティング
- コンバージョンページへのボタン
- 状況によって会社概要や電話番号
もっとも大事なのは、わかりやすさとボタンの押しやすさです。
デザインにこだわるあまり、視認しずらければNGです。
本末転倒でお問い合わせに結びつけることが難しくなるでしょう。
レイアウトパターンは、大きく分けて以下の2つです。
- お問合せボタンタイプ
- 会社概要と一緒に
上記の2つのイメージで作ってみてください。
もしイメージが湧かなければ今回紹介したパターンから選んでみましょう。
最初は真似だったとしても、真似を続けていれば引き出しが増えます。
引き出しが増えれば、少しずつイメージを作れるでしょう。
下記に、レイアウトを作成する動画を作ってみました。
作業の参考にしてみてください。
シンプルなボタンのパターンで、レイアウトを作りました。
基本的にはご紹介したレイアウトが基本です。
最初はざっくりで良いですので、レイアウトを作ってみてください。
奇抜なレイアウトを作るのは、慣れてからでOKです。
コンバージョンエリアをデザインしよう
今度は、レイアウトに沿って、デザインしていきましょう。
ポイントはわかりやすさです。
ここまで、何度かお話させて頂きましたね。
クリックしてもらえなければ、全く意味が無いのです。
WEBサイトを見て問合せようと迷った時に即座にクリックできるようにします。
だからこそ、少しも探しづらさを感じさせてはなりません。
シンプルかつ大胆に、コンバージョンエリアをデザインしましょう。
誰もがひと目見て分かるように、大きめにデザインしてください。
では、さっそくデザインをつくっていきましょう。
下記にデザインの様子を動画でご用意しました。
ぜひ、制作の参考にしてみてください。
PSD : https://startout.work/mission/photoshop/7/cv.psd.zip
使った画像は https://unsplash.com/ から頂きました。
有名なフリー素材写真サイトで、素晴らしい写真素材が手に入ります。
なお、今回はざっくり作っています。
当然、もっとデザインを加えることもできます。
ただ、今回は複雑にしすぎずに、シンプルに作ってみてください。
あとでいくらでも改良できるので、最初は完成させることが大切です。
コンバージョンエリアが作れたら次に進んでください。