【WEBデザイン】初心者がまずやるべきWEBデザイン3STEP

【WEBデザイン】月5万円を稼ぐために初心者がまずやるべきWEBデザイン ①バナー・ヘッダー・その他画像作成に必要な知識:バナー編

バナー・ヘッダー・その他画像作成に必要な知識に必要な知識をご紹介しておきます。

『簡単に作れそう〜♪』なんてただ闇雲に感覚で作成していると、時間がかかってしまうばかりか効果も出ない、見てもらえないような、本当に素人丸出しのものができてしまったりするわけです。。。

ダサっ。。。♡

簡単なようで意外と難しいのがこのバナー・ヘッダー(・その他画像)!

全ての画像には役割があります。
それぞれの役割を知り、うまく作成する事で、効果の出るセンスのいい画像が効率的に作成できるようになっていきます!

 

バナーとは?

バナー(bunner)とは、ウェブサイト上で他の商品・サービスのページの広告・宣伝をし、誘導するためのリンク付きの広告画像の事です。
本来「旗」や「のぼり」などを意味しますが、これをWEB業界でいうところのサイトに掲載する旗を指しますのでこの通名で定着したようです。

サイト上に掲載するのですから、旗(バナー)をあげて認知してもらうだけでなく、

●「ハイパーリンク」をつけてクリックしてもらって宣伝先に飛んでもらう事(CTR(クリック率))
●そして宣伝先の商品・サービスを購入・契約してもらう事(CVR(コンバージョン率))

この2つが最終目的となってくるわけですね。

ですので見た目が良いだけでなく、この2つの数値も重要視されます。(バナーは特にCTR(クリック率)を最重要視します)
数値は、バナーをリリース後にGoogleアナリティクスptenginなどのデータ解析ツールを使用して計測していきます。
1種類作成&リリースするだけでなく数パターン作成しローテーションで掲載してみて、どのバナーが1番クリック率が高いかの検証をする事もあります。(ABテスト

依頼主はバナーを掲載してもらうために、(自社サイトなどは別として)場所代として広告費を払っています。(特に誰もが知っている大手ポータルサイトほど、高額になっていきます・・・)

いい場所貸しますさかいに、ショバ代たんまりはろうてもらいまっせ〜
(合ってます?)

バナーってどれ?

みていただいた方がわかりやすいのでスクショを見てください!

Yahoo!Japan(d○sonさん積みましたね!これだけ占領できるの気持ちいい!!羨ましい!!)


楽天市場(バナーと商品画像だらけ!自社バナーで統一感があり、見やすいですね)

 

メルカリ
Yahoo!Japan

LINE

 


Youtube

サイトを見ると、こんな感じでバナーが出ているのがお分かりになるかと思います。

バナーに必要な要素

バナーに必要な要素は、

★キャッチコピー
・(サブテキスト)
★(画像)
・(ロゴ)
・(ボタン)

バナーの目的

バナーの目的は、

・認知
・誘目
★誘導(CTR(クリック率))
・結果(購買・契約)につなげる(CVR(コンバージョン率))

です。

バナーを掲載する場所(サイト・SNS)

・Google、Yahoo!Japanなどのポータルサイト
・YouTube
・自社サイト
・LINE
・Instagram
・Twitter
など

バナーの形式

バナーにはいくつか形式があります。

★JPEG(写真を主に使用する場合)
★PMG(イラストを主に使用する場合)
★GIF(アニメーションを使用する場合)
(・FLASH)

基本的にJPEGかPNG入稿です。アニメーションを使う場合はGIFになります。

バナーファイルの容量制限

バナーにはファイルサイズに上限がある場合があります。
一般的には100kb以下にする必要があると言われています。

バナーのサイズ

GoogleAdWordsバナーサイズ
【PC】インライン レクタングル: 300×250
【PC】レクタングル(大): 336×280
【PC】バナー: 468×60
【PC】ビッグバナー: 728×90
【PC】スクエア: 250×250
【PC】スクエア(小): 200×200
【PC】スカイスクレイパー: 120×600
【PC】ワイド スカイスクレイパー: 160×600
【PC】ハーフページ: 300×600
【PC】ビッグバナー(大): 970×90
【PC】レクタングル(縦長): 240×400
【PC】ビルボード: 970×250

【スマートフォン】インライン レクタングル: 300×250
【スマートフォン】モバイル バナー(大): 320×100
【スマートフォン】モバイル ビッグバナー: 320×50
※2014.2.10現在
Yahoo!ディスプレイアドネットワークバナーサイズ
【PC】300×250
【PC】468×60
【PC】728×90
【PC】160×600

【スマートフォン】300×250
【スマートフォン】320×100
【スマートフォン】320×50

バナーまとめさんのサイトより引用

高解像度バナー

PCやスマホの画像解像度が上がるにつれ、そのまま実際のサイズでバナーを作成すると解像度の高い機種ではボケてしまいます。
ですので、2倍サイズ(@2x)などで作成し、縮小して表示させる事もあります。
(例えば、300x250pxのバナーは600x500pxで作成します)
高解像度で綺麗なバナーはクリック率も高い傾向にあります。

Google、Yahoo!に出すバナー:GDN・YDN

日本における検索エンジンの2大巨塔であるGoogleとYahoo!(Yahoo!Japan)に出すバナーには通名(?)があり、

GDN:Googleバナー
YDN:Yahoo!(Yahoo!Japan)バナー

と呼ばれています。

それぞれ入稿規定があり、掲載できるサイズには共通のものもそうでないものもあるので注意してください。
また、規格が変更される場合もあるので、常に最新情報を確認するようにしましょう。

GDN・YDNのファイルサイズ

GDN・YDNにバナーを出すときには注意点があります。

Amazon、楽天に出すバナー、商品画像作成時の注意点

日本における通販ポータルサイトの2大巨塔であるAmazonと楽天にバナーや商品画像を出すときにもいくつか注意点があります。
規格が変更されることもありますので、常に最新の情報をチェックしておきましょう。

※追加作成します!しばしお待ちください

ペコりー

amazon
楽天市場

バナーを集めたサイトを紹介します

バナーを知る・デザインを知るのに手っ取り早いのは、まずバナー画像を集めたまとめサイトを見る事をおすすめします。
良い作品をたくさん見て、参考にします。
できれば毎日見て、気になるバナーは自分の参考資料としてどんどんストックしていきましょう。

バナーまとめ

バナー掲載数日本一を謳っているサイト。現在合計21300本のバナーを掲載しています。
色・業種・表現別で目的にあったバナーの閲覧ができます。

レトロバナー

現在合計11644本のバナーを掲載しています。
サイズ・色・業種の他、「シンプル・クール」「個性的」などテイストからも絞り込みが可能です。

バナーギャラリー

現在3,024本のバナーを掲載しています。
サイズ・色・業種から絞り込み可能です。

バナーデザインアーカイブ

現在2,129本のバナーを掲載しています。サイズ・色・業種から絞り込み検索が可能です。
(※最終更新が2017年となっています)

ピンタレスト

バナーだけでなく色々なサイトをピン留めして自分だけのファイルにストックしておけるサイト。
一つのサイト(画像)を見ると、「似ているピン」のサイトがたくさん出てきます。
色々なデザインが見られるのでおすすめ!!!
現場でも使用されている方多いです。

参考になるものをストックし、引き出しを増やす

特に画像・動画のファイルサイズは大きいので、ストックを増やしていくとストレージ(容量)が本当にすぐいっぱいになってしまいます…。
とりあえず何でもかんでもデスクトップ上に置いておくと、動作がもっさりしてきたりします。

片付けできない人がやりがちぃー。

ですので、別途USBやクラウド上にカテゴリ別にどんどんアップしておき、必要な時に閲覧するのをおすすめします。
(外付けハードディスクは、ご自宅で作業されるぶんにはいいのですが外出先で作業する時がネック)

おすすめクラウドは

macならicloud drive(これも実はストレージを喰うので一時的?)
Chatwork(自身のカテゴリ別専用チャットをそれぞれ作成し、そこに入れていくと良いです)
GoogleDrive

あたりでしょうか?

error: Content is protected !!