スポンサーリンク

「私を見て、注目して!」をかなえるための編集※【のほほん雑談配信中】

watashiwomite すぐ使えるテクニック

どうも、みなとんです。
今回(前回は公開後に添付)から、雑談コーナーを作りました。

まずはリラックス。



記事を読んでいただく前に雑談でリラックスしてもらいたいなと思っています。
(私の雑談でリラックスになるかは不明で恐縮ではありますが)


※雑談はまだ試運転なので、今回からと言いながらすぐに動画は閉店するかもしれません

まずデザインについて考える前にすこ~しでもリラックスしてもらえたら嬉しいです。
リラックスは発想転換やひらめきのために必要なことだと聞きます。

デザインを考える中の発想やひらめきのためにも聞いてもらえたらいいなという気持ちではじめてみました

↓↓↓

※他サイトへの貼り付けなどの二次使用や悪用は禁止です。著作権は放棄しておりません。

聞いてくださったあなたへ
ありがとございます!


では編集のお話に戻りますね。



今回も、’’勝手に’’バナー修正させていただきました。

今回からもっと私の中で考えたことを綴っていきます。

脳内で考えたこと(ワタシAとワタシBの会議)を遠慮なく公開してみたいと思います。

では、いきましょう!

はじめに~デザイン編集について~

★リピートしてきてくださったあなたへ★

どうぞこの項目は飛ばしてください。
(リピート訪問大歓迎で、ものすごく嬉しいです。ありがとうございます)

まずは初めてみてくださったあなたに簡単に説明させてもらいますね。

この記事ではセンス以外の理由で、すでにあるデザインを編集していこうと思います。


「このデザインはこうした方がもっと効果だせるんじゃないか?」

という視点から

「私だったら、こうしたいなあ。」
とデザインを ”勝手に” 編集してみています。



とっても恐縮ですが、デザイナーとして練習のような個人的な編集をさせていただいています。


センスでなんとなくこっちの方がいいかもと編集するよりも、心理学とか人の視線の傾向的なことを考えながら、勉強しつつ試しているところで、「センス」と呼ばれるモノの根っこに迫っていけたらなあという想いもあります。

なんとなくでデザインするより、どうせならしっかり成果のだせるビジュアルに仕上げたいと思い立ったのがきっかけでした。

私だったら、こうしたい!

編集した今回のバナーはこちら↓

元
※元の画像はPintarestさんから拝借

秋のスイーツ。
ど~んと栗があって、なんとも美味しそ~

そして、編集後がこちら↓

アレンジ -2_


写真や背景はほとんど変えていませんが、文字周りやタイトル周りをごっそり編集させてもらいました。



では、次の項目から主に大きく変更した3つのことをお話させてもらいますね。

【編集ポイント】その1 説明文、もっと見て読んでもらえるようにしたい

まず気になったのが、小さな文字。


右下の説明文や左のロゴのようなかたまりの上に配置された小さな文字たち。


(左の小さな文字たちは「その2」の項目で編集しています)



特に右下の文章は、スイーツについてこだわった点の説明のようですし、ちゃんと伝えた方がバナーを見た人の想像を膨らませられる材料になると思いました。

その中で私が考えていたことを少し書きますね↓

私の脳内会議
ワタシA
「バナーってPCやスマホで表示されることが多い。だけど、こんなに小さかったら読めないんじゃない?」

ワタシB
「でも、もしかしたら飾りの文字で、読まれなくていいものなのかもしれないわ!」

ワタシA
「でも内容を読むと、やっぱりこれはバナーを見てくれた人に伝えたいよね、たぶんスイーツ作った人もこだわったこと伝えてほしいと思うんよね」

ワタシB
「それなら、そうやね。伝えた方がいいわ!いや、伝えるべきことだと思う。」

画像3
右下の文字を目立たせるためにしたコト

・文字ののアンチエイリアス(Photoshop)をシャープor 強いへ
文字が鮮明になる

・文字の背景に光彩外側をかける
→文字にぼやけた背景を作る見出し



これで、文字と背景画像の同化を少し防げました。

文字が見やすくなりました。

ここでは詳しくお伝えしませんが、文字の見やすさは、文字色(前に重なる色)と背景色のコントラスト比を考慮するのがおすすめです。


このサイトで詳しく説明してくれているので参考に↓
https://weba11y.jp/know-how/guidelines/color-contrast-ratio/

【編集ポイント】その2 もっとタイトルを大きく目立つように、目に飛び込むようにしたい

次は、左半分についてです。


パッと見てもすごく、よくまとまっていますよね。

画像11



この情報のまとめ方、私は好きです。
好きというか、すごいなと思います。



人は一度に覚えられる情報が5~7つって言われていて、それ以上になると「見たくない」「読みたくない」って思われやすくなっちゃうんですよね。


そこで、このようなロゴみたいにひとまとめにすると情報がまるっと一つになって見えるので「見たくない」「読みたくない」現象を防ぐことができるんです。



個人的な感想ですが、こんなにキレイにまとめられていて、すごいなと思いました。


でも、私の頭の中では別の考えも出てきたんです。

私の脳内会議
ワタシA
「キレイにまとめられてるし修正必要なしではないかね?」

ワタシB
「いや、タイトル小さくない?キレイにまとまってるけど、その形に収めるためにタイトルが小さくなってるよね。目に飛び込んでこないんじゃない?」

ワタシA
「それはそうかも!バナーってパッと見が大切ってデザイナーの先輩言ってたし。パッと見た時に目に飛び込むくらいが丁度いいからなあ。」

ワタシB
「そうよね。もっと、瞬発的に美味しそう~って思ってもらえるように編集できたらいいよね」

そこで、思い切ってまとまりを崩して整理しました。

画像4
一体感を保ちつつ目立つためにしたコト

・「vol.131」の形を独立させる
 →周りと違う形があることで目を引きやすくなる

・「この秋~」のタイトルを大きく目立つように上下の中央より少し上へ
 →中央より少し上の方が読まれやすい位置と言われている

・「秋限定も!新顔も!」を移動させサイズを大きく

・まとまった形を崩しても一体感のあるように「AUTUMN SWEETS」を曲げてまとまているような構成にする

・文字は、太く+光彩(外側)でギラギラし過ぎず、太くなり過ぎないように目立たせる
→目立ちつつも上品さを保つため

・タイトル背景にぼかしたひし形を入れる
→ひし形にした理由は全体の一体感を崩さないようにするため(「Autumn〜」の両端の形に合わせた)

→ひし形がクッキリだとタイトルの邪魔になり悪目立ちするためぼかした
(下記の画像参照)

画像5

この場合より

画像6

こっちの方が、タイトルだけに注目されやすい。

ちなみに、ぼかしはひし形の4辺をぼかすことに加えて黒から紺色グラデーションに合わせてレイヤーマスクもかけました。

これで、タイトルは目に飛び込みやすくなったと思います。

【編集ポイント】その3 もっと味の想像を膨らませてもらえるようにしたい

画像12

これでもいいのですが、「秋」や「Autumn」のワードがあるだけに旬の食材を感じにくくないでしょうか?



脳内会議でもワタシAとワタシBの意見は一致でした。

私の脳内会議
ワタシA
「秋って言ってるのに画像の栗やさつまいもしか秋の食材がないよね」

ワタシB
「たしかにそうやなあ。しかも、これだけド〜ンと栗が大きく乗ってるからパティシエさんも栗をもっとアピールしたいところのはずよね。」

ワタシA
「じゃあ、イラストとか載せてみる?」

ワタシB
「そうね!でも、ごちゃごちゃしすぎると全体の雰囲気を壊しそうやから色が少ない絵がいいと思う」

ワタシA
「じゃあ、白の線画はどう?シンプルで上品な雰囲気も作りやすいし、いいんじゃない?」

ワタシB
「それがいいわ!そうしよ〜」

こんな感じでイラスト挿入の方向で編集してみました。

秋の美味しい食材をもっと想像してもらうために編集したコト

・白い線だけのイラストを端に挿入し不透明度を下げる
→全体の雰囲気を壊さないためシンプルな白色の線画イラストを入れる。不透明度の調整は、目立ちすぎないようにするため

秋食材のイラストを入れてこんな感じになりました↓

画像7

入れたイラストは、栗と柿。



柿のイラストを入れた理由は、秋スイーツの紹介バナーなので他のスイーツには柿が使われているだろうと思ったからです。


でも、その柿、私の頭の中では物議をかます原因となりました。

私の脳内会議

ワタシA
「柿スイーツありそうだから柿のイラストも入れてみたんよ。
そしたら、お客さんは柿もあるんやって思って、もっと色々美味しそうな想像膨らませてくれるんやないかなって思うんよね」

ワタシB
「それはいいけど。でも見る人によっては誤解しないかね?
バナーに載ってるスイーツに柿が入ってるった思う人いないやろうか?
それって苦情になる可能性もなきにしもあらずよね。」

ワタシA
「たしかに。。。誤解が一番いけないわ。」

ワタシB
「柿の想像もしてもらったらお客さんがお店へ来てもらえは可能性が上がるかもしれん。
でも、やっぱりそれ以上に恐れるべきことは誤解を招く情報伝達だと思うんよね。」

デザインしていく中、こうだったらいいなという気持ちは色々あると思います。


もっとこうだったら、お客さんを呼べるかなとか、喜んでもらえるかなとか。


でも、一番恐れることは誤解を招く伝達です。

間違えることでクライアントさんにご迷惑になることもありますし。


だから、今回は柿のイラストは外してこのようにまとめました↓

画像8

食材としてイラストを入れるなら、写真のメニューにはどの食材が使われているのかかわかるものを。

これが大切ですね。


※反省点としては、さつまいもがあればなおよかったなとも思います…

以上が、今回の主な編集内容です。

画像9

画像10

さいごに

編集中考えていることをおべっかなしで書きました。


方言とかもあって少しお恥ずかしい部分もありますが、私はこんな感じで頭の中で会話しながら過去の知識を引き出しています。


デザインを作るうえでの参考になれたら嬉しいなと思います。

最後まで読んでくださってありがとうございます!!

読んでいただけることが、私としてはものすごく嬉しいです!

不定期更新ですが、できるだけわかりやすく&できれば楽しんでもらえるような投稿を心がけて次も楽しくやっていきたいと思います。

また読みにきてください!
ぜひ!お待ちしてます^ ^

みなとんでした♪












※このブログは個人的な研究や視点・観点をもとに執筆しています。
したがって、読んでくださったあなたのデザインや広告内容の売上等を確実にアップさせるというものではありません。
あくまでこんな工夫があるんだなという観点でよんでいただけると嬉しいです。

抹本について
この記事をかいた人
designkagaku

プロフィール

□■□ 名前 : 抹本 港 □■□

同じものでもデザインを着せればお客さんの反応が変わる!
無駄になるようなデッドストックも表現の方法を変えて欲しいという人をつくる!
そんなプロジェクトのために勉強&実践している現役デザイナーです。

▼経歴などの詳しいプロフィール上の「designkagaku」を押してください。
プロフールのページへ移動します。(下記のページへ移動します)
https://design-kagakusiki.com/profile/hajimeni/

個人的には、お土産のパッケージや雑貨屋さんの封筒・カードデザインとか。つい目がいって長居してしまいます…

まだまだブログには不慣れですがよろしくお願いします!

designkagakuをフォローする
すぐ使えるテクニック 心理学のテクニック 脳科学のテクニック
スポンサーリンク
                          \ この記事をシェアする /
designkagakuをフォローする
リアクションのために私が実践してるデザインのテクニック

コメント

スポンサーリンク
タイトルとURLをコピーしました