《この記事を読んで分かること》
・選択しやすくするデザインの考え方
・ヒックの法則とフィッツの法則
・すぐに使えるレイアウトと見せ方のコツ
今回は、人が「選ぶ法則」についてのお話。
何かを選ぶとき
あなたはどのようなものが選びやすいですか？
どんな状態だと、迷いなく選べるでしょう…
この記事は、相手に心地よく選んでもらうための秘訣を
デザインに落とし込んでお伝えしていきます。
心地よく、直感的に選んでもらうことで、
お客さんの行動を促しやすくなり機会損失も減らせるはずです。
１）選びやすいデザインのための２つの法則
お客さんからみて選びやすいデザイン作りでは、
知っておく二つの法則があります。
私たちの日常に溶け込んでいるので
気にも留めなかった内容かもしれません。
でも、UX/UIデザインをはじめ、
理解しやすいレイアウトでよくみられる内容です。
２）ヒックの法則とは？ 選択の数の考え方
まずは一つ目。ヒックの法則です。
■ヒックの法則とは…？
単純な選択をするとき、選択肢が増えるほど
選ぶ・決めるまでの時間が長くなるというもの。
（反対に選択肢が少ないとサッと選びやすくなる）
ここで言う単純な選択とは
・1がでたら赤、2なら青のボタンを押す
・会員登録の住所登録で都道府県を選ぶ
こんな風に、単に選ぶ時のことです。
選択肢が少なければすぐに選べます。
でも多くなると、
希望の選択に辿り着くまでに時間がかかりますよね。
さらに、選択肢が多いほど、
選択ミスも起きやすくなるとも言われています。
言われてみればこんなの当たり前のことじゃん！
項目が増えれば、同時に検討する項目も増えるので
時間がかかることは当たり前だと思うかもしれませんね。
はい！
正直、私もそう思います。
ですが！実はここに落とし穴があるんです。
当たり前だけど、やりがちな落とし穴
落とし穴は、気づかないうちに掘っているもの。
例えば
・伝える情報を増やしすぎる（優先度付けが甘い場合も同じです）
・選択肢を増やしすぎる
このように、盛り込みすぎると
「迷わせるデザイン」になりやすいです。
情報が多くなると「複雑だ」という印象も与えます。
そうなると、相手に行動してもらいにくくなります。
もちろん、それに対する強い興味を持っていたり
自分と強い関係がある場合は話が変わるでしょう。
でも、そうでない時は相手のストレスにもつながります。
これがヒックの法則です。
まずは、この法則を覚えていてくださいね。
次に二つ目の法則をご紹介します。
３）フィッツの法則とは？ 選びやすい位置とサイズ
ヒックの法則と併せて知っておきたいのが
フィッツの法則です。
（名前が似ていますよね）
■フィッツの法則とは…？
選ぶ時に、選択肢のサイズが大きかったり、
示すもの同士が物理的に近いほど選びやすくなるというもの。
ちょっとイメージ湧きにくいですよね。
例えば、
美容系の商品で、お試し価格で紹介されているLPを考えてみましょう。
一緒にイメージしてみてください。
そのLPのFV（ファーストビュー）には、
「今だけ20%OFF」の文言、そのすぐ近くに大きなボタン（CTAボタン）があります。
ボタン自体に説明のあるデザインも多いですよね。
こんなイメージです↓
あなたは、これを見た瞬間
「このボタンを押せば購入できるんだ」と分かりますよね。
また、今度はボタンがいくつかある時の例を考えてみましょう！
ヘアシャンプーのキャンペーンサイトをイメージしてください。
サイト内にはタイプ診断のページがあったとしましょう。
あなたは自分の髪質に合わせてジャンプーを選んでいます。
3つの髪質タイプがあり、
それぞれのすぐ下に3つの申込みボタンがありました。
こんなイメージです↓
明確な悩みがあるなら、
どのボタンを押せばいいか一瞬で選べますよね。
これはフィッツの法則によって選びやすいのです。
もし、物理的に遠いと本当にこのボタンでいいのか不安も生れますね↓
こちらの文字は「詳しくはこちら」だけなので迷いにくいですが
よくみるデザインって他にも文字がありますよね。
他の文字情報があるなか、こんなに説明とボタンが離れていたら迷います。
すると、お客さんにとっては
分かりにくく不安も生れるため、
選択する（購入・申し込みに進む）という行動がとられなくなってしまいます。
機会損失の可能性が高まるということです。
《フィッツの法則の補足説明》
■サイズが大きいと選びやすいというのは…？
例えば、申し込みボタン。
ボタンが大きいと分かりやすくすぐ行動に移せますよね。
そのままですが、ボタンサイズが小さいより大きい方が選びやすいということです。
■物理的に近いと選びやすいというのは…？
例えば、LP・webサイトでボタンを押してもらう時のこと。
「詳しくはこちら」「資料請求はこちら」のすぐ下にボタンがあれば
そこを押せば進めると直感的にも分かります。
たとえ、説明＋ボタンのセットがいくつか並んでいたとしても
説明とボタンが近いとどのボタンを押せばいいか選びやすくなるということです。
４）Webだけじゃない。グラフィックでも使える法則の活用法
この2つの法則は、例えでお話したように
Webデザイン（特にUX/UIデザイン）でよくみかけます。
でも、それだけではありません！
グラフィックデザイン（紙の制作系・看板など）でも
さまざまな場面で活用できるんです。
グラフィックデザインでの法則の活用例
例えば、メニュー表です。
・料理やセットの選択肢が多すぎる → 迷って決められなくなる（ヒックの法則）
この場合、選択肢を絞るのもいいですが、
おすすめアイコンなどを入れると選ぶサポートができますね！
・料理名の近くに説明や写真がある → 希望のものを選びやすい（フィッツの法則）
また、商品名の近くに金額が記載されているので、
瞬時に価格も分かり導線として迷いにくいですよね。
もうひとつ例をあげますね。
例えば、ショッピングモールで案内看板。
通路の天井からトイレや休憩スペースなど
いくつかの場所を示す看板もよく見かけますよね。
もしその看板で
・トイレのアイコンと方向を示す矢印が近くになかったら → どの方向にいけばよいか選べないですよね。
（フィッツの法則）
・他のアイコンや矢印が多すぎる看板だったら → どの方向に進むべきか瞬時に選べないですよね。
（ヒックの法則）
こんな風に、グラフィックデザインでも
「分かりにくい」を減らすことができますよ！
あえて「迷わせる」設計もある
ここが少し面白いポイントです。
基本的には、
・選択肢は少ない方がいい
・分かりやすい方がいい
のですが
場合によっては、あえて迷わせることもあります。
どんな時かというと？
例えば、そばのメニューでトッピングの種類が多い時。
選択肢が多いと悩む時間が増えます。
すぐに決められないですよね。
ただ、「食事をする」ということは決まっているので
こっちもいいし・あっちもいいし・・・と、
お客さんがわくわくできる時間を増やすことにつなげられます。
場合によっては、滞在時間が伸びますよね。
そうなれば、追加注文につながることもあるでしょう。
つまり、目的によって
「選びやすさ」をデザインすることで
お客さんやお店にとってプラスの動きを作れるということです。
５）まとめ
選びやすい・行動を起こしやすいデザインには、法則があります。
・ヒックの法則：選択肢の数で選びやすさが変わる
・フィッツの法則：選択肢のサイズと位置で選びやすさが変わる
似ている名前ですが、見るポイントが違います。
そして大切なのは、
「どんな体験をしてほしいか」でデザインを意図的に変えること。
・すぐ選べるようにしたいのか
・あえて悩んでもらうようにしたいのか（ワクワクしてもらいたいのか）
この視点を持つだけで、
デザインの作り方も変わってきますね。
普段何気なく見ているWebサイトやチラシや看板など、
少し意識して見ると発見があります。
ぜひあなたの日常でも探してみてください。
見つけたらあなたの制作がまた一歩、意図的な制作に向かっている証拠です。
みなとんでした♪
《注》
この内容はみなとん個人の経験・学びや見解によるもの。
したがって、読者さんのデザインや広告内容の売上等を確実にアップさせるというものではありません。
「こんな見方もあるのね」って参考程度に楽しく読んでくださいね！
あくまでこんな工夫があるんだなという観点でよんでいただけると嬉しいです。
comments
コメントなし