これまで、これさえやれば1.X倍!?実際に効果が出たEFOオススメ施策ベスト10や確認ページからの離脱はゼロに!!今すぐ対策したい6つのチェックポイントなどで、何度もお伝えしている【送信ボタンにこだわることの重要性】。
EFOにおいて送信ボタンは非常に重要です。弊社のメディアでも最も効果が出た施策も送信ボタンの変更でした。（フォーム完了率1.9倍増）
今回はそんな、フォームの送信ボタンに関するEFO施策をご紹介したいと思います。
送信ボタン最適化のためのEFO・9つの掟
まず、今回ご紹介するEFO施策はズバリ、以下のとおりです。
- ボタンはボタンのように見せよ
- ボタンはユーザーが見つけやすい位置にを配置せよ
- ボタンの色にこだわれ
- ボタンは大きく！押しやすく！
- ボタンが最も重要らしく見えるようにせよ
- 適切な順序でボタンを配置せよ
- ラベルは何をすべきかを明確に示す文言にせよ
- キャンセルボタン、リセットボタンはなくせ
- 離脱につながるアクションは、なるべく目立たせない
順番に見ていきます。
掟1: ボタンはボタンのように見せよ
直感的にボタンであるとわかるようにデザインしてください。
よい例
ボタンらしいデザインの条件としては、背景との境界線がはっきりしていることが前提です。
また、グラデーションをうすくかけるなどして立体的に見せるとよりボタンらしく見えます。
よくない例
背景色や境界線がついていないと一気にボタンらしさがなくなります。
剤と全体の調和も必要ですが、ボタンはボタンらしく見せるよう心がけましょう。
掟2: ボタンはユーザーが見つけやすい位置にを配置せよ
よい例
よくあるボタン配置の例。
ユーザーが最後に入力するであろうラジオボタンの直下に配置されており、ボタンを認識しやすい好例といえます。
よくない例
ボタンの配置は自然な視線移動の先にあるのが鉄則。
このように極端な左寄せにしたり、フォームとの距離が離れている、フッターと同化しているような場合は要注意。ユーザーがボタンを見逃しやすくなっているかもしれません。
掟3: ボタンの色にこだわれ
色を変えてみることが大きな効果をもたらすことがあります。
弊社サイト（寒色系デザイン）の例では、ボタンを寒色系から暖色系に変えたところ成果がアップしました。
サイトのトーンとの対比で、ボタンがより目立つ色にすると効果的かもしれません。
掟4: ボタンは大きく！押しやすく！
小さなクリックエリアはユーザーにとってストレスです。
比べてみると一目瞭然ですが、ボタンは文字や余白を大きくとって押しやすいUIにしましょう。
掟5: ボタンが最も重要らしく見えるようにせよ
よくあるのが、確認ボタンで「戻る」「送信」の２つのボタンを並べる例。
よくない例
このように並列な見せ方をするよりも、下記の例ように起こしてほしい側のボタンを強調しましょう。
よい例
掟6: 適切な順序でボタンを配置せよ
下記の確認画面から送信しようとしてみてください。
無意識に右側のボタンを押下してしまった/しそうになった方もいらっしゃるのではないでしょうか。
通常、右側に＜先に進む＞内容を配置することがほとんどですので、フォームを作る際もその慣例にならうとミスがおこりにくいかと思います。
掟7: ラベルは何をすべきかを明確に示す文言にせよ
フォームのラベル（＝文言）は「送信」「進む」「次へ」のような抽象的な言葉になっていないでしょうか？
- 「メルマガを受け取る」
- 「今すぐ購入する」
- 「会員登録する」
- 「資料を請求する」
など、具体的な内容を想起させる文言にするとユーザーが戸惑うことがありません。
掟8: キャンセルボタン、リセットボタンはなくせ
最近ではかなり減ってきましたが、リセットボタンやキャンセルボタンがついたフォームは要注意。
特にリセットボタンはユーザーにとって不要なことがほとんどです。（間違えて押下してしまった時のことを考えるとぞっとします）
そうしても必要な場合をのぞいてキャンセルボタンやリセットボタンはつけないようにしましょう。
掟9: 離脱につながるアクションは、なるべく目立たせない
例えばECサイトの「カゴの中身を破棄する」ボタンなど、アクションさせたくないけれどボタンを設けないといけないような場合があると思います。
そのようなボタンはこれまでとは逆の施策を実施するのがコンバージョンを保つためには重要です。
ボタンのサイズを小さくし、テキストリンクにしたり、色も目立たない色にするなど、クリックされにくい見た目にしておくと良いでしょう。
まとめ
いかがだったでしょうか。
今回ご紹介したEFO施策は以下の9つでした。
- ボタンはボタンのように見せよ
- ボタンはユーザーが見つけやすい位置にを配置せよ
- ボタンの色にこだわれ
- ボタンは大きく！押しやすく！
- ボタンが最も重要らしく見えるようにせよ
- 適切な順序でボタンを配置せよ
- ラベルは何をすべきかを明確に示す文言にせよ
- キャンセルボタン、リセットボタンはなくせ
- 離脱につながるアクションは、なるべく目立たせない
あなたのフォームの送信ボタンは大丈夫でしたでしょうか？
ぜひ、参考に改善を行ってみてください。
