![見出し画像](https://assets.st-note.com/production/uploads/images/88323687/rectangle_large_type_2_ff7d1c3c02a645c4771bd1cc348c30d7.jpeg?width=1200)
無料添削デザインスクール #143「チョコレート通販セールバナー」
添削
![](https://assets.st-note.com/img/1664935091441-8Ll0vXIcxD.jpg?width=1200)
毎度おなじみになってきた「こばやす」さんのチョコレート課題ですね。
横長のバナーですね。
■フォントサイズ
![](https://assets.st-note.com/img/1664935189015-SU6gvg8Puu.jpg?width=1200)
ご自身でも心配していましたが、文字が小さいです。
バナーは表示サイズ横幅300pxくらいを想定して作ってあげるといいです。
作る時のサイズは大きくても大丈夫です。
文字が小さくというのもストレスになるので、元々見たくないバナーや広告をさらにストレス受けてまで見ようとは思わないので、ストレスフリーな文字サイズにしてあげると内容も伝わりやすいです。
見やすいようにと文字にシャドウを入れていますが、シャドウを使わないと見えない文字は根本的に何かが間違えています。
シャドウを使わなくても読みやすいように工夫してみましょう。
あとシャドウはチープに見えるのであまり使わないです。
■リボンの角度
![](https://assets.st-note.com/img/1664938723451-nxo8iQjjTQ.jpg?width=1200)
よく使う装飾のリボンですが、端っこの角度を鋭くするとチープな感じが出てきます。
やんわりとした角度にしてあげるといいです。
![](https://assets.st-note.com/img/1664938788765-LzK30CofTL.jpg?width=1200)
これはなんでなんだろうと考えていたら、リボンの上に文字を置くことは現実のリボンではあまりない…
プレゼントを巻いたり飾り付けに使うので、角が鋭い方が華やかに見える。
その逆で文字を入れるのはWEBなどデジタルが多いです。
その場合、扱いはボックスになるので、ボックスの端っこが鋭いと箱に見えないという現象からかと思います。
■文字の組み合わせ
![](https://assets.st-note.com/img/1664938944119-OXAvtizaHx.jpg?width=1200)
このバナーの中で一番目立っているのが日付です。
太ゴシックで色が濃いのでそこに目が行きます。
そんなにここは目立たせたくないけど、偶然目立ってしまう。
文字の大きさや濃さ、フォントの太さを調整して目立ち具合も調整しましょう。
ゴシックと明朝のフォントを組み合わせていますが、どちらかにそろえるのが自然です。
■メインの推しポイント
![](https://assets.st-note.com/img/1664939132709-iQOtQTRdjI.jpg?width=1200)
割引額の見せ方はとても重要です。
「ちょっと添えて」というよりは「ガンガン見せる!」強引なくらい見せに行ってやっと見てくれるくらいなので、もっと主張しましょう。
■文字のベースライン
![](https://assets.st-note.com/img/1664939395528-bnmhEFogHq.jpg?width=1200)
文字のベースライン(大きい文字と小さい文字の高さ)がセンターになっていますが、基本は下揃えにするといいです。
![](https://assets.st-note.com/img/1664940485504-vybzz6fyqv.jpg?width=1200)
タイトルとかはセンターの時もありますが、センターだと違和感があるので、狙っていない時は下にそろえてあげるといいです。
■画像配置
![](https://assets.st-note.com/img/1664939496034-dnlCQ9cKKP.jpg?width=1200)
右に少しだけ隙間がありますね。
縦に帯を引いている感じに見せたかったのかと思いますが、このサイズだとそんなに横長とは言えないので、右に変なスペースがあるように見えます。
このサイズの時は、二分割でバッサリと切ってしまうか、写真と一体化させてあげるといいです。
また、写真の切り抜きが単調なので、インパクトが少ないです。
切り抜き方を少し変えるだけで印象が変わります。
![](https://assets.st-note.com/img/1664939838951-14EQEfKzkA.jpg?width=1200)
![](https://assets.st-note.com/img/1664940047364-CMlhhZ8D7L.jpg?width=1200)
まんま全体を見えるように置くと単調な印象になります。
逆にこの技法を使っている広告もあります。
![](https://assets.st-note.com/img/1664940047320-ovUrzyLoO2.jpg?width=1200)
写真のカットを変えると色んな表情を出すことができます。
どう見せるかによって写真のカットも変えてみてください。
お題
こちらのバナー課題は、こばやすさん(@kobayas_s)のバナーお題です。
良質なお題がたくさんあるので、お試しください。
自分で課題を考えると大変なので、実務に近いプロが考えたお題を作ると成長も早いです。
WEBデザイナーになりたい方は、トレースよりもお題をお勧めします。
デザイン添削のご依頼はTwitterから!
Twitterで投稿された作品を添削しています。
添削を希望される方はTwitterにハッシュタグ「#デザイン添削希望」を付けて投稿してください。
作って終わりが一番成長しない。
— イライジャ|WEBデザイナー デザイン添削おじさん (@Elijah_School) June 2, 2022
添削して修正するのが実務に近い環境で、成長も早い。
どんどん作って、どんどん添削。#デザイン添削希望
これを付けて投稿すれば依頼完了
「note」での添削になります。
▼過去のバックナンバーはこちらhttps://t.co/rZENBjRSaK pic.twitter.com/KDUVWMmKVN
この記事が気に入ったらサポートをしてみませんか?