![見出し画像](https://assets.st-note.com/production/uploads/images/93758823/rectangle_large_type_2_d59354b9346d05c4d6dab57889394175.jpeg?width=800)
無料添削デザインスクール #165「温泉旅館バナー」
添削
![](https://assets.st-note.com/img/1671585519500-SKvM6tWDWP.jpg?width=800)
毎度おなじみになってきた「こばやす」さんの温泉旅館バナー課題ですね。
完成度高いので特に言うことはないですね。
細かい微調整で精度を上げる作業に入っていいと思います。
■文字バランス
![](https://assets.st-note.com/img/1671585654985-gMNmn5XTHZ.jpg?width=800)
文字の強弱も付けてあるのですが、左ぞろいと赤い丸のバランスが少し悪いように感じます。
「キャンペーン」は長くて置きにくいですよね。
全体が左揃えなのでタイトルだけセンターで目立つようにしてあげてもいいかも。
![](https://assets.st-note.com/img/1671586145949-R6PL1lsSKA.jpg?width=800)
細かく部分的に見ると、カップル限定が大きいように感じます。
主題のタイトルとのバランスを考えて調整してみるといいです。
![](https://assets.st-note.com/img/1671586215563-c9Q05SHxcy.jpg?width=800)
ここまで小さくしてしまうのなら消してもいいかな。
英字でそれらしく入れてあげるとか。
そこまで重要ではない文言なので自由度は高いです。
![](https://assets.st-note.com/img/1671586602341-Et6fX6I9Yg.jpg?width=800)
センターにしてみました。
![](https://assets.st-note.com/img/1671586619621-bSvRJHI5t4.jpg?width=800)
左右に大きなスペースが生まれる弊害がありますね。
何か文言を追加してもいいし、ボックスからタイトルだけ出して背景の写真を見せることもできます。
![](https://assets.st-note.com/img/1671586865967-19vsutyFgY.jpg?width=800)
背景が写真なので黒文字だと見にくいので白文字で調整は必要です。
こうやってみるとボックスだけ浮いているように見えますね。
![](https://assets.st-note.com/img/1671586955077-WNmL9Br7Gc.jpg?width=800)
帯にしてしまうとか。
![](https://assets.st-note.com/img/1671586966783-ffpXcRipvi.jpg?width=800)
特典だけボックスにしてあげるとか。
色々手法は考えられます。
ひとつのバランスを変えると全体が変わってしまうことがデザインではよくあるので、色んな手法を知って、あれこれ変え続けているとどこかでバチっと決まる時が来ます。
それを見つける作業と言ってもいいです。
人によっては「カチッ」っと音が鳴ると言います。
■文字の可読性
![](https://assets.st-note.com/img/1671587108353-FSVaizGkDL.jpg?width=800)
全体はきれいにまとまっているのですが、文字が少し小さいので明朝系だとかすれて見えることがあります。
文字サイズの調整でどうにかなることもあるのですが、どうしてもそれができない時は、裏技を使うといいです。
邪道な裏技なので多用しない方がいいです。
![](https://assets.st-note.com/img/1671587326259-YS78nmUtlU.jpg?width=800)
同じ小さい明朝ですが、下の方が少しハッキリ見えます。
![](https://assets.st-note.com/img/1671587389842-VgGDCQvG1c.jpg?width=800)
大きくしてみると特に変化はないです。
小さい時だけくっきり見せる裏技です。
これはWEBだけでなく紙媒体などでも使えます。
方法としてはすごい単純なんですが…
![](https://assets.st-note.com/img/1671587713246-MDAYr6vsM9.jpg?width=800)
ちょっとだけ文字に線を追加するだけです。
0.1~0.3px(pt)くらいの線を追加すると小さい文字は少しくっきり見えます。
WEBだと1pxじゃないと判定されないと思いますが、アンチエイリアスの関係で小さいとくっきり見えます。
邪道なのでフォントを愛する人や厳格なデザイナーには嫌われる手法かもしれませんが、現場ではこういうのを使って何とか見やすいような工夫をします。
文字のアンチエイリアスの「強く」「鮮明」とかでも若干コントロールできるのですが、微調整ができないので、この手法が便利です。
![](https://assets.st-note.com/img/1671587970968-ib8dX4RXGy.jpg?width=800)
下の文字のところもかすれているので、ここも少し手を加えて見やすくしてあげるといいです。
ただ、先ほどの手法は最後の奥の手なので、できるだけ文字サイズの調整などで対応するといいです。
まとめ
十分作ることができるので、後は数を作って最後の微調整で完成度を上げる作業に入っていいかと思います。
もうこれ以上できないというところからさらに作り込む作業をして自分を追い込むとさらにいいデザインを作ることができます。
完成度100%まではしっかり作って行けば達成できます。
だだ、100%以上を目指すのであれば、何度も作っている時に起きる「クリエイティブジャンプ」というものがないとだめです。
「全部違う!」と作り直した方がいい物になることもあります。
微調整は納品する最後の最後の作業なので、途中の段階で色んなレイアウトを作ってみるといいです。
お題
こちらのバナー課題は、こばやすさん(@kobayas_s)のバナーお題です。
良質なお題がたくさんあるので、お試しください。
自分で課題を考えると大変なので、実務に近いプロが考えたお題を作ると成長も早いです。
WEBデザイナーになりたい方は、トレースよりもお題をお勧めします。
デザイン添削のご依頼はTwitterから!
Twitterで投稿された作品を添削しています。
添削を希望される方はTwitterにハッシュタグ「#デザイン添削希望」を付けて投稿してください。
作って終わりが一番成長しない。
— イライジャ|WEBデザイナー デザイン添削おじさん (@Elijah_School) June 2, 2022
添削して修正するのが実務に近い環境で、成長も早い。
どんどん作って、どんどん添削。#デザイン添削希望
これを付けて投稿すれば依頼完了
「note」での添削になります。
▼過去のバックナンバーはこちらhttps://t.co/rZENBjRSaK pic.twitter.com/KDUVWMmKVN
この記事が気に入ったらサポートをしてみませんか?