Webサイトやアプリを訪れたユーザーに対して、ゴールまでの最適な道筋をつけるのがCTA（Call to Action：行動喚起）。このCTAを意識してボタンをデザインすることで、クリック率やコンバージョン率を大幅に改善できます。ボタンを実装するときにチェックしておきたい7つの法則を紹介します。
1.ユーザーの言葉を使う
ネットで買い物しているところを想像してみましょう。以下の2つのボタンがあったら、どちらを押したくなるでしょうか。
ほとんどの方は、右の「注文する」を選んだはずです。デザインがまったく同じボタンがあったとしたら、自分が日ごろから使っている言葉のほうがピンときて押しやすい。企業側の言い回しと、ユーザー側の言い回しがずれているほど、ユーザーはアクションを起こしづらくなります。ボタンのラベルにはユーザーが普段使っている言葉を使いましょう。
Webサイトの制作ではつい企業目線の言葉を使いがちです。以下の例を参考にして、サイトのラベルを見直してみましょう。
2.目に留まる場所へボタンを置く
ページの中の余計な要素はなるべく取り除き、目立ちやすく押しやすい場所にボタンを配置しましょう。
以下の例をご覧ください。上の画面では、ボタンは本文のすぐ下に配置されています。
一方、下の画面では、ボタンは本文とは離れた右側にあり、ボタンの下は空白になっています。上の例に比べて、ボタンが目に留まりやすくなっています。
3.ページ内で明るく目立つ色を選ぶ
ボタンは明るく目立つ色にしましょう。ただし、何色でもよいわけではありません。そのページの中で目立つ色を選ぶべきです。
LinkedInのボタンの例を見てみましょう。会員登録へ誘導する「View full profile（経歴を見る）」ボタンが黄色になっています。
ポイントは、ページ内で使われていない色にすることです。上の例でも、色自体はそれほど派手ではありませんが、白と水色の背景の中ではボタンの色が際立つ結果になっています。
4.トンマナに従順すぎるな
ボタンをトーン＆マナーに馴染ませすぎて、色を抑えてしまうといったことはありませんか。しかし、それはおすすめできません。
以下は「Swinton Car Insurance」（イギリスの大手保険会社）の以前のサイトです。どのボタンも同じに見え、どこを押せばいいのか迷ってしまうのではないでしょうか。しかも左側のボタンの色と、メインの画面に配置されている文字の色も同じです。ボタンが完全に埋もれてしまっていますね。
もちろん、トーン＆マナーを無視せよとはいいません。上の例であれば、重要なボタンにはオレンジ系で目立つ色を使ってみるとよいでしょう。
5.大きいことはいいことだ
「サイズが大きく、現在のポインター位置から近いものほど押しやすい」（フィッツの法則）のはユーザーインターフェイスの基本です。マウスでの移動距離が長いUIや、クリックできる場所が非常に小さいナビゲーションは、ユーザーにとってストレスになります。
FirefoxのWebサイトでは、大きなボタンをページ上部に配置しています。
当たり前のことですが、押してもらいたいボタンはサイズを大きくしましょう。
6.ボタンのサイズで優先順位をつける
とはいえ、すべてのボタンを同じように大きくしてしまうと逆効果です。以下の3つの画像を順に見ていきましょう。
まず、ボタンが1つのみの場合です。「Get Started Now」のボタンは目立つ位置に配置されています。
この状態でボタンをもう1つ増やすとどうでしょう。次のように右上に赤いボタンを1つ増やしてみました。するとユーザーはどちらのボタンが重要かわからず、操作に一瞬迷ってしまうでしょう。
そこで、「Get Started Now」のボタンを大きくしてみます。
このように、ボタンのサイズで優先順位をつけることで、どれを押すべきかがひと目でわかるようになるのです。
7.邪魔なボタンのつけすぎに注意
次の例は、「TD Waterhouse」（カナダの投資銀行）のサイトです。上から「ログイン」「口座開設」「CFD&スプレッドログイン」「証券業者ログイン」の4つのボタンが同じ色、同じサイズで並んでいます。
すでに口座のアカウントを持っている人であれば、多少見つけにくくてもログインしてくれるかもしれません。しかし、口座を開設するユーザーにとっては、たくさんあるログインボタンが邪魔になっています。
練習問題にチャレンジ！
では最後に練習問題です。以下の画面は、「Laura Ashley」（イギリス出身デザイナーのファッションブランド）のカート画面で、実際に検証に使われたものです。この1〜3の中で、「Go to checkout(支払に進む)」のクリック率がもっとも高かったものはどれでしょうか。
答えは、2です。ちなみに、1が改善前の画面、それに対し2のクリック率は11.02％上昇、3は逆に7.85％低下しています。
2のクリック率が上昇した理由は、ボタンの大きさと目立つ色づかい。また、めったに使わないボタン「update shopping bag（ショッピングカートの更新）」はあえてボタンではなくテキストリンクにしています。一方、3はテキストリンクをボタンにしたことで、本来の操作の邪魔になったと考えられます。
ゴールへの最短ルートを設計しよう
UXデザインでは、ユーザーが目的地になるべく早くたどり着けるにようにすることが大切です。今回紹介したボタンのデザイン法則もその方法の1つですが、場合によってはまったく別のUIを考えたほうがいい場合もあるでしょう。たとえば、「iPhoneアプリ設計の極意」の著者であるUXデザイナーのJosh Clark氏は、iPhoneとMacを連携させるアプリに、以下のような画期的なUIを実装しました。
Happy Together from Josh Clark on Vimeo.
4月17日から都内で開催する「UX Days Tokyo 2015」では、Josh Clark氏によるワークショップを予定しています。「We are no longer just UI designers. We are industrial designers.（我々は、もうUIデザイナーではない、工業デザイナーなのだ）」と語る同氏から、工業デザインの知見を生かしたUIデザインの手法を学べる貴重な機会です。ぜひご参加ください。
元InstagramやAdaptive PathのUXディレクターらが緊急来日
「UX Days Tokyo 2015」開催決定
| Image from Amazon.co.jp |
 |
|---|
| iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン |
Web開発において大事なUIをより良い形でデザインするためのイベント「UX Days Tokyo 2015」が4月17〜19日、都内で開催されます。
世界的ベストセラー「iPhoneアプリ設計の極意」の著者Josh Clark氏をはじめ、日本でも著名なコンサルティングファーム「Adaptive Path」のChris Risdon氏、元FacebookとInstagramのUXディレクターNate Bolt氏ら、最先端のUXスペシャリストが集う「カンファレンス」。
シリコンバレーをはじめとする海外で実践されているUI改善方法やデザイン手法をトッププロから直接学べる「ワークショップ」。
いずれも残席はわずかとなりました。早割は本日（3月20日）まで。お申し込みはお早めにどうぞ。
