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

Webサイト制作

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

yoshiko先生
yoshiko先生

Webサイト制作で必要な要素のひとつ「バナー」このバナー作成講座では、基本の作り方をPhotoshop Illustratorを使って作成していきます。

はてな?
はてな?

バナーっていうのは、ネットショップとかで見かける広告ですか?

yoshiko先生
yoshiko先生

そうですね。バナーは旗の意味合いがあって、お店の前にもよくみかける「のぼり旗」と同じ効果があります。のぼり旗が立っていると、このお店のおすすめが何であるかわかります。バナーも同じように、クリックした先に何があるのか?誘導する要素が必要です。

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

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

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

  • Photoshop 形式で納品(拡張子がPSD)
  • Illustrator形式で納品(拡張子がAI)

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

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

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

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

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

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

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

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

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

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

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

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

今回は動画の中でAdobe フォントの利用の仕方も解説しています。

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

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

コメント

タイトルとURLをコピーしました