あき こんにちは！名古屋・春日井を中心にホームページ制作を提供しているRoom8にwebデザインを学びに来ているあきです。
ネットをしていれば必ず目に入ってくるもの、そのひとつにバナーがあります。
サイトページ全体からしてみれば一角にある小さいものものかと思うかもしれませんがバナーにはデザインの基本がたくさん詰まっています！
今回はバナーを例としてデザインのポイントを説明していきます。
・どこに配置されるのか想像する
広告バナーだったり自分のHPページにおくバナーだったり場合によっては想像が難しいかもしれませんがバナーが置かれる場所が決まっている場合、そのページをスクリーンショットしてその画面を見ながらバナーを制作してみましょう。
バナー単体を見て作業するのとは違った感覚になると思います。
より的確なバナーを作る為にはいい手法ですよ。
・何が一番大事な情報か整理する
何が一番伝えたいのか、目立たせたいのかまず整理しましょう。
整理したらフォントの大きさや色、配置色々考えることが出来てきますね。
小さいバナーでもその中で何が一番大事か？を考えることはすべてのデザイン作業につながります。
・色数を絞る
バナーに使う色は3色まで！
3色以上使っても素晴らしいバナーはあるかと思いますがレベルが高い技だと思うのでまずは色を限定しましょう。
キーカラーをうまく使いこなすことができれば、大きいWEBページ制作にも役立ちますよ！
・空きを統一する
空きとはスペースの空きのことです。
枠内の文字の周りや、アイコンを使ったのならその周り、情報と情報の間の距離などたくさんの空きを揃えましょう。
揃えることにより、デザインがしっくりします。
揃える動作はバナーに限らずデザインすべてにおいて必須の行為です。
私はよく見落とします…
なんでも揃える！覚えよう！
・線を統一する
揃える作業はまだあります。
デザインの中に線を使用した場合は線の太さを統一しましょう。
枠の線とかですね。
1pxで作ったのなら他も1pxで、というような感じで。
このような細かいことがデザインをよくします！
・表現を統一する
先程線の説明の際に枠の線を例えにだしましたね。
1pxで長方形の枠を作ったら、また枠を作るとしても1pxの長方形でつくりましょう。
同じセクションの中に長方形や楕円の枠があるとどうしてもバラバラな印象を受けてしまいます。
長方形と楕円ぐらい違うと分かりやすいかもしれませんが、
最近私がデザインをしていて指摘されたところがあります。
線1px長方形での表現が続いていたところに、線1pxの角が丸い長方形で作った箇所があったんですね。
私はそこはリンクのボタンになるところだったので角を丸くしたのですが、表現を統一するルールからはずれているので他と同じように長方形の表現にするよう修正が入りました。
表現の統一ってこんなところまでするんだなってことですね〜
終わりに
さてバナー作りのコツを書いていきましたが、バナーでなくても当たり前のルールに近いものばかりです。
当たり前のルールだけどいざ手を動かしてデザインしていると以外とルールを破ってしまっています…!
指摘されて気付いて修正すると当たり前ですけどデザインがよくなるんですよね。
それぐらい大事なことばかり書いたのでぜひみなさんも注意してみてくださいね。
それでは！
【「自分らしく働く」ために、WEBの世界へチャレンジしてみませんか？】
Room8では「LIFE GENICプロジェクト」として、本気でWEB業界で働きたい人を育てます。
・WEBデザイナー
・WEBエンジニア
・WEBライター
になるための実践力を現場のプロが、なんと月々1000円で教えちゃいます。
この機会に新しい自分を見つけませんか？
▼詳しくはこちら！