意外と難しいボタンのお話

ボタン？それともリンク？

昨年からデザインシステムをテーマにしたセミナーやワークショップを何度か開催していますが、ワークショップに参加した方から「ボタンは難しい」という感想をいただくことがあります。ボタンの見た目を作ることも奥深いですが、もっと難しいのが、いつ、どこで、どのように使うかを共有すること。考え始めると「そもそもボタンとは何か？」といった疑問が浮かび上がります。

フォーム要素と一緒にあれば、ボタンだと断言しやすいです。HTML であればマークアップも <button> になりますし、アプリでも　iOS であれば UIButton を使えば良いと判断できるはずです。

文章のあとに「今すぐ始める」というラベルが付いた要素があるとしたら、これはボタンと呼べるでしょうか。角丸のような装飾、注目されやすい色が使われているので、ボタンと見なすことができます。見た目はボタンっぽいですが、果たして本当にボタンと呼べるでしょうか。ただ、見た目がボタンになっているだけで、リンクと呼ぶこともできると思います。

Material Designではボタンのような見た目のもの（Raised Button）と、リンクのような見た目のもの（Flat Button）が用意されています。Material Design はボタンを使うタイミングを、画面の Elevation（高度）で使い分けるという決まりを作っています。例えば、ダイアログボックスのように『浮いている』UI パターンでは、Flat Button を用いることを推奨しています。決める判断のひとつとして良いですが、高度がないところで画面設計をする際はどちらをどのように使い分ければ良いでしょうか。

ボタンの定義を考える

デザインシステムは、見た目のバリエーションとコードサンプルだけでは十分とは言えません。先述したように、何気なく使っている UI 要素も人によって捉え方が違うことがあります。定義をあやふやのままにすると「ここは目立たせたいからボタン」といった会話が始まる可能性があります。ボタンとしての機能を考えず、見た目だけで判断を下すことで、インタラクションに一貫性が失われます。こうした小さなことの積み重ねが、使い勝手にも繋がるわけです。

VMWare のデザインシステム Clarity のボタンの定義。簡略ですが、きちんと明文化されています。

どのような状況でも判断できる、完璧な定義を作ることはできません。ただ、チームで「だいたいこう捉えている」という基本は押さえておきたいですし、文章化が必要です。リンクと使い分けるために、ボタンと合わせてリンクも説明できたほうが良いです。

例えば URL （特定の画面）への遷移が必要に場合はリンクにすると定義できます。これは別画面でなく、画面内の移動も URL があるという意味では含まれます。ただ、ボタンも画面遷移に使われる場合があるので説明不十分です。よって、ボタンに以下のような説明を加えることができるはずです。

• フォームに対して何か操作をする場合
• 具体的な行動・操作をしてもらいたいとき
• ある特定の状態に変更したいとき

ボタンがリンクと違うところは、利用者が「こうしたい」という具体的なアクションに対して web サイトやアプリが何かしらの形で応える会話を始めるための要素という点です。ボタンが押されたらそれで終わりということはあまりなく、そこから次のアクションを促したり、適切な情報へと誘導することが多いです。ボタンは、利用者との会話をスムーズにさせる役割を持っていると言えるでしょう。

まとめ

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

デザイナーやエンジニアの中には、使い方を明確に分けることができる人もいますが、感覚的で明文化されていない場合があります。もちろん、定義の他にも状態、インタラクション、組み合わせといったビジュアルに関わる課題もあるわけですから、ボタンひとつといっても考えることはたくさんあります。ただ、その前に「そもそもボタンとは？」という部分をチームで共有しておかないと、せっかくボタンをデザインしても間違った使い方をされる可能性があります。

リンクとボタンをきちんと分類できる定義を作ることは困難です。できれば 1 文でも良いので定義を考えるべきですが、せめて関わっている人たちの間でもボタンの捉え方が違うことが気付ける場を設けたほうが良いでしょう。