見出し画像

無料添削デザインスクール #159「温泉旅館バナー」

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

添削

毎度おなじみになってきた「こばやす」さんの温泉旅館バナー課題ですね。
シックな大人の温泉旅行ですね。

■やっぱり気になる上下の帯

写真のサイズが合わなかったのか…上下に入っている帯はなくてもいいかと思います。
あっても下だけでいいかと思います。

ドットの柄も入っていますが、全体にドットを入れるか、何もない単色にした方がシンプルでいいです。

■真面目さが目立つ

この中で一番目立っているのが「カップル限定特典」です。
文字サイズも大きく、白抜きの箱に入っているのでかなり目立っています。
カチッとした四角で真面目な印象が強いです。
温泉というよりは「ふるさと納税」で賢く減税みたいなバナーです。

四角い箱が全部で3つ入っています。
堅い印象を与えるので、遊び心で曲線を入れたりするといいです。

背景を暗くして全体に文字を置く場合は、写真に頼らずに文字で見せる必要があるので、文字要素に少しデザインを入れてあげるとオシャレだけどシンプルな見せ方ができます。

■誤認に注意

練習課題なので細かいところはないので分かりませんが…
まずは税込みかどうかが分からないので入れましょう。
基本税込み表示なので、それだけ分かるように小さく入れるといいです。

そして、この流れだと12,000円から10％OFFのように見えるので、実際はいくらになるのかが分からないので、最終的な価格を出すといいです。
下に出せば10％OFFでこの価格ですとなるので10％OFFと上下逆転させてあげるといいです。

それか「通常価格」のところを「特別価格」にすれば割引した料金だと分かるので流れなどから誤認が生まれないようにしてあげるといいです。

■全体のスペース

ギューギューにしなくてもいいのですが、かなり贅沢な使い方をしているので、文字バランスなどを調整すると、もっと10％OFFあたりを大きく見せることができそうです。

下の帯で「詳しくはこちら」だけで使っているので、そこも変えた方がいいです。
根本的に消してしまうか、「お得にWEBから予約する」とか、少し誘い文句みたいにするとか。

まとめ

過去にご依頼いただいたバナーも見直しました。
特徴として、全体のバランスと文字バランスなどが苦手のように見えます。めだたせたいところを大きくして、小さいところを小さくする。
文字の強弱に気を使いつつデザインを入れてみるといいかと思います。

今回のデザインだとシンプルなので特に文字の強弱だけで見せる（魅せる）こともできるので、色々試してみてください。

ザックリと文字サイズを参考に
・一番大きく見せる
・そこそこの大きさで見せる
・ギリギリ読めるサイズ（補足とか）

強弱をつけることでバランスがよくなり読みやすくなります。
必要な情報を伝わっているかを重点に変えてあげるといいです。

修正1

修正して頂いたのでこちらも添削していきます。
修正してかなりまとまりが出てきたと思います。

■バランス

一番上の「カップル限定」がぼかしも入っていて目立っています。
ただ、目立って入るのですが、浮いているようにも感じます。
下の「10％OFF」とつながっていないようにも見えるので、寄せてみたり、サイズを小さくしてみたりと、少しバランス調整するだけでも見た目は変わってきます。

■文字の流れ


「10％OFF」の文字のずれが流れを作っていて、その流れが右上に向かっているので、下ぞろえでいいように思います。

「予約はこちら」のボタンがある場合には、バナー以外のWebサイトやLPでもコンバージョンにあたるボタンなどに視線を流してあげるといいです。

あと「通常料金から」という文言もここでいいのかな？
吹き出しでちょっと目立つようにしてありますが、この情報はそこまで目立たなくていいものです。
保険で入れてあればいいというものです。
「12,000円から20％OFFにせぇやぁ！」というクレーマー対策です。

■特典表示

全体的に方向性が定まってきたので、後はこの特典も全体のデザインの方向性に合わせてレイアウトしてあげると完成度が高くなるはずです。
丸だけで置くにはちょっと寂しいです。

全体を調節すれば文字をもっと大きく入れることはできそうです。
上の「カップル限定」よりも特典の方を大きく見せてあげたいです。
ただテキストを入れるだけでなく、目立つようなデザインも入れてあげるといいです。

修正2

修正して頂いたのでこちらも添削していきます。
内容の区別をもう少しするとごちゃっと感がなくなります。

■英字の入れ方

英字が浮いてしまっているので、置く場所を変えた方がいいです。
筆記体の英字は、読ませるというよりは雰囲気作りなので、邪魔にならない程度でさりげなく置いてみてください。

どこに置くか色々試していると「ここだ」というところが見つかります。
見つからない時は、仮で置いといて、後でまた見ると見え方が変わるので、これを繰り返して最適な場所を見つけます。
　
それでも見つからない時は、必要かどうかも考えてみてください。

■分類化

今回のバナーはテキストベースでシンプルなデザインなので、分類化をしないと文字だらけで情報がまとめにくくなります。

仮に線で囲んでみると、右下のボタンの線と被るので線だらけに感じます。
こういう時は、線以外のものを使ってかぶらないようにしたりします。

上は背景色を使い、ボタンは線にする。
これだけでも違うものだという差別化ができます。

ボタンを角丸の背景色に変えると、ボタンとテキストという差別化もでき、ボタンというのを強調することもできます。

逆に全部角丸にしてしまうとどこがボタンなのか、ボタンの文言のように見えてしまうこともあります。

角丸を使った時もボタンは角丸を使わないと差別化することもできます。

× デザイン＝装飾
○ デザイン＝分かりやすさ

これだけではないですが…
分類して分かりやすく置いてあげる。
これをしてから装飾を追加してあげると見やすいバナーになるはずです。

お題

こちらのバナー課題は、こばやすさん（@kobayas_s）のバナーお題です。
良質なお題がたくさんあるので、お試しください。
自分で課題を考えると大変なので、実務に近いプロが考えたお題を作ると成長も早いです。
WEBデザイナーになりたい方は、トレースよりもお題をお勧めします。

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

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


この記事が気に入ったらサポートをしてみませんか？