塗りや線から考える、色が変わるボタンのUI

Pocket

こんにちは、藻です。

先日Twitterのアップデートが入り、ボタンのUIについて話題になりましたね。だいたいこのような変更のされ方をしております。色とともに線と塗のルールも反転しています。

私は未だに慣れておらずうっかりフォローしたり外したりをしてしまっております。InstagramといったSNSの仕様に合わせるようなモノクロボタンへの変更ですが、私のようにTwitterをよく使っていた場合、まだ慣れていない方も多いのではないでしょうか。

そこで今回の記事のテーマは「塗りや線から考える、色が変わるボタンのUI」です!
改めてボタンについて考えていきたいと思います。


まず、色の変わるボタンとは?

大きく分類として、4つに分かれるのではないでしょうか。
(1)押したり取り消したり何度も押せるボタン
(2)一度押すと取り消しのできないボタン
(3)文字などを入力すると押せるようになるボタン
(4)カーソルを合わせると色が変わるボタン(ホバーボタン)

それぞれどのような表現があるかを今回は紹介していこうかと思います。


1.押したり取り消したり何度も押せるボタン

基本的に線白抜き→色塗りつぶしで作成することが多いです。といいますのも、押すと白抜きのボタンが全面塗りに変わる→塗りつぶしできた!というように、視覚的に判断しやすいからです。
例えば、SNSのいいねなどで活用されるハートマークで比べてみるとわかりやすいのではないでしょうか。従来のフォローボタンもこのような作りになっていましたね。


2.一度押すと取り消しのできないボタン

これはマッチングアプリでのいいねや、ソーシャルゲームでのフレンドポイントを送る機能などが該当しますね。ポイントを消費して押す際や、押せる回数に制限があり取り消すことを想定していない場合などに使われます。このボタンは標準的に塗りで表示され、押すとグレーアウト、あるいは薄いカラーになり押せないものと判断させるように作成されます。積極的に押してもらうことに意味があるので目に入りやすい塗りボタンで作成されるのかもしれませんね。


3.文字などを入力すると押せるようになるボタン

こちらに関しては、必須で項目の選択、または入力する情報が必要な際に表示されるボタンです。入力するまで押せないと一目で見てわかるよう、グレーアウトあるいは薄い色で予め表示されます。入力が完了することで色が付き、押せると視覚的にも伝わりますね!説明で文字として「必須」と書くだけではなく、こういったUIを取り入れることで親切なホームページになるはずです。


4.カーソルを合わせると色が変わるボタン(ホバー)

こちらは最近のホームページではよく見かける表現ですね!カーソルを合わせる(マウスオーバーする)と色が変わる、アニメーションが動くといった動作自体をホバーと呼びます。押せる!といったことがわかりやすく目に留まり、つい押したくもなっちゃいます。ホームページのデザインに個性もつけやすいですよね。ユーザーの視点でも飽きさせることを避けたりできそうです。


おわりに

いかがでしたでしょうか。こう考えてみると一概にボタンとはいえ、使い分けをしていくことでよりよいUIが作れたり、気づきになりそうですよね!せっかく設置するのであれば、単なるボタンで済ませるのではなく効果も考えて表現を組み込んでみることがおすすめです。
Webページやアプリケーションデザインをする際に何気なくではなくここはこのボタン!こういった配色!と判断していくことでデザイン的にも利用者側にも効果的に使いやすくなるかと思います。
ぜひいろいろと試してみてくださいね。

それではデジマースの藻でした。

Pocket