![見出し画像](https://assets.st-note.com/production/uploads/images/96599429/rectangle_large_type_2_7c0dc3e7a37cfb1f8bb1e9a75103cb94.jpeg?width=1200)
無料添削デザインスクール #178「チョコレート通販セールバナー」
添削
![](https://assets.st-note.com/img/1674810110322-VzOBGSfVZc.jpg?width=1200)
毎度おなじみになってきた「こばやす」さんのチョコレート課題ですね。
青が際立ってますね。
■画像の置き方
![](https://assets.st-note.com/img/1674810269837-LTuzlzNK9n.jpg?width=1200)
背景が単色でもあるのでポツンと置かれている印象を受けます。
画像の置き方は色んなトリミングを試して、一番いいところを探してみるといいです。
![](https://assets.st-note.com/img/1674810647779-wttL1Gs7Mo.jpg?width=1200)
色んなサイズや角度を試していると「コレだ!」という時が来ます。
それを探してみてください。
これがいいというのは商品や文字数などで毎回違うので、都度探して行きます。
その画像が一番よく見える、ターゲットが一番見たいものを見せてあげるのを考えるといいです。
この画像で言うと、何で一番上だけがかじられて断面が見えていて、溶けたチョコがかかっているのか。
シズル感を出して美味しく見せているので、そこをそのまま大きく見せてあげるという考えが出てきます。
画像は元々持っている特徴みたいなのがあるので、それを利用すると構図も考えやすいです。
■枠線
![](https://assets.st-note.com/img/1674810888825-4oqplC4lX9.jpg?width=1200)
枠線を入れる時は、外枠とのスペースや太さに注意するといいです。
![](https://assets.st-note.com/img/1674811062812-UdsYbgukbh.jpg?width=1200)
太くて内側に大きく入っていると、目立つのですがボテッとしてスタイリッシュには見えません。
![](https://assets.st-note.com/img/1674811098517-w6bDBxejeg.jpg?width=1200)
太さを細くすると少しスタイリッシュさが出ます。
![](https://assets.st-note.com/img/1674811119829-DQqgURQGKx.jpg?width=1200)
すごいスタイリッシュな印象にしたい時は1pxくらいの細い線を少し入れるといいです。
枠線はちょっと入れるだけでも強調には十分なので繊細に調整して入れてみてください。
■金の使い方
![](https://assets.st-note.com/img/1674811295989-RQGW40Nr3A.jpg?width=1200)
金色を使う時は、あまり明るい金というよりはグレーに近い金の方が落ち着いた高級感が出ます。
楽天とか大売り出しという時はギラギラした金を使うといいですが、オシャレにしたい時は落ち着いた金がいいです。
文字色を入れていますが、文字の色もこげ茶色などの同系色でまとめるといいです。
![](https://assets.st-note.com/img/1674811897829-C04t4QVlAf.jpg?width=1200)
合わせて背景色がビビット過ぎるので色合いを少し落ち着かせました。
■モチーフ
![](https://assets.st-note.com/img/1674812043117-enJyfOP6lL.jpg?width=1200)
雪の結晶で冬の感じが出てはいるのですが、諸刃の剣でチープ感もすごい出てしまいます。
露骨に入れれば入れるほど冬感は出るのですが、比例してチープ感も上がっていきます。
なので、雪の結晶などのモチーフを入れる時はチープ感が出ないように気をつけながら入れましょう。
■文字
![](https://assets.st-note.com/img/1674812279094-6zeJ87ZF5c.jpg?width=1200)
文字が弱いので買いたくなるような文字を選定してみてください。
このお題だと「20%OFF」などの定番の文言があったはずです。
大阪の方には悪いのですが、大阪人の人にこれを会話で言ったらどうなるかを想定すると分かりやすいです。
「ちょっと一息。贅沢をお裾分け。」
大阪「タダなん?」
「今だけ割引価格」
大阪「タダやないんかい!?ナンボ?」
「12月31日まで」
大阪「だからナンボ聞いとるやろ!?」
こんな感じになるので、必要な情報をしっかり伝えないと怒られます。
大阪人に限らず、東京人でも必要な情報伝えないと無視されるので、文字選定には気をつけましょう。
修正
![](https://assets.st-note.com/img/1675821301807-EIj2CJdFJf.jpg?width=1200)
修正して頂いたのでこちらも添削していきます。
色合いが原色すぎるので全体がダサい印象になっています。
青と黄色の反対色もズバッと入っているので目立つのですが、極端すぎるので色味に違和感を感じます。
■原色は使わない
![](https://assets.st-note.com/img/1675821738798-l0N22pw2SY.jpg?width=1200)
原色は使ってもいいのですが、背景などで大きく使うと原色はパワーがあるのですごい違和感が出ます。
原色を点滅させて見せると人は狂ってしまうというほどパワーを持っています。
少し濁らせたり、アースカラーと呼ばれるナチュラルな色に近づけてあげるといいです。
あまり濁らせると色あせたように見えるので微調整が必要です。
■文字の強弱
![](https://assets.st-note.com/img/1675822145290-BnatUn6p00.jpg?width=1200)
まだ文字のサイズが単調なので優先順位をつけて大きさも調整するといいです。
バナーは0.4秒しか見られないというデータもあり、最近はスマホゲームの間やブログの隙間に置かれることがあり、流して見られることが多いです。
パッと見ただけでも重要な文字だけでも読めるようにしておきましょう。
お題
こちらのバナー課題は、こばやすさん(@kobayas_s)のバナーお題です。
良質なお題がたくさんあるので、お試しください。
自分で課題を考えると大変なので、実務に近いプロが考えたお題を作ると成長も早いです。
WEBデザイナーになりたい方は、トレースよりもお題をお勧めします。
デザイン添削のご依頼はTwitterから!
Twitterで投稿された作品を添削しています。
添削を希望される方はTwitterにハッシュタグ「#デザイン添削希望」を付けて投稿してください。
作って終わりが一番成長しない。
— イライジャ|WEBデザイナー デザイン添削おじさん (@Elijah_School) June 2, 2022
添削して修正するのが実務に近い環境で、成長も早い。
どんどん作って、どんどん添削。#デザイン添削希望
これを付けて投稿すれば依頼完了
「note」での添削になります。
▼過去のバックナンバーはこちらhttps://t.co/rZENBjRSaK pic.twitter.com/KDUVWMmKVN