UIデザインの要・ボタンデザインのポイント6つと、トレンドを遡る

インタラクティブなUIデザインをする上で、ボタンは欠かせない要素です。

正しくクリックしてもらうために、認識しやすいものにしなければなりません。シンプルな役割の中に、どれほ効果的なUX要素を盛り込めるかが重要です。

また、ボタンのデザイントレンドはここ十数年の間に大きく変化しました。

効果的なボタンをデザインするポイントと、ボタンデザインのトレンド・歴史をまとめました！

ボタンのUIデザインで考慮すべき6つのポイント

ボタンをデザインする前にユーザーにとってボタンがどのような意味を持つのか、ユーザーはボタンをどのように捉えるのか考えましょう。デザインでは以下に留意しましょう。

1. 角を丸くする

角丸が好まれる最も大きな理由は、それが人に安心感を与える形状だからです。スマートフォンやPCの角も、安全性を考慮して角が丸くなっていますよね。日常的に触れている形は、親やしすさを感じさせるのに効果的なのです。

ある研究では、角が丸いとボタンの中央の文字列に目を向けさせる効果があるとも発表されています。

ページのグリッドから逸脱する要素になるため、「ここがボタンですよ」という強調の役割も果たします。そういう意味では、円や三角のボタンにすると目立たせることができますが、少々子どもっぽさが出てしまうでしょう。

出典：Ramotion

角丸ボタンはWebデザインのトレンドでもあります。トレンドを採用することで、垢抜けた印象を与えられます。

2. ボタンのサイズは人の指に合わせる

モバイルアプリの入力方法に丸いボタンのタップが採用されている場合、ボタンのサイズは人の指に合わせた大きさにデザインしましょう。マサチューセッツ工科大学の研究機関である『MIT Touch Lab』によると、平均的な指腹のサイズは10～14㎜、指先のサイズは8～10㎜とされています。よって、10㎜×10㎜が最適なボタンのサイズと言えます。

Excerpt From The New Book “The Mobile Frontier”/UXMAGAZINE

この原則を守ることで、タップでのエラーを最小限に抑え、他のデザインエレメンツとのバランスを取ることができます。以下はボタンのサイズとエラーの頻度の関連を示したグラフです。
Stackexchange.com

3. ボタンのマイクロコピーには操作名を記述

ボタンに書く言葉は、誰が読んでも正しい選択肢を選べるように明確でなければなりません。”驚き最小の原則”に基づいて考えると良いでしょう。

驚き最小限の原則とは　−　ユーザインタフェースやプログラミング言語の設計および人間工学において、インタフェースの2つの要素が互いに矛盾あるいは不明瞭だったときに、その動作としては人間のユーザやプログラマが最も自然に思える（驚きが少ない）ものを選択すべきだとする考え方である。

-wikipedia

原則として、ボタンの文言はユーザーが実行する操作の名前そのものにしましょう。ボタンをクリック、タップした後に起こることが何か予測できる内容だと、ユーザーにストレスを与えません。

たとえば、DropboxのWebアプリにファイルをアップロードしようとするときに出てくるダイアログボックス。”Awesome！”という文言が表示されますが、これはクリックすると何が起きるのか明確ではないのでユーザーを混乱させます。

4. カラーで意味を付加する

適切なカラーをチョイスすることで、ユーザーをナビゲートしスムーズな操作を助けます。

ユーザーがアプリのコンテンツの内容を理解し、取るべき操作を簡単に理解できるようにカラーとコントラストを活用しましょう。下の画像では、重要なデータを消すなどの損害がでうる『アンインストールボタン』に赤色を使用しています。

一例ですが、各色は次のような意味合いを含んでいます。

• 黄色　−　警告
• 赤　−　危険
• グレー　−　デフォルト
• 緑　−　優先・成功

特にCTAボタンはひと目でわかる外見にしましょう。たとえば、Amazonにおける重要な操作である“Add to Cart”には、コントラストがハッキリした黄色のボタンを採用しています。

5. アニメーションをつける

人は動いている物に興味を示します。ボタンにもアニメーションをつけ、存在感をアピールしましょう。

Oleg Frolov / Dribble

6. アイコンとテキストを組み合わせる

購入に繋がるボタンやダウンロードに繋がるボタンなど、重要なアクションを誘導する場合にはアイコンとテキストを組み合わせるとより認識しやすいでしょう。

ボタンデザインの歴史

より効果的なボタンを作成するために、過去十数年のボタンUIデザインにまつわる歴史を見てみましょう。それぞれの時代のトレンドに、ヒントが隠されているかもしれまれん。

1990年代：立体的なボタン

1990年代のボタンデザインによく見られたスタイルです。浮き彫りと影を活用しボタンと背景とを区別をしていました。境界線、グラディエーション、影を使って、背景からボタンを目立たせます。この形状は「押す」行為を連想させるので、わかりやすく人気でした。

以下の画像のWindows95のダイアログボックスです。濃い影とハイライトを使用した3Ⅾ効果をつけ、クリックできるボタンだとわかりやすいようにしました。

2000年代：スキュアモーフィックボタン

デジタルデザインにおけるスキュアモーフィズムとは、UI要素に現実のもののような立体感、ツヤ感、影を与えることです。ユーザーは現実での経験をもとに、そのUI要素の操作方法を簡単に想像でます。

たとえば以下の画像の計算機の例はわかりやすいでしょう。現実の計算機のデザインを模造しています。

2010年代序盤：フラットデザインボタン

最近のUIデザインのトレンドで起きている顕著な変化。それは3Dを無視したフラットなデザインへの移行です。スキュアモーフィックなデザインと異なり、フラットデザインは現実の物理的なものの再現を目指しません。スキュアモーフィックなデザインの特徴であるどこをクリック、タップしたらよいのかユーザーに知らせる視覚的な手がかりがフラットデザインには少ないのです。以下の画像の写真を見てください。左が通常のボタンで、右がフラットデザインボタンです。

AppleiOSのフラットなデザインの計算機です。

2013年〜：フローティングアクションボタン

フラットデザインの派生系であるマテリアルデザインの特徴は、UIに奥行きをもたらすわずかな影とハイライト、レイヤーを使用していること。Googleのマテリアル・デザイン言語はほとんどフラットデザインの例です。

マテリアルデザインの1つのデザイン例としてフローティングアクションボタン（FAB）が挙げられます。FABはインターフェースの上に置かれ、ユーザーにとって優先的な操作を促します。最も優先度が高い操作の実行を促すCTAボタンとして機能するのです。

GoogleマップはFABの良い活用例として挙げられます。マップを使用するユーザーの目的は自分がいきたい場所への道順を知ることです。FABはその操作を実行させるのに最適です。以下の画像の、最も右下のボタンが道順を知るためのFABです。

UIデザインでFABを使用している他の良い例はEvernoteです。AndroidアプリではナビゲーションバーとFAB（add new）に若干の影をつけていますが、ほぼフラットなUIとなっています。

2014年〜：ゴーストボタン

2014年、UIデザインで1つのトレンドとなったのがゴーストボタンです。ゴーストボタンは枠線、透明の空白部で構成された長方形もしくは正方形のボタンです。逆に文字が空白な場合もあります。一般的にゴーストボタンは内部にプレーンテキスト(装飾のない文字)が置かれ、周りが細い枠線で囲われています。

ゴーストボタンは元々はフラットデザインから派生したものです。現在、トレンドとなっており、アップルはiOS7でもゴーストボタンを採用しています。iOSのユーザーインターフェースのほとんどのボタンはゴーストボタンです。

以下は『GET』というボタンをゴーストにしたもの。クリーンでしっかりしたした印象を与えます。

『Specular』のサイトはゴーストボタンの良い使用事例です。カラーを活用して”Purchase Now”を優先的なボタン、”Take Tour”を2番目に優先するボタンにしています。

まとめ

ゴーストボタン、FABのようなトレンドのボタンから古いボタンまで、その役割はシンプルに「クリックしてもらう」ことです。アタながUIデザイナーなら、せっかちなユーザーが操作している様子を思い浮かべてください。ボタンがわかりづらいものだとユーザーは操作を中断したくなります。最悪の場合、操作を放棄してしまうことになりかねません。

（翻訳：Shinya Morimoto）