＊お店ばたけ出店者交流会（第４７回）＊ 石川県産業大学経営講座
H18バーチャルショップセミナー＜第５回＞
『画像加工とデザイン・レイアウト　心に響く画像講座』

１．バナーとは何だ？　

WEBページの広告用に作られた画像で、見せたいページに誘導させる手法として、
インターネット広告として広く用いられている。

■最近、気になったバナーは？

そのバナーのどこが心に残ったか考える。　色合い？写真？それともキャッチコピー？

■良質バナーの見つけ方

アフィリエイトサイトはバナーの宝庫

自社HPのコンセプトに近いお店を探す
テキスト広告はキャッチコピーが豊富　見つけたらすぐにブックマーク

困った時は、迷わず有名処へ

バナーを作成する上で、文字、レイアウトの配置やキャッチコピー、フォントなど参考になる。
参考サイト：yahoo!　　楽天市場　　All About（オールアバウト）　・・・男性向けWebマガジン「forM」など

■どんなバナーが効果的なのか？

クリック率の高いバナーとは？

商品写真　　人物　　価格訴求　　知名度　　枠線

商品写真＝美味しそう、可愛い、綺麗、カッコイイ　
人物 　 ＝目線が合う、興味本位、安心感
価格訴求＝二重価格、激安、送料無料
知名度　＝メディア露出している
枠線　　＝外枠の色を強調させ目立たせる　2ピクセル以内に
ついクリックしてしまったバナーを思い出そう

■ボタンで変わるバナー効果

画像にボタンをつけると視覚が立体的になり、クリックされやすい。

■テキストを画像にした時は・・・

どちらをクリックしたくなりましたか？
右の画像は、青色の文字がリンクに見えますので、クリックしてみたくなりませんか。

■だから効果的なバナーとは

商品特性を知る

　一番伝えたい部分（色の深さ、鮮やかさなど）

販促方法を知る

　割引、送料無料、限定○個など

日常の習慣を知る

　文字色に工夫、ボタン、リンク　

ネット上の習慣を知る

　説明文は簡潔に　　意志決定の3秒ルール 　　　０．２秒毎に３文字を認識できる 　　　最大４５文字〜４８文字

２．ページデザインに使う

■画像を効果的に使った参考媒体

オールアバウトジャパン

キャッチコピーの上手さ　 ・・・商品写真のクオリティ、高級感、質感の表現が優れている。

ファッション雑誌

レイアウト・文字使いを学ぶ　・・・新聞の折り込みチラシ、HTMLメルマガ

ファミレスのメニュー

フード系の強さ　文字の大きさ、レイアウト、サイドメニュー（商品レジのカゴまわり）が参考に

■主な使用法

クリッカブルマップ画像で看板・ナビ

画像の中にリンクを貼ること

画像分割でレイアウト

画像の上にテキストをのせる。ひとつの画像をつなぎめがないように分割

ＳＥＯ対策を考えたテーブル背景画像

画像を背景に、上に文字を重ねる

詳細情報画像化（決済方法・送料情報）

商品ページに「翌日配達」画像

Fの法則を知る

ファーストビューはトップページ一番上と左上の位置。Fのラインに商品を配置すると購入率、回遊率が即効で上がる。
　

３．バナーを作ってみよう

　

材料集めが最重要！

カメラはいつでも持ち歩こう
無駄な写真なんてない
色、素材、自然、季節、空間で撮る
フォントソフトは購入をおすすめ
フリーフォントを入手する
・杜の窓　　・白舟フォント

■いざ実践！バナー作成

まずは紙に書くことから

いろいろなサイトを見てセンスアップ

簡単バナー♪写真と文字を合体

写真の上に透明レイヤーを新規に重ねる

レイヤーと消しゴムでセンスアップ

消しゴムツールでぼかしたり、背景色を変える

ドロップシャドウ・光彩で文字を飾る

文字に影や縁取りで立体感、奥行きを出す

枠線でバナーっぽく

2ピクセル以内で

ボタンを作ろう！

立体感を演出　他のサイトも参考に

４．発想の方法

■ブレーンストーミングで柔らか脳に！

ルール

・あるテーマを題に思いつくことをできるだけ書き出す
・周りの人は否定しない
・制限時間は３分

テーマは　鉛筆

結果　平均１０個　その後、別のテーマで再度行ったところ、平均１３個に向上した。
・恥ずかしがらず沢山書きだす。
・繰り返しトレーニングすることでいろんな発想がわいてくるようになる。

発想のコツ

恥ずかしいという概念を取り除く

関連性から探る

自分だけのリラックスできる環境を知る

発想の素をマッチングさせる為に

キーワードの組み合わせ

意味合いの最大公約数

５．店舗診断

本日の講座内容をふまえて、西田先生から、以下の６店の、Webショップアドバイスをいただきました。
●西田酒店様
　　http://yumewine.com/
●アート薬局様
　　http://www.art-kanazawa.com/
●マイスター・マトバ様
　　http://www.hinoki-furniture.com/
●銭福屋様
　　http://www.zenifukuya.com/
●ホリ写真館様(ニュートン様)
　　http://happy-aday.com/
　　http://blog-aday.ddo.jp/diary/
●キャラバンサライ様
　　http://www.caravanserai.co.jp/

〜セミナーを終えて〜

魅力的なバナーや、画像加工の作り方について、レベルアップを目指す４４名の方に参加いただきました。
前半では、クリック率を高めるバナーや画像を実践を交えたお話、後半は、発想力を養うためのブレーンライティングについて学びました。講師の西田上先生、大変勉強になりました。ありがとうございました。