Webサイトにおける「ボタン」の基礎知識

Webサイトにおける「ボタン」の基礎知識普段Webサイトを使用する中で、何気なく見ているボタン。
こうしたボタンはカートへの商品追加、フォームの送信、コンテンツの削除など、様々なアクションと繋がるパーツです。もしボタンが作動しなかったり、違う場所に遷移するようなことがあれば、ユーザーは大きなストレスを抱えてしまうでしょう。ボタンが正しく機能することは、Webサイトにおいて非常に重要です。
 
今回は、そんなボタンを理解するための基礎知識をまとめてみました。
 

そもそもボタンって何?

ボタンは、「実行できる操作をユーザーに選ばせる」役割を持った要素です。
ユーザーにボタンを識別してもらい、操作の選択肢を与えて、Webサイトにおいて実行できるアクションまで誘導するのが、最終的な目的です。
 

ボタンを使用する場合に気をつけるべき3原則

ボタンが役割を果たすためには、使用する際に気をつけるべきルールがあります。
Googleの有名なデザインシステム「Material Design」では、ボタンの原則を

・Identifiable
・Findable
・Clear

(引用:https://material.io/components/buttons#usage)

と定めています。
 
この3原則について詳しくご説明していきます。
 

■原則1. Identifiable:識別可能である

「これはボタンである」とユーザーがひと目で識別できなければなりません。ほかの要素に似せてしまうと、ボタンとは認識されず、クリックを得ることができないからです。逆にボタンでないものをボタンのように見せてしまうと、ユーザーは間違ってクリックしてしまうかもしれません。ボタンではないため反応しませんから、混乱してしまうでしょう。

 

■原則2. Findable:見つけやすい

当たり前のことですが、そもそもボタンが見つからなければ、ユーザーはアクションを起こすことができません。文章や画像といった要素の中で、埋もれて分からなくなってしまわないよう注意しましょう。
一見すると、見つけやすくするならボタンそのものを派手なあしらいにしておけば大丈夫、と思いがちです。しかし、同じような派手で主張の強いボタンや要素が頻出してどれがどれだか分からない、という状態も避けなければなりません。ボタン単体だけでなく、Webサイト全体をよく観察することが重要です。
 

■原則3. Clear:明確である

例えば、ECサイトで商品の「カートに入れる」ボタンがオレンジ色で、マウスカーソルを乗せたときに色が明るくなったら「押せそう」ですよね。でも薄いグレーでカーソルを乗せても無反応だったら「売り切れていて押せないのかな」と感じます。このように、ボタンの操作と状態の変化をわかりやすく表現する必要があります。そうしないとユーザーは押せるのか押せないのか、あるいはいま押したのか、などの判断ができないからです。
 
以上の3つが基本の原則とされていますが、例外もあります。
特にビジュアルを重視しており単純に見て楽しむのが目的のWebサイトにおいては、ありきたりな表現を避けたり、あえてスタイルを崩してユーザーを楽しませることを優先したりと、様々です。どんな目的のサイトでどんな目的のボタンを使うのか、よく判断することが大切ですね。
 

【役割別】基本的なボタンの種類

では実際どういうボタンがあるのかを見ていきましょう。
Webサイトで使われる主なボタンを、役割によって大きく4つに分類しました。
 

1. CTAボタン

CTAとは、「Call To Action(コールトゥアクション)」の頭文字です。
ページ内の目的達成に強くかかわるボタンで、各サイトが何をもって目的達成とするかによっても様々ですが、主に会員登録や購入、お問い合わせといったものがこれに当たります。重要度が高いので、よく目立つようにデザインされていることがほとんどです。
 
“Netflix”

Netflix(https://www.netflix.com/jp/)

 

2. プライマリ(主要な)ボタン

その名前の通り、サイト内で最も主要なボタンとして使われます。ユーザーが次のステップに進むためのアクションを促す役割をもっている場合が多いです。
 
“Kyash

Kyash – 決済、送金ができるデジタルバンキングアプリ(https://kyash.co/)

 

3. セカンダリ(副次的な)ボタン

主要なアクションに付随して別の選択肢を与える場合に使用されます。よって、セカンダリボタンはプライマリボタンの横に並ぶことが多いためお互いを簡単に区別できるような見た目であることが重要です。
代表的な例は「戻る」や「キャンセル」のボタンです。かなり使い所が限られるのでは、と思われるかもしれませんが、実際は以下の例のように様々な場面で使われます。
 
“ユニクロ公式オンラインストア”

ユニクロ公式オンラインストア | ユニクロ(https://www.uniqlo.com/jp/ja/)

 

4. ターシャリ(第3の)ボタン

それほど重要度の高くない操作のためのボタンです。主に特殊な操作や追加機能の場合に使用され、よく見られるのは「編集」や「新規追加」、「アップロード」「印刷する」などといったユーザーがページ内で行う動作をサポートする場面です。
アイコンを単体で用いてボタンとすることもしばしばあります。
 
“クラシル

クラシル | 料理レシピ動画サービス(https://www.kurashiru.com/)

 

まとめ

正しく機能するボタンを作るには、色、形、配置する場所、ラベル(文言)、などなど、気を配るべきポイントがたくさんあります。どのテクニックにおいても、今回ご紹介した基礎知識をおさえておくことでより理解が深まるでしょう。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。