見出し画像

無料添削デザインスクール #323 超実践型デザインお題添削「北海道チーズバナー」

イライジャ｜WEBデザイナー　デザイン添削おじさん

お題の概要

こちらのバナーお題を元に作っていただいたものです。

添削

チーズのバナーですね。
雰囲気の違いが作り分けできていますね。

■作り分けのコツ

作り分けをする時に自社サイトとショッピングサイトの違いを考える。
今回はこのふたつの作り分け課題ですが、実務では…
「もっと明るい子供っぽくして～」
「かっこいいダンディーな男性っぽく～」
「ギャルっぽいギラギラした感じ～」
こんな感じにざっくりな依頼が来ることがほとんどです。
まともなディレクターは、トップの企業にしかいません。
なので、デザイン業界に入ってまず直面するのが、このダメディレクターからの指示を解読するという仕事です。

どんな指示が来てもどんな違いを出したらいいのかを考えて、それを形にする必要があります。

自社サイトとショッピングサイトの一番の違いは、

望んで見ているのか、望んだものを探しているのか。

自社サイトに来るということは、望んで見に来た人です。
偶然入ってきた場合もありますが、少なからずどんな商品なのかを探している人です。

ショッピングサイトは大量の商品がある中から望んだ商品を探している状態です。
自社の商品を見てもらうチャンスは少ないです。

例えると、
・店の前で呼び込みするのがショッピングサイト
・店内に入って来てカウンターで説明するのが自社サイト
カウンター越しに「いらっしゃせ！！買ってください！！」と大きな声で言われたら引きますよね。

この違いをデザインで表す必要があります。
もっとかみ砕くと、

・自社サイトにまで来てくれる人は自社に興味を持っているので、奇抜なデザイン、自社ブランド全力でも見てくれる。
逆にブランド感押し出さないとブランド力が落ちる。
安売り感はあまり出してはダメ。

・ショッピングサイトは、まずは見てもらわないと話にならないので、ちょっとブランド感を崩しても目立ちに行く必要がある。

この違いがあります。
この作り分けができているかを踏まえてバナーを見て行きます。

■参考サイトを読み解く

今回の課題で似たようなデザインのサイトを選んだ3つ選びました。

自社サイト参考イメージ
https://needs-kashiyuni.com/
https://snows-winter.com/
https://sogafarm.jp/

自社サイトのバナーでは、この３つのデザインを踏襲するという課題の意図もあります。
実務では、デザインを自分でゼロから考えることはほぼないです。
サイトのデザインに合わせたり、参考バナーに合わせたりします。

Webサイトを新規で立ち上げたりするときはゼロから考えることもありますが、それでも方向性などは決まっているのでそれに合わせて作ります。

それを踏まえて見ると、全体的に白い色合いとパキッとした黒がしまっていていいのですが、どことなくボテッとした印象があります。

フォントが太いとボテッとした印象が強くなります。
繊細なデザインにしたいときは、フォントを細くしてあげるときれいな印象になります。
ただ、可読性やインパクトが格段に落ちるので、これをショッピングサイトでやると目立たなくなるのでブランド全開で出せる自社サイトだからできるデザインになります。

ロゴは自社サイトなのでなしでもいいです。

■目立たせるところ

ブランドイメージに合わせて統一感を出すのもいいのですが、目立たせるところは目立たせる必要があります。

割引額なども一緒で目立たせたいです。

サイトを見に来てくれた人は、より細かいところを見てくれる傾向がありますが、それでも流し見する人が多いです。
その人たちにも気付いてもらえるようにします。
ギラギラさせ過ぎないくらいで目立たせるといいです。

■素材

できることなら写真素材は自社サイトのバナーで使ったのと一緒のを使って作り分けするとより練習になります。
実務では支給される写真が1枚だけとか、写真を指定されることも多いです。
自由度が低い中で創意工夫する練習になります。

■目立たせる

ショッピングサイト系は流行みたいなのがあって、送料無料を大きくした方がいい、価格を大きくした方がいい、満足度を大きくした方がいい、売り上げNo.1がいい、などなど。
日々色んな試行錯誤が行われています。

今回は50％OFFという目立つ要素があるのでそこを目立たせてあげるといいです。
感覚としては、スーパーのチラシです。

ド派手でダサいと思われているものが無くならないのは、それが一番効果が出るデザインだからです。
意外と分野によっては、新規で考えなくてもいいデザインもあります。
特売のチラシっぽいものは過去のをマネするだけで売れる、逆にそれ以外をすると売れない可能性もあるので下手に変えないのが無難です。

■誤解されない

「3日間限定50％OFF」
これを組み合わせてしまうと、このメーカーのものが全品50％OFFのように見えるので、この内容で置く場合は、価格の左隣に置くといいです。

50％OFFで1500円

このセットが目立つようにしてあげるといいです。
最悪50％OFFだけが目立ったもいいです。

■文字選定

キャッチで「とろける」と入れるとしたら、ビロンビロンに伸びたチーズの画像があればいいのですが、ちょうどよくその素材が来ることも少ないです。
でも、フォントがとろけているような印象なのでいいかと思います。

「なまらチーズ」は商品名なので今回の課題で入れてもあまり効果は無さそうです。
商品名を入れるなら価格の近くに小さく入れるくらいでいいです。
「なまらチーズ」を取って「北海道産の牛乳100％使用」を大きくしてあげた方が多少効果が出そうです。

まとめ

何となくバナーっぽく作るところはできているのですが、実務として見ると文字を置くところなどのセオリーがめちゃくちゃになっているので、参考となるバナーの配置も真似してみてください。

文字を合わせているところやサイズなど、プロの人は細かいところをひたすら調整しています。
最初はものすごい時間がかかってしまうのですが、セオリーが分かってくると最初からそろえたり、無意識にそろえられるようになるので時間は短縮されます。

細かい調整と合わせて、フォントの種類などでブランドイメージを出したりしているデザインを見るのも参考になります。

うまい人は、同じフォントでも太さや文字間、サイズなどで雰囲気を出すことができます。
細かい技術も一緒に見ながら参考デザインを探してみてください。

逆を言うと、プロはその細かいところを見て、その人の力量を見ます。
「あ～これ気にしない人か～」とか言うデザイナーいます。

大きく大胆に変えて、細かく調整する。

どちらかしかできない人も多いので、バランスよく両方練習してみてください。

修正

修正して頂いたので、こちらも添削させて頂きます。

■文字の流れ

文字のところがガチャガチャになっているので整える必要があります。

文章的にはあっているのですが、通常価格はそこまで目立たなくてもいいので、小さく金額の上下に入れることが多いです。

送料無料は地味に入れると効果が出るものなので、事務的に入れるのではなくて、少し目立つように入れてあげるといいです。

この中だと「50％OFF」が一番目立たせたい文字なのでどうにかして大きくします。

上でも丸を使っているのでかぶってしまいますが、このくらい目立たせたいです。

あとはちょろっと調整してあげると文字も大きくできてスッキリさせられます。

「3日間」限定も事務的な感じなので全体のイメージを壊さない程度にさりげなく目立たせて入れて置けばいいかと思います。

目立たせるところは目立たせて、目立たせないところはアッサリと。
緩急をつけてあげると流れも生まれます。

■デザイン入れすぎ

こちらは構成はそこまでおかしくはないのですが、デザインを入れすぎています。

文字と箱にシャドウが入っているので素人っぽく見えます。

こちらも同じくシャドウが両方に入っています。

ふちを多用しない。

帯の中に収めると意外と小さく見えるので、帯の中にさらに箱を置くと
より文字が小さくなります。

帯を使うなら帯自体を矢印にしたりしてスペースを確保して、文字にふちを入れるならさりげなくはみ出した時とかに使ってあげるといいです。
思いっきりチラシっぽくするのであればガンガンふち入れてもいいですが。

同系色だと見にくいのでやっぱりチラシっぽくふち入れました。
帯の高さは減ったのに文字が大きくなりました。
細かく整えてスペースを有効活用すると文字も大きく入れることもできます。
その分、他の要素をもっと大きく入れることもできます。

■ロゴ

ロゴはデザインしちゃダメ…
自作で作るとしたら、仮想で決めた企業カラーか白抜きだけ。

バナーに合わせてロゴの色を変更なんてまずない。
「ロゴをちょっと薄くしました」なんて言ったら大きな案件だったら即切られます。
なのでロゴの扱いには注意が必要です。

ちょっと見えにくい色の時はそれ用の色が用意されているので、課題の時は濃いめの色か白、このどちらかでいいです。

デザイン添削のご依頼はTwitterから！

Twitterで投稿された作品を添削しています。
添削を希望される方はTwitterにハッシュタグ「#デザイン添削希望」または動画で添削をする「#動画でデザイン添削希望」を付けて投稿してください。


いいなと思ったら応援しよう！