どうも。おしゃべり関西人Kです。
前の記事では偉そうに課題とか言ってしまったので、言い出しっぺの法則で
簡単なものではありますが自分も作ってみました。
ショッピングサイト用の決算セールのバナーです。
素材探し含めて約30分くらいで制作しました。
参考はこちらの2つです。
1枚目からは配置などの構図を。2枚目は色味の参考に使いました。
セールバナーはよく作っていたので、「最大」の文字は縦並びにしたり
「％」と「OFF」は上下に並べるよね、といった具合にセオリーがわかっているので早く完成しました。
このように一定のセオリーが存在することも、前回「センスはデザイナーのエッセンス」
と言ったところにも関わっています。
いかにこのセオリーを覚えていけるか。デザイン知識の引き出しにしまっていけるか。
それをアップデートし続けられるか。
こういったところがセンスよりも重要になってきます。
「ちょっと待って。その決済セールのバナーってシンプルな雰囲気のアパレルショップで使うんじゃないの？」
という疑問もあるかと思います。
でも、結構セールってババーン！としたバナーが多いです。
ただ、あまりにもサイトの雰囲気とあっていない場合はもちろん抑えめのデザインにします。
例えばこんな感じ。
伝えたい内容は一緒でも、少し工夫を加えるとかなり変わります。
では何が違うのか？今日はこの辺りの話をしようと思います。
デザインの基本について
作ったものを横並びにしてみました。
何が違うでしょう？
色、フォント、配置、すべてが違いますね。
では、それらの要素が違っていることによってなぜデザインに違いが生まれるのか？
これらを解説出来れば、自分のデザインの説明も難なくできると思います。
余白が生み出す違いについて
まずは左右のデザインで余白が違います。
余白が少ないほうが迫力がありますが、若干のチープさを感じませんか？
逆に余白があると、迫力は出ませんが余裕や大人っぽさ、高級感を出すことができます。
自分がどんな雰囲気に合わせてバナーを作らなければならないのか？
それをきちんと考えて、余白間を選びましょう。
また、基本的に余白のサイズはそろえるようにするとデザインにまとまりが生まれて、
視認性の高いバナーやサイトなどを作れます。
余白はデザインの基本である、と私は教わってきました。
まずは余白の使い方について知っておくことが大切です。
フォントが生み出す違いについて
次はフォントです。左はゴシック系、右は明朝系です。
基本、文字は視認性を最優先に考えます。
伝えたい情報は文字で伝えますので、この文字が読みづらいフォントだと意味がありません。
一番に視認性が高いフォントはゴシック体です。
主に見出しや、ディスプレイ上で文字を表示する際に使われます。
また、ゴシック体は太字が多く迫力があるので目立たせたい文言にもよく使います。
一方明朝体は線が細く優雅な印象を与えます。
こちらは可読性が高いため、小説などの印刷文字として使われます。
線が細いため、ディスプレイ表示では表示されない場合もあります。
デザインの上では女性らしさや大人的な固さ、和の表現などにも使われます。
色が生み出す違いについて
最後に色です。
これもデザイナー時代に教わったことですが「赤文字は安売りの色」です。
もちろんそれだけに限りませんが、例えばセールバナーと検索して出てきた画像の文字を見ると
そのほとんどが赤、もしくは黄色を使って作られていると思います。
例えばゴシック体で赤を使うと、例のバナーでいう左のように
力強い印象を与え、お祭り感がでているかな。と見えますね。
では、同系色でそろえた右のバナーはどうでしょう。
こちらは色の違いが少なく、おとなしく見えます。
決算セールの文字を黒にして、60の文字を赤に変えてみました。
こうすると数字が強調されて、おとなしさの中にも目立つ要素が入ってきて
デザインによりメリハリが生まれます。いわゆる「差し色」というものですね。
サイトデザインを考えた時でも、例えば緑が基調のサイトにお問い合わせボタンを赤にして設置します。
こうすることで一番クリックさせたいお問い合わせボタンを目立たせ、
かつサイト全体の色味にも締まりを与えることができます。
といった感じで今回は抽象的な話も多く、難しかったかな？と思います。
何が違うんや？？という方は、ぜひ他にもたくさんの参考例を見ていってください。
また、今回話した内容はあくまで私がデザイナー時代に学んだものを中心にしていますので
他の現場だと違う場合もあるかもしれませんのであしからず。