【Web制作】ー第5章ー成果につながるデザイン

Webデザイン

はじめに

はじめに

こんにちは、内定者の鈴木です。
前回は、Webサイト制作の「設計書の作り方」について紹介いたしました。
今回は、Web制作の5回目です。Webサイトの成果、コンバージョンにつながる「デザイン」について紹介いたします。

Webサイト改善の判断基準

Webサイトの「デザイン」とひとことに言っても、文字フォントや画像、色の配色など様々なデザインがあります。

デザイン種類
その中から今回は、コンバージョンやWebサイトの成果につながる「売れるホームページ」のWebデザインに焦点を当てて紹介いたします。

おもなコンバージョンの例は以下になります。

  • ECサイト:商品購入(主にB2C)
  • 商品・サービス紹介サイト:資料請求・問い合わせ・見積もり(主にB2B)
  • 情報提供サイトやコミュニティサイト:会員登録・メルマガ登録(主にB2C、B2B)


弊社では、コンバージョン獲得のために反応装置」「コンバージョンへの導線」「フォームの3点を特に重視しております。

反応装置を変える

反応装置とは、コンバージョンにつながるボタンのことをいいます。

先ほどの、コンバージョンの例に当てはめると

  • ECサイト:「商品を購入する」
  • 商品・サービス紹介サイト:「資料請求する」「お見積もりはこちら」「ご相談はこちら」
  • 情報提供サイトやコミュニティサイト:「新規会員登録」「メルマガ登録」

となります。

よく「お問い合わせ」ボタンに、問い合わせ内容をすべて集約してしまうケースが多いですが、それはおすすめできません。
なぜなら、「お問い合わせ」と言っても、上記のように項目が分かれるため、何のお問い合わせなのか明確でなくなるためです。
上記の点をふまえて、具体的な内容を表示した反応装置をつけるようにしましょう。

また、反応装置は「」によってもお客様の反応が変わります。弊社のお客様の例を紹介いたします。

クインクラシコ

高級紳士靴を取り扱うお客様のWebサイトです。

「カートに入れる」購入ボタンが、「」になっています。
もともと、「緑」の反応装置からスタートし、「オレンジ」、そして「黒」と改善を繰り返してきました。

カートへの突入率は、

「緑」→「オレンジ」2.67倍

「オレンジ」→「黒」1.3倍

となりました。

はじめの「緑」から「黒」に改善をしたことで、約4倍(3.97倍)も突入率が上がりました。

ターゲットによって、最適な反応装置の色は変わってくるため、まずはターゲットを絞り込むことが大切です。
ミスターフュージョンの今までのお客様の事例から考えると、突入率の高い反応装置の色は「オレンジ」です。

導線を見直す

導線

まず、導線を見直す前にどの導線が悪いかを見つけます。

具体的には、「トップページ」「商品サービスページ」「フォーム」「完了」の各段階において目標の数値が達成できているかを確認し、ユーザーの離脱が多いページを洗い出します。次に、目標達成できていない段階がある場合や離脱の多いページを重点的に見直していきます。

見直す際の注意点は、一度にいくつも改善をしないことです。1回の改善につき、1箇所ずつ改善をしましょう。まとめて一気に改善をすると、どの項目に不備があったのか、どの項目の改善が成果につながったのかが分からなくなるからです。

フォームを変える

【基本編】

①入力から完了までのステップを提示する

入力ステップ

上記のように、入力作業がどのくらいで終わるのかゴールを表示します。ユーザーの入力の心理的負担が軽減され、完了率が上がります。

②必須、任意の表記を入れる

必須項目

フォームの入力は、ユーザーにとっては面倒な作業です。
スムーズに入力が済むように、必須項目・任意項目を分けて表示します。そうすることで、必ず入力しなければならない項目が分かり、最低限の入力で済むことをユーザーに分かりやすく伝えます。

③記入例を入れる

記入例

記入例を入れることで、お客様に考えさせる時間を作らない。
フォーマットを決めておくことで、お客様が記入しやすくなります。
名前の入力だけでも、スペースを空けるのか、ひらがななのか、カタカナなのかという風に人それぞれ基準が違うため、統一することが大切です。

(例)名前
山田太郎
山田 太郎
ヤマダタロウ
やまだたろう

(例)電話番号
03-ABCD-XXXX
03-ABCD-XXXX
03ABCDXXXX 

④入力フォームのまわりにリンク遷移を置かない

リンク遷移

ユーザーは、入力途中で入力を諦め、別ページや他サイトにとんでしまうことも少なくありません。これを防ぐためには、リンク遷移を置かないことが効果的です。

⑤「リセット」ボタンや「戻る」ボタンを設置しない

リセット戻る

④のリンク遷移を置かないと同様、ユーザーに最後まで入力してもらい、入力完了率を上げるためには効果的な方法です。

【上級編】

①フォームに入力することで得られるメリットを可視化する

(プレゼントやネット購入のメリットを提示する)
例…ネット購入者限定特典、送料無料など

②最初の入力は、考えなくても書き込める内容にする

簡単な入力フォーム

初めは、名前や電話番号、アドレス等、自分自身のことを入力できるようにしましょう。

お問い合わせ内容の入力を最後にすることで、「ここまで入力したから最後まで入力しよう」という心理が働き、お問合せ内容の入力までして下さる可能性が高まります。

③エラーチェックを入れる

エラーチェック

入力が済み「確認画面」を押した後、入力の不備があった場合、どこにエラーがあったのかを明確にします。

④自動入力や文字切り替えの制限をかけ、フォーム入力の補助をする

(例)郵便番号を記入することで、住所が自動入力される。住所入力は、番地・マンション名・マンション番号のみとなり簡単になります。

(参考)ミスターフュージョンの基準値

Webサイトの改善は、いつ・どんなタイミングですべきなのでしょうか。

弊社では、下記の基準値をクリアしていないWebサイトは、改善が必要であると判断しています。基準値は、業種によって異なる場合があります。(「Googleアナリティクス」で解析した場合)

  • CV率(資料請求など):1%
  • 新規セッション数:50%
  • 直帰率:60%
  • 平均セッション時間(ページ滞在時間):1分以上
  • 平均ページビュー数:3~5ページ
  • 営業成約率(資料請求後):20%


上記のように、基準値を決めておくことで「どこが良いのか?」「どこが悪いのか?」を判断することができます。
そして、良いところはもっと良くなるように、悪いところは良くなるように改善することができます。
もし、基準値がなかった場合、その判断をすることができません。
基準値と、ホームページの現状を比較することで、課題をみつけやすくなるため、基準値を決めるようにしましょう。

おわりに

今回は、Webサイト制作「成果につながるデザイン」について述べてまいりました。いかがでしたでしょうか?

Webサイトのデザインは、文字のフォントや色、配置など様々なポイントがあり、人間の購買意欲を引き立たせるために重要な要素です。デザイナーでなくとも、Webディレクター自信がデザインの知識を持つことで、確認作業では見るべきポイントが分かるため、 スムーズに作業をすることができます。

「デザイン」についてもっと詳しく知りたい方は、下記のリンクもぜひ、チェックしてください。
▼「伝えたい」が「伝わる」!文章デザイン4原則ってなに?
https://mr-fusion.net/webmarketingskill_171116/

▼Webデザインと色の心理学
https://mr-fusion.net/webmarketing_skill_171027/

これからは、デザインの知識を頭の中に入れ、Webサイト制作を進められると良いですね。
次回は、「デザイナー、コーダーへの依頼方法」についてご紹介いたします。

Webデザイン

参考になったらシェアをお願いします!