![見出し画像](https://assets.st-note.com/production/uploads/images/91250484/rectangle_large_type_2_657fea443e97b1a49439498216144d58.jpeg?width=1200)
無料添削デザインスクール #155「チョコレート通販セールバナー」
添削
![](https://assets.st-note.com/img/1668501964893-4elMgtousY.jpg?width=1200)
毎度おなじみになってきた「こばやす」さんのチョコレート課題ですね。
シンプルなバナーですね。
■高級とは何か
![](https://assets.st-note.com/img/1668502043337-BAiKyfhh8S.jpg?width=1200)
このお題は、普段はあんまり手の出ない高級チョコが冬だけ期間限定で割引価格で販売しているというものです。
高級なチョコなので高級寄りがデザインにしたいですね。
あえて庶民っぽさを出すと安いブランドというイメージがついてしまうこともあるので避けたいです。
このバナーお題以外でも実務でもありますが「高級感」というワードはよく出てきます。
キラキラしてゴテゴテした豪華なものを想像しますが、世の中にある本当に高級なブランドのサイトなどを見ると、思ったよりシンプルです。
高級になればなるほどシンプルでモダンなデザインになっていきます。
バナーなども高級であればあるほど手を入れないで洗練したデザインになっていくことがあります。
![](https://assets.st-note.com/img/1668503052271-sEt4YKKIpD.jpg?width=1200)
写真もあまり手を加えないくらいの方が高級感が出ます。
その分文字の配置など細かいところの調整が大切になります。
■文字の位置
![](https://assets.st-note.com/img/1668503230751-RsaNaEXzEZ.jpg?width=1200)
左上の「冬限定」が背景色と同化しているので見えないです。
下の「20%割引」は赤いので見やすいです。
真ん中のコピーは読みやすさよりもワンポイントの飾りみたいなものなのでこれでいいと思います。
ただ全体で見るとガタガタしているように見えます。
シンプルなデザインなのでもっとシンプルにしてあげてもいいかと思います。
![](https://assets.st-note.com/img/1668503544190-3DvUI6bFNL.jpg?width=1200)
ドシンプルにしてみました。
これだけだと文字だけなのでインパクトがないので、少し装飾を足す必要があります。
雪の結晶とか入れたりして。
方向性を高級と決めたら、ひたすら高級感が出るようにする。
それだけでもまとまりは出ます。
修正1
![](https://assets.st-note.com/img/1669704524815-2S4LLZpugX.jpg?width=1200)
修正も添削させていただきます。
■修正の度合い
![](https://assets.st-note.com/img/1669704560596-Y4hVFYC3of.jpg?width=1200)
あまり変わっていないので、追加で添削をするところがそこまでないのが正直なところです。
実務で修正が入った場合、ほぼほぼOKだった場合は、このくらいの微調整でブラッシュアップすることもあります。
練習お題なのでできることならこの方向性でもう少し変えてみる練習をしてもいいかと思います。
経験がデザイナーだと上司から「この方向性であと3案出して」とか言われることもあります。
方向性は一緒で違うデザインを作るのも練習になります。
■雰囲気を出してあげる
![](https://assets.st-note.com/img/1669704774384-OT1BPIhC0v.jpg?width=1200)
・チョコ
・冬
・贅沢
・お得
色んなキーワードがあるので、それを組み合わせてどんなデザインにするか方向性を決めます。
その方向性に合ったデザインにしてあげるといいです。
現状だと業務連絡みたいなECのカテゴリー表記のようになっているので「冬限定」がワクワクするような見せ方にする必要がバナーではあります。
■ボタンはなくてもいい
![](https://assets.st-note.com/img/1669704945125-ogLeVRhPba.jpg?width=1200)
無理やり日付を入れるくらいだったらボタンはなくてもいいです。
昔はバナーがバナーだと分からなかった時代もありますが、今はバナーだとほとんどの人が気付くので、ステマとか出ない限りバナーだと分かってくれます。
ボタンがなくてもクリックしてくれるので。
■加工の形跡を残さない
![](https://assets.st-note.com/img/1669705078059-e76zlfmGtq.jpg?width=1200)
前回添削していなかったところを追加で。
チョコの箱を切り抜いているのですが、切り抜く時は、箱も一緒に切り抜きましょう。
ズバッと切り抜くと違和感があります。
加工をするのですが、加工していないように見えるのがベストです。
マイケル・ベイ監督がCGを使わないで爆破するように、実物を越えられないものです。
できるだけ実物に近い状態で加工してあげるといいです。
そうなると背景の青も単色だと寂しく違和感があるように見えます。
実際にこれを物撮りしたとしたら、背景に青いシートを使ったとしても、若干グラデーションや影が出ます。
「冬」の感じを出すために背景に雪などを追加したりするとまた表情は変わってきます。
「冬のチョコ食べたい!」と思わせるくらい雰囲気を出すのがこのバナーでの仕事です。
修正2
![](https://assets.st-note.com/img/1672047856798-RsSgupxAdq.jpg?width=1200)
修正も添削させていただきます。
箱はドピンクだったんですね。
全体の色味が崩れますね。
背景の青とあまり合わないので難しいですね。
■流れ
![](https://assets.st-note.com/img/1672048304834-xux7G9d4lL.jpg?width=1200)
左上の文字が見えなくなっています。
箱の色も強いので全体的に他の文字が目立たなくなっています。
![](https://assets.st-note.com/img/1672048348896-7upAV59L9U.jpg?width=1200)
ガッツリ濃い目のを入れても写真のインパクトが強いので大丈夫かと。
ただ。右下が空いているように見えるので、文字要素をズラしてあげるといいです。
![](https://assets.st-note.com/img/1672048413756-nWdIwOJhCe.jpg?width=1200)
箱が斜めに置かれているので、左上から右下に流れているので、そこに20%OFFの文字を入れると流れとしてもいいかも。
■斜め
![](https://assets.st-note.com/img/1672049049785-5ROxuNFwvy.jpg?width=1200)
斜めにするのがちょっと大きすぎるようにも感じます。
斜めにする系全般、そんなに斜めにしなくても斜めになっていると分かるので、ちょっとだけ斜めにするだけでもいいのかもしれないです。
箱のピンクがちょっと気になりますね。
全体的に淡い配色なのに箱だけビビットなピンクなので。
そこも調整できたら調整していですね。
箱の色を変えるとなるとかなり調整が必要なので、ピンクに合わせるか、箱のピンクの色味を少し落としてあげるなど、調整が必要です。
修正3
![](https://assets.st-note.com/img/1674813030882-E9sH3QIlTD.jpg?width=1200)
背景が暗くなりましたね。
飲食系でグレーはあまり使われないので、暖色系にしてあげるといいです。
ブルーとか寒色も本当はよくないのですが、冬感を出すので、そこは調整しながらチョコを美味しそうに見せる工夫が必要ですね。
デザインで修正する時に1点を修正するのは終盤が多いです。
練習課題なので、色んな構図を試してみて、その中で一番いい見せ方は何だろうと考えるの必要です。
私はデザインする時に1枚の素材から何パターンか作って、その中から一番いいのを探します。
何やってもダメな時は、一回バラして最初から考え直します。
色んなのを作っている中でやっぱりこっちの方がいいやというのが見つかることが多いので、コロコロ変えて試してみるのもいいです。
お題
こちらのバナー課題は、こばやすさん(@kobayas_s)のバナーお題です。
良質なお題がたくさんあるので、お試しください。
自分で課題を考えると大変なので、実務に近いプロが考えたお題を作ると成長も早いです。
WEBデザイナーになりたい方は、トレースよりもお題をお勧めします。
デザイン添削のご依頼はTwitterから!
Twitterで投稿された作品を添削しています。
添削を希望される方はTwitterにハッシュタグ「#デザイン添削希望」を付けて投稿してください。
作って終わりが一番成長しない。
— イライジャ|WEBデザイナー デザイン添削おじさん (@Elijah_School) June 2, 2022
添削して修正するのが実務に近い環境で、成長も早い。
どんどん作って、どんどん添削。#デザイン添削希望
これを付けて投稿すれば依頼完了
「note」での添削になります。
▼過去のバックナンバーはこちらhttps://t.co/rZENBjRSaK pic.twitter.com/KDUVWMmKVN
この記事が気に入ったらサポートをしてみませんか?