W-0010 バナーの作り方!

ここに掲載している情報は間違っている可能性が非常に高いので、信用してはならない。これらの情報を信用してアナタが不利益を被ったとしても、それは全てアナタの責任である。

はじめに

バナーとは、サイトの広告、あるいは看板のようなものです。 TV 番組のテーマソングといってもいいでしょう。ちなみに、当サイトの第1バナーはコレです。

outsider reflex Banner Links を見ても分かるように、バナーがあるとそのサイトの方向性や趣旨などがけっこう見えてくるものです。(そういう点では、このバナーはダメですね)

バナーがあると、他のサイトのリンク集に登録してもらったりしたときなどに目を引きます。その結果、 HIT 数が増えるというわけですね。そうでなくても、「コレが俺なんだァァ―――ッ!!」と主張したい気分というのは、誰にでもあると思います。

というわけで、これからバナーを作ろうという人のため、順を追って考えていきましょう。

まずは形とサイズ

200×40 基本は横長です。日本の CG 系サイトでは、横200ピクセル・縦40ピクセルが標準的なサイズとなっています。(尚、このサイズは日本以外ではあまり使われていないそうです。)

88×31 あるいは、横88ピクセル・縦31ピクセルというタイプ。これは国際標準の「小サイズ」です。

※これらの他にも、「国際標準」サイズがあります。

長方形にこだわる必要は必ずしもありません。透過 GIF を使った丸いバナーでも、それこそそのままキャラクターを使った形でも構わないでしょう。ただ、画一的デザインには、それなりの「良さ」というものもあります。サイトのリンク集に登録するときは、制作者側としてはけっこう「ビシッ!」と揃えたくなってしまうものですし。

そういうわけで、サイズは上記の二つのいずれかを使った方がいいでしょう。

デザインは

デザイン――要するに、絵柄の決定です。

女子バナー 自分で絵を描いている人の場合、こんな感じのデザインが一般的です。よくある「キャラもの」ですね。絵があって、サイトの名前があって。至極普通のデザインですが、普及しているだけのことはあってなかなかわかりやすい構成だと思います。

こういうバナーの場合、どんなキャラを持ってくるかが問題になってきます。基本的にはそのサイトで中心的に扱っているキャラクター(の種類)を表す「シンボル」を使うことになります。女の子イラストの多いサイトなら上のような感じですね。兄貴が中心なら次のような感じでしょう。

兄貴バナー

文字バナー 絵を描かない人の場合、文字だけで作る方法もアリです。こんな感じですね。こういう場合も、サイトのイメージに合わせたデザインにするのがベターでしょう。

とはいえ、デザインに決まりはありません。既存の概念にとらわれず、思い切ってキレたデザインで勝負に出るのも手でしょう。

制作の手順

女子バナー サンプルの一つであるこれ↓の作成手順を解説します。使用ツールはウルトラキッド Ver.2.0 ですが、他のツールでも応用は利きますので、とりあえず参考にしてください。

まず、使用する画像を用意します。今回は、手元にあったイラストの別バージョンを使っています。バナーのために描き起こしてもいいでしょう。

元画像 これを 200×40 の比、つまり5: 1 の割合にトリミングします。(大きめに作っておいて最後に縮小することで、より自然な仕上がりになります。幾分大きめに作りましょう。)

STEP2 四角い枠が5: 1 の枠です。これでは動きがないため少し寂しいので、今回は画像を斜めにしてみることにしました。

斜めにしたところ

それから、要らない部分を削除します。

トリミング後

文字――サイトの名前を入れます。ここでは、 DF 行書体を使用しました。目立つように入れるのもいいですが、今回は「余白」を活かしたデザインにしたいので、文字を小さくしてみました。同時に、ラインも入れています。

文字入れ

陰影 次に、ボタンのように立体的にしてみましょう。このように右下を暗く、左上を明るくした画像を用意します。(逆にすると、全体がへこんだように見えます)

これと、先ほどの画像を合成します。彩度や透明度をいじって、適当に調整しました。(顔と重なる部分の色がどぎつくなってしまっていたので、範囲選択をして顔と重なる部分だけ彩度を落としてあります)

合成後

あとは、サイズを 200×40 に縮小して完成です。 JPEG か GIF で保存して、 Web で公開しましょう。

女子バナー これが、一番簡単な方法です。これは異様にシンプルですので、皆さんはもっと手の込んだものを作って公開て下さい。

参考:国際標準のバナーサイズ

460×60 フルサイズ( 460×60 )

390×72 ナビゲーションバー付きフルサイズ( 390×72 )

234×60 ハーフサイズ( 234×60 )

120×240 縦型( 120×240 )

120×90 ボタン型( 120×90 )

120×60 ボタン型その2( 120×60 )

125×125 ボタン正方形型( 125×125 )

88×31 ボタン小型( 88×31 )

200×40 という日本の CG 系サイト(ウチもそうですね)で多用されているサイズは、日本国内のみで使われているローカルサイズです。( 2DCG に興味のある海外の人も使っているようです)「マルチペイント」作者の Woody-Rinn 氏が考案なさったサイズだそうで。