見出し画像

無料添削デザインスクール #315 「セールバナー」

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

添削

サマーセールのバナーですね。
爽やかな雰囲気のバナーですね。

お題元を拝見するとアパレルショップサイトのトップページに貼るバナーのようですね。
普通の広告バナーとは違うのを前提に添削していきます。

■余白

余白がかなり大きく取ってありますね。
お題を見ると…

サイズ：336×280px　※書き出しは２倍で提出してください。

ECサイト内に設置するバナー作成｜題材：セール誘導「夏のセール特集」

たぶん表示サイズは336×280pxだと思われます。

原寸表示にするとこのくらいのサイズです。
かなり小さいです。
SPだともっと小さい可能性もあります。

最近はスマホファーストになりつつあるので、スマホで表示されたときに文字などが読めるかを意識してサイズを調整するといいです。

このサイズ感の狂いがどこから来るかというと、慣れないうちは画面に大きく表示して作っている可能性が高いです。
グラフィックデザイナーでポスターとか作っていると大きなMacの高解像度のモニターで作ってたりするとサイズ感がバグります。

スマホや一般庶民のノートパソコンなどで表示するのを想定して作らないとサイズ感がおかしくなります。

なのでWebデザイナーはあまり大きなモニター使っていない人が多いのではないかと思います。
私も27インチ以上（これでも大きい）のは使わないようにしています。

作る時は常に原寸で何度も確認しながら作ってみてください。
感覚がつかめるまでは実際に原寸で書き出してブラウザにドラック＆ドロップすると表示されたときの漢字が見れます。

一番いいのは表示するサイトをキャプチャして、そこにはめてみる。
徐々にサイズ感が身に付きます。

このくらい大きくてもいいかと思います。

■必要じゃない情報を目立たせない

全体として余白が多く、周りの緑も爽やかに見えるデザインなので、ベタの帯はすごい目立ちます。
そこにどこかに入っていればいい「MAX」を入れるのはもったいないです。
服屋が「ハンガーにかけて服を展示しています」というくらい知らなくてもいい情報なので、なくてもいいかな。

ベタの帯を取ることでより他が目立ってくるはずです。

文字が大きくなって全体が窮屈になっているようで、帯を外したことにより、全体の白い爽やかさを増しつつも窮屈に見えない。
配置だけでも雰囲気を保ちながら見やすくしたりできます。

■枠線

枠線を大きく内側に入れていますが、線というのはかなり主張が強い要素なので、あまり大きく入れるとボテッとした感じになります。

端っこに少し入れたり、薄く入れるくらいも十分主張が強いので効果が出ます。
線は細く繊細に入れるとデザインも繊細なものになります。

文字が小さい
↓
大きくしたら窮屈だ
↓
窮屈じゃないように見せよう

デザインは地味な作業の繰り返しです。
どんなに微調整しても先方から「SALEの文字を一番大きくして」とか飛んできます。
どんな修正などんな文字内容でもデザインを崩さずに依頼通りに作るかもデザイナーの腕の見せ所です。

さらにここに「効果が出るかどうか」も入ってくるとデザイン性よりも…という話にはなってきます。
効果が出てこそのデザインなので、現場ではまた違う戦いが始ます。
なのでどんな依頼が来ても臨機応変にレイアウトを組めるといいです。

修正

修正して頂いたので、こちらも添削させて頂きます。

■詳細度

前回のから外側の葉っぱが増えて細かさがアップしていますね。
ただ、細かさをアップするとそっちに目が行ってしまいます。

大きいものも目立つのですが、細かい物にも目が引かれます。
俗にいう「画面がうるさい」というものです。

葉っぱは雰囲気を出すためのものなので、少しあるだけで役割は果たしているので、ここまで増やさなくてもいいです。
アジアンカフェで店員も現地の人でそろえて、日本語が全く通じない店を作ってしまっている感じで、やりすぎは注意です。

■バランス

上の行間は空いているのにしたがキュッとしまっているのでバランスが悪いように見えます。

文字間を狭めると左右に空間が大きく空いているように見えます。
バナーは狭いようでバランスを整えるとすごいスペースがでてスカスカしたように見えます。

■バランスで調整

上の文字の文字間を狭めるとスペースが空いたように見えるので、下の文字のバランスを調整してスペースを埋めます。

横にスペースが空いているので横に大きく広げます。
文字の大きさなどを調整するだけでもスペースは埋まっていきます。

こうすると今度は狭めた上の文字が窮屈に見えてきます。

最初の文字間にすると違和感が減ります。

一ヵ所のバランスと調整すると、別の場所のバランスが崩れます。
ひたすらこの調整をしてバランスを整えます。

たまに初心者の方で「ここを直して」というと、そこだけ直してくる方がいますが、デザインの基本は一ヵ所直すとほとんど調整のやり直しになります。
なのでデザインの修正というのは納品前の微調整した後に大きい修正が入ると全部やり直しくらいの衝撃なので嫌がられます。

何も考えずに作っているのではなく、一部分を見ながらも全体を見る。
ずっとこれの繰り返しです。

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

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


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