デザインの４原則

整列：見えないラインを意識、揃える所と崩すところへのめりはり

近接：マージンの余白、情報ごとをまとめる

対比：メリハリ、伝えたいところを強調

反復：同じ種類の情報は同じデザインに、サイズやフォントの統一

 

バナーデザインの流れ

Step1: 事前のヒアリングでイメージをしっかり聞く

Step2: デザインに入れ込むデータの原稿をもらったら、文字の段階で情報整理、優先順位

Step3: コンセプト

Step4: デザイン（ターゲット、世界観、印象操作、トンマナ、レイアウト、フォント、色使い）

Step5: 訴求ポイントを変えて複数パターンでバリエーションを作って提案

Step6: 最終確認、ご提案

Step1: 事前のヒアリングでイメージをしっかり聞く

最終決定はお客様がすること！商業デザインでは好き勝手デザインすることはNG。

お客様の持っているイメージを具現化し、要望を実現するのは当たり前。自分にしか思いつかない方向性でお客様の少しでも上をいく提案をすることがデザイナーとしての付加価値。

訴求ポイントを変えてバリエーションを作って提案すると良い。

Step2: 情報整理、優先順位

情報の分割

• 同じカテゴリーの情報ごとにグループ分けして分割、まとめられるところはまとめて

例えば

• 施設名が初売り、MAX80パーセント
• 日付
• クリック訴求

情報量を極力減らす。引き算を心がける。

• 全てのパーツに意味を持たせる。無意味な物を置かない
• フォントを多様化しない、まとまりが無く見にくくなる
• 色の基本は３色から始める。ベースカラー、メインカラー、アクセントカラー
• 装飾を極力減らす（ドロップシャドー、袋文字等文字装飾、透過、ベタ打ちフォントの装飾でさえも一旦消して極力シンプルに）
• 分かりきっている情報は消す
  – 2020年3月〜2020年4月の2020年など重複があれば消す、場合によっては2020年もいらないかも
  – 月、日なども消す
  – [から]→▶︎
  – 火曜日→曜日は無くてもわかる。若者向けならTue.(.を忘れない)
• 置き場所に困ったら、イラストに一体化
• 丸の中に文字の時には、周りにスペースを入れると洗練された印象に

＊お客様から頂いた原文テキストを勝手に削った場合は、ご提案の時に削った理由をお話しする
＊CHRISTMASをX’MASに変えるなど、タイトルを勝手に変更するのはNG

情報の優先順位

• 一番伝えたいことは？メリハリ
• どういう順番でどのように伝えたいのか
• 主役は？文字？イラスト？

メリハリの出し方

• 多きさ
• 太さ
• 彩色
• 色の濃淡
• 黒ベタ背景白抜き文字

Step3: コンセプト

そこにしかないものを強調する。

例えば

• バナーを見た人がセールに行きたくなる雰囲気、目に留まるワクワクする感じ
• バナーとして、しっかり目に止まるような色使いやフォント設定

当たり前過ぎるのことをコンセプトにすると、余計な混乱を与えるから注意。

Step:4 デザイン

4-1. ターゲット、世界観、印象操作、トンマナ

ターゲットに向けたデザイン

洗練された女性らしさ、落ち着いた雰囲気

• 細めのフォント
• 明朝体
• ゴールドは安っぽい
• 赤だったら濃いめ
• 白に濃い赤は可愛らしさ

おもちゃやさん、子供向け、ポップ

• 文字の装飾が多い
• 大きめのイラスト
• イラストを傾ける
• 元気
• ごちゃごちゃうるさい

目に留まりやすく、ワクワクする感じ

• 背景を強めに
• フォントにインパクト。可読性を担保しつつシンプルにするのに、ゴシックにベタ
• 背景は彩度をあげる。文字白抜きでベタは白

お正月のめでたい雰囲気

• お正月っぽいモチーフ
• 福袋はパンパンな方がいい
• テクスチャを入れると、おめでたくて上品な印象に

世界観、トンマナ

• 屋外のイメージと屋内のイメージをまぜるとうるさい印象に
• 背景を装飾する、文字装飾なし / 背景なし、文字をデザイン（背景と文字どちらもを装飾しない）イラストに色をつけたら
• イラストを配置している意味を持たせる、ただ配置するのは×
  – イラストに大小を加えて奥行き感を出す、弾んでいる印象で楽しい雰囲気
  – 背景より少し濃いか薄い色の放射状のオブジェクトを置くと、飛び出してくるような雰囲気

4-2. レイアウト

目線の動きの誘導

クリック訴求は視線のゴール地点（右下）に。

視線の動き

• 左上から右下に
• 上から下に

クリック訴求には矢印を置いてあげると親切

ごちゃっとしてしまったら

グループをまとめる、分ける

• 情報がキツキツにならないように情報グループの分割数を減らしてみる
• 文字の箱組みグループから外して見る。そしてバッジやモチーフの中にの中に入れてあえてメリハリ
• 全く別物の帯を引いて、日付とクリック訴求を入れてあげる

ごちゃごちゃの要素

• 余白が適切にとれているか、また無駄な余白がないか。特にメインの文字周りの余白を開けて文字を強調
• イラストが大きすぎる
• 文字数が多い時は、線を入れる、囲む
• 文字とイラストが重なっていないか

4-3. フォントについて

フォント選び

欧文フォント

数字や英字には、和文フォントより欧文フォントのが綺麗。ベーシック欧文フォント：

• フーツラ
• センチュリーゴシック
• ディン

和文フォント

• 明朝体フォント　女性らしい印象

手書き感のあるフォント

頭文字だけ大文字のが綺麗、字間を詰めて繋げて書く、ガーリーポップな雰囲気や野球チームのユニフォームに良い

文字の箱組み

情報ごとをまとめ、見えないラインを使って四角い箱の形に収める。例えばビル名、タイトル、日付を見えない箱に入れるとまとまって綺麗。

細かい文字組み

アウトラインをかけて、細かい調整

• 文字を分割して、文字と文字のベタを繋げてスッキリ
• 50％OFFの50を目立たせ、メリハリ
• （）は全角カッコを使うのが基本。半角だと文字に対して下がってしまう。空いちゃう部分は字間調整で詰める。欧文フォントで()を打ちたい場合は、ベースラインシフトで上げてあげるか平体と長体で高さを揃える

4-4. 色について

色の引き算。色を使いすぎないように注意。６色は使いすぎ。。

• ベースカラー（ゴールド）：一番面積を占める。メインカラーとアクセントカラーを引き立たせる脇役
• メインカラー（赤）：全体のトンマナや印象を決定づける色
• アクセントカラー（白）：注目してほしい重要な目立たせたいところにワンポイントで入れる色

バランスを見て、印象が薄かったら濃いグレーを足して強調も良いかも

Step:5 訴求ポイントを変えてバリエーションを作る

例えば

• 初売り2021 / X’MAS SALE
• MAX50%OFF

Step:6 最終チェック

• クライアントから頂いた文字は間違ってない？
• 可読性は適切？
• 世界観は適切？
• デザイン４原則に沿っている？
• GDN（ディスプレー）のバナーの場合、リサイズした時にどういう形に変えていくかをイメージ。正方形、縦長、横長
• 簡易的でもいいので、実際に掲載先に配置してあるイメージでコーディングしてURLをお送りする。原寸でバナーを見ることで文字が小さすぎるなど余計な修正が来なくなる。

最終決定はお客様がすること！商業デザインは好き勝手デザインすることはNGです。お客様の持っているイメージを具現化し、要望を実現するのは当たり前。自分にしか思いつかない方向性でお客様の少しでも上をいく提案をすることがデザイナーとしての付加価値になります。