release：
企業がWEBサイトを運営する目的の多くは、自社の商品やサービスの販売・拡充に繋げることです。そのためにコンテンツやデザインを考え抜き、イメージアップを狙っていると思います。
WEBサイトを通じて、商品やサービスへの誘導を効果的に行うためには、「コンバージョン率を高めるデザインを構築する」という考え方が欠かせません。
そこで今回は、コンバージョン率を高めるデザインの基本原則や具体的な具体的な手法について解説します。
より効果的にセールスに繋がるWEBサイトを作りたい企業様は、どうぞご注目ください。
目次
WEBサイトにおけるデザインの基本
純粋にブランディングを目的とした場合を除き、ほとんどのWEBサイトは、サイト訪問者に商品購入やサービス登録のアクション（購入ボタンをクリックしたり、メルマガの登録ボタンを押したり）を起こさせることを目的としています。
コンバージョン率とは
この「アクションを起こすこと」、つまり「成果をあげること」をコンバージョン（CV）といい、CVを得る確率をコンバージョン率（CV率）と呼びます。
- 商品の購入
- お問い合わせの送信
- メルマガの登録
- Q&Aチャットの利用
- 資料請求
これらはすべて、WEBサイトを通してユーザーに取ってもらいたいアクション＝CVの一例です。
CV率は、アクションの数をサイト訪問者の数で割った数値で求められます。
例えば、あるWEBサイトを100人が訪れたとして、仮に10人が求めるアクションを起こしてくれた場合は、10％のCV率が得られたことになります。
CV率は高ければ高いほど、売上や登録者数獲得の成果が高いことを意味するため、WEBサイトの目的が何であれ、CV率を上げることはWEBサイト制作において最も重要な課題となります。
コンバージョン率を高めるデザイン効果
コンバージョン率を高めるには、様々な要素が複雑に絡み合いますが、やはり最大のポイントはサイトデザインだと考えられます。
CV率を高めるWEBサイトデザインとは、訪問者が求める情報を素早く見つけることができ、スムーズに目的のアクションを取ることを促すことです。
WEBサイトの訪問者が目的を果たしやすい環境を提供することで、CV率は飛躍的に向上します。そのため、サイトの設計からデザインまで、ありとあらゆる施策を講じる必要があります。
その際、デザインの基本原則を守りつつ、レイアウトの最適化や視線誘導の工夫、ボタンやリンクのデザイン、フォームの改善、カラーコントラストの活用など、様々な手法を用いることで、WEBサイトのCV率を向上させることができるのです。
コンバージョン率を高めるデザインの基本原則
CV率を高めるWEBサイトデザインの基本原則は、主に次の4点が挙げられます。
- ユーザビリティの向上
- 目的の明確化
- 視覚的な誘導
- デザインの統一性
ユーザビリティの向上
ユーザビリティとは、ユーザーがWEBサイトを利用する上での使いやすさや、ユーザーのニーズに合ったコンテンツの提供などを指しています。
国際標準化機構の国際規格（ISO 9241-11）による、ユーザビリティの定義は次の通りです。
【ユーザビリティ (usability)】
特定のユーザが特定の利用状況において、システム、製品又はサービスを利用する際に、効果、効率及び満足を伴って特定の目標を達成する度合い。
【ユーザビリティを定義づける要素】
引用：フリー百科事典『ウィキペディア（Wikipedia）』
- 目標 ( goal)：意図した成果
- 効果 (effectiveness)：ユーザが特定の目標を達成する際の正確性及び完全性
- 効率 (efficiency)：達成された結果に関連して費やした資源
- 満足度 (satisfaction)：システム、製品又はサービスの利用に起因するユーザのニーズ及び期待が満たされている程度に関するユーザの身体的、認知的及び感情的な受け止め方
ユーザビリティを向上させることで、ユーザーのストレスや不便さを減らし、CV率を上げることが期待できます。
例えば、簡単に目的の情報にアクセスできるナビゲーションメニューや、ページの読み込み速度を高めるための最適な画像の使用などが挙げられます。
目的の明確化
WEBサイトの目的が明確になっていないと、訪問者は何をすべきかわからず、せっかく訪れても早々に離脱してしまう可能性があります。
そのため、CV率を高めるWEBサイトをデザインするにあたっては、なによりも訪問者が目的をすぐに理解できるように、明確でわかりやすいテキストや、CTA（Call To Action：コール・トゥ・アクション／行動喚起）を配置することが重要です。
- 競合の流行っているサイトのようにしたい
- 見た目を整えてカッコよくしたい
- とにかくサイトからの問い合わせを増やしたい
このような考えでWEBサイトをデザインすることは、必ずしも間違っているわけではありません。しかし、そこに明確な目的がなければ、ただ乱雑に情報を詰め込むだけになってしまいます。
CV率を高めるWEBサイトをデザインするには、作り手側の独りよがりではなく、ユーザーのためを考え、ユーザーに果たしてもらいたい目的を明確にしなければならないのです。
タイトルや説明文などコンテンツの品質を高めたり、最も伝えたいことをサイト内の目立つ場所に配置したりといった基本的な施策も、CV率を高めるWEBデザインには必要不可欠な条件となります。
視覚的な誘導
WEBサイトのCV率を高めるためには、サイトを訪れた訪問者の視線をうまく誘導し、こちらの意図したCVポイント（最終的なゴール）へ導かなければなりません。
ユーザーを視覚的に誘導するのは、注目してほしい箇所に視線を誘導させることで、狙ったCVを手に入れるためです。ユーザーが次に取るべき行動を迷うことなく、こちらの意図するアクションを取ってもらえるように、選択肢を狭めてスムーズにCVポイントへ誘導します。
ユーザーの視線を誘導する方法は、古くから研究が続けられており、現在は次の代表的な4パターンが一般的によく使われています。
- グーテンベルク・ダイヤグラム：人は均等に配置された情報を見る時、視線は左上から右下に流れていくように習慣を利用するパターン
- Z型：ユーザーの視線が左上→右上→左下→右下の順番に、「Z」の字をなぞるように配置するパターン
- F型：左上から始まり右上へ、次に左に視線を戻し、下に向かって動かしながら再度右方向へ視線を動かす、「F」の字をなぞるように配置するパターン
- N型：視線が右上→右下→左上→左下と「N」の字をなぞるように配置するパターン
これらはいずれも多くの人にとって、慣れ親しんだ目線の動かし方なので、このパターンを利用して情報を配置すると、スムーズに視線誘導をすることができます。
ただし、N型は主に日本語など縦組みで書かれた文書（新聞や雑誌など）で利用されており、縦書きの電子書籍など一部の例外を除き、現在の横書き主体のWEBサイトで利用されることはあまりありません。
このように訪問者の視線の動きを意識して、動線の途中にある自然に目を向ける場所に目的のコンテンツやCTAを配置することで、より高いCV率を実現することができます。
デザインの統一性
WEBサイトのデザインが統一されていないと、訪問者はサイトに対する信頼を失い、離脱する可能性があります。
これは、WEBサイト単独で成立するものではなく、企業のCI（コーポレートアイデンティティ）を含めたブランドデザインの一環として考えるべきものです。
企業のブランドを表すには、CIとして採用したものと同じ色やフォント、レイアウトなどのデザイン要素を使用することが重要です。そうすることで、ブランディング上のWEBサイトの統一性を出し、サイトを訪れたユーザーに違和感を感じなくさせることは、CV率向上に役立ちます。
一般的に、WEBサイトのデザイン統一化を図る施策には次のようなモノが考えられます。
- 写真・動画の加工（明度や彩度など）
- 使用フォント
- 使用カラー（カラーパレット）
- コンテンツの配置（余白や行間の取り方など）
これらの全てをブランドイメージを基にしたサイトデザインとすることは、サイトを訪れたユーザーの信頼感を確保し、CV率の向上にも繋がるのです。
コンバージョン率を高めるデザイン手法
コンバージョン率を高めるデザインの基本原則について解説しましたが、そうした原則以外にもCV率を高めるWEBデザインの手法は数多くあります。
ここでは、そのうち代表的なモノをご紹介します。
レイアウトの最適化
WEBサイトのレイアウトを最適化することで、訪問者が必要な情報をすばやく見つけることができ、ページの離脱率を減らすことができます。
例えば、目的のコンテンツやCTAをページ上部に配置することで、訪問者に目に入りやすくなり、確実にCV率は向上します。
また、情報が多い場合は、情報同士の間に適切な間隔を設けることで、訪問者は膨大な情報の整理がしやすくなり、目的の情報を見つけやすくなるのです。
ボタンやリンクのデザイン
ボタンやリンクのデザインを工夫することで、訪問者がクリックする可能性を上げられます。
例えば、ボタンの色や形状、文字の大きさなどを調整することで、訪問者に注目されやすくなり、それだけCV率の向上も期待できるのです。
また、ボタンに配置する文言を変更したり、マイクロコピーを利用することで、訪問者がクリックする意欲を高めることもできます。
シンプルでわかりやすいデザイン
訪問者がサイト上で求めている情報や商品をスムーズに見つけることができるよう、デザインはできる限りシンプルでわかりやすくあることが重要です。
特に、ナビゲーションメニューや商品カテゴリーの表示方法には注意が必要です。
サイト全体の構造が分かりやすいように、視覚的な誘導を工夫し、最適な場所に最適なCTAを配置することで、格段にCV率は向上します。
スピードの速いページ
Googleが「SEOの評価基準には、WEBサイトの読み込み速度を含む」と明言しているように、WEBサイトの読み込み速度は、CVの獲得にも大きな影響を及ぼします。（参考：ページの読み込み速度をモバイル検索のランキング要素に使用します／Google検索セントラルブログ）
せっかくアクセスしたWEBサイトの表示速度が遅いと、ユーザーはイライラしてサイトを離れてしまう可能性があります。
そのため、CV率を上げるためには、サイトの速度を速くすることが必要です。
画像サイズの最適化や不要なプラグインの削除など、ページの読み込み速度向上には様々な方法がありますので、必要に応じて最適な施策を選択してください。
フォームの改善
会員登録やアンケートへの回答、問い合わせなど、訪問者がフォームを利用したアクションを起こすというCVを得たい場合は、フォームのデザインや入力項目の数を最適化することが重要です。こうすることで、訪問者がフォームの入力を躊躇することなく、スムーズに入力できるようになります。
例えば、入力項目を必須項目に限定するなどは、訪問者が気軽にCTRを行うきっかけとなるのです。
またこれは、ECサイトなどで「カート」への商品移動から、「購入」までのアクション工数が少ないことも同様に重要となります。
カラーコントラストの活用
カラーコントラストを工夫することで、訪問者が必要な情報をすばやく見つけることができます。
例えば、CTAのボタン色をページの背景色とは対照的な色にすることで、目に留まりやすくなります。
また、色の使い方によっては、訪問者に特定の感情を呼び起こすことができます。
赤色は緊急性や注意を促す効果があり、青色は安心感や信頼感を与える効果があります。
さらに、緑色のボタンはクリック率が高くなるというデータがあるように、色による使い分けを考えてみるのも有効な施策です。
まとめ
WEBサイトのCV率を上げるためには、WEBデザインの基本原則や具体的な手法を把握することが不可欠です。
- ユーザビリティの向上や目的の明確化
- 視覚的な誘導やデザインの統一性
- レイアウトの最適化やフォームの改善
など、様々な手法があります。
また、訪問者がスムーズに目的のアクションを取ることができるよう、ユーザーの視線を誘導したり、心理学的な思考でアプローチしたりすることも大切です。
WEBサイトのデザインにおいては、目的に沿ったCV率の向上を重視することで、貴社が求める成果を最短距離で掴めるようになるはずです。
様々な施策の選択に悩んだ場合は、専門のWEBデザイン会社に相談するなどして、貴社のWEBサイトで最大限のCV率が獲得できるデザインを作り上げてください。
