最近のUIデザインのテクニックを解説！より使いやすいボタンをデザインするときのポイント

Post on:2023年8月24日

はじめに

私はデザイナーになって20年が過ぎ、多くのプロジェクトでボタンを使用してきましたが、ボタンのデザインについて深く考察する時間を取っていなかったと思います。ボタンのデザインでよくある間違いをしていたことに気がついたのは、最近になってからです（私だけではないと思います）。

スマホでアプリを起動したりWebサイトをブラウザすると、たくさんのボタンに遭遇するでしょう。また、それらのボタンの多くには、ユーザビリティやアクセシビリティにおいて潜在的なリスクをもたらす問題があることも間違いありません。

大企業や経験豊富なデザイナーであっても、問題のあるボタンがたくさんあります。それらの問題を回避し、より良いボタンをデザインするための簡単で実用的なボタンのデザインについてまとめました。

この記事では一般的なボタンのデザインを取りあげ、客観的なUIデザインの原則を使用してそれらの問題点を解説します。見た目の美しさに基づく主観的な考えは避けたいと思います。また、ボタンはデザイン面でできることがたくさんありますので、この解説ではコードには触れません。そして最後に、ボタンのデザイン方法とベストプラクティスのデザインについて解説します。

UIのボタンで見かけるよくある間違い

Webサイトやスマホアプリの多くのプロジェクトでは、ボタンのスタイルが最低3つは必要です。3つは重要度が異なるアクションを表示するためのもので、明確な視覚的階層が必要です。この記事ではこれら3つのボタン（Primary, Secondary, Tertiary）を比較します。

以下に、よく見かけるボタンのデザインの問題点を取りあげました。これらの問題点はユーザビリティに潜在的なリスクをもたらすもので、可能であれば避けた方が安全です。少なくともWCAG 2.0 level AA アクセシビリティ要件を満たすことを目指しています。

ボタングループ 1

視覚障がい者がユーザーインターフェイスのコンポーネント（フォームの入力欄の境界線、ボタンやタブなど）で違いを見分けられるようにするには、カラーコントラスト比が少なくとも3:1である必要があります。コンポーネントを区別するために必要のない装飾スタイルは、コントラスト比を低くすることができます。

上記のボタンのデザインでは、背景に対するセカンダリボタンの塗りつぶしのコントラスト比が3:1未満で、視覚障がい者にボタンの形状を明確に示すには低すぎます。セカンダリボタンの塗りつぶしは装飾的なものであり、アクセシブルにするために3:1のコントラスト比が3:1である必要はないと主張する人もいるかもしれませんが、セカンダリボタンをアクション可能な要素として識別するために塗りつぶしが必要だと考えられます。もし塗りつぶしがなければ、色以外のアフォーダンスを持たない単なるブルーのテキストになってしまいます。この問題を解決するには、セカンダリボタンにボーダーを追加します。

ボタングループ 2

disabled属性で無効化されたボタンの色は、明るいグレーであることが一般的です。上記のセカンダリボタンは明るいグレーであるため、無効な状態と誤解される可能性があります。ユーザーの混乱を減らすために、明るいグレーをボタンに使用するのは避けた方が安全です。また、可能であれば無効化されたボタンは避けた方がよいと思いますが、それはまた別の機会に説明します。

ボタングループ 3

より多くのユーザーが小さなテキスト（18px以下）を確実に読めるようにするには、少なくとも4.5:1のカラーコントラスト比が必要です。上記のボタンのスタイルには次の問題があります。

セカンダリボタンのテキストのコントラスト比が低すぎるので、アクセスしやすくするために少なくとも4.5:1にする必要があります。
プライマリボタンとセカンダリボタンはスタイルが似ていてコントラストがないため、競合しています。これでは視覚的な階層が崩れてしまい、どのボタンがもっとも重要なのかが不明瞭です。スタイルが似ている場合、ボタンを明確に区別するには少なくとも3:1のコントラスト比が必要です。

ボタングループ 4

これらのボタンにも、前述と同様の問題があります。

セカンダリボタンの色が明るいグレーであるため、無効な状態であると誤認される可能性があります。
セカンダリボタンのテキストのコントラスト比が低すぎるため、アクセスできるようにするには少なくとも4.5:1にする必要があります。
プライマリボタンとセカンダリボタンのスタイルが似ており、コントラストが不足しているため、競合します。

ボタングループ 5

これらの3つのボタンは、視覚障がい者が見分けるにはスタイルが似すぎています。ボタン間のコントラスト比が違いを見分ける唯一の方法ですが、低すぎます（少なくとも3:1は必要）。ボタンは、色だけに依存しない明確な視覚的階層が必要です。

ボタングループ 6

これらのボタンにも、ボタングループ 5と同様の問題があります。

3つのボタンはコントラストやスタイルが似すぎているため、視覚障がい者には違いが分かりません。
ターシャリボタンがアクション可能な要素であることを明確に識別させるためには、ストロークのコントラスト比を少なくとも3:1にする必要があります。

ボタングループ 7

アクセシビリティに関しては、インターフェイスの要素を区別するために色だけに依存しないことが重要です。色覚障がいのある人は要素の違いを見分けることができないかもしれません。

上記のボタンでは、ターシャリボタンがアクセス可能な要素であることを示す唯一の指標が色であるため、アクセシブルではありません。つまり色覚障がい者には通常のテキストを区別できない可能性があります。

ターシャリボタンの配置や文脈、他のボタンとの近接性によっては通常のテキストと区別できるかもしれませんが、それでも混乱を引き起こすリスクはあります。

ボタングループ 8

UIデザインのディテールには、論理的な目的があります。上記のボタンでは、なぜプライマリとセカンダリの形が異なるのでしょうか？これらは異なるアクションをするのでしょうか？ボタンの形状に一貫性がないのは混乱を招く可能性があるので、避けてください。

ボタングループ 9

視覚的階層とは、インターフェイス要素の相対的な重要性を伝える方法です。3つのボタンスタイルの目的は、ユーザーが次に何をすべきかを知ることができるように、どのアクションがより重要であるかを示すことです。
上記の例では次の問題があります。

プライマリボタンとセカンダリボタンの視覚的な重みが似ているため、視覚的階層が不明瞭です。
セカンダリボタンの塗りつぶしのコントラスト比は3:1以下であるため、視覚障がい者にボタンの形状を明確に示すには低すぎます。

ボタンをデザインするときに重要なこと

ボタンのデザインで見かける間違いに基づいて、ユーザーフレンドリーでアクセシブルなボタンをデザインするために覚えておきたい、実用的で重要なポイントを紹介します。

ボタンは、色だけに頼らない明確な視覚的階層が必要です。
ボタンの形状のコントラストは、ユーザーがそれをアクション可能な要素として識別できるようにコントラスト比を少なくとも3:1にする必要があります。
ボタンのテキストのコントラスト比はWCAG 2.0 level AA アクセシビリティ要件を満たすために、少なくとも4.5:1にする必要があります。
ボタンが同じスタイルの場合、視覚障がい者がボタンを区別できるようにボタン間のコントラスト比を少なくとも3:1にする必要があります。
ユーザーがボタンを簡単にタップできるように、大きなタッチターゲット（少なくとも48pt）を使用します。
ボタンを間違えてタップしないように、ボタンとボタンの間には十分なスペースがあることを確認してください。私は安全のために、16ptを使用しています。

より良いボタンにする方法

より良いボタンにするには、以下のボタンスタイルをお勧めします。このスタイルは非常に馴染みがあり、アクセシブルで、色だけに依存しない明確な視覚的階層を備えているからです。

より良いボタンにするための基本スタイル

ターシャリボタンがテキストリンクと同じに見えることに気がついたと思いますが、それは本当に問題なのでしょうか？伝統的にテキストリンクはどこかに移動するようにデザインされ、ボタンはアクションを実行するようにデザインされてきました。最近では多くの人がこのインタラクションパターンを知りませんし、期待もしていないので、そのことに固執する必要はないと思います。見た目に関係なく、ボタンはボタンとしてコーディングされ、リンクはリンクとしてコーディングされているを確認してください。そうすることで、スクリーンリーダーによるアクセシビリティの問題を避けることができます。

ボタンを使用した例を見てましょう。
ヒーローバナーで重要な行動喚起リンクをボタンにすることで、より目立つようになり、より明確な視覚的階層が作成されます。