デザイン制作の極意~谷宜樹~

デザイン制作の極意を紹介していきます。

行動経済学を利用しよう!「エンダウド・プログレス効果」と「現在志向バイアス」

2022年04月29日 | 基礎知識

前回は、行動経済学で定義されている法則の2つを谷宜樹が解説しました。
損をしたくないという心理「プロスペクト理論」、イメージを固定化させる効果「アンカリング効果」の2つは、非合理的な行動を導くものとしてWEBデザインに応用されています。
今回は、この他にも谷宜樹がWEBデザインによく活用する法則を解説します。


■「エンダウド・プログレス効果」とは?

人は、ゴールまで順調に進んでいると感じると、モチベーションがアップします。
これを「エンダウド・プログレス効果」といい、より達成感を持たせる表現がモチベーションの向上に良い影響を与えると分かっています。
この効果を理論づけるものとして、2つのポイントカードを使った実験が有名です。
1枚は10ポイント貯めるポイントカードであり、すでに2ポイント獲得しています。
もう1枚は8ポイント貯めるカードで、まだ0ポイントです。
どちらもゴールまではあと8ポイントですが、人が感じる達成感には違いがあります。
すでに2ポイントが貯まっているカードをもらった人は、まだ0ポイントのカードをもらった人よりも、10ポイントに到達した時の達成感が大きかったと感じました。
この実験では、ポイントが全部貯まるまでにかかった時間や労力が同じだったとしても、ゴールした時の達成感には違いがあるというのが分かります。
これは「ゴールまであといくつ貯めれば良いか」というのが視覚化されたことが理由です。
今から1つずつ貯める必要があるというイメージよりも、あと○ポイント貯めれば良いというイメージの方が、やる気をアップさせることができるのです。
WEBサイトにおいても、ゴールまでの道筋を示したものは選ばれやすいでしょう。


■「現在志向バイアス」とは?

将来に得られるであろう利益よりも、今すぐ得られる利益の方が価値が高いと感じるのが「現在志向バイアス」です。
例えば、1ヶ月利用して100ポイントもらえるスポーツジムと、入会したその日に100ポイントもらえるスポーツジムでは、どちらが魅力的ですか?
利益が出るのが1ヶ月先のものよりも、今すぐ利益を得られるものの方がお得であると思いますよね。
この法則をWEBサイトで使うなら、「1回で効果実感!」「当日から使えます」などの文章が効果的です。


デザインや文章から感じ取れるイメージは、ある程度多くの人に共通するものがあります。
行動経済学の法則を応用すれば、ユーザーに狙った行動をさせることができるかもしれません。


WEBサイトに活かしてみよう!「プロスペクト理論」と「アンカリング理論」

2022年04月26日 | 基礎知識

前回は、「行動経済学」についての概要を谷宜樹が解説しました。
人間の非合理的な行動をWEBデザインに活かすということの意味が分かっていただけたでしょうか。
今回は、行動経済学で定義されている法則をいくつかご紹介します。
それぞれどんなWEBデザインに活かせるか、谷宜樹と一緒に考えてみましょう。


■「プロスペクト理論」を学ぼう

行動経済学の中心となる法則に、「プロスペクト理論」というものがあります。
これは、与えられた情報ではなく、自分の状況や感情によって期待値を変えてしまうという考え方です。
例えば、次のような宝くじがあったとしましょう。

①100万円をもらえる確率が80%である
②200万円をもらえる確率が40%である

みなさんならどちらの宝くじを買いますか?
①はかなりの確率でお金を手に入れられます。
②は①の2倍の金額ですが、もらえる確率は半分です。
「プロスペクト理論」では、多くの人が「たくさん得をするよりもできるだけ損をしない」選択をすると定義されています。


■プロスペクト理論をWEBデザインに活かすと…

プロスペクト理論を活かしたWEBデザインでは、「○%」「○割」という確率や、「先着○人まで」という数字がよく使われます。
「早く申し込まないと売り切れる」と思わせることで、より購買意欲を刺激できるでしょう。
本当に必要なものか判断するよりも、他の誰かに取られないようにすることを優先させる非合理的な行動を促しています。


■「アンカリング効果」って何だろう

アンカー(いかり)を使って船の位置を固定するという意味から、「最初に見た情報が人間の思考の中で無意識のうちに固定化される」という法則です。
例えば、服屋さんに行ってTシャツが2000円で売られているのを最初に見たとします。
その後、別のお店で同じものが750円で売っているのを見つけたら「安い!」と感じますよね。
もっと探せば750円以下で売っているお店はいくつも見つかるのに、最初に見た2000円の値札が大きなイメージを持ち、判断に影響を及ぼしています。
これが「アンカリング効果」です。


■アンカリング効果がWEBデザインに利用されている例

アンカリング効果が発揮されるのは、主に価格を示す一覧表です。
よく「料金を比較」という記事がありますよね。
同じサービスでも、A社は12万円、B社は15万円、C社は18万円であると書いてあれば、これを見た人は「安くて12万円か」と考えるでしょう。
まずこの価格が脳内に固定化されます。
その後で「私たちに依頼すれば10万円!」と書いてあれば、「安い!お得だ!」と思いますよね。
他社の料金と比較する他に、自社の従来の商品の価格と比べて安いセール品をおすすめするのもアンカリング効果によるものです。


今回は、谷宜樹が「プロスペクト理論」と「アンカリング理論」についてお話ししました。
次回も行動経済学の法則について、WEBデザインの例とともに解説していきましょう。


「行動経済学」を学んでWEBデザインに活かす!人間の思考を分析

2022年04月23日 | 基礎知識

人間は、経験や知識に基づいた合理的な判断をしようとする生き物です。
しかし、そうすることが良いと判断できる明確な根拠がないのに、なんとなくその行動を選んでしまうということもありますよね。
これは、非合理的な行動です。
WEBサイトで商品を買ってもらうために設置するCTAボタンや宣伝文句は、ユーザーの気持ちを刺激して非合理的な行動を促しているといっても過言ではありません。
今回は、人の気持ちを動かして経済活動につなげる「行動経済学」について、谷宜樹が解説していきましょう。


■「非合理な行動」って何?

みなさんは、次のような行動をしてしまったことはありませんか?

①バイトで稼いだ1万円は大切に取っておくけど、パチンコで当たった1万円はすぐに使ってしまった
②うな重を食べに行って並・上・特上があったら、いつも上を頼む
③健康のためにウォーキングを始めたが、天気が悪い日が続いたのでやめた

これを行動経済学の観点から見てみると、次のようなことが分かります。

①同じ1万円だから価値は同じだが、苦労して手に入れたのと楽して手に入れたのでは重さが違う気がする
②一番安いものを頼んだらケチだと思われるかも、でも一番高いものを頼むのは贅沢だ、間を取って上にしておこう
③ウォーキングを続けた方が良いと分かっているが、何かと理由をつけてはサボろうとしてしまう

これらの考え方は、はっきりとした根拠のない非合理な判断ですね。
例えば②の場合、自分でそう思っているだけで、誰かに「ケチ」と言われたわけではありません。
また、こういう判断をする人も、「特上が贅沢だと感じるのは自分だけかもしれない」「全ての人の基準が一緒ではない」と分かっていると思います。
それなのに、なぜこのような判断をするに至ったのでしょうか。


■「行動経済学」って何?

人間は常に合理的な行動をするわけではなく、時には非合理な行動をすることもあります。
非合理な行動には法則があり、これを定義しているのが「行動経済学」です。
行動経済学の考え方は、マーケティングやWEBデザインにも応用されています。


■WEBサイトでどんな風に活かせるの?

谷宜樹がやっているWEBデザインでも、行動経済学の法則が利用されています。
詳しく言えば「プロスペクト理論」や「ナッジ理論」などが用いられていますが、これによってどんなワード、どんな視覚表現が効果的なのか分かります。
WEBサイトの目的と照らし合わせて、より効果的なデザインにするのが谷宜樹の仕事です。
なんとなくその色をチョイスするという「非合理的」な判断ではなく、行動経済学に基づいた「合理的」なWEBデザインを行なっていると言ったら、ここまでしっかり理解してこれた方は混乱するかもしれませんね(笑)


今回は、WEBデザインにも応用されている行動経済学についてお話しました。
次回からは、具体的にどんな法則が定義されているか見ていきましょう。


CTAボタンが与えるイメージは?効果的なデザインを考えよう

2022年04月20日 | WEBデザイン

前回は、谷宜樹がCTAボタンに添える言葉について解説しました。
他にも、CTAボタンの見た目を決めるサイズ・カラー・イラスト・形が重要だとお話しましたね。
今回は、この4つの要素について詳しく解説していきたいと思います。


■色んなCTAボタンを作ってみよう!

CTAボタンが与えるイメージを知るためには、まず自分で様々なサイズ、カラー、形のボタンを作ってみるのが一番です。
編集ツールの練習にもなるので、まずは何も考えずに色々作ってみましょう。
3~5個作れたら、そのボタンに同じ「ここをクリック」という文字を入力してください。
これでそのボタンの見た目だけでどう感じるか調べることができます。
じっくりボタンを観察し、自分ならどんな感想を持ったかメモしてみましょう。


■CTAボタンのデザインで考えることは?

CTAボタンの見た目からどんな感想を持つかは人それぞれですが、一般的に次のようなことを意識すると効果的だといわれています。
ここからあなたのWEBサイトに必要なものが見つかるかもしれませんよ。

・サイズ
スマートフォンでも表示されるWEBサイトであれば、CTAボタンのサイズは10㎜×10㎜が理想です。
平均的な指の大きさから、このサイズのボタンが押しやすいといわれています。
長方形のボタンであれば縦の長さが10㎜、円形のボタンであれば直径が10㎜のものを意識しましょう。

・カラー
CTAボタンの大きさや形が同じでも、色が違うだけで印象がガラッと変わります。
WEBページの背景の色と合っているか、目に飛び込んでくるかを意識してデザインしましょう。
また、前に解説したように色が持つイメージもあります。
例えば、青は誠実さをイメージさせるので、企業説明のページに合いますね。
そのほか、LINE登録を促すならLINEのオフィシャルカラーである緑を使うと分かりやすいでしょう。
ただし、赤い文字はエラー、薄いグレーの文字はクリック不可であるというイメージもあるため、使用する色には注意が必要です。

・イラスト
CTAボタンは、図形で文字を囲むだけのほか、人や物などのイラストを添える方法もあります。
例えば、人の姿をしたアイコンの右上に+マークが書かれているイラストと「フォロー」という文字が書かれていれば、このボタンの意味がイメージしやすいですね。
ショッピングカートのイラストや吹き出しのイラストも、商品購入や口コミ表示だと分かりやすいので谷宜樹のおすすめです。

・形
長方形、角が丸まった長方形、円形のCTAボタンをよく見ます。
長方形のボタンはスタイリッシュに、角が丸まったボタンは親しみやすさを感じますね。
円形は可愛くて目立ちますが、WEBサイトによっては子どもっぽくなりすぎて合わないものもあります。


自分のサイトがなんとなくまとまりのないデザインになっている場合は、WEBページの内容とCTAボタンのデザインが合っていないのかもしれません。
もう一度CTAボタンを作り直してみましょう。


CTAボタンにはどんな言葉を添える?分かりやすく魅力的なボタンとは

2022年04月17日 | WEBデザイン

CTAボタンのデザインは、見る人に「押してみたい!」と思わせるものにする必要があります。
これは初心者の方でも、なんとなく想像できるのではないでしょうか。
しかし谷宜樹は、「このボタンを押したらどうなるか」ということが容易に想像できることも重要だと考えています。
WEBサイトで、ただ「押してみて」と書かれているボタンをあなたは押すでしょうか。
ボタンを押したら料金を請求されるかも、勝手に登録されるかも、と思ったら怖いですよね。
CTAボタンは、閲覧者が安心してクリックできるようにするべきです。
今回は、意味が分かりやすく、クリックするメリットを感じられるようなCTAボタンのデザインについて、谷宜樹と一緒に勉強していきましょう。


■ボタンを押したらどうなる?具体的かつシンプルに

WEBサイトにあるCTAボタンを見てみましょう。
時々「ここをクリック!」と書かれているものを見つけます。
それをクリックしたらどうなるか、あなたはそのページだけで判断できますか?
中にはクリックしてみて初めて
「ああ、会員登録のページに飛ぶんだ」「あれ?いつの間にか商品購入することになったみたい」と分かるCTAボタンもありますね。
クリックしたらどうなるかを、はっきりと伝えるCTAボタンにするべきです。
例えば、「会員登録はこちら」「商品を購入する」など、そのボタンをクリックするとどんなページに移動するか簡潔に説明しましょう。


■今すぐ押してほしい!ボタンを押すメリットを伝えよう

CTAボタンの目的は、閲覧者に行動を起こしてもらうことです。
「あとで考えよう…」と思ってスルーされてしまっては、CTAボタンを設置した意味がありませんね。
今すぐボタンを押してほしいなら、すぐに押したくなる言葉を添えましょう。
例えば、
「会員登録する」を「今なら1ヶ月無料!早速お試し登録」
「商品を購入する」を「あと1日!お得な限定セールで購入する」
という言葉でCTAボタンを作成するのが谷宜樹のおすすめです。
無料体験キャンペーンや期間限定セールを行っている場合は、忘れずにCTAボタンで説明しましょう。


■4つのデザインを意識しよう!

CTAボタンに使う文章の他に、ボタンの見た目も重要なポイントです。
サイズ・カラー・イラスト・形の4つは、WEBサイトに合わせて効果的なものを選びましょう。
詳しくは次回、1つずつ谷宜樹が解説していきます。
まずは、様々なデザインのCTAボタンを作ってみて、それぞれどんな印象を持つかじっくり観察するのも良いですね。
そこから人に与える影響に気付くことができます。


CTAボタンに添える文章で、WEBサイトが伝えたいことを明確に説明しましょう。
分かりやすいことと、魅力的であることの2つが備わっていると、よりクリック率が上がります。