そのウェブサイトが成功か失敗かは、1回のクリックにかかっています。
ウェブサイトのクリックをされるか否かは、多くの小さな要因からなっています。しかし、大きな違いを生む要因の一つに、ボタンのデザインがあります。
ここでは、あなたのサイトのボタンをデザインする7つの方法をご紹介します。
※この記事では、一般的なウェブサイトのナビゲーションや、クリック可能なアイコンやテキスト内リンクではなく、CTA（お問い合わせなどの行動喚起の）ボタンについて説明しています。
1. 行動的な言葉を使う
手始めに、行動を促す言葉がCTAボタンには使われています。ボタンの言葉にはシンプルな動詞を使ってみましょう。このシンプルな言葉で、ユーザーがどのような行動を取るのか、クリックしたときに何が起こるのかを明確に伝えます。
×動詞のないボタンはつめたい印象になります。
- アカウント登録
- 雛形ダウンロード
- 詳細情報
◯動詞が加わると、より行動指向になります。
- アカウント登録を希望される方
- 雛形をダウンロードする
- 詳細はこちら
2.選択肢を与えましょう。
突然ですがチーズケーキが好きですか？それともショートケーキが好きですか？人は与えられた選択肢から選ぶのが好きです。あなたも選択肢を聞かれてワクワクしませんでしたか？ちなみにわたしはショートケーキが好きです。
よくよく考えると自分に不利な選択肢でも答えてしまう場合もありまが、自分で選択することで「わたしが考えて選んだんだ」という思考になります。この選択肢で誘導することを二重拘束（ダブルバインド）といいます。
この二重拘束の心理をウェブサイトのボタンにも活用しましょう。
例えば「1ヶ月お試し会員になる」「年間購読してクーポンをもらう」など魅力的な選択肢にしましょう。ウェブサイトにとってはどちらでも嬉しい結果に繋がります。
ただの会員登録ボタンがポツンとあるより「一ヶ月or一年どちらの会員登録にしよう？」と選んでもらったほうが面白いですよね
3. 私なのか、あなたなのか？
アメリカでボタンに関するある実験が行われました。
「マイアカウント作成」と「君（you）のアカウントを作成」の2つでクリックに差が出るか調べたそうです。結果は以下の通り。
一人称視点のボタン（マイアカウントの作成）は、二人称視点のボタン（君のアカウントを作成）よりも24%多くのユーザーにクリックされました。つまり誰の視点に立つかが重要です。
「マイアカウント作成」は、アクションを起こす人、つまりマウスを持っている人や画面を触っている人の視点からの言葉なので、より良いパフォーマンスを発揮することがわかりました。
「見込み客の気持ちになってサイトを見てみよう」
つまりユーザーはウェブサイトに来て何をしたいのでしょう？
タイトルや本文では二人称代名詞（you, yours）を、ボタンでは一人称代名詞（me, my）を使いましょう。
4. ウェブサイトのメインカラーと対照的な色を使う
孤立効果
私たちの目は、統一されたデザインと異なるものに自然と目が行くようにできています。周囲の環境と対照的なものは、自動的に私たちの注意を引きます。これは人間の目と脳の生物学の基本であり、孤立効果（フォン・リストルフ効果）と呼ばれています。
ボタンのデザインは、対照的な色を使用して孤立効果を生み出し目的のアクションへと誘導します。
例えば青色のウェブデザインでは、オレンジ色のボタンのような暖色系の要素が視覚的に目立ちます。
ウェブサイトの目立つところに配置しましょう
目立つボタンをデザインするには、色を使うのがおすすめですが、それだけではありません。
サイズや間隔、近くの写真に写っている人の目線を利用することもできます。重要なのは、目的のボタンがページの目立つところにあることが大切です。
CTAボタンは、マーケティングのウェブサイトで最も目立たなければいけません。ほとんどの人はウェブサイトをじっくり見ません。現代人はせっかちで時間を無駄にしたくないのです。
ボタンのデザインは周囲と対照的な色で行い、CTAボタン以外にはその色を使用しないようにしましょう。
5. 大きなボタンにしましょう
誰もがパソコンからアクセスしているわけではありません。今やウェブサイトの閲覧はそのほとんどが、携帯電話やタブレットからアクセスしています。つまり指先でタップしやすいボタンであることが大事です。
Appleはボタンの最小サイズを44 x 44ピクセル（44px＝12～15mm）にすることを推奨していることで有名ですが、ある研究によると、平均的な人差し指のサイズは45 x 57ピクセルです。
指の大きさに合わせたボタンでないとタップしにくいというわけです。
指の中でも親指は少し大きいです。もしボタンを親指でタップすることを想定しているのであれば（例えば、タブレットベースのアプリの下の隅にある場合）、親指の幅を広くしましょう。45 x 72 ピクセル（約12×20mm）。これが「親指のルール」です。
つまり約45×60ピクセル（約12×17mm）のタップしやすいボタンをデザインしてください。
6.ボタンの位置にも注意
小さな携帯電話向けにデザインする場合は、CTAボタンを置く場所に注意してください。日本人のほとんどは右利きです。右手でスマホを操作する場合に配慮してボタンを配置しましょう。
パソコンではうまく見えていてもレスポンシブ（携帯電話やタブレットなどの小さな端末に画面を適用させること）した場合、操作しやすい場所とそうでない場所があります。
7. 制約を低くする言葉を使う
ボタンには制約の強いものから、全く制約がないものまであります。
こんな実験があります。「制約の低いことほどよくクリックされる」という仮設のもと、高い制約から低い制約まで散りばめてブログの記事、メール、会員登録でテストしたそうです。
その結果想像通り、制約の低いものからアクセスが良かったそうです。とはいえ、低い制約ばかりでは収益になりません。賢く立ち回りましょう。
ボタンの文字を工夫しましょう。
制約にはお金だけでなく、時間もあります。ユーザーは皆忙しいので時間をかけないことを期待しています。
- 「ブランドの50年の歩み」というタイトルは読む時間が長くなることが連想されます。「ブランドの概要」は時間があまりかからなさそうです。
- 同様に、「ショップを見る」は、製品カタログを見て歩く楽しさを表現しているように聞こえます。「今すぐ購入する」は、財布を取り出すようなネガティブなイメージです。
同じページに誘導するにしても言葉の使い方でユーザーの行動が変わってきます。
ボタンに使う言葉は制約のレベル下げましょう。
8. 画像ではなくコードから
「リンク」がテキストを意味するのと同じように「ボタン」という言葉は、通常画像をイメージします。しかし、優秀なデザイナーは、画像のように見えるボタンでも、コードで作成しています。
画像で作ったボタンには問題があります
- 読み込みが遅い
- 障害者の方が利用できない
- メールでは表示されないことがあります
コードベースのボタンにはこれらの問題はありません。HTMLやCSSを使えば可愛らしいボタンをデザインできるので、ボタンを画像にする理由は一つもありません。
HTML/CSSで作られたボタンは、メールを含むあらゆる場所で表示されるます
特にメール用のボタンであれば、HTMLとCSSを使ってボタンをデザインしましょう。
まとめ
クリックやタップしてもらうことは目的の半分にすぎません。クリックしたからといって、本当に登録やサービス購入する人はまたそこから減ってしまうからです。
計画されたボタンは結果に大きな違いを生みます。大きな修正でなくてもちょっとしたことが違いを生むことがあります。
もう一度ボタンを見てみましょう。ちょっとしたデザインやラベルの変更が大きな違いを生むかもしれません。
コメントを残す