Webデザインにおいて、ボタンは大切な要素のひとつです。ボタンをデザインするポイントが分からないと、ユーザーを混乱させるだけではなく、CVに繋がらなかったり、Webサイトから離脱させたりする恐れがあります。
この記事では、Webデザインにおけるボタンの概要や種類・デザインのポイント・定番テクニックなどを解説します。Webサイトのユーザビリティ向上に向けて、参考にしてください。
→ノーコードでWebデザインできるBiNDupを30日間無料体験
Webデザインにおけるボタンの概要
Webデザインにおけるボタンについて、概要や重要性を解説します。ボタンの役割を理解してデザインのポイントを押さえましょう。
Webデザインにおけるボタンとは？
ボタンは、Webサイトやアプリにおいて欠かせないパーツです。商品のカートへの追加やお気に入り登録など、重要なアクションの多くはボタンをクリックすることで行われるためです。また、ボタンにより選択肢が示されていれば、閲覧者はスムーズにアクションを起こせます。
効果が出やすいボタンのデザインには、いくつかのパターンがあります。デザインのパターンを理解して、訴求力の高いWebサイトを作成しましょう。
ボタンが分かりにくいと何が起こる？
ボタンを見つけにくいと、閲覧者は操作をわずらわしく感じます。商品の魅力は十分でも、ボタンを見つけられなければ商品をスムーズにカートに入れられません。結果、購買をやめてしまうなどの機会損失に繋がる恐れがあります。
また、ボタンと認識されかねないまぎらわしいパーツがあると、クリックしても想定したアクションが起こらないため閲覧者を混乱させてしまいます。
→ノーコードでWebデザインできるBiNDupを30日間無料体験
Webデザインのボタンを構成する要素
Webデザインのボタンを構成する要素と色について解説します。効果的なボタンのデザインを理解する前に基本的な内容を確認しましょう。
ボタンの要素
ボタンを構成する要素は、主に、テキスト・座布団・アイコンです。テキストには、ボタンをクリックすると引き起こされるアクションが記載されています。座布団は、ボタンをクリックできる範囲を示すだけではなく、外観をボタンらしく見せるためにも役立ちます。
アイコンは、ボタンのアクションを視覚的・直感的に示す要素です。例えば、検索窓を示す虫眼鏡のマークや、問合せに繋がる封筒のマークなどが、アイコンの一例としてあげられます。テキストと座布団のみで構成され、アイコンがないボタンもあります。
ボタンの色
重要なアクションに繋がるボタンほど、彩度が高く目立つ色が使われがちです。反対に、文字やページ背景と同じ色は目立ちにくく、強調したいボタンには不向きといえます。
よく使われる配色を知っていれば、ユーザーにとって理解しやすいボタンのデザインに繋がります。例えば、「はい」には青や緑、「いいえ」にはグレー、アカウント削除や退会には赤が選ばれやすい傾向です。
Webデザインにおけるボタンのポイント
Webデザインにおけるボタンのポイントを解説します。ユーザー目線でボタンをデザインしましょう。
識別できること
ボタンは、一目見てボタンであると識別できることが大切です。サイズや形、色でボタンだと判断できるデザインを心がけましょう。特に円形や四角形は識別しやすいボタンです。
また、ボタン以外の部分に円形や四角形を使う場合は、ボタンが目立つように色やサイズを工夫する必要があります。
→ノーコードでWebデザインできるBiNDupを30日間無料体験
発見しやすいこと
文章や画像などの要素が多いWebサイトでは、ユーザー目線でボタンの位置を決めることが大切です。一般的な配置とかけ離れた場所にボタンを設置していると、閲覧者がボタンを見つけにくく感じてしまいます。
閲覧者は、過去の経験からボタンの位置を予想しています。例えば、SNSのホームボタンは多くの場合左側に置かれているので無意識に左側を見てボタンを探しがちです。
押せることが明確であること
ボタンは、押せる（クリックできる）と明確に分かる必要があります。例えば、ホバーエフェクトを付けると、ボタンを押せることがユーザーに伝わりやすくなります。
ホバーエフェクトとは、カーソルをボタンの上に載せた際の効果です。アンダーラインが表示されたり、明るい色に変化したりといった視覚的な変化があれば、ユーザーはボタンを識別しやすくなります。
反対に、グレーのような目立たない色でホバーエフェクトもないボタンの場合は、こればボタンではない、在庫切れかもしれない、などとユーザーに錯覚させかねません。
クリックしやすいこと
ボタンには、クリックしやすいサイズが求められます。特に、スマホからの見え方には注意が必要です。スマホから情報収集や購買行動をするユーザーも多いため、指でタップしやすいサイズのボタンを設置しましょう。
また、誤って他のボタンをクリックしないように、ボタン間の余白にも配慮が求められます。
→ノーコードでWebデザインできるBiNDupを30日間無料体験
Webデザインにおけるボタンのテクニック
Webデザインにおけるボタンのテクニックを解説します。少しの工夫が、閲覧者の利便性を向上させます。
影をつけて立体的に
影をつけて立体的に見せるテクニックは、よく使われるボタンデザインのひとつです。影がつくと立体的に浮き出て見え、周りのテキストや画像に埋もれにくくなるため、閲覧者がボタンを識別しやすくなります。また、先述したホバーエフェクトで影が現れるボタンもあります。
角丸のデザイン
角を丸めてやわらかい雰囲気にしたデザインを「角丸」と呼びます。配色を変えたりアイコンと組み合わせたりなど、角丸のデザインは印象や存在感を自由に調整可能です。角丸の汎用性の高さは、どのようなWebデザインにも馴染みやすいといえます。
ゴーストデザイン
ボタンの背景色を透明にし、枠線とテキストのみにするデザインを「ゴーストデザイン」と呼びます。ゴーストデザインのボタンは主張が少なく、さまざまなデザインに馴染みやすい傾向です。
ただし、ゴーストデザインでは、ボタンだと識別されにくいケースも少なくありません。枠線の色や太さなどを工夫して、押してもらいやすいデザインとなるよう配慮しましょう。
→ノーコードでWebデザインできるBiNDupを30日間無料体験
Webデザインにおけるボタンの種類
Webサイト上のボタンは複数の種類に分けられます。主なボタンの種類を解説します。
CTAボタン
Call To Action（コールトゥアクション）のためのボタンを、CTAボタンと呼びます。商品購入や会員登録、お問合せや資料請求など、ページ内における目的達成に繋がるボタンがCTAボタンです。
CTAボタンは重要度が高いため、目立たせることがポイントです。背景とのコントラスト比が高い色を選ぶなど、ボタンのデザインにこだわりましょう。また、テキストには、キャッチーさを感じる言葉や、「〇分で登録完了」など閲覧者の心理的負担を下げる言葉が求められます。
BiNDupのテンプレート YADA Corporation｜ファーストビューの目立つ位置にCTAボタンを配置
プライマリボタン
プライマリボタンは、CTAボタンに次いでページ内での主要なボタンです。プライマリボタンは、ユーザーが次のステップに進むためのアクションを促します。例えば「次のページに進む」などが、プライマリボタンです。
プライマリボタンは、下記で解説するセカンダリボタンとセットで用いられがちです。プライマリボタンの色やサイズに配慮して、セカンダリボタンと区別させましょう。
セカンダリボタン
セカンダリボタンとは、プライマリボタンと合わせて使われる、ページ内での副次的なボタンです。プライマリボタンには閲覧者が選びそうなアクションを表示させますが、セカンダリボタンにはそれ以外のアクションを表示させます。
例えば、プライマリボタンで「カートに入れる」と表示させるときには、セカンダリボタンで「戻る」「キャンセル」「店舗在庫の検索」「お気に入り」などのアクションを表示させます。
サイズで差別化したブログの一覧へリンクするプライマリボタンと、カテゴリへリンクするセカンダリボタン
ターシャリボタン
ターシャリボタンは、ページ内における重要度の低いボタンといえます。ターシャリボタンには、新規追加・編集・SNSへのアップロード・印刷などの内容が表示されます。アイコンを単体で用いて、ターシャリボタンとするケースも少なくありません。
ターシャリボタンは、プライマリボタン・セカンダリボタンなどよりも存在を控えめにしましょう。ただし、ボタンだと分かるように、多くのWebサイトではターシャリボタンにもホバーエフェクトを施してあります。
各種SNSのアイコンを用いたターシャリボタン
→ノーコードでWebデザインできるBiNDupを30日間無料体験
直感的にボタンをデザインできるノーコードCMSのBiNDup
Webサイトのボタンは、ユーザーにアクションを促すための重要なパーツです。識別しやすさ、発見しやすさなどを意識して、Webサイトのボタンをデザインしましょう。
Webデザインの専門知識がない場合は、BiNDupによるWebサイト作成がおすすめです。BiNDupは、Web初心者でもトレンドのWebサイトが作れるツールです。
テンプレートは400サイト以上で、業種やサイトの目的に合わせたものを選び、テキストや写真を入れ替えるだけで思い通りのホームページを作成できます。階層が深いページにもアクセスしやすいメニューや、ページ内を追従するポップアップ機能なども駆使して、閲覧者が迷子にならないWebサイトを作成しましょう。
POINT
- ボタンによく使われるデザインや位置に従うことでユーザーが理解しやすくなる
- 色だけでなく、ホバーエフェクトや角丸デザインでボタンの視認性が向上する
- ボタンの種類はCTAボタン、プライマリボタン、セカンダリボタン、ターシャリボタンに分類される