Webサイト制作において、ボタンは非常に重要なパーツの一つです。
ページ遷移するものお問い合わせフォームなどに使われるCTAボタンのデザインにこだわることで、ユーザーを獲得しやすくなります。
また、ボタンはサイト内でも重要度が高いため、目立たせる必要があります。
ボタンがわかりにくいとユーザーが離れてしまい、機会損失になってしまうのです。
今回は、ユーザーのクリック率上昇に効果的なボタンデザインの基礎について解説していきます。
CTAとは、「Call To Action（コールトゥーアクション）」の略です。Webサイトの訪問者にアクションを促すことを指します。
例えば、資料請求や会員登録を目的としたサイトを制作するとします。サイトの構成はその目的につながるように考えますね。
このように、見込み顧客に対し、アクションを起こしてもらうよう促すことを指します。
まずは、ユーザーに目に留めてもらうことが最重要です。
ですので、サイトページのどこにあってもボタンだとわかるようにすることが必要になります。
一目見てボタンだと理解してもらうためには、サイズや形、色で工夫しましょう。
こうした工夫で、ボタンがあることを認識してもらいやすいです。
ボタンのデザインを工夫するといいポイントについて、それぞれ詳細を記載していきます。
ボタン自体の大きさや、ボタンの中の文字を設定すること
文字の大きさはWebサイト全体でも調整するので、その中にあるボタンの文字の大きさも重要です。
小さすぎるとなんのボタンなのか判断しづらいですね。また、文字だけが大きすぎると不自然に見えます。
また、ボタン内の文言やその前後の文面も、キャッチーかつわかりやすくする必要があります。
例えば、概要的な文言から、詳細な情報を載せたページに続くボタンを配置します。
「詳細はこちら」「詳しく見る」など、ボタンをクリックした後どうなるかを記載した方が丁寧です。
説明が十分な上でデザイン的に見せたい場合は、「more」や「Click」などの表記でもGOODです。
色もサイト内で埋もれないよう、目立つ色にする必要があります。
あえてサイト全体を統一した色に設定する以外では、背景の色に紛れてしまわないように注意しましょう。
背景色とのコントラストの差を意識する必要があります。
上の画像のように、グレーとピンクの予約を促すボタンがあるとします。
グレーだと予約の受付が終了してしまったような雰囲気を受けますね。
ユーザーがスムーズにサイトを遷移するためには、CTAボタンに限っては目立つ色で作成した方が効果的です。
こちらを踏まえた上で、下記の画像もみてみましょう。
ボタンに必要な色の条件として、ボタン内の色も見えやすくする必要があります。
目立つ色には白や黒、グレーなどで文字を乗せるのが一番見えやすく、無難です。
こちらもサイトの雰囲気を保ちつつ、ユーザーが混乱しないような色使いが必須です。
自分がユーザーの目線になった時にどのデザインが見えやすいかを見極めましょう。
Webサイトに効果的な配色は、こちらの記事でも紹介しています。
ぜひ読んでみてください。
代表的なものとして四角、角丸、円形などのデザインがあります。
形自体に制約はないので、サイトの雰囲気に合わせてデザインを変えてみましょう。
四角い形だとクラシックな印象や、シンプルなイメージが強調されます。
多用しすぎると簡素すぎるようにも見えるので、サイズを変えたり配置を工夫ことでメリハリをつけましょう。
丸みを帯びているとキャッチーな印象が強くなるので、CTAボタンなどにも使いやすいです。
少し変わったボタンのデザインや、細かい装飾を足したい方もいると思います。
その場合、コードで導入するのではなく画像をボタンに用いることもできるでしょう。
またこのように、「ボタンであること」がわかりやすくなる特徴を入れてみます。
こうすることでユーザーもボタンを押しやすくなります。
影を入れてみると、クリックできるものだということが視覚的にわかりやすくなりますね。
カーソルを合わせると色が変わったり、四角から角が丸くなったりする動きの変化を持たせてみるのも効果的です。
影と動きを組み合わせてみると、クオリティの高いボタンになります。
ただ、スマホではカーソルを合わせられません。スマホメインのコンテンツの場合はデザインを別の形にしてもいいかもしれません。
ボタンの説明はこちらで以上です。
CTAボタンなど、サイト内で最重要の役割を果たすボタンは多く登場します。
基礎的なデザインを踏まえた上でWeb制作に役立てましょう。
関連記事
久保田 里佳子 
櫻井 邦則 
