01　バナー作成講座　まずは基本のサイズとフォント設定

2020年3月6日 2021年8月20日 Yoshiko先生

在宅・フリーランスになるためのバナー作成講座

バナー作成するための準備

バナーを作成するアプリは、特にこれでないとダメ！と決まりがあるわけではありません。
使いやすい、慣れたプログラムでもかまいません

ただ、Webデザインの仕事としてバナー作成を依頼される場合は別です。一般的にクラウドソーシングなどでも、PSDファイルで納品やAIファイルで納品と書いてあったりします。

Photoshop 形式で納品（拡張子がPSD）
Illustrator形式で納品（拡張子がAI)

Photosop とIllustratorはadobe から出ている写真加工やイラストを描く専門のプログラムですが、Webデザインの世界でも広く使われており、歴史の長い、多機能なプログラムです。

今回は写真加工をメインとする場合はPhotoshop。イラストなどが主に入ってくる場合はIllustratorを使ってバナーを作成していきます。

作成する前にバナーのサイズ・種類を覚えよう

バナーには、よく使うサイズがあらかじめ決められています。

広告バナーには　正方形のもの　正方形の変形　縦長　横長といくつか種類があります。

また、フロントページ（トップページ）などにある目をひく大型のキャンペーンバナー。スクリプトなどを使ってスライドショー（フェードイン・フェードアウト）になっていたり、カルーセル（画像が右から左に移動するもの）などがあります。

大きめのキャンペーンバナーは迫力があるのでポートフォリオなどにはむいていますね

ただ広告バナーで一番人気のサイズは、レクタングル　横300ピクセル　縦250ピクセルのサイズです。これは、google広告（アドセンス）に採用されてからブログなどのサイドバーで非常によくみかけるサイズです。

あとは、サイズ感が大きくて目にとまりやすい　横728ピクセル　縦90ピクセルが人気です。またその変形として横728ピクセル　縦幅が異なるのも多いです。

縦に長くとる　スカイクレーパーも根強い人気で、ブログなどのサイドバーは、レクタングルとスカイクレーパの変形などがよくみかけます。

フォントの準備もしておこう

バナーは、限られたスペースの中で効果的なコピー・キャッチフレーズ・目に留まる文章　が必要です。内容ももちろんですが、素晴らしいキャッチーなコピーでもそれを表示するフォント（書体）がうっすらとしていて、目立たなかったら目を惹きません。また、これでもか！という感じの強いフォントもまた、ユーザーがひいてしまいます。内容にあったフォントをマッチングさせてバナーを完成させていきます。