“押したくなる”ボタンの秘密とは？ ｜ デザインに潜む心理学

はじめまして！2ヶ月半ほど前、NUSEEKのメンバーに加えていただきました、わたなべと申します！

まだまだ初めて知ることばかりで、てんやわんやな毎日ですが、みなさまのお力になれるよう日々勉強中です。
どうぞよろしくお願いします！

今回は、デザインに潜む心理学について、ECサイトの視点から整理してみたいと思います。
少し専門的な内容もありますが、UIや導線設計への理解が深まるはずです！

実は私、大学時代に心理学を専攻しており、卒業後もその知見を深めNUSEEKに入社してきました。

今回はその学びを踏まえ、ECやデザインの現場で役立つ考え方をご紹介します！

今回のブログでは

ユーザーに「押してもらう」ための仕掛けをテーマに、
アフォーダンスとシグニファイアという考え方をご紹介します。

どちらのボタンが押したくなる？

早速ですが、こちらのボタン、どちらを押したくなるでしょうか？

① 平らで背景と同化した無地のボタン
② 影がついていて、少し立体的に見えて、ホバーで色が変わるボタン

…たぶん、多くの人が右側の ② を選ぶのではないでしょうか？

実はこの“なんとなく押したくなる”感覚、心理学の理論に裏付けがあるんです。

それがこれからご紹介する、アフォーダンスとシグニファイアです！

カートボタン、検索欄、カテゴリタブ……など、ECサイトを見やすくしてくれるパーツには必ずと言っていいほど潜んでいます。

「なんとなくわかる」「なんとなく使いやすい」って、ちゃんと設計されているんです！

まず、アフォーダンスとは？

アフォーダンスとは、
「環境が動物に提供する情報や価値」のこと。

もう少しわかりやすく言うと、「モノ自身が、モノをどう使えるかヒトに教えてくれること」とも言えます。

モノは様々なアフォーダンスを持っており、ヒトはその中から一つのアフォーダンスを受け取り、行動に移しています。

たとえば…

椅子の場合：

・膝の高さに座面があり
・座れそうな面積と素材でできている

→ これを見た人は、「ここに座れるかも」と思うはずです！
（日常生活で普段意識することはないかと思いますが……）

でも椅子って、座る以外にも…

・カバンを置く
・踏み台にする

など、複数の可能性がありますね！

この「行動の可能性」こそがアフォーダンスです。

ほかにも、

石ころの場合：

・手のひらに収まるサイズで
・丸みを帯びていて
・程よい重さがある

→ そこから「持てそう」「投げられそう」「積み上げられそう」など、
例え用途が決まっていなくても、いくつものアフォーダンスが感じ取れるのです。

アフォーダンスは人によって変わることも

同じ椅子でも…

大人にとっては「座れる椅子」　でも、
子どもにとっては「登れない大きな台」

というふうに、ユーザーの視点によって見え方が変わります。

だからこそ、多くの人に共通して“こう使える”と気づいてもらうための工夫が必要になります。

その役割を担うのが、次に紹介する「シグニファイア」です。

シグニファイアとは？

シグニファイアとは、
「アフォーダンスを強調させる、モノの特徴やサイン」のことです。

たとえば、立体的に盛り上がったボタンを見ると「押せそう！」と感じますね！

この“押せそう”という可能性を後押しする情報がシグニファイアです。

たとえば…

立体的なボタンの場合：

・表面が盛り上がっていて
・陰影がついていて
・他の部分より目立っている

→ それを見た人は自然と「押せそう」と感じるはず！

この「押せそう」と思わせる形状や立体感、陰影などの特徴が、シグニファイア です。

ドアの取っ手の場合：

取っ手がなければ、押すのか引くのかわからずユーザーを迷わせてしまいます。

そこで…

・「スライド」と書かれたシール
・横向き矢印のマーク
・手をかけやすいフチの形状

といった視覚的なサインを与えることで、「ここは横に引いてね」と気づいてもらえるようになります。

これらもすべて、シグニファイアです！

まとめると、アフォーダンスとシグニファイアとは

アフォーダンス：行動の可能性そのもの
シグニファイア：その可能性に気づかせ、行動を後押しするサイン

という違いがあります！

ECサイトでの活用例

ECサイトにおいては、シグニファイアを意識することで、ユーザーの行動を自然に促す導線設計が可能になります。

【Good】　良いシグニファイアの例：

• ボタンに影や立体感、矢印をつける
  • “押せそう”と感じさせることでユーザーの行動を補助
    
• カテゴリのタブに切り替え感を出す
  • タブのような形状にして「ここをクリックすれば切り替えられそう」と感じさせ、スムーズなサイト閲覧へ
    
• 検索欄にプレースホルダーやアイコンを入れる
  • 「ここで検索できますよ」というヒントを視覚で与え、ストレスのない検索行動を後押し

これらは普段当たり前に感じる部分ですが、実は理論に裏付けされたユーザービリティの工夫です！

もちろん、例に挙げた以外にもさまざまな方法で、ユーザーの行動を促すことができます。

このサイトではどんな方法で行動を促しているんだろう？どうやって促したらもっと行動してもらいやすくなるかな？
といった風に、たくさん見て考えるのがユーザビリティへの第一歩ですね！

【Bad】　逆に、シグニファイアが間違っていると……

• バナーが押せそうに見えるのにリンクがない
  • 「押せそう」なのに「動かない」ことでストレスを与えてしまう
    
• ボタンが反応しない、あるいは反応が分かりにくい
  • ユーザーを迷わせ、離脱の原因に

つまり、見た目が行動を裏切ってしまうと、
ユーザーに「思ったのと違う」「次に何をすればいいのかわからない」という迷いを与えてしまいます。

ユーザーに気持ちよく使ってもらうために、
「間違った動きを促していないか？」「次のステップがちゃんと伝わっているか？」
という問いは常に意識しておくと安心ですね！

さらに深める①：ユーザー視点に立った設計

影付きボタンは分かりやすい例ですが、
「全てのボタンに影をつければいい！」……というわけではありません。

今のユーザーは、「カートボタンは右上とか端っこにあるはず」「商品写真のすぐそばに購入ボタンがあるはず」など、
“あるべき場所にリンクがある”ことを自然に理解しています。

そのため、見た目のシグニファイアを強調するよりもむしろ、
UIの配置ルールを守って迷わせないこと が大切なんです。

逆に、あえてルールを外したデザインに挑戦する場合は、通常以上に導線への配慮が必要になります。

最終的に大事なのは「ユーザーが迷わずに行動できるか」。
見た目の工夫はそのための手段であり、本質はユーザー視点に立った設計にあります。

さらに深める②：GA4やヒートマップを活用した検証

「じゃあこのデザイン、ちゃんと伝わっているのかな？」
「ユーザーはどこで迷っているんだろう？」

そんなときに頼りになるのが、Googleアナリティクス（GA4）やヒートマップツールです。

ユーザーの動きをデータで可視化することで、理論と実際の行動のギャップを埋める改善ができます。

• ボタンが視覚的に目立つようにしたのに、クリック率が低い
  • 実は見られにくい位置にある？

• 押して欲しい箇所がヒートマップ上で無反応
  • シグニファイアが足りていない？

など、データをもとに、より効果的にデザインを組み直していくことができます！

NUSEEKなら、見た目と裏付けの両方からご提案できます

こういったデザインの背景を理解した上で、
実際のユーザー行動データに基づいた戦略設計・改善提案まで行えるのが、
私たちNUSEEKの強みです。

• 「なんとなく、おしゃれ」「なんとなく、他社の真似」で作らない
• 使ってもらえる設計を、データ＋実績から導き出す

ECサイトの改善に悩んでいる方は、ぜひ一度ご相談ください！
より「見てもらえる」「選んでいただける」ECサイトを一緒に目指していきましょう！

今後ともどうぞよろしくお願いいたします。