心を動かす戦略的WEBデザインの作り方 ― 最初の3秒で「選ばれる」ために ―

心を動かす戦略的WEBデザインの作り方 ― 最初の3秒で「選ばれる」ために ―

記事
デザイン・イラスト

「3秒」


突然ですが、これが何の時間かわかりますか?

実はこれ、ユーザーが「このWEBサイトに興味がある」と判断するまでの時間です💡
このたった数秒が、あなたの商品やサービスが「見られるかスルーされるか」を決める、運命の分かれ道となります。

初めて広告を作られる方においては「なんとなくかっこいいから」と感覚でデザインを作ってしまうことも多いです。
それでは人に見られもせず、せっかく心を込めて作ったサービスが伸びていきません。

ぜひこのブログで、どのようなデザインが注目を引き、人の心を動かすのかを解説していきます。
ぜひデザインを考える際は取り入れて見てくださいね。

脳が反応するのは”一瞬”

数々の研究では、以下のように人間の第一印象や注意の仕組みが“超高速”で働いていることを明らかにしています。

0.013秒:画像の意味を把握し始める
0.05秒:画像の第一印象が形成される
0.1秒:何を見たか、どんな印象かを判断する
2〜3秒:Webサイトを離脱するか、とどまるかを直感的に判断する
8秒:ユーザーが集中できる平均時間

つまり、
「0.01秒」で画像の意味を察知し、
「0.05秒」で第一印象が決まり、
「3秒以内」に「とどまる価値がある」と感じなければ、
「スルーされる」ということです。

これが「人間の脳の仕組み」である以上、どんなに内容が素晴らしくても興味を持ってもらえなければ内容を見てもらうまでに至りません。
まずは広告に注意を向けてもらうことが、人の心を動かす第一ステップなのです。


どうすれば注意を向けてもらえるのか?

今やSNS、WEB広告、LINE通知、YouTubeのサムネイルなど、1日数千件の情報が目に入る時代です。
どれほど良いものを作っていても、ほとんどの広告はスルーされてしまいます。

では、あなたが「おっ」と、つい手を止めて見てしまう広告とはどのようなものか考えてみてください。

それは、きっと「自分に関係がある情報」ではないでしょうか👦


実は人間の脳は非常に省エネで、膨大な情報の中から「自分に関係がある情報」だけに注意を向ける仕組みを持っています(心理学の用語で「選択的注意」と言います)。

ざわざわしている場所でも自分の名前が呼ばれたらつい注意が向いてしまいませんか?それも選択的注意によるものです。
全ての情報に注意を向けていたら、脳が疲れてしまい何に重要な情報を見逃してしまうので、生き残るための戦略としてそういった仕組みが組み込まれています。

選択的注意を踏まえると、
「自分に関係がある」と一瞬で判断してもらうこと=自分ごと化してもらう
これがWEB広告においてもユーザーに興味を持ってもらう上で重要だということがわかります💡

【自分ごと化】させるためのポイント

ユーザーに「これ、私のことかも」と思わせるためには、単なる“目立つデザイン”では不十分です。
視線を惹きつけ、意味のある印象を残すためには以下の要素を取り入れてみましょう。

①ターゲットを明確にし、「誰のためか」をビジュアルで伝える
人に「自分ごと化」をしてもらうために最初に伝えるべきは「これはあなたのための情報です」というメッセージです。
誰向けかが一瞬でわかるペルソナに合わせた人物や色調を取り入れると効果的です。

例えば…
「子育て中でも自分の時間を取り戻したいあなたへ」
「副業初心者でも3ヶ月で売上達成!」

このように、自身の境遇に関する言葉や共感ワードを織り交ぜたキャッチコピーを入れたり、「この人にできたなら、私にもできるかも」と思える変化の描写を使うと注目されやすくなります。


②視線の流れと視覚的階層を設計する
人の視線は無意識に「左から右」「上から下」に流れる傾向があります。
また、サイズや色の違いでどこから見るべきかを瞬時に判断します。
そのため、重要な情報は左上や中央に配置し、大きな文字→小さな文字へ視線を誘導、強調色(赤・黄色など)で「注目ポイント」を絞ることが効果的です。
「自分ごと」として捉えてもらうための文章を視線の流れに合わせて配置するとよりメッセージが届きやすくなります。


③感情を動かす「ビジュアル×言葉」のセットで訴える
人は正論や理屈よりも「感情」で動きます。
例えば、高価な時計を購入するときに、理屈では「時計は時間が分かればいい」と思ったとしても、「このブランドを持っていると自信が持てる」「友人に褒められたい」「自分へのご褒美」と、機能ではなく感情的な理由で購入することが多いですよね。

そのため、感情を揺さぶるコピーと印象的なビジュアルをセットで届けることが重要です。

例えば…
写真:疲れた表情の女性+コピー「このままで、終わっていいの?」
イラスト:晴れやかな笑顔+コピー「私、変われたかも」

ここでは詳しく触れませんがポジティブな感情に働きかける場合とネガティブな感情に働きかける場合では、狙える効果も違います。
状況に応じて、どのような感情を生起してもらいたいかを考えながらデザインを作りましょう。

④「ストーリー」を組み込むと、脳は記憶しやすくなる
人は単なる情報よりも「物語」に触れたときの方が記憶に残ります。
物語に触れると「自分ごと」として想像しやすくなるためです。

例えば…
Before:毎日夜中まで働き、疲れきっていた私が…
After:たった3ヶ月で自分の時間と笑顔を取り戻せました。

感情の流れ(不安 → 希望 → 行動 → 変化)を取り入れることで、共感を呼び、印象に残りやすくなります。


「自分ごと化」以外にもある!脳の“無意識のクセ”を利用する方法

今までお伝えしたように、ユーザーの注意を引くために「自分ごと」と感じさせる工夫は非常に重要ですが、実はそれ以外にも、人間の脳の“無意識のクセ”を活かすことで、瞬時に注目を集めることができます。

その代表例が、「人の顔」です。

脳が“自動的”に反応する「顔」の力
人間の脳は進化の過程で、「人の表情を読み取る」「感情を察知する」ことに非常に長けてきました。
このため、人の顔は視覚情報の中でも最優先で処理される対象となっています。

特に強く注意を引くのが、赤ちゃんの顔や正面を向いた顔です。
これは「ベビースキーマ(baby schema)」という心理学的概念で説明されており、以下のような特徴を持つ存在に対して人は本能的に「かわいい」「守りたい」と感じ、無意識に目を奪われます👶

大きな目
丸い輪郭
小さな鼻や口
幼さ・未熟さを感じさせる表情

この効果は、子犬や子猫などにも応用されており、いわゆる「かわいい広告」が視線を集めやすい理由にもつながっています。

そのため、人物写真を使う際は「表情が見える正面顔」「視線がユーザーに向いている構図」を選んだり、赤ちゃんや子動物など、保護本能を刺激するビジュアルを用いたり、人物の視線を活かして、ユーザーの視線をキャッチコピーやCTA(行動喚起)に誘導するなどの工夫を取り入れるのも効果的です。


伝えたい人に、伝わる戦略的なWEBデザインを
上記のテクニックを取り入れて、伝えたい人に伝わる戦略的なデザインを活用しましょう!
M Designでは日々人の心を動かすWEB画像について研究を重ねています。
上記を踏まえた戦略的なデザインをお求めの方はお気軽にご連絡ください。

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら