※回答一覧

 出題者   カテゴリ   作成日

坂本　邦夫		 ユーザビリティ・デザイン担当 2014-07-31 17:42:06
 問題   ヒント   回答数 
■押してもらえるボタンとは?

ほとんどのウェブサイトには何らかのボタンが配置されています。キャンペーンなどのバナーもそうですし、単純なナビゲーション、お問い合わせや資料請求ページのリンクなど多用なボタンが存在します。

今回はこのボタンを押してもらいやすくするための考え方・工夫に注目してみましょう。どうすれば押してもらえるのか、何をすればコンバージョンに影響が出るのか。皆さんの工夫を教えてください。

Q1.ボタンの装飾(画像でもCSSでも)にあたって、どのようなことに気をつけていますか?
Q2.ボタン以外の部分について(周囲に「詳細はこちら」などのテキストを配置するなど)、何か気をつけていることはありますか?
Q3.アクセス解析等でボタンが押されないということがわかった場合、どのように改善しますか?		 4

 

メンバーの回答一覧　お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。

なるほど
票数		 回答 講師コメント
1 gabber1090
Q1.ボタンの装飾(画像でもCSSでも)にあたって、どのようなことに気をつけていますか?

デザインはサイトのトンマナにあっていることを前提にして、
「ボタンを押した先の情報」を意識できる=想像できる文言や
デザインとなることに気をつけます。

「詳細はこちら」や「いますぐクリック」などの情報では
その先に何があるか直感的に判らないため、例えばお問い合わせ
フォームへの導線なら「お問い合わせフォームはこちら」や
「いますぐ問い合わせをする」といった具合になるとおもいます。


Q2.ボタン以外の部分について(周囲に「詳細はこちら」などのテキストを配置するなど)、何か気をつけていることはありますか?

ボタンへのラベル付けはデザインの流用が原因で設置箇所での
情報不足が起こった時(ボタン内の情報だけでその先の
情報が読み取れない場合など)に付け足します。
その場合には2〜3行程度(文字数で20文字程度)を目安に
シンプルな説明を付加します。

また、異なる機能のボタンが複数並ぶ場合には、ユーザーが
迷ってしまう可能性があるため、レイアウトの工夫(文脈的に
一番押してほしいものを上位にしたり、枠線や背景色で区切るなど)
を行います。

Q3.アクセス解析等でボタンが押されないということがわかった場合、どのように改善しますか?

先ずはそのページの目的(ゴール)がそのボタンを押す事かどうかを
はっきりさせます。

目的(ゴール)でない場合、そのボタンは不要という判断から
そのページより削除します。

目的(ゴール)である場合には、なぜそのボタンが押されないのか
仮説を考えられるだけ抽出し、容易に実行できるものを順に対応して
いきます。
対応はできるだけ単体で行い、一定の期間でその変化を把握しつつ
それでも改善が見られない場合には、他の仮説項目を順に適用し
改善の経過を見ていき目的(ゴール)への誘導率を高めていきます。		 金 (坂本　邦夫)
トンマナはトーン
0 kamino
Q1.
見た目を立体的にする
マウスオーバーしたときに色が変わるなどの動きをつける

Q2.
ボタンまわりとボタンの色が同じ色にならないようにする
ボタンとまわりの要素に余白や余裕をもたせる

Q3.
押されているところと比較し、原因を洗い出す
洗い出した原因に対する改善を施す		 注目 (坂本　邦夫)
kaminoさんは基本的な対策を答えていただきました。フラットデザインと呼ばれるデザインが流行っている中、押せる部分と押せない部分の区別が付かないサイトも多く見られます。 またこの余白や余裕、周囲との差も非常に重要ですね。
0 yukko
Q1.ボタンの装飾(画像でもCSSでも)にあたって、どのようなことに気をつけていますか?
・ボタンを目立たせるというよりも、分かりやすくユーザーに優しいデザインを心がけています。また押した後どのようなページへ飛ぶのかがある程度想像できるような文言を差し込んでいます。デザインという感覚でページ作成をしていると、ボタンもページ全体の雰囲気に同化させようとしてしまうので、ボタンはページのゴールという意識を持って作成しています。

Q2.ボタン以外の部分について(周囲に「詳細はこちら」などのテキストを配置するなど)、何か気をつけていることはありますか?
・ユーザーが次の行動に移りやすいようになるべく日本語(アルファベットを使わない)を使うようにしています。クリックした先に何があるのかが簡単にイメージできるよう、わかりやすい文言を使用するようにしています。
あとは、文字の可読性を損なわない色使いやグラデーションを意識しています。

Q3.アクセス解析等でボタンが押されないということがわかった場合、どのように改善しますか?
・まずはボタンの見た目以上にキャッチコピーや写真などの質を上げ、その後ボタンのデザイン変更や文言変更を行います。大抵の場合デザインをシンプルに文言を簡単で分かりやすい短文に変更するとクリック率が改善されることが多いです。		 銀 (坂本　邦夫)
Q2で回答しておられるように、多くのサイトでボタンを見ていると可読性が極端に低いものも見受けられます。アルファベットに比べ、日本語の文字は画数が多く、文字がつぶれて見えやすくなるのですが、タブレットなどの小さめのモニタで見ると、文字が読めなくなっていることも多いですね。 またyukkoさんにも文言の変更についてご指摘いただきました。文言が変わると文字が同じ大きさでも読みやすさが変わったりしますし、見た目のデザインも含めての総合的に検討しなおすことが必要になるかもしれません。
0 chichichi
Q1.ボタンの装飾(画像でもCSSでも)にあたって、どのようなことに気をつけていますか?

「押せる感じのする表現」「クリックした先が予想できること」
「あまり長々としたテキストは入れない」は気にしています。

それから、「そのページを見てほしい人にクリックしてもらえる」
「見るべきメリットがあるように見せる」こともできていれば
より良いだろうな、と。


Q2.ボタン以外の部分について(周囲に「詳細はこちら」などのテキストを配置するなど)、何か気をつけていることはありますか?

・分かりにくそうなら、簡単な説明を入れたりします。
　それと、クリックの後押しになりそうなメリット的なことがあると良いことも、ありそうですね。
・「いますぐ～」は、煽りみたいなのであまり使いませんが、それが良いかどうかは分かりません。
・アクションしてもらうためのボタンは、
　申し込み等が「気軽にできる」と思ってもらえると良いと思います。

Q3.アクセス解析等でボタンが押されないということがわかった場合、どのように改善しますか?

まずは、文言・デザインを疑ってみます。分かりにくいのでは?など。
そこ(テキスト)ではないと分かったら、
「ボタン以外のリンクの仕方」がいいのかも、と。

あとは、その行き先ページ自体があまり魅力的ではないとか、役立たないとか、
そうしたこともあるかもしれません。		 銅 (坂本　邦夫)
chichichiさんは押した際のメリットについてご指摘いただきました。先に進んでもらうためには、そのボタンを先に何があるかを明らかにする必要がありますね。 ボタンももちろん重要ですが、実はそもそものサイトの文脈や、どういうキーワードでアクセスされたかというユーザーの行動などがきちんと出来ていることが大前提となります。そのような文脈に沿ったボタンということも考えなければなりませんね。 サイトの全体像を考えた回答に感銘を受けました。