H18バーチャルショップセミナー<第5回>「画像加工とデザイン・レイアウト 心に響く画像講座」

*お店ばたけ出店者交流会(第47回)* 石川県産業大学経営講座
H18バーチャルショップセミナー<第5回>
『画像加工とデザイン・レイアウト 心に響く画像講座』

講師の西田上さん受講の様子

講 師:和座本舗 代表 西田 上(じょう) 氏 
平成18年10月11日(水) 13:30~16:30
石川県地場産業振興センター本館 第3研修室

内容
クリックしたくなるバナー(看板)や画像を使って魅力的なネットショップページへとセンスアップ。
自店舗の事例を含め、実践形式でデザイン・レイアウトについて解説いただきました。

和座本舗は、今年3月に、特定非営利活動法人全国イーコマース協議会
主催する「1000人の店長が選んだベストECショップ大賞2006」を受賞されました。


概要 
 
■1.バナーとは何だ?
■2.ページデザインに使う
■3.バナーを作ってみよう
■4.発想の方法
■5.店舗診断

※ご報告の内容は、セミナー内容の概要と受講メモを基に記載しております。 ご了承ください。

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


■最近、気になったバナーは?そのバナーのどこが心に残ったか考える。 色合い?写真?それともキャッチコピー?

■良質バナーの見つけ方
アフィリエイトサイトはバナーの宝庫
自社HPのコンセプトに近いお店を探す
テキスト広告はキャッチコピーが豊富 見つけたらすぐにブックマーク

困った時は、迷わず有名処へ
バナーを作成する上で、文字、レイアウトの配置やキャッチコピー、フォントなど参考になる。
参考サイト:yahoo!  楽天市場  All About(オールアバウト) ・・・男性向けWebマガジン「forM」など

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

■ボタンで変わるバナー効果
画像にボタンをつけると視覚が立体的になり、クリックされやすい。

■テキストを画像にした時は・・・
47gazou1.jpg47gazou2.jpg

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


■だから効果的なバナーとは商品特性を知る
 一番伝えたい部分(色の深さ、鮮やかさなど)

販促方法を知る
 割引、送料無料、限定○個など

日常の習慣を知る
 文字色に工夫、ボタン、リンク 
ネット上の習慣を知る
 説明文は簡潔に  意志決定の3秒ルール   0.2秒毎に3文字を認識できる   最大45文字~48文字2.ページデザインに使う

■画像を効果的に使った参考媒体
オールアバウトジャパン
キャッチコピーの上手さ ・・・商品写真のクオリティ、高級感、質感の表現が優れている。

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

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

■主な使用法
クリッカブルマップ画像で看板・ナビ
画像の中にリンクを貼ること

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

SEO対策を考えたテーブル背景画像
画像を背景に、上に文字を重ねる
詳細情報画像化(決済方法・送料情報)
商品ページに「翌日配達」画像

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

3.バナーを作ってみよう
 
材料集めが最重要!
カメラはいつでも持ち歩こう
無駄な写真なんてない
色、素材、自然、季節、空間で撮る
フォントソフトは購入をおすすめ
フリーフォントを入手する
杜の窓  ・白舟フォント

■いざ実践!バナー作成
まずは紙に書くことから
いろいろなサイトを見てセンスアップ

簡単バナー♪写真と文字を合体
写真の上に透明レイヤーを新規に重ねる

レイヤーと消しゴムでセンスアップ
消しゴムツールでぼかしたり、背景色を変える

ドロップシャドウ・光彩で文字を飾る
文字に影や縁取りで立体感、奥行きを出す

枠線でバナーっぽく
2ピクセル以内で

ボタンを作ろう!
立体感を演出 他のサイトも参考に

4.発想の方法
■ブレーンストーミングで柔らか脳に!
ルール
・あるテーマを題に思いつくことをできるだけ書き出す
・周りの人は否定しない
・制限時間は3分

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

発想のコツ
恥ずかしいという概念を取り除く
関連性から探る
自分だけのリラックスできる環境を知る
発想の素をマッチングさせる為に
キーワードの組み合わせ
意味合いの最大公約数


5.店舗診断

本日の講座内容をふまえて、西田先生から、以下の6店の、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/


47jyukou2.jpg


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


お店ばたけプラスホームページ

お店ばたけプラスホームページへ
ISICOバーチャルモール「お店ばたけプラス」は、(公財)石川県産業創出支援機構が運営するインキュベーションモールです。

アーカイブ

ブログを購読する(RSS)

  • RSS2.0を購読する
  • RSS2.0を購読する