« ＜商い益々繁盛店＞中華ダイニング煌（ファン）（金沢市） | ブログトップページへ | 「ブランデーコーヒーケーキ『カフェ・ロワイヤル』～開発ストーリー～」【週刊ウンチク】 »
2006年11月01日
H18バーチャルショップセミナー＜第5回＞「画像加工とデザイン・レイアウト 心に響く画像講座」
＊お店ばたけ出店者交流会（第４７回）＊ 石川県産業大学経営講座
H18バーチャルショップセミナー＜第５回＞
『画像加工とデザイン・レイアウト 心に響く画像講座』
講 師：和座本舗 代表 西田 上（じょう） 氏
平成１８年１０月１１日（水） １３：３０～１６：３０
石川県地場産業振興センター本館 第３研修室
内容
クリックしたくなるバナー（看板）や画像を使って魅力的なネットショップページへとセンスアップ。
自店舗の事例を含め、実践形式でデザイン・レイアウトについて解説いただきました。：
和座本舗は、今年３月に、特定非営利活動法人全国イーコマース協議会が
主催する「１０００人の店長が選んだベストＥＣショップ大賞2006」を受賞されました。
概要
■1.バナーとは何だ？
■2.ページデザインに使う
■3.バナーを作ってみよう
■4.発想の方法
■5.店舗診断
※ご報告の内容は、セミナー内容の概要と受講メモを基に記載しております。 ご了承ください。
１．バナーとは何だ？
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/
～セミナーを終えて～
魅力的なバナーや、画像加工の作り方について、レベルアップを目指す４４名の方に参加いただきました。
前半では、クリック率を高めるバナーや画像を実践を交えたお話、後半は、発想力を養うためのブレーンライティングについて学びました。講師の西田上先生、大変勉強になりました。ありがとうございました。
投稿者 お店ばたけ事務局 : 2006年11月01日 16:55