【今すぐ使える】デザインロジックについて解説！

バナーの効果を上げるにはどうしたら良いかお悩みの方が多いのではないでしょうか。実は、デザインは意外とロジカルな要素が強いのです。

今回は様々なデザインロジックの中からすぐに使えるものを紹介します！

１．視線の動きの種類

ご存知の方も多いと思いますが、多く人は紙はZ型、webはF型に視線が動いています。左上から始まり、Zの様に右下へ移動、Fの様に右に向かって横に視線が移動します。

他にも色々な種類の視線の動きについての法則がありますので紹介していきます。

- 大きい物から小さい物へ

バナーでも一番見せたい文言を大きく、サブテキストは小さくしているものが多いです。

- 近くのものから遠くのものへ

近くにある要素から視線は動いていきます。情報をグループ化させ、余白をもたせることで関連する情報であることがわかりやすくなります。

バナー内でも視線の動きを意識することで、よりクリックしやすいものに仕上がります。要素が多く、視線のばらつきが出てしまうものでは何を伝えたいのかがわからなくなってしまいます。情報を整理して読みやすいバナーにすることが大切です。

悪い例の画像では文字の大きさに差がなく、文字が読みづらく、権威づけの情報も入ってきません。良い例の方では情報ごとにブロック分けし、視線のリズムを作っているので情報が伝わります。

２．人の短期記憶について

人が瞬間的に記憶できる情報は4±1個だと言われています。（マジカルナンバー：ネルソン・コーワン氏）

短期記憶には限りがあり、一度に多くのことは記憶できません。人が瞬間的に覚えやすい情報は4個未満、覚えにくいのは6個以上ということになります。相手に記憶して欲しい場合には情報を3つ程度に抑えると効果的です。

例えば、「牛乳と豆腐と鶏肉とネギとブロッコリーと玉ねぎと醤油買ってきてほしい」と言われたときに「最初のなんだっけ？」となる方が大半だと思います。このように、短期的な記憶には限界があります。

この理論はバナー作成の際にも応用することができます。バナーは接触時間も短く、記憶に残すことが大切になるため、文言の要素を多くても3ブロックになるよう心がけましょう。

逆に、LP制作の際はベネフィットなどユーザーに利益になることを6つ以上記載すると「いいことがいっぱいある！」という認識になります。

３．色彩効果

色彩効果クリックのされやすい色として代表的なのは赤・オレンジ・緑と言われています。赤は購買意欲促進、オレンジは親しみやすさ、緑は安心感を与えるのが理由です。LPでは、緑の購入ボタンがよく使用されています。

しかし、上記の色3色で制作すれば効果の良いバナーが作れるわけではありません。コンテンツにあった色使いや、コーポレートカラーなども意識する必要があります。

例えば、銀行など金融系のバナーの場合は、で青を使用すること信頼・冷静・堅実の印象を与えることができます。他にも、飲食店の看板が赤かったら中華料理・ラーメン屋など色から予測することも多くあります。

こちらの中華店のバナーですと、青のものに違和感が生まれます。赤のイメージが強い方が多いのではないでしょうか。