第1回 『バナー製作 綺麗なレイアウト方法』
第1回 『バナー製作 綺麗なレイアウト方法』
Webレイアウト教本の章では、第1回としてバナー製作のレイアウト方法をお書きしたいと思います。
バナーとは、ウェブサイトを紹介する役割をもつ画像のことを指します。
もともとバナーは、旗に似せた横長の広告のことをバナー広告と呼びましたが・・・。
現在のバナーの種類
■バッジ広告 （正方形に近い長方形）
■レクタングル広告 （TV画面のような形）
■スカイクレーパー広告 （縦長の形）
■フローティング広告 （Webページを浮遊するような広告）
■リッチメディア広告 （FLASH広告）
■ポップアップ広告 （小さい別ウインドウで開く広告）
他にもたくさんのバナーと呼ばれる広告があります。
弊社サイトでは、正方形の120px（ｈ）120px（ｗ）のバナー広告と240px（ｈ）120px（ｗ）のバナー広告の出稿が可能です。ですが、たまに広告の出稿をお断りするケースがあります。それは拝見するかぎりバナーの製作レベルがなく広告として下品になるものは出稿をお断りするか、弊社のほうで無料で製作をして出稿させていただいています。この理由は、広告は縦に並ぶので、あまり下品なものを他の広告と並べるのは、他の出稿された方にご迷惑がかかるという部分からの配慮です。
では、どうしてバナーのレイアウトがおかしくなってしまうのか？
今回から、下記のバナーなどを例に無難なバナーの作り方をご説明します。
（とは言っても、当方もまだまだ、たいしたレベルではないので無難という言葉を強調しておきます！）
当方は、素人が作るバナーとプロが作るバナーはひとめでわかります。
この理由を下記に書きますので、このポイントを改善していくと必ずバナーのデザイン力が上達すると思います。
■駄目なバナー
さて、皆さんは上記のバナーの駄目な点がわかりましたでしょうか？
上記のバナーには、駄目なポイントを三つほどいれてみました。次に良いバナーをご紹介します。
■良いバナー
上がWebデザイン製作会社さんのバナーで、下がレストラン評価誌のザガットです。どちらも出稿していただいたバナーです。上は、デザイン製作者さん作成しただけあって可愛いバナーに仕上がっていると思います。下は当方が製作したものですが無難なZAGAT色を継承できています。
ここで、駄目なバナーと下の良いバナーの違いは何か気がつかれたでしょうか？
では、そろそろ駄目なバナーのポイントを書きますね。
1.文字が全て崩し文字になっている
2.文字のまわりの色をメインの色が同系色なので意味がない。
3.明度の高い色を多様しすぎ。
こんな感じです。
【1の解説】
崩し文字とはぐにゃぐにゃさせた文字です。それに加えてフォントまで崩しています。これでは逆に汚くなるだけなのです。素人の人で失敗するケースがやりすぎ、頑張りすぎなのです。
【2の解説】
文字のまわりの色とは、大森商店のまわりについているピンク色です。これを飾り文字と呼びますが、メインの色が赤で、まわりを縁取るのがピンクの場合、これは同系色となり、逆に文字をぼやけることになります。文字をソフトにするためにわざと同系色を使う場合もありますが、赤系の飾り文字にピンクをあわせるのはあまりおすすめしません。なぜかは最後にご説明します。
【3の解説】
全てを明度の高い赤を使っているので派手な印象があります。ザカットも赤を多く使っていますが、これは深みある赤の面積比が多いことで下品な印象ではなく高級感をだせています。
第1回目のバナー製作のレイアウト方法は色の使い方です。色は私たちの生活の中でも密着してもので色相心理というものがあります。つまり色を見て私たちは何となく連想できるものがあるのです。
青なら海、空、静か、冷静・・・
赤なら炎、血、情熱、燃えるといった具合に何かを連想できるのです。
色のことは色彩計画といってかなり深い話しになっていきますのでこの辺にしておきますが、同系色で固める
場合は、人が嫌がらない色を使うほうが無難です。ファッションでも同じですよね。全身ショッキングピンクの人が歩いていたらちょっとひいてしまいますよね？そういった意味で最初に紹介したバナーは青を多様しているのです。自分たちの服装と置き換えてみるといいかも知れません。では、次回の第2回目はバナーのレイアウト構図についてご説明しますね！
★ブログをたくさんの人に読んでもらおう！女性ブログ応援サイト ファイブスタイル↓もうすぐ新コンテンツ開始し