WEBデザイナーがおさえるべきボタンデザインのポイント

WEBデザインにおいてボタンは必要不可欠な要素の一つです。

あまりにも日常的なものなのでユーザー側はあまり意識せず接しているかもしれませんが、

その役割はとても重要なので、デザイナーとしてはデザインをする上で神経を使う部分ではないでしょうか。

ここではボタンの役割や構造を改めて確認し、デザインする上でのポイントをまとめていきます。

ボタンの役割とは？

そもそも改めてWEBデザインやアプリにおけるボタンの役割とはなんでしょうか？

これは現実世界で考えるとわかりやすいかと思います。

テレビを付ける電源ボタンや切符を買う為の発券機のボタンなど、

ボタンは「何かをする」という動詞的な目的の為に押すものです。

デジタルでいえば、ECサイトで商品をカートに入れたり、コーポレートサイトでお問い合わせをしたり、facebookの「いいね！」ボタンもそうですね。

様々なボタンがあり、全てはユーザーにアクションを起こさせる役割があります。

ボタンの原則

様々なタイプのボタンがありますが、共通している事はひとつだと思います。

それは、一目でボタンだとわかる事です。

周りの要素とどう差別化し、ユーザーが一目でボタンだと認識出来る、これがボタンの原則ではないでしょうか。

改めて確認したいボタンの構成

ここで改めてボタンの基本的な構成をみてみましょう。

ボタンを構成する要素は3つあります。

1.文言(テキスト)

ユーザーがこのあと何が起こるかを明確に予測出来る文言を入れましょう。

2.アイコン

アクションをわかりやすく視覚化した記号や図です。
テキストとセットにする事でより早く認識されて効果的です。

3.背景

クリック出来る範囲になります。
昨今トレンドのゴーストボタンでは、背景は完全に排除され、枠組みだけや下線だけのパターンが多く見られます。

ボタンデザインのポイント

ひと昔前まではボタンのデザインはドロップシャドウやグラデーションを駆使した”現物の似せたリアル表現”であるスキューモフィズムデザインが主流でした。

しかしWindows 8が採用したモダンUIや、iOS7から移行したフラットデザインがきっかけでスキューモフィズムデザインの要素は取り除かれていきます。

ただフラットデザインのボタンは本文やタグなど他のあらゆる要素との見た目の差がほぼない為、どこがボタンなのかわからないというデメリットも指摘されます。

デザイナーはこのデメリットを解決すべく、どのような点に気をつけてボタンのデザインをしていけば良いでしょうか。

色でアクション内容を補完する

フラットデザインであってもスキューモフィズムデザインであっても、私は共通して考えるべきは色彩であると思っています。

全体の配色の中で目立つ色であるべきですが、ボタンデザインの場合はターゲットの潜在的な好みや色が与える心理的効果なども考慮する必要があります。

例えば一般的に赤色は購買意欲を高める色としてECサイトなどで使われたり、エネルギッシュなイメージから企業の採用サイトでもよく見られます。

青色は信頼性を高める色としてコーポレートサイトで使用される事が多いです。

図のように仮にテキストがなくとも、赤い方はリクルーターが押すエントリーボタン、青い方はビジネスマンが押すお問い合わせボタンのような気がするのは色の心理作用が働いている為です。

一般的に色が持っているイメージは以下のようなものがあります。ボタンの色を決める際に参考にしてみてください。

色が持つイメージ

赤	情熱・自信・活力・興奮・攻撃的など
オレンジ	暖かさ・親しみやすい・健康・・カジュアルなど
黄	光・希望・明るい・無邪気・黒を合わせると注意
緑	平和・リフレッシュ・安心感・成長
青	暖信頼・爽やか・清潔感・透明感
紫	優雅・上品・癒し・エキゾチック
黒	高級・重厚感・力強さ・都会的
白	清楚・真実・シンプル

▼関連記事

グレーは無効ボタン！？

一般的にグレー色のボタンは”無効”という印象があります。

クリックして欲しいボタンを有彩色にして並べると、意識せず有彩色のボタンを押してしまった経験は少なからずあるのではないでしょうか？そういった心理作用を利用するのもひとつのデザインというのかもしれません。

▼赤や緑の有彩色のボタンを無意識に押してしまう事、ありませんか？

paddingを多く取って大きく押しやすいボタン

パディングを多く取った大きいボタンはトレンドのひとつです。

http://www.keiho-u.ac.jp/

http://www.citroen.com/en/https://www.pholc.se/#

ゴーストボタンは◯◯でコントラストをつける。

ボタンの要素の一つである背景の色が取り除かれて枠(罫線)でクリッカブル範囲を囲んでいるようなデザインをゴーストボタンと呼び、こちらも昨今のトレンドのひとつです。

スタイリッシュなデザインや世界観のあるデザインにはマッチングするのですが、どうしても線だけだと周りの要素に埋もれてしまいがちで目立たず、ボタンとしての役割という面ではデメリットの方が多いのではと個人的には感じています。

そんなゴーストボタンで大事なのはコントラストを付ける事です。

http://www.harukimurakami.com/

こちらのサイトのボタンは世界観が統一されていて一見見過ごしてしまいそうでもありますが、背景の画像の使い方、ダイナミックなタイポグラフィーに対して、ゴーストボタンがシャープで際立っています。

シャープな線を活かした質感でコントラストを感じるデザインです。

マテリアルデザイン

冒頭でフラットデザインとスキューモフィズムデザインの事を述べましたが、フラットデザインに質感を持たせたマテリアルデザインが今一番主流のデザインでしょうか。

マテリアルデザインはgoogleが2014年にデザインのガイドラインとして発表しました。

Googleは2014年6月にGoogle I/O conferenceにおいて、新しいUX（ユーザーエクスペリエンスデザイン）体系として、「マテリアルデザイン」を発表した。マテリアルデザインは、ユーザーが接する画面にマテリアル（物質）、メタファーの概念を用いて一貫性のある世界をつくりつつ、ユーザーの操作を補助するもの^[3]。

スマートフォンやタブレットなど様々なデバイスにおいて、マテリアルデザインによる統一感のあるデザインを取り入れることにより、操作するデバイスが変わっても操作感に統一性を期待できることで、ユーザーはストレスを感じずに様々なデバイスを操作することができる。

https://ja.wikipedia.org/wiki/マテリアルデザイン

マテリアルデザインでは様々なパーツのガイドラインがありますが、ボタンに関しては、微かに影を落とす事でボタンを浮遊させ、紙が浮いているような質感を表現したり、2つボタンを並べる際のルール、アイコンの配置の仕方といった細かい部分まで規定されています。

マテリアルデザインの事例を集めたサイトもあるのでチェックしてみてください。

https://www.uplabs.com/android

まとめ

いかがでしたでしょうか。ボタンのデザインについてその役割から構成、トレンドから見るデザインのポイントまでを見ていきました。

ボタンデザインの世界は多様化していて、バナーやテキストリンクとの違いが曖昧になってきている印象を受けました。今一度ボタンの役割を理解し、WEBデザイナーとしてこれからも魅力的なボタンを追求していきたいと思います！