《考察》購入・カートに入れるボタンのUIデザイン

2024年12月12日 12:48

こんにちは
当記事は、DHU Kuriya ゼミ Advent Calendar 2024ー12/13の記事です。

皆さんはネットショッピングをしますか？

近年、生活必需品から洋服、チケットまで様々なものをネットで買う機会が増えていると思います。

私はよくネットで買い物をしていて、最近はどこもセールをしていたのでいろんなサイトを見て回っていました。その時、「このサイト毎回カートに入れるの躊躇するけど、あのサイトは結構買っちゃえ！ってノリで買ってる気がする、、」と感じたんです。
そこで今回は購入・カートに入れるボタンのデザインについて考えてみることにしました。

この記事では、お客さんが押しやすいと感じるデザインや逆に押しにくいデザインについて考察してみます。商品の購入を促進するためにはどのようなデザインが効果的なのか、また、逆にユーザーに負担を感じさせるデザインは何なのかについても考えていきます！

色

まずは色です。
私がよく使うアプリとボタンの色をまとめてみました↓

ZOZOTOWN ：青
GU：青
and ST：青
H&M：黒
Qoo10：オレンジ
スターバックス：緑
Amazon：黄色・オレンジ
ジャンプ+：赤
GANMA！：黄色

こう見ると青か赤系が多いですね。
ということで２つの観点で比べてみます。

色が脳に与える影響

青色はセロトニンを分泌し、安心や集中させる効果が、
赤色はアドレナリンを分泌し、興奮させる効果があります。

日常生活から

青色はよく無料・FREEという文字と一緒に使われて、自由なイメージを持たせたいときに使われています。赤色はセール・○○％OFF！みたいな感じで、注目を集めたいとき使われています。
あとわかりやすいのは信号機です。(緑だけど)青信号は”すすめ”、赤信号は”止まれ”ですよね。なので無意識に青をみると動き出すために筋肉の緊張が和らいだり、赤を見ると止まるために緊張したり周囲を警戒したりします。

まとめ

青色にはリラックス効果と無料や進めのイメージが、
赤色には興奮させる効果とセールや注目、警戒のイメージがあります。

個人的には青色🟦が優勝です！
ですが、Amazonなどのように情報量が多いサイトでは赤色などの注目を引く色の方が良いのかなと思います。

アイコン

次はアイコンです。
カートに入れるボタンには、テキストのみ・カート付き・バッグ付きの３つがありました。
それぞれの利点とイメージをまとめてみます。

・テキストのみ

｜利点ごちゃごちゃしない　　　
｜イメージ　冷たい、シンプル、洗練

・カート付き🛒

｜利点　　　ぱっと見でわかる、文字が読めなくてもわかる
｜イメージ　スーパー、お手軽価格そう、親しみ、たくさん入る

・バッグ付き🛍️

｜利点　　　ぱっと見でわかる、文字が読めなくてもわかる
｜イメージ　両手にいっぱい持ってる、少し高級感、洋服が入ってそう

まとめ

個人的に押しやすさナンバーワンはカート付き🛒です。どんどん入れられるイメージがあるし、１番は親しみやすさがあることがポイントでした。

アイコンの有無に関しては、画面全体の情報量やサイトの雰囲気に合わせる必要があると思います。カートかバッグかについては、たくさん買って欲しい時はカートで、高級感あるファッション系はバッグが多いのかなと思いました。

最後に

私は、青色でリラックスさせ、カートアイコンの親しみやすさとたくさん入りそうなイメージを使ったものが1番押しやすいデザインなのではと考えました！
（ちなみに、勢いで買ってしまうサイトはカート付き青色で、躊躇してしまうサイトはテキストのみ赤っぽいオレンジ色でした）

今回はお客さんが押しやすいと感じるデザインや逆に押しにくいデザインについて、色とアイコンの２つから考察してみました。他にもボタンの配置やフォントなどたくさんの要素が関係すると思うのでまた考えてみたいと思います。

私は上記の考えに落ち着きましたが皆さんはどんなデザインが1番押しやすそうだと思いましたか？ぜひ教えてください！