| 出題者 | カテゴリ | 作成日 |
|---|---|---|
 坂本 邦夫 |
ユーザビリティ・デザイン担当 | 2013-07-30 16:05:01 |
| 問題 | ヒント | 回答数 |
|---|---|---|
| ■押してほしいバナーを目立たせるにはどうすればいい?
現在のサイトのトップページには、押してほしい画像やナビゲーションバナーなどが多く、少しごちゃごちゃしています。 アクセス解析をすると、どうも押されたいものが押されていないようです。 今回、トップページのコンテンツエリアにある情報を整理することが決まりました。 その前提で以下2問にお答えください。 Q1.たくさんある情報の中から3つを選びたい。どうやって選びますか? Q2.目立たせたいものが決まったとして、本当に目立つかどうか不安です。デザイン面でどうチェックし、どのように配慮しますか? |
6 |
メンバーの回答一覧 お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。
| なるほど 票数 |
回答 | 講師コメント |
|---|---|---|
| 1 | 丸田Q1
押して欲しいものが押されない、ということなので 運営側が見せたいものから優先して選びます。 ただし、選んだ3つがユーザ目線でかぶらないように注意する必要があると思います。 あるいは、3つのうち1つを人気の高いコンテンツ(CVRが高い、PVが多いなど)から選び、それとセットにして扱うことで、間接的に押してくれることを狙うというやり方もあると思います。 Q2 ・バナーに統一感はあるか(配色、フォント、大きさ、形) ・ちがいがわかるか(配色、フォント、大きさ、形) ・ユーザテストをおこなう |
銀 (坂本 邦夫) ユーザー目線でかぶらないようにするのは非常に大切ですね。3つのうち1つを人気の高いものにするという戦術も非常に理に適っていると思いました。 ユーザーテストは専門家のみが行うものではないと思いますので、どのようなバナーを作ってもぜひやりたいところです。 |
| 1 | luz向学のために有名企業サイトのワイヤーフレームを何件か描きだしたのですが、
まさにそのような状態に陥っているサイトを何件か見かけました。 依頼されたリンクや記事を平等に載せたいという社内事情が垣間見えました。 ある程度の規模の事業会社のサイトを想定して回答いたします。 Q1. 3つ選ぶ方法 ●Webでの発信が適切なもの(効果が期待できるもの) ●企業にとって押してほしいものも重要だがユーザーのニーズもくむ →現在クリックされているものも重視する (ユーザーのニーズの先に会社の利益につながる流れをつくる) ●季節要因(この時期じゃないと意味がないものは優先順位を上げる) ●上記を踏まえて最後は会社全体の利益を考えた部内で優先順位の判断 (社内で納得してもらうためのプロセス) Q2. デザインの配慮 ●色 ベースはコーポレートカラー+1,2色程度。 目立たせたいところだけにさし色(決まった色)を使う。 ●写真/画像 写真、画像は目立たせたいところだけに使う。 サブ的なポジションのものにはアイコン、太字などでプラス。 |
銀 (坂本 邦夫) 相応の規模のサイトになると、部署間での主張がまったく異なり、結果的に混乱してしまうことがあります。デザイン処理だけではどうにもならない部分への回答をいただいたということで、銀とさせていただきました。 優先順位や会社全体の利益が見えていれば、後はデザイン処理をうまくやるだけですね。 デザインには意味や目的があって、それはあくまでもサイトの成功（すなわち企業の利益）を 考えれば、デザイン処理の方向性も決まってきますね。 |
| 0 | 嘉田Q1.たくさんある情報の中から3つを選びたい。どうやって選びますか?
情報をリストアップし、優先順位をつけて上位3つを選ぶ。 Q2.目立たせたいものが決まったとして、本当に目立つかどうか不安です。デザイン面でどうチェックし、どのように配慮しますか? ベースカラーに対して補色のバナーにしたり、位置を高めに持ってくる。マウスオンした際に色などが変わるように処理をする。 |
なし (坂本 邦夫) オーソドックスな手法ですが、効果の高い回答をしていただきました。 迷ったときには補色ですが、では3つともベースカラーの補色でよいかというとそうではなく、その3つの中にも優先順位はあるはずです。 |
| 0 | YNQ1.たくさんある情報の中から3つを選びたい。どうやって選びますか?
・期間限定のもの(期間終了が近い物) ・会社の顔的な存在である商品やサービス ・認知度が低く埋もれてしまっているが、会社として力を入れたいと考えている商品やサービス Q2.目立たせたいものが決まったとして、本当に目立つかどうか不安です。デザイン面でどうチェックし、どのように配慮しますか? ・ページ全体の基調色の反対色を基調色にする。または、反対色をさし色として使う。 ・「NEW」「新着」「お得」「期間限定」「今だけ」「今すぐ」などといった目を引く文言を含め、それらを強調する。 ・「クリック」「チェック」「詳細を見る」などといったアクションを促す文言を含める。 ・取捨選択した時点で、ユーザの目に留まるポジションに配置されることは約束されているため、過剰な誘導コピーやエクスクラメーションマークなどの多用は避け、明快なコピーを充てるよう心がける。 |
銅 (坂本 邦夫) 明快なコピーはバナーにおいては欠かせませんね。テキストを簡潔にするということは、文字を大きくできる可能性が高くなるということです。 あらゆる情報は最終的には文字でなければ伝わりません。よく目立っていても、文字が読めないほど小さいバナーは山ほどありますが、これではサイトの目的には貢献できません。 デザイン処理も重要ですが、文字の扱いについても同様に重要であることを再確認できましたので、こちらも銀とさせていただきます。 |
| 0 | kaminoQ1.たくさんある情報の中から3つを選びたい。どうやって選びますか?
選び方 ・コンバージョンに結びつくもの ・更新感が出せるもの ・自社としてみてもらいたいもの Q2.目立たせたいものが決まったとして、本当に目立つかどうか不安です。 デザイン面でどうチェックし、どのように配慮しますか? デザイン面の変更 ・他のところとはボタンの色や大きさを変える ・動きをつける 配慮 ・文字の大きさなど、読みやすさもチェック |
金 (坂本 邦夫) シンプルな回答ですが、最も効果的な部分を挙げていただきましたので、kaminoさんの回答を金とさせていただきます。 文字の読みやすさをチェックというのが視覚を使った情報伝達では最も重要なのですが、色の強さは単に派手な色であればよいということではなく、その大きさにも影響されます。 基本的に色が使われている部分が大きいほど伝わりやすくなりますので、同じ大きさのバナーでなければならない場所以外では、バナーサイズを変更することも非常に効果的な方法です。 |
| 0 | なべQ1.
サイトの目的=CV に貢献する情報は何かという観点で情報を選択します。 Q2. チェックする点は次の2点です。 1)色や配置、装飾など造形的視点でのチェック ------------------------------------------------------- 2)コピーや写真など編集的視点でのチェック 上記の2点に関して各々次のことを配慮しています。 1)に関しては、認知できるかどうか という点です。 例:ファーストビューに入っているかどうか 他要素に比べ色相差ないし明度差などのコントラストがあるかどうか など ------------------------------------------------------- 2)に関しては、理解できるかどうか という点です。 例:ラベリングに独自の表現を使いすぎて意味がわからないということになっていないかどうか 誤ったイメージを植え付けそうな写真を使っていないかそうか など |
注目 (坂本 邦夫) 「他要素に比べ色相差ないし明度差などのコントラストがあるかどうか」と目立たせるために必要なことを簡潔にまとめていただきました。 コンテンツを提供する側の視点にとらわれると、どうしても独自の表現や難解な表現を使いがちです。内容にもよるでしょうが、シンプルな文字表現を心がけないと、無意識に「難しそう」という意識が働き、クリックされなかったりします。 リンク先を端的に表現できるような写真があれば申し分ないバナーができますね。 |