クリックしたその先を伝えるボタンデザインのコツ

shunichi shiga
ボタンデザインのコツ

Webサイトやスマホサイト、アプリなどのボタンデザインは、1人でも多くのユーザーにクリックしてもらい、コンバージョンを上げることが最終的な目的です。ユーザーは「これを押すことが自分に有益か?」を常時直感的に判断しているため、ユーザーのストレスにならないよう、ボタンデザインは「クリックしたその先」をスマートに伝えることが大切です。ここではボタンをデザインするコツを紹介します。

良い意味で違和感のあるボタン作りをしよう

「サイト全体のバランスを崩す悪目立ち要素」は避けたいものですが、ボタンデザインの場合は存在感を与えることも必要となるので、「よい意味で違和感のあるデザイン」が作れるように日々トレーニングしたいものです。

このようなデザインのコツは「少し外す」こと。例えば、サイトのイメージカラーや雰囲気の調和を取りながら、目立たせたいボタンの部分だけ、他と異なるフォントをワンポイントで使うなどです。反転・白抜き・イラストを使うデザイン方法や、カーソルオンすると色が変わるなど、動的なアクションをさせるようなボタンデザインもオススメです。

全体のデザインに溶け込みながらも、「ちょっと気になるパーツ」であることが、良いボタンデザインと言えるでしょう。

スクロールを意識したボタンデザイン

クールでスタイリッシュなサイト作りは、画面に要素を詰めすぎて見にくくなるのを避けるためにも、スクロールバーのナビゲーションを取り入れることが大切です。例えば、jQueryのプラグインを使えば、プログラムビギナーでもスムーズに動的操作を取り入れられように作業を効率的に行うことができます。

また、「画面遷移」という意味のスクロールについても常に意識したいところです。例えばECサイトなら「商品を購入するまでに、何ステップ画面遷移するのか」ということを設計した上で、ボタンの位置やスクロール後のデザイン変化に違和感がないナビゲーションを心がけましょう。

スクロールでストレスを感じるボタンの配置やデザインはユーザーを離脱させやすく、せっかくコンバージョンの可能性があっても逃してしまうことになりかねません。サイト流入からコンバージョンまでの段階をシミュレーションし、「スムーズに押せるボタン」を最適な場所に配置するのがデザインのコツです。

気になってしまうシンプルなラベリングとは

ユーザーにアクションを促すことが目的となるボタンデザインでは、「ラベリング」が特に重要となります。例えば、見た目のかっこよさを重視し、すべてのボタンを英語でラベリングする場合は注意が必要です。その英語がサイトを訪れるユーザーとの共通認識として成立している単語なら問題はありませんが、そうでない場合、コンバージョンにはつながりにくくなってしまいます。

数ステップのアクションを経て最終的にコンバージョンさせるためには、親切で丁寧なナビゲーションが必須ですが、小さなボタンの中に入れられる情報は限られています。より良いボタンをデザインするには「次ページが予想できる、シンプルなラベリング」を意識することがコツとなります。

例えば、和風商材のサイトで多く見られる、「創」「織」「食」などの漢字一文字をデザインしたラベリングは、次が想像しやすい上にシンプルなデザインとなっています。「先を想像させるシンプルなラベリング」は、アイデア次第で幅広くデザインができそうです。

次アクションのための布石であるボタン

ユーザーにアクションを促すボタンをデザインするには、もちろんクリックの先に「どんな画面があるか」を伝えることが大前提ですが、ターゲットとなるペルソナを意識する必要もあります。キーワード検索やSNS経由など、様々な流入経路で多くの人がサイトを訪れますが、来訪者の中にはコンバージョンすることが考えにくいターゲットもいます。

例えばマンションなどの住宅購入者をターゲットにしたサイトで、見学会予約をコンバージョンと設定した場合、まだ就職もしていない学生よりも、30代の若いお父さんの方がコンバージョンの可能性が高いと言えるでしょう。

このポイントを頭に入れ、「サイトを訪れるすべての人」ではなく「コンバージョンする可能性のある人」に向けてボタンデザインをすることが、アクションを促進させるボタンをイメージしやすくなるコツです。

アクションの布石

デザイン by Coletivo 512

 

いかがでしたか?ボタンデザインのアイデアに煮詰まった時は「次のアクションを伝える」「コンバージョンの可能性が高いユーザーに向けて制作する」ことで、より具体的にイメージができます。ボタンは面積が小さいパーツですが、企業の利益や集客を担う大切ものです。小さな枠の中で適切に情報を伝え、シンプルなデザインができるように、日々トレーニングしてみてください。

最新のデザインコンペ

デザイナーとしてステップアップできるお仕事をご用意しています。
0%