logo

back DESIGN

ボタンUIのルールをデザインする

2013年08月24日

アプリケーションのデザインをするとき、企業やお店の公式サイトやランディングページよりも「機能をもったボタン」をデザインすることが多くなります。今回は、そういったたくさんのボタンをデザインする上で、普段ぼくが気をつけていることをまとめてみました。

導入:コントロールできるUIとそうでないUI

まず、ボタンはテキストリンクと同様にユーザーが操作できるUIということを明確にすることが絶対条件としてあると思います。そのを実現するアフォーダンスのアイデアとしては、

立体感をつける

ブラウザのデフォルトの状態でも採用されているアイデア。一重に立体感と言っても、具体的には後述のあしらいの組み合わせで成り立つ部分も多いですが一番ベーシックな手法です。ただ最近流行りのフラットテイストなデザインではテイスト上採用することで全体のテイスト感が崩れてしまうので、後述するようなアイデアをいくつか組み合わせて表現します。

角を丸くする

ボタンの角を丸くすることもUIとして認識してもらえるひとつの要因となります。

グラデーションをかける

操作できるUIだけにグラデーションをかけることでもコントロールできるUIとそうでないUIの差別化が図りやすいです。

目立つ色にする

コントロールできるUIを目立つ色にし、ユーザーがそのアクションをしたいと思った時に探しやすい要因します。これは後述する「意思決定のボタンを明確にする」といった統一ルールにも関連します。

余白をとって要素を独立させる

余白を大きくとることで、その要素を独立させることでもボタンとして認識しやすくなることもあります。 などが主な手法としてあると思います。

Flat UIの操作系UIデザイン

Flat UIの操作系UIデザイン

本題:統一されたルールはユーザビリティに大きく影響する

次に気をつけたいのが、アプリ内のボタンデザインのルール決めです。コントロールできるUIとそうでないUIを明確にわけることでボタンをボタンとして認識してもらえるようになりましたが、次に操作系にルールを決めてユーザが自然と学習してもらえることを目指します。

意思決定のボタンを明確にする

たとえば、意思決定のようなポジティブなボタンをオレンジ色などの暖色系の色にし、ネガティブなボタンは青色などのように色でそのボタンが持つ機能を簡単に示します。このルールがオレンジ色のボタンである「意思決定ボタン」を手がかりにすることができます。

ユーザーが自然と学習できることを目指す

このようにボタンのあしらいにも意味のあるルールを付与することで「ユーザーが自然に学習できる」ボタンデザインにすることができ、使っていくうちにどんどんより使いやすいデザインにすることができます。

ボタンの意味からカラーを決定する

ボタンの意味からカラーを決定する


というわけでぼくが普段気をつけているようなボタンデザインのアイデアをまとめてみました。このようにメニュー選択時の色や各種ボタンの配色をルールの統一されたボタンデザインにすることで、より良いユーザビリティを実現できれば良いですね!

シェアしてね

top TOP
自己紹介
picture
KEISUKE TSUKAYOSHI

UX Designer / UI Designer.

株式会社Fablicでフリマアプリ"FRIL"などの事業サービスのプロダクトマネジメントやデザインを担当しています。

実績など詳しくはこちら

copyrights(c) Keisuke Tsukayoshi.