MotionBoardデザインコンテンツ

ボタンのデザイン

ボタンだとわかるようにするための考え方
Write your awesome label here.

もくじ

ボタンを作るときの考え方

ボタンは、利用者がなにかしらのアクションを実施するための素材です。
私たちが利用するアプリケーションやツール、Webサイトなどで必ず扱われています。
ユーザーのアクションを左右する重要な要素で、状態に合わせて複数のデザインを用意しないといけないうえ、どのように配置するか、どんな形状を用いるかをしっかりと考えておかないと使い勝手が低下してしまいます。
日々無意識で自然と操作しているボタンですが、いざ作るとなったときにいろいろな悩みが出てきますよね。
「どういったデザインがいいの？」
「どこに配置したらいいの？」
「アイコンだけじゃダメ？」
これらの悩みを解決していくためには、意識しなければならないことがいくつかあります。
ボタンを作るときのポイント


ボタンだとわかる

ボタンはユーザーがクリックまたはタップして利用するので、ボタンだとわかるデザインであることが重要です。
ボタンとして判断できないと、ユーザーはどこをクリックしたら次のステップへ進めるのかわからず画面上でひたすら迷い続けることになります。
また、ボタンとわからずにクリックし、意図した動作と違う状態になり混乱を招く可能性もあります。
「クリックできる」ものと、そうでないものの判断で悩ませないためには、まずは『ボタンである』と認識しやすいものを作らなければなりません。
では、ボタンだとわかりやすいものとはどんなものなのでしょうか？

ボタンの構成

ボタンは３つの要素のいずれかを用いて構成されていることが多いです。
これらの要素を使い分けて、利用用途にあわせたボタンをデザインしますが、最も一般的なデザインは角が丸い長方形のボタンです。
その理由は、私たちの日常生活で触れるものが関係しています。
例えば、キーボードや家電製品などのリモコン、販売機などのボタンは丸みのあるボタンが多いです。私たちは自然と丸みのあるボタン=押せるものという認知を働かせていると考えられています。
『角丸の四角は押せる』という認識はデジタルの世界でも共通認識となっています。

一般的なボタンの形

よく利用されるボタンの形状は３種類です。
装飾などを利用したボタンもありますが、基本的には以下のパターンが多く利用されています。
特に塗りつぶされたボタンと白抜きのボタンは多くのアプリやWebサイトで利用されています。
そしてこの２種類のデザインは、ボタンの役割に応じて使い分けられています。

利用場面で変わるデザイン

ボタンのデザインは重要度に合わせて使い分けます。
このように、各ボタンの役割や利用場面によってボタンの形状やデザインも変わります。
Primaryのように塗りつぶされたデザインは、他より目立ちます。だからこそ、主要なアクションで使われることが多いというわけです。
また、Primaryのボタンは多用して配置しないように注意が必要です。
例えば以下を見てください。
アクションとして『登録』と『戻る』があった場合、どちらもPrimaryのデザインで表現すると、ボタンの差別化ができず、どんなアクションをするためのボタンなのかが判断しづらくなってしまいます。
ひとつのデザインで統一するのではなく、ベースとなるデザインを決めて、それぞれのボタンの利用用途に合うデザインを検討しましょう。

クリック（タップ）時に何が起こるかわかる

ユーザーにボタンをクリックさせたいとき、その動作を促すために重要なのがボタン上の文言です。
あやふやだったり、誤解を招きやすいものにしてしまうと、ユーザーにストレスや不満を与えてしまいます。
例えば、「変更内容を保存しますか？」という確認ダイアログに配置するボタンのラベルを見てみましょう。
ボタンの文言は「動詞」つまり「〇〇する」といった表現が理想であるとされています。
上記のように「はい/いいえ」でも伝わりますが、動詞がありません。
このとき、ユーザーは何を問われているのか一瞬わからなくなってしまい、説明文を読み返す可能性があります。
理想の行動としては、確認ダイアログの説明文「変更内容を保存しますか？」を一読してもらったあとにボタン操作を行ってほしいのですが、実際は補足文章として認識され、ダイレクトにボタンに視線を向けるユーザーが多いため、こういったボタンには「動詞」を使うことを推奨されているのです。
クリックしたら何が起こるのか、ボタンを見るだけで理解できる文言を心掛けましょう。

見やすい文字サイズ

ボタンのアクションを認識しやすくするためには、ボタン内の文字サイズが重要なポイントです。
まずは、余白の有無による違いを見てみましょう。
余白がないデザインと余白があるデザインでは、余白のあるデザインがより見やすく、読みやすいです。
これは、ボタンの土台部分と文字に空間を作ることで、文字やアイコンが強調されるからです。
また、ボタン内の余白サイズはベースとされているサイズが比率で決まっています。
比率は、縦横1：2か1：3です。
配置エリアによっては、横幅が狭くなることもありますが、その場合は配置エリアに合わせてもOKです。
その際はほんの少しでも余白を入れるようにして、余白が全くないデザインは控えましょう。
ボタンのサイズを決める時は一般的なルールとして「8の倍数か4の倍数」というキーワードがあります。
この数字はピクセル（px）のことで、縦横幅を8pxの倍数か4pxの倍数で作るという意味です。
この考え方は、ボタンサイズだけでなく、コンテンツ幅や余白幅などでも同じです。
なぜこの数値かというと、汎用的なスクリーンサイズの基準値が8で割り切れるため、サイズを合わせやすいからです。
しかし、必ずしも8pxの倍数で作らなければならない、というわけではありません。
配置エリアによっては「8」で割り切れないサイズにしなければならない時もあります。
あくまでも目安として考えるとよいでしょう。

ユーザーが予測できそうな場所に置く

ボタンの配置場所もユーザーの行動をあらかじめ予測し、わかりやすい(見つけやすい)場所に配置する必要があります。
ダッシュボードでよく利用されるボタンの代表的な配置例を見てみましょう。
ボタン配置の例


  • 「実行」のアクションボタン
  • 複数のボタンで表示切替
  • アイコンボタン

「実行」のアクションボタン

例えば、いくつかの項目を選択した後や、入力させた情報を登録するときなど、なにかしらの操作を行った後の最終決定をするときにクリックするボタンは、視線誘導効果を利用した配置にすると操作がスムーズです。
この時の配置位置は情報の最下部です。
「実行」のボタンは、ボタンを押す前に何かしらのクリック操作があります。
上から順番に視線を動かし、必要ヵ所を操作します。そして、最終的に「実行」をクリックするといった導線がユーザーにとってスムーズです。
悪い例の場合、検索を実行するボタンが最上部にあります。この場合は、絞り込む内容を下まで読み終わった後に一番上まで視線を戻さなくてはなりません。
また、最上部にあることでボタンではなく、タイトルや情報かもしれないといった誤認識にもつながります。
このように「実行」に関するボタンは、ユーザーの操作を考慮して配置することが重要です。

複数のボタンで表示切替

ボタンを利用してチャートを切り替える時、対象の情報のそばにボタンを配置します。ボタンをクリックするとどの情報がどう切り替わるのか理解しやすい配置を検討することが重要です。
例えば以下のようにボタンが配置されていた場合、ボタンクリック後にどの情報が切り替わると予想しますか？
こういった配置の場合、画面上の情報がすべて切り替わるイメージを持ちます。
では、実際にボタンをクリックしたとき「SampleA」だけが切り替わったとしたら、ユーザーはどう思うでしょうか？
イメージしていた挙動と異なったことで、なぜ他のグラフが切り替わらないのかという疑問を持ち、混乱のきっかけになってしまいます。
画面全体が切り替わるのであれば上記の配置でも問題はないのですが、ある特定の情報のみ切り替わるのであれば、その情報のそばにボタンを配置したほうがボタンの意味を理解しやすくなります。
では、以下のようなデザインだとどうでしょうか？
この配置であれば「SampleA」が切り替わるボタンであることがしっかり理解できます。

アイコンボタン

ボタンにはアイコンのみで直感的に操作させるボタンと、文字とアイコンの組み合わせで作るボタンがあります。
アイコンだけで理解できるか、文字を加えた方がわかりやすいかは配置する場所やボタンの意味を考えて決めなければなりません。
例えば、ホーム画面に戻る為のホームボタンや、ポップアップを閉じるボタン、リロードや拡大ボタン、ヘルプ情報を表示するボタンなどは文字を添えなくても理解しやすいです。
アイコンのみで使われやすいボタン


もちろん、必ずアイコンだけにしなければならないというわけではありません。
配置場所や、より伝わりやすくするために文字をあえて添えることもあります。
広い範囲のスペースが確保できるのであれば、アイコンと文字で表示した方がバランスもとれますし、アイコンだけよりも伝わりやすくなります。
逆にスペースに余裕がない場合などは、アイコンのみのデザインを検討することが多いです。
このようにボタンデザインは、利用目的・用途・手順などを考慮し、ユーザーの操作しやすい状態であることが必須です。
ただ適当にボタンを作るのではなく、どうしたら理解しやすいか、押しやすいかを考えながら作りましょう。