たかがボタン。されどボタン。

こんにちは!デザイン・システム室の加藤です。

前回から引き続き「旬をすぐに」の開発に携わっております。最近はフロントエンド(React)とバックエンド(Ruby)両方書いておりまして、非常に身になる日々だなあと感じております。

今回もフロント側の話にはなりますが、フロントを開発していると「ボタン」を作ることが非常に多いなと感じております。英語でButtonであり、HTMLでは<input type="button">であり、押すことのできるのあれです。

例えば登録するときのボタン、ページネーションのボタン、カートに入れるボタン、などなどボタンと言っても様々な種類があります。中にはあんまり押して欲しくないけど、用意しておかなければならないボタンだってあるかもしれません。

そんなUIの根幹をなすボタン。「旬をすぐに」のUIをもっと良くしたい!と常々感じている中で、ボタンについて私が最近意識していることや、デザインのトレンドを紹介しますので、普段どのようなボタンを作成すれば良いかと考える際の一助になればと思います。

デザインのトレンド

ボタンを作るときに、Webデザイン業界ではどんなボタンがトレンド何だろうと疑問を持つことは自然です。どんなデザインがナウいのでしょうか。

ひと昔前、iPhoneが登場したときに私はそのデザインのかっこよさ・先進さに目を奪われました。そのデザインの中にあったボタンはどんなものだったかというと・・・

画像引用元(https://av.watch.impress.co.jp/docs/20080711/iphone.htm)

こんな感じでした。youtubeはロゴではなくブラウン管テレビですし、カメラのアイコンもレンズなど現実に近いデザインがされています。影や光の反射など駆使して、機器上のものを現実のモノに近づけるデザインを「スキューモーフィックデザイン」と言います。このデザインは2010年前後に流行ったものです。

そのあと「フラットデザイン」というものに流行りが移行しました。私がフラットデザインで印象深いのが「windows8」ですね。windows7(またはwindows vista)ではAeroと呼ばれるガラスのようなデザイン、ちょうどスキューモーフィックデザインに則した反射や半透明を多用したものでしたが、windows8ではタイルと呼ばれる長方形の箱が並んでいるようなデザインで、アイコンやボタンに影や反射といったものはほとんどありませんでした。

画像引用元(https://www.itmedia.co.jp/pcuser/articles/1601/12/news066.html)

現在Webなどでよく見かけるのはやはり「マテリアルデザイン」でしょう。マテリアルデザインはgoogleが導入したデザイン言語で、現実の感覚に”近い”ことを目指しています。

現実に近いというのなら、最初の「スキューモーフィックデザイン」とは何が違うの?と思う方もいらっしゃるかもしれません。私の理解している範囲では、スキューモーフィックデザインは現実のものを忠実に再現しようとするもので、マテリアルデザインは現実的に起こりうるだろうという直感が表現されているものだと考えています。たとえば、浮いているものには影が生まれます。押そうとしているものにも、対象に重なれば影ができます。現実でも何かを押そうとして指をその上にかざすとそこには影ができますよね。

旬をすぐにでもマテリアルデザインを取り入れております。

今年になって「ニューモーフィックデザイン」というのも少しづつ出てきました。これはすキューモーフィックデザインとフラットデザインを掛け合わせた感じのものです。この特徴はフラットな表面に、光と影の明暗だけで凹凸を表現します。しかしながらボヤっとしているので、UIにした時の境界が分かりづらいかなと私は思います。

左:マテリアルデザイン 右:ニューモーフィックデザイン

ボタンで意識すること

私がボタンを作成する際に気をつけていることは主に3つあります。

  1. ボタンを押して何が起こるかを分かりやすく
  2. ボタンの優先順位をはっきりとする
  3. ボタンの色と意味

ボタンを押して何が起こるのかを分かりやすく

ボタンを押したら何が起こるのか?をユーザーに理解してもらうには、ボタンにどういう役割があるのかを説明する必要があります。では上の画像の「旬をすぐに」では何が起こるでしょうか。ユーザーは何が起こるのかが全く分かりませんね。なので、ボタンの中には簡潔に何が起こるのかを記述する必要があります。

ここでは、Webサイトでユーザーに商品を購入してもらうために、商品をカートに入れるボタンを例に説明します。

上記はフォントや色などは変えず、ボタンの内容が異なる4種類のボタンです。左2つは「カート」を表す文字やアイコンだけで構成されています。一般的にWebサイトでカートだけのボタンはカートの中身を見る時に押すボタンですが、人によっては商品をカートに入れるボタンと勘違いするかもしれません。(実際はこの問題はボタンの在る位置によって解消できます。)

右の2つはボタンを押したら何が起こるのかが明白ですね!アイコンと文字を組み合わせることでさらにパッと見た時に認識しやすくなります!私が携わっている旬をすぐにでは幅広い年齢のお客様がご利用され、Webでのお買い物に不慣れなお客様もいらっしゃるので出来るだけアイコンとテキストで分かりやすいボタンを心がけています。

ボタンの優先順位をはっきりとする

Webサイトにボタンがたくさん配置されることは珍しくないです。次にボタンに優先順位をつけて、ユーザーに押してほしいボタンとそうでないボタンをはっきりさせておくことで、ユーザーが迷いなく操作できたり、サイトを利用してもらいやすくなります。

これらのボタンにはスタイルに違いがあります。テキストのみや枠線ではなく、影をつけて浮いているように見せることで「押せそう!」と感じさせることができます。(私は押せそうなボタンがあれば押したくなる派です!例えばバスの降車ボタンとか・・・もちろん自分が降りるときにしか押さないですよ!)

またボタンに色をつけるのも、ボタンの優先順位をつける上で良い手段です。上のボタンの中でも赤いボタンが間違いなく目立っています。ただし注意しなければならないのは、比較的濃い色を使用する時は中のテキストやアイコンの色を考慮しなければなりません。右から2番目のボタンは赤くて目立ちはしますが、視認性はこの中でもっとも劣っています。

もう一つ例をあげます。ユーザーが何か手続きなどをする際には上のようなボタンを配置することがあると思います。左の画像では同じスタイルを用いていますが、これでは優先順位が付いておらず、ユーザーはどちらに行くべきか迷いが生じる可能性があります。対して右の画像では進むボタンに影と色をつけることで、優先順位をあげています。これでユーザーが次に何をするべきかが直感的に分かりますね!

ボタンの色と意味

色ごとに人間が感じる感覚に違いがあることは周知の事実かと思われます。例えば赤は停止や危険、黄色は注意や警告、緑は進行や安全などの意味があります。ボタンでもこの感覚はもちろん適応されます。ボタンの起こすアクションとボタンの色の意味が近い方が、認識しやすいUIということです。

これはもちろん右の緑色のボタンがボタンのもつ意味と色がもつ意味が一致しているため、もっとも分かりやすく操作しやすいボタンとなります。色の意味についてはJISでも定められていますので参考程度にご覧ください。

JIS安全色 https://ja.wikipedia.org/wiki/JIS%E5%AE%89%E5%85%A8%E8%89%B2


デザインのトレンドとボタンで私が意識していることを書いてきました。みなさんも当然のように知っていることだったり、感覚として認識していて言わずもがななことばかりだとは思いますが、今一度ご自身の「ボタン」について意図通りのボタンになっているか、ユーザーに混乱を招くようなボタンを配置していないかなど見直していただける機会になれば幸いです。

専ら旬をすぐにでも適切なボタンを配置をし、みなさんに利用していただきやすいサービスを目指して参りますので、今後ともよろしくお願いいたします!


メンバー募集中 !

弊社デザイン・システ室では現在メンバーを募集しております。私のような未経験間もないエンジニアでも、開発の一員としてチャレンジできる環境があります!

興味を持たれた方は、是非下記のフォームよりご応募ください。

お待ちしております!

デザイン・システム室へのご質問 >

募集要項およびエントリーフォーム >