クリエイティブ担当のさよまる…略してまるですこんにちは（・x・）ノ
運営代行をしていると、デザインって「リニューアルしないといけない！」とか
「見た目を大きく変えないと良くならない！」と思っている方が多いなあ、と感じることがよくあります。
でも実は、ほんの一部分にちょっとした工夫をするだけで、クリック数や転換率が大きく動くこともあるんです。
今回は、そんな「すぐ実践できる、楽チン施策」をご紹介！
それはズバリ、「コンバージョンボタン」の改善
コンバージョン…よく「CV」「CVR」とか「転換率」と言われますが
Webサイトに訪れたお客様に、何かしらアクション（お問い合わせ、資料請求、商品購入など）を起こしてもらうためのボタンです。
例えば弊社が運営している「還暦プレゼント」はECサイトなので、商品を購入してもらうための「カートに入れる」ボタン。このコンバージョンボタンを工夫するだけで、実際に転換率が改善されたケースもあります。
では実際にどのような工夫をするのでしょうか？
その1 周りとの差別化
Webサイトには何かしらのベースとなるカラーが決まっていますよね。
還暦プレゼントは「還暦」をイメージとした赤がベースで、サブとして赤に近い暖色のオレンジや黄色を設定しています。
では、Webサイトの配色に合うようにカートボタンをオレンジにするとどうでしょう？
うーん…馴染みすぎて目立たないですね…＠＠；
ポイントは、「周りとの差別化」です。色や大きさ・形など、周りのデザインと差別化させることが重要。
そこで私がよく意識しているのは、Webサイトのベースカラーに対する「補色」を設定することです。
補色とは？
補色（ほしょく、英: complementary color）とは、色相環 (color circle) で正反対に位置する関係の色の組合せ。 相補的な色のことでもある。
引用元：補色 - wikipedia
色相環とは、美術の授業などで習った（はず）「色を円環にして並べた」もので、基準となる色の間逆の位置にあるものが「補色」です。
赤だったら補色となるのは青緑。黄色だったら青紫。
ベースカラーの補色になるものをコンバージョンボタンに設定することがよくあります。
ただし、目立たせれば良いというわけでもないため（周りから浮きすぎて気持ち悪い配色になることも…）、完全に間逆の位置にあるものよりは、少し位置がズレたあたりのものがバランスが取りやすいですね。
そのため、還暦プレゼントは、赤・オレンジに対しての緑～黄緑を設定しています。
とはいえ、ブランディング重視のWebサイトだとレギュレーション外の色は使えない…などもありますので、なかなか難しいところではあります…ToT
その2 押せる感
社内のデザインチェックをしていると、「押せる感が弱いな～」と指摘することがよくあります。
画面の中ですから、「えっ…これクリックできたのか！」なんてこともしばしば。
押してもらうためのボタンなのに勿体ないですね。
よく言われていることではありますが、ボタンデザインのコツとしては以下。
- グラデーションをかける（ツヤを出したりしてボタン風に）
- 周りの要素とは異なる形にする（四角い要素が多ければ丸いボタンに）
- シャドウをかけて立体感を出す（思わず押したくなっちゃうやつ！）
- 押した先に何があるのかを分かりやすく
グラデーションをかけるにしても、光沢を出すかどうか。形も角丸にしたり、完全に丸くしたりと、ボタン1つでもさまざまなパターンがあるんですねえ。
ボタンデザインって奥が深い！
まとめ
とまぁ、いろいろと説明しましたが、すべてのWebサイトに上記を適用しなければいけない、というわけではありません。
フラットなデザインにテッカテカした光沢感のあるボタンを入れても、デザインのバランスが崩れてしまうこともありますので、Webサイトのデザイントーンに合わせつつも、周りに埋もれないボタンが理想です。
まずは色を変えてみるだけでも、数値に変化が出るかも！？
お試しあれ～（・x・）ノ
この記事の投稿者: ヘノブ編集部
