.思い通りに視線・注目を集めるデザインの作り方

デザインの考え方・作り方

今回は、注目してもらう方法、、、そして
同時に、注目を集めたい一部を
見てもらいやすくする
コツを
届けていきます♪

デザインは入り口サッとが勝負

夏の暑い日。
私の基準。
「30度を超えたらエアコンつける」
そう思っていました。

ただ、時に「なんか暑いな~」と温度をチラリ。
なんと33度にもなっているではないか…!

温度は徐々に上がると
気づきにくいもの。
でも、デザインは
徐々に変化を与えて……とはいきません。

情報に溢れる毎日の生活の中で、
いかにサッと
・相手に気づいてもらえるか
・見てもらえるか
・読んでもらえるか
・注目してもらえるか
が勝負
です!

視線を集める・注目されるヒントは、枠!

もったいぶらず、早速、結論から!

注目を集めるためには
「枠(フレーム)」が使えます。

というより、
枠で注目してもらいたい箇所を囲む。

コレ、結構使えるんです!
シンプルすぎて、
この先を読みたくなくなるかもしれませんね…
(でも、具体例やBefore→Afterもあるので読み進めてほしい…٩( ᐛ )و)

枠って言われるだけじゃあ、
わかりにくいですよね!

ここからは、一緒にデザインを見ていきましょう!

↓↓↓↓↓

出典:https://runway-webstore.com/features/?aid3=rctop_features_allより借りました

最初にお話した「枠」というのは、
このデザインの場合、
白い枠のことです。

枠があると、自然に
その枠内に視線を集めやすくなります。
それが枠の特徴です。

ちなみに、このデザインで
枠が太い場合どうなるでしょう?

恐れ多くも、枠を
太くしてみました。(枠だけです)
↓↓↓↓↓

出典:https://runway-webstore.com/features/?aid3=rctop_features_all 中より借り、枠のみ編集しました。

いかがでしょう?
枠が太いとより、その効果(視線が枠内に集まる)を
感じてもらえるのではないでしょうか。

あなたがパット見たとき、
枠の内側へ自然と目がいってませんか?

それにプラスして、このデザインでは
カラーの効果も相まって
サーモンピンク色の文字を自然と読んでしまいますよね。

あんまり感じないな…って思ったあなたには、
こちらの画像もみていただきたい!
↓↓↓↓↓

出典:ttps://www.canva.com/ja_jp/templates/EAGylMepfHc/ ※Canvaのテンプレートを借りています。

「半額」に視線が、一点集中しませんか…?

もちろん「半額」の文字が
大きいくて太い効果もあります。


でも、枠によって枠内に視線が集まり、
あなたの視線が他の場所(枠の外)に
移りにくくなりませんか?

いっとき、周りの情報と遮断されて
「半額」が頭に残るはずです。

ちなみに、太い枠は、
太い文字やゴシック体のような

ドンッと強い印象を与える文字との相性がいい場合が多いです。

太枠内に、細い線の明朝体があると
使い方(枠の範囲等)によっては
文字情報が負けてしまいバランスが崩れることがあります。
(もちろん、意図して崩す場合は◎です)

いろいろな枠の使い方

色々な枠の使い方があります。

ここまで載せたデザインは、
主にデザイン範囲の大部分に枠を配置したものでしたね。

でも、ここからは、
「こんな使い方もあるんだ(☼ Д ☼)!!」
というようなフレームを使ったデザインをみていきましょう!

では、はじまり!↓↓↓↓↓

※出典:https://runway-webstore.com/ のレディースファッション通販サイトRUNWAY channel【ランウェイチャンネル】内から借りました。

文字が大きくて太い「3」は
目に飛び込んできますが、、、
それにプラスして!!

まずこのデザインを見た時に
枠内の情報に視線が中心しませんか?

枠の白色も青背景に映えているので、
いっそう視線を集めてくれる
デザインになっています。

それだけではありません!!
ちなみに、このデザイン…

目立つ枠の存在もポイントですが
黄色の配置も素敵で視線を
デザイン内で回遊させられますね。

はい、では次!

※出典:https://store.world.co.jp/ 【公式】OZOC(オゾック)の通販 | ワールド オンラインストア内から借りました。

こちらのデザイン、
枠の使い方は素敵だなと個人的に感動しています。

「人の顔」はただでさえ
視線を集めるアイテム
ですが
それに加えて枠が使われています。

人の顔+枠によって、
まず中央の女性の枠内に焦点が集められます。

そして、左右の枠は、
人の顔はないものの
最初に目に入った枠と関連のあるものとして
目に入りやすい
です。

枠によって
「ここを見て!」
と訴えかけているデザイン。

また、枠は大きく回転しています。
これによって、全体に動きも生まれています。
シンプルでありながらも面白みある、
ワクワクした気持ちを呼び起こしてくれる

そんなデザインに仕上がっています。

枠を追加したらどうなる?

番外編です!
このデザインに枠を入れたらどうなる?
をやってみます!!

枠(フレーム)のデザインをず~っとみていたら
「こんな風に枠を入れたい!」と
勝手にアレンジさせてもらったデザインがあります。

最後にそれを一つ
紹介させてもらいますね。
(決して元デザインに物申したいわけではありません!)

出典:https://share.google/IweXUPZezGTl6K40s から借りました。
※お写真等一部モザイクかけています

こちらのかっこいいデザイン。
「2日だけで起業家になれるんだよ」ってことを
もっと伝えられないかな?と思い
恐れ多いのですが枠を活用させていただきました。
↓↓↓↓↓

いかがでしょう?

右のキャッチフレーズに
枠をプラスしただけで、
「わずか2日で起業家へ」に
サッと視線が移動しませんか?

視線を集めるときに枠をうまく使うコツ

枠の役割で視線を集めたい場合は、
できるだけ「枠」と「枠以外のデザイン」が
分かれて見えるように枠を作ることがポイント
です。


そして、結構大胆に使うこと。

枠がデザインと馴染まないようにすると
うまく視線を集められます。


枠の上に素材を置いて
枠を一部隠す形もおしゃれですが、
枠がデザインの一部としてなじみやすくなります。

デザインと枠が馴染みすぎると、
枠内への強い視線集中というより
枠の一部が素材に加えられた
あしらいっぽい印象にもなります。

枠で使うのか?
はたまた
〇あしらいとして使うのか?


あなたが今作ろうとしているデザイン。
情報の伝え方によって
枠をうまく使いましょう⊂(^ω^⊂☆彡

さいごに

あなたの視線を集めるデザインのヒントに
なれていたら嬉しいなと思い、、、いやめちゃくちゃうれしいです。

今回もここまで読み進めてくれたあなたへ。
ありがとうございます。

私は、デザインは基本的なもの・コツを
知っていればある程度
わかりやすいもの・伝わりやすいものにできると思っています。
というより、できます!!

もちろんセンスは必要な場面もあるとは思いますが、
いったん、センスで考えるということは卒業です!

これからも、伝わりやすいデザインの基本やコツを
お話させてもらいますので、
よかったらまたのぞきに来てくださいね。

みなとんでした♪

《注》
この内容はみなとん個人の経験・学びや見解によるもの。
したがって、読者さんのデザインや広告内容の売上等を確実にアップさせるというものではありません。「こんな見方もあるのね」って参考程度に楽しく読んでくださいね!

私も楽しく書いてます(@ ̄ρ ̄@)
あなたにもそんな楽しさ伝わっていたらいいなあと…
あくまでこんな工夫があるんだなという観点でよんでいただけると嬉しいです。

タイトルとURLをコピーしました