UIをデザインするうえで，ボタンは欠かせない要素です。利用規約に同意するとき，ユーザーにアクションをしてもらうとき，何か項目を削除するときなど，ボタンと一言で言っても利用するシーンによって使い方はさまざまです。

使い慣れているコンポーネントでもあるため，深く考えずなんとなく使ってしまっている方もいるかもしれません。しかし，ボタンはユーザーのアクションを左右する重要な要素です。状態に合わせて複数のデザインを用意しないといけないうえ，どのように配置するか，どんな形状を用いるかをちゃんと考えておかないと使い勝手が低下してしまいます。

ボタンは利用シーンによって使い方がさまざまであると書きました。マウスオーバーなどの状態，利用シーンに合わせた形状，プライマリやセカンダリなどの強弱など考えると，実は1つのサービスの中でもかなりの多くのデザインを用意しなければいけません。

今回は，普段私がボタンを使ううえで意識していることや，使い方に悩んだこと，そしてそれをどう解決したかなど，いくつかの切り口で書いていきます。

状態によるバリエーションとデザインのポイント

まず，ボタンはユーザーがクリックまたはタップして作用するものです。私はボタンの状態をそれぞれデザインするとき，いつも一定のルールを設けています。ボタンの形状や色が変わってもこのルールに沿うことによって使い勝手が良いデザインになると感じています。

もしどのようなデザインにするべきか迷ったら，以下のルールを参考にしてみてください。

マウスオーバーまたはボタン押下時

通常よりもボタン背景と文字のコントラストを上げる

利用不可の状態

通常よりも画面背景とボタン背景，ボタン背景と文字の両方のコントラストを下げる

形状のバリエーションとデザインのポイント

ボタンの形状は1種類ではありません。1つのサービス内でも使い分けることがあります。画面全体に対しての保存／画面の一部の情報の編集／行の削除など，アクションの対象となる要素のサイズ／範囲／重要度などに応じて使い分けが必要です。

デスクトップとモバイル両方に提供するサービスの場合は，図1くらいの種類を用意しています。

大きいボタン

画面全体に対するアクション

小さいボタン

画面の一部分に対するアクション

テキストボタン

画面の一部分でインラインで配置する場合のアクション

アイコンボタン

画面の一部分でスペースが限られ，文字ではなくてもユーザーが理解できるアクション

同じアクションを異なるボタンで実現する事例

同じアクションをするボタンはサービス内ではできるだけ統一するべきですが，状況によって異なる形状を使うケースもあります。図2（a）は「閉じる」アクションを右上の×で行うのに対して，（b）は画面下部の「閉じる」ボタンで行うデザインです。

写真拡大のような場合はできるだけ写真が大きく表示できるよう，（a）のようにボタンをアイコンでコンパクトに用いるほうが効果的です。一方，文章をちゃんと読ませたい場合や情報を入力してもらうようなモーダルの場合は，（b）のように「閉じる」または「キャンセル」など明示的なラベルを用いたボタンのほうがわかりやすいです。

このように同じアクションでもニュアンスや状況が異なる場合は，異なる形状のボタンを使うほうがよいと考えます。

アルバイト・求人情報サービス「LINEバイト」（⁠図3）では，複数の画面で条件を解除するための「クリア」ボタンが設置されています。同じサービス内の同じ機能で，異なる形状のボタンが使われている事例です。（a）の条件設定画面では複数のセクションがあり，それぞれのセクションの条件をクリアするために小さめのテキストボタンを配置しています。（b）の職種を選択する画面では，画面全体に対して条件をクリアするため画面下部に大きめのボタンを設置しています。仮に（a）のケースで（b）のようなボタンを使おうとすると，余白が増えボタンの存在感も増してしまいます。画面上でそんなに存在感を出す機能でもないため，あえてデザインを変えるほうが各画面に最適化されていると言えます。