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名の方に参加いただきました。

前半では、クリック率を高めるバナーや画像を実践を交えたお話、後半は、発想力を養うためのブレーンライティングについて学びました。講師の西田上先生、大変勉強になりました。ありがとうございました。