基礎： ボタン作成ガイド – UIエレメント –
ボタンは、最も一般的なUI要素の一つです。ボタンを介して、ユーザーはシステムと対話し、選択することによって行動を起こすことができます。ボタンは、フォーム、Webサイトのホームページ、ダイアログボックス、ツールバーなどで使用されます。
ボタンとリンクを区別することが重要です。
・ボタンは、ユーザーに行動してもらいたいとき（送信、キャンセル、削除）に使用します。
・リンクは、ユーザーを他のページ（会社概要、もっと読む）へ誘導するために使用します。
優れたボタンデザインは、ユーザーに取って欲しい行動を容易にさせ、コンバージョンを増加させることができます。この記事では、サイト訪問者がクリックしたくなるような魅力的なボタンを作成する方法について、完全なガイドを提供します。
ボタンの骨格（構造）
魅力的なボタンをデザインする方法を説明する前に、完璧なボタンの構造を調べる必要があります。
ボタンには、次のような要素があります。
- テキストラベル
- 背景
- ボーダー
- アイコン
（テキストラベル以外の要素はすべて任意です。）
ボタンをデザインする際の注意点
ボタンらしくないボタン
ユーザーがボタンをクリックする前に、それがクリック可能なエレメントであることを知らせなければなりません。そのため、ユーザーにボタンであることがわかるようにしましょう。ユーザーは、UIエレメントがインタラクティブかどうかを判断するのに、これまでの経験や視覚的な手がかりを頼りにしています。
クールなボタンデザインを使いたくなるかもしれませんが、ユーザビリティを犠牲にしないようにしましょう。使い慣れたボタンデザインを使用し、ユーザーを混乱させたり、摩擦を生じさせたりしないようにしましょう。一般的なボタンデザインの例としては、以下のようなものがあります。
- 四角ボタン（塗りつぶし）
- 丸ボタン（塗りつぶし）
- 丸ボタン（塗りつぶし・影付き）
- アウトライン/ゴーストボタン
塗りつぶしや影をつけると、ボタンが押せるように見えるので、ユーザーが識別しやすくなります。また、ボタンの周りに十分な余白を設けることで、より目立たせることができます。
曖昧な、あるいは誤解を招くようなボタン
ボタンのラベルが曖昧で分かりにくいと、ユーザーが行動を起こすのを妨げたり、間違った行動を取らせたりする可能性があります。
ボタンが何をするものかを明確に説明し、ユーザーが行おうとしている行動を肯定するラベルを使用しましょう。また、ボタンの文脈を考慮し、それに応じてラベルを適応させることも重要です。
「はい」「いいえ」のラベルは避け、代わりに「削除」「キャンセル」のような説明的なラベルを使用しましょう。
ステートを視覚的に確認することができないボタン
“システムは、合理的な時間内に適切なフィードバックを行うことで、常にユーザーに状況を知らせるべきである。”— Jakob Nielsen
優れたボタンは、ユーザーが操作するとその状態を変化させる必要があります。ユーザーは、自分のアクションがうまく登録されたかどうかを知るために、フィードバックを必要としています。フィードバックがないと、ユーザーは何度も行動してしまうかもしれません。フィードバックには、視覚的なものと音声によるものがあります。
ステートを持つボタン（以下参照）
- Primary state；インタラクティブですぐに使用できるもの
- Active ；ユーザーがボタンを押した
- Hoover；カーソルがインタラクティブなエレメントの上に置かれている
- Focused；キーボード仕様中にハイライトされる
- In progress；アクションの処理中
- Disabled；インタタクティブではない
統一性の無いボタン
“一貫性 “は最も強力なユーザビリティ原則の一つです。物事が常に同じように動作するとき、ユーザーは何が起こるか心配する必要はありません。”— Jakob Nielsen
サイト全体で同じサイズ、形、色のボタンを作成しましょう。デザインライブラリーとスタイルガイドを用意すると効果的です。一貫性のあるボタンデザインは、ユーザーが素早くアクションを起こし、エラーを回避するのに役立ちます。さらに、サイト全体の見た目と感覚も向上します。一貫性がないと、ユーザーは混乱し、ミスを犯す可能性が高くなります。
多すぎるボタン
“UXの経験則：選択肢が増えれば問題が増える”— Scott Belsky, Chief Product Officer
ボタンが多すぎると、ユーザーは行動しづらくなります。これは「選択のパラドックス」と呼ばれるものです。デザインにボタンを詰め込むのではなく、ユーザーに取って欲しい最も重要なアクションを考え、それに優先順位を付けましょう。
ボタンのヒエラルキーとアクション
ボタンの階層構造は、ユーザーがシステム上で最も重要なタスクを判断するのに有効なシグナルを提供します。ここでは、最も一般的なWebサイトのボタンデザインの階層とそれを使ってユーザーを誘導する方法を紹介します。
CTAs（Call To Actions)
CTAボタンは、ユーザーに取ってもらいたい最も重要なアクションを指示するものです。効果的なCTAボタンは、ユーザーの注意を引き、クリックさせることができます。CTAボタンは、大きく、コントラストが高く、ユーザーの視線に入る位置に配置する必要があります。
一般的なCTAには、UXPinのようなWebサイトのボタンがあり、「無料で参加する」というCTAボタンは、色のコントラストが強く、非常に目立ちます。
CTAボタン上の効果的なフレーズ
CTAボタンが効果的であるためには、優れたデザインだけでなく、行動を促すようなフレーズ（ワードチョイス）も必要です。CTAボタン上のフレーズが悪いと、混乱を招き、エラーを引き起こし、ユーザーを離反させてしまいます。
ここでは、CTAを強化するため心理学に裏打ちされたフレーズのヒントをいくつか紹介します。
アクションワードを使用する；一般的なフレーズではなく動詞を使い、ユーザーの行動を促します。例えば、「はい、いいえ」ではなく、「保存、または破棄」と表示します。
正確な言葉を使う；解釈や誤解の余地を残してはいけません。例えば、”Delete “のほうがよいのに”Remove “を使うなど。
ユーザーの行動を肯定する言葉を使う；「投稿」ではなく「公開」のように、ユーザーがこれから行おうとしている行動を明示する言葉を使う。こうすることで不確実性を排除し、ユーザーに行動への確信を与えることができます。
命令形を使用する；ボタンの文字数を減らし、読みやすくします。
例えば、「Yes, create your account」ではなく、「Create your account」とするのです。
1次アクション
1次アクションは、「次のページに進む」、「アクションを完了する」、「ユーザージャーニーを開始する」など、ユーザーを次のポジティブなアクションに導くためのものです。このようなウェブボタンは、ユーザーにポジティブなアクションを促すために、より視覚的な重みを持たせ、より優位性を持たせる必要があります。
2次アクション
2次アクションは、1次アクションの代替となるアクションです。「戻る」ボタンや「キャンセル」ボタンなどがこれにあたります。これらのボタンは、エラーのリスクを低減し、積極的な1次アクションを促すために、視覚的に目立つようにする必要があります。
3次アクション
3次アクションは、ユーザーが行う必要のない重要なアクションです。このアクションには、「編集」、「新しい情報の追加」、「削除」が含まれます。一次アクションと三次アクションの違いは、そのアクションが実行される状況によって決まります。
3次アクションには、あまり目立たない小さなボタンを使用するのがよいでしょう。
ボタンのスタイル、色、デザインに関するベストプラクティス
ボタン形状
ウェブボタンの形状は、四角いボタンか、角が丸い四角いボタンを使用するのがベストプラクティスです。これらのボタンの形状は、ユーザーがボタンとして認識しやすいため推奨されています。
他にもボタンの形状はありますが、ユーザーによっては認識できない場合があるので、慎重に使用する必要があります。
- 丸いボタン；ボタンの縁を丸くしたものです。
- アウトライン/ゴーストボタン；塗りつぶしのないボタンです。2次アクションに最適です。
- フローティング・アクション・ボタン(FAB)；主要なアクションに使用されるボタンです。
- アイコンとラベルのボタン；アイコンとラベルの両方を持つボタンです。
- アイコンボタン；ラベルがないため、積み重ねやすいボタンです。ボタンの視認性を高めるために、パディングやサイジングを使用することができます。モバイルユーザーがタップできるように、ボタンが十分な大きさであることを確認しましょう。
カラーパレット
Webサイトのボタンデザインのカラーパレットを選ぶ際に、まず考慮すべきなのは色彩言語です。赤いボタンは停止、Webサイト用の緑のボタンは移動、青いボタンは詳細な情報を意味します。
また、ボタンの色を選ぶ際には、ブランドカラーやスタイルガイドも考慮しましょう。一貫したユーザーエクスペリエンスを実現するために、必ず統一性を保つようにしましょう。ボタンには十分なコントラストを持たせ、ウェブアクセシビリティガイドラインに適合していることを確認します。
ボタンの位置とページレイアウト
ボタンを配置する場所とページのレイアウトを決めるとき、コンテキストはとても重要です。CTAの場合、Webサイトボタンを中央に配置し、ユーザーの注意を引くためにページの高い位置に配置するのがベストです。
Webサイトの1次アクションボタンについては、最適な配置がまだわかっていません。オプションAは、1次アクションボタンが最初に来る場合であり、オプションBでは最後に来る場合です。これらは、ユーザーが何を最初に見ることを期待しているのかによって決まってくるでしょう。
最適なUIツールでボタンをデザイン
クリックされるボタンをデザインするためには、モックアップを美しく仕上げるツールが必要です。UXPinは、デザイン、プロトタイプ作成、チームとのコラボレーションを行うためのオールインワンプラットフォームを提供しています。デザインパターンライブラリで一貫したボタンデザインを維持し、コントラストチェッカーでボタンのアクセシビリティをチェックします。
興味のある方はぜひ14日間無料体験を！（クレジットカードの登録不要）
