【海外EFO】フォームに至る行動喚起ボタンのための、9つのベストプラクティス

本日は米国UX movementから、「行動喚起ボタン」を効果的に見せる手法についての記事を紹介させていただきます。

入力フォームまでの行動喚起を促すボタン。
それがユーザーにとって分かりやすく押しやすいものであるか、ユーザーに注目されるかどうかによってそのクリック率は大きく変化します。
もちろん、行動喚起ボタンが多くクリックされるほどユーザーを顧客として取り込むことができ、ビジネスに良い成果をもたらすこちは言うまでもありませんね。

今回取り上げるのは、「行動喚起ボタンのための最も効果的な手法」というタイトルで投稿された記事で、より多くのユーザーを取り込むためのボタンの改善方法を具体的に9つ紹介しています。

行動喚起ボタンはフォームに至る前のボタンですので、厳密にはEFO(入力フォーム最適化)ではなく、より包括的なCRO(コンバージョンレート最適化)の話になってきます。
しかし、今回紹介する内容はフォームそのもののボタン改善においても参考になる手法ばかりだと思いますのでぜひ参考にしてみてください。

※フォームのボタンについては過去に下記の記事でも似た内容を取り上げています(この記事でも偶然にも9点のポイントをお伝えしました!)。
少し重なる内容もありまずが、よろしければ併せてご覧ください。

【EFO施策】フォーム最適化・最大の要<送信ボタン>を攻略する、9つの掟
https://f-tra.jp/blog/column/1862

送信ボタンに注目させるための最も効果的な手法

ではさっそく、内容紹介に移りましょう。
記事内で紹介されていた9つのポイントは下記のとおりでした。

  1. グラデーションや影、丸みをつけてリアルなボタンのようにする
  2. ハイコントラストな配色にする
  3. 大きすぎないようにサイズを大きくする
  4. 緊迫感や即時性のある言葉にする
  5. 促す言葉を和らげる
  6. 1または2つの単語の場合は最初の文字を大文字に、3つ以上の単語の場合は文章のように
  7. 矢印やアイコンを加える
  8. マウスオーバー(ホバー)効果を追加する
  9. ファーストビュー内に配置する

それぞれ大まかなポイント/意図を紹介させていただきます。
詳しい内容については下部にリンクをつけていますので元記事(英文)をご覧ください。

グラデーションや影、丸みをつけてリアルなボタンのようにする

筆者は下記のように述べています。

グラデーションや影、丸みをつけることにより、ボタンが立体的に見え、現実的なボタンのようになります。
ユーザーは日常的にボタンを押しているはずなのでウェブサイト上にあるボタンを見るだけで何をすべきかすぐに理解できます。

このように、現実に存在するモノに似せた、立体的もしくはリアルな質感のあるデザインの手法は「スキューモーフィズム」などと読んだりします。
確かに平らに見えるボタンよりも立体的に見えるボタンの方が押したくなりますよね。人間にはなぜかボタンを押したくなる心理、欲求もあるようです。

最近のトレンドである「フラットデザイン」では、立体的に見せるためのシャドウやグラデーションを使わないものが多いです。
しかしやはりボタンをボタンだと認識させるためにはスキューモーフィズムの手法を用いることが効果的でしょう。

対比としてよく例に上がる、iPhoneのios6とios7の比較。Appleはios7でこれまでのスキューモビズム基調から、大胆にデザインをフラットに刷新した。 引用元:http://applenapps.com/feature/ios-7-vs-ios-6-comparing-the-home-screen-stock-app-icons

対比としてよく例に上がる、iPhoneのios6とios7の比較。Appleはios7でこれまでのスキューモーフィズム基調から、大胆にデザインをフラットに刷新した。
引用元:http://applenapps.com/feature/ios-7-vs-ios-6-comparing-the-home-screen-stock-app-icons

ハイコントラストな配色にする

筆者は下記のように述べています。

色はユーザーの注目を集める重要な役割を果たし、即座に見つけられるボタンこそ有無を言わさぬ送信ボタンと言える。

さらに、ボタンを見つけやすくする鍵としてハイコントラストな色(色や輝度の差が大きい)を使用するという点を挙げています。

ボタンにはぼんやりとした色ではなく、多少デザインの調和を侵すとしてもきりっと目立つ配色を施したいもの。
例えば青色基調のページデザインのフォームでは、青色のボタンよりも、赤やオレンジなどの暖色を用いたほうが当然、目立ちますね。

ハッキリした色

ハッキリした赤色のボタン

大きすぎないようにサイズを大きくする

筆者は、ボタンは色だけでなく大きさも重要で、大きいほど簡単にボタンを見つけられると述べています。
しかし、同時に下記のようにも述べています

サポートしているコンテンツまでを目立たなくしてしまいユーザーを惑わす場合もあるため、大きくしすぎないようにすることも大切。

当たり前のようですがボタンを大きくしすぎても、見てもらいたい商品や内容が目立たなくなって意味がありませんね。
大きければ大きいほど良いというわけではなく、ほどほどの大きさで押しやすいボタンが望ましいですね。

緊迫感や即時性のある言葉にする

緊迫感や即時性のある言葉は、ユーザーがボタンを押すことに影響を与える可能性があると筆者は述べています。

例えば、「今すぐ申込む」などのような言葉を使うことで、コンバージョンレートに大きな違いを生むことができるようです。
その他、直感的に伝わるような感情のある言葉を使うことが効果的とのことです。

「今すぐ」の言葉で訪れたユーザーががっかりして離脱することのないよう、フォームそのものもシンプルな作りにしておくことが相乗効果を産みそうです。

促す言葉を和らげる

例えばある商品に関するページで、いきなり「買う」というアクションを促すよりは、「試してみる」「2週間トライアル」などの軽いアクションを促すほうがハードルは低いです。

商品についてなにも理解していない状態でいきなり買い物カゴへの追加を行うユーザーは少なく、通常はトライアル期間を設けるなどして、少しずつ商品の特徴や長所を伝えていくことが必要だと筆者は述べていました。

弊社のEFOツール「エフトラEFO」でも、トライアル期間を設けています

弊社のEFOツール「エフトラEFO」でも、トライアル期間を設けています

ボタンのデザインという文脈からは少し離れますが、ユーザーの心理的ハードルを下げるという意味では重要な視点です。
フォーム側でもオファーの表示などで補助的に商品の魅力を伝えるとさらに効果的だと思います。

1または2つの単語の場合は最初の文字を大文字に、3つ以上の単語の場合は文章のように

英単語の表現に関することなので日本語のニュアンスに言い換えるのは難しいところですが、筆者は「1、2単語の場合はコマンド(命令)のように」「3つ以上の単語にする場合は文章的」にするとボタンテキストが対話のように感じることができるという旨を述べているようです。

フォームボタンの文言関連で言えば、端的な「送信」「確定」といった文言よりも、
「資料請求する」「この内容で申込む」といったような具体的な内容にすることが日本においては効果的だと思います。

20130829_confirm_btn_s

(無料)とまで書いてあり、ユーザーは安心してクリックできますね

矢印やアイコンを加える

アイコンをボタンに追加すると直感的にどのような動作となるかわかるようになると筆者は述べています。
確かにアイコンがあれば「クリックすると多分こうなるだろう」とイメージがしやすくなりますね。

これはフォームの送信ボタンでも使える方法ですね。
アイコンがあることで「戻る」と「進む」を直感的に理解することもでき、誤操作の防止にも一役買うのではないでしょうか。

カーソル・アイコンのおかげで直感的に操作を理解できる

カーソル・アイコンのおかげで直感的に操作を理解できる

マウスオーバー(ホバー)効果を追加する

ユーザーがボタン上にマウスを置いたとき(=マウスオーバー)の視覚的変化でクリックを促すことができます。
とくに背景色を変化させたり、カーソルを変化させることが良い方法だと筆者は述べています。

マウスオーバー時の効果例

マウスオーバー時の効果例

フォームの送信ボタンにもぜひこのマウスオーバー効果を付加しましょう。
フォームのボタンコンポーネントには、デフォルトでこのようなマウスオーバー効果はついていないと思いますので
スタイルシート等で別途記述が必要ですが、この一手間がボタンの効果を大きく左右するといっていいでしょう。

ファーストビュー内に配置する

行動喚起ボタンはページのファーストビューだけでなく、最下部にも用意しておくと、ユーザーがアクションを起こしやすいとの旨が紹介されています。

フォームでは通常入力項目の一番下にボタンを配置しますが、反対に任意項目が多い場合などにフォームの途中にボタンを配置してみるというのも送信率を高めるうえでのテクニックのひとつとして使えます。

任意項目を折りたたみ、ボタンをファーストビューで見せる例

任意項目を折りたたみ、ボタンをファーストビューで見せる例

最後に

いかがだったでしょうか。
本日は海外記事より、効果的な行動喚起ボタンのための9つのティップスを紹介しました。
ボタン1つをとってもこんなにも考慮すべき点があるという、EFO(フォーム改善)の奥深さを感じさせる記事でしたね。

筆者が記事の結びでも述べているように、最善のボタンというものには正解がなく、
結局はサイトを訪れるユーザーの立場になって考えたデザイン作成を行い、ABテストなどで検証を重ねながらより良い形を模索していく必要があります。

今回取り上げた9つのポイントを取り入れつつも、検証を繰り返し、ユーザーに寄り添ったより良いボタンの形を検討していきたいですね。

参考記事:Best Practices for Call to Action Buttons – UX Movement

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です