「ECキャンパス」は全国のネットショップを運営する店長さんに学びの場となるWEBキャンパスを提供します。「売上を伸ばしたいけどやり方がわからない」「セミナーに参加したいけど高い」「地方なのでまわりに相談する人がいない」といったお悩みを解決します。共通の悩みを持った仲間と学び、助け合い、ノウハウを共有し、それぞれの目標に向かってがんばって行きましょう！ http://ec-campus.tv/

1. クリック率が倍になる！？
～ バナー作成テクニック講座 ～
株式会社アラタナ
赤木 裕輔
©aratana Inc.
〒880-0811
宮崎県宮崎市錦町1-10
宮崎グリーンスフィア壱番館５階
TEL:0985-23-3362(代表)
FAX:0985-22-8580

2. はじめまして！アラタナです。
©aratana Inc.
1

3. 様々な特徴
［第１部］はじめに（40分）19:00～19:40
・商品ページ作成のポイント・コツ（商品ページを作る上で重要なページ構成について）
・画像作成のポイント・コツ (画像素材の配置・フォント選びについて)
［第２部］ワークショップ（60分）19:40～20:40
・実際にパソコンを使ってバナーやページ作成を行ないます
［第３部］質疑応答（20分）20:40～21:00
・皆さまからのご不明点・ご質問にお答えします
©aratana Inc.
2

4. ［第１部］はじめに
1. 「買いたくなる」ページとは？
©aratana Inc.
3

5. はじめに ｜モノを買う時に考えること
©aratana Inc.
4

6. ベネフィットシーソー ｜五大ベネフィットと五大コスト
⇒値引き/おまけ/ポイント○倍
⇒かかる時間を減らす(例：新幹線/英語速聴)
⇒家まで配達/飲むだけダイエットなど手間を省く
⇒レシピの提案/コーディネート提案
⇒安心できる(例：安くないけど、なじみの店)
⇒楽しい！！(例：ディズニーランドの価値)
©aratana Inc.
5

7. ストーリー ｜商品ページで何を伝える？
【ベネフィット｜利益】
《要素》
・インパクトのある写真
どんな商品かな？
受け取ったお父さんから高レビュー続々
(送ったほうも送られたほうも嬉しい)
でもホント？
ランキング受賞、レビュー総数●●件突破
日本で●人のお父さんに届けられています
・商品から得られる価値が
分かりやすいキャッチ
★どんな人に、どう感じて
欲しいかがポイント！
【エビデンス｜証拠・実績】
【アドバンテージ｜競合優位性】
《要素》
・「地方紙」や「実店舗」の
賑わい具合などもOK
・競合とこういう点が異なるこう
いう点なら勝ってるという差別化
父の日ギフト用
焼酎セット希望
商品ページ
他店とどう違う？
最高品質だがまだ無名なので、有名なブラ
ンド焼酎よりも断然安い
買っても大丈夫？
無駄にならない？
日持ちがいいので長く楽しんで頂けます、
「私たちが作っています」、全国送料無料
【フィーチャー｜様々な特徴】
《要素》
・セット内容や商品特徴
・販売価格や送料など
・購入前の最後のひと押し
必要なのは「安心感」
⇒買って失敗しないか。
©aratana Inc.
6

8. 様々な特徴
限定型
・現品限り
・先着●●名様限定
・本日限り
・売り切れ間近！残り●個！
・ここでしか手に入らない！
価格型
・しかも今なら～
流行型
・今大人気の～
・メディアで話題沸騰中
・リピーター急増
・すっかりおなじみ
・まだ●●してないの？
・CMで話題の～
価格型
適時型
・父の日にまだ間に合う！
・冬に備えて～
・夏まであと3ヵ月！
価格型
・締切迫る！
価格型
・【激安】●●％OFF
・通常価格●●円⇒●●円
・～より安い！
・同じ買うなら～
©aratana Inc.
・【訳あり】アウトレット
・●％増量中
・赤字覚悟
・メーカーだから出来る価格
価格型
7

9. 証拠 ＆ 競合優位性 ｜どこが他商品より優れているの？
販売実績系
・売れに売れて、累計販売個数●●個突破！
・○○人の方から嬉しいレビューを頂きました！
メディア/認知度/ランキング系
・雑誌●●の●月号に掲載されました！
・知ってる人は知っている・・・クチコミで大爆発！
・○週連続○○ランキング受賞中！
他の●●とどこが違うの？
①～
テキストテキスト
写真
②～
テキストテキスト
・今大人気の～
・メディアで話題沸騰中
・リピーター急増
・すっかりおなじみ
・まだ●●してないの？
・CMで話題の～
価格型
レア型
・マニア必見/通のあなたに
・プレミア必死
・史上初登場の～
・滅多にお目にかかれない幻の～
価格型
写真
③～
テキストテキスト
流行型
写真
だから、選ばれ続けているんです！
©aratana Inc.
8

10. 利益
｜購入後に得られる「幸せ」を伝える
解決型
具体的なキャッチコピー
・○○な悩み、解決します。
例)「ダイエットしたいけど運動は苦手・・・」
そんなお悩み、解決します。
例)「初めてのお中元・・・何を送れば大丈夫だろう？」
そんなお悩み、解決します。
・○○なアナタ、必見です。
・これで悩みを解決！
・～するだけでOK
・～なんて不要！
・簡単に～できる！
・～で困っていませんか？
・使い勝手が良い！
・これで解放！
・やっと～出来る
・今までの～に満足できない方
・悩みにおさらば
・もう気にならない
・頼りになる味方！
例)お子様が魚嫌いで困っているお母さん、必見です。
例)お弁当のおかずに毎回悩んでいるアナタ、必見です。
プチキャッチ+商品名+容量
写真
価格
©aratana Inc.
9

11. 作成例
©aratana Inc.
10

12. ［第１部］はじめに
2. 画像作成のコツ
1. 目立たせる
2. 認識のしやすさ
3. メリハリ
4. 視線の流れ
5. 誘導
6. フォント
©aratana Inc.
11

13. 作成のポイント 1／目立たせる
©aratana Inc.
12

14. 作成のポイント 2／認識のしやすさ
©aratana Inc.
13

15. 作成のポイント 3／メリハリ
©aratana Inc.
14

16. 作成のポイント 4／視線の流れ
©aratana Inc.
15

17. 作成のポイント 5／誘導
©aratana Inc.
16

18. 作成のポイント 6／フォント
©aratana Inc.
17

19. ［第１部］はじめに
3. 書体の選び方
©aratana Inc.
18

20. 書体を選ぶ時の基準
「視認性」
見やすさの度合い
「可読性」
読みやすさの度合い
「判読性」
文章を判断・推察しながら読むこと
©aratana Inc.
19

21. 書体を選ぶ時の基準
日本語の文字
©aratana Inc.
20

22. 書体を選ぶ時の基準
タイトル＝「太い」ゴシック体
©aratana Inc.
21

23. 書体を選ぶ時の基準
長い文章…「細い書体」＝「明朝体」
©aratana Inc.
22

24. 書体を選ぶ時の基準
「読み間違えを減らす努力」
＝「判読性を高める努力」
✖
©aratana Inc.
✖
23

25. 書体を選ぶ時の基準
視認性・可読性・判読性
◯
メイリオ、ヒラギノ角ゴ
✕
MSゴシック、MS明朝
→アンチエイリアス処理がうまくできない
アンチエイリアス / コンピュータの画面に画像を表示する際に、斜め線や曲線などに発生する階段状のギザギザ(ジャギ)を目立たなくする技法。
©aratana Inc.
24

26. 書体を選ぶ時の基準
文字は歪めないのが基本！
©aratana Inc.
25

27. 書体を選ぶ時の基準
袋文字を活用する！
©aratana Inc.
26

28. 書体を選ぶ時の基準
数字は大きく、単位は小さく！
©aratana Inc.
27

29. ［第２部］ワークショップ
©aratana Inc.
28

30. チラシやPOP = プリンターで印刷
©aratana Inc.
29

31. WEBページ = HTMLでコーディング
©aratana Inc.
30

32. 「画像」と「HTML(商品)ページ」の違い
画像
©aratana Inc.
HTML
商品ページ
31

33. 「HTML(商品)ページ」
©aratana Inc.
32

34. 「デザイン」と「HTML」をカンタンに作成するツール
©aratana Inc.
33

35. ページ作成とバナー作成に特化したデザインツール
デザインツール
Illustrator, Photoshop …etc
Webオーサリングツール
Dreamweaver, ホームページ・ビルダー …etc
※DeNA ショッピング・Amazonについてはバナー作成のみの対応です
©aratana Inc.
34

36. ページ作成とバナー作成に特化したデザインツール
デザインツール
Webオーサリングツール
※DeNA ショッピング・Amazonについてはバナー作成のみの対応です
©aratana Inc.
35

37. 【ページをつくる】HTMLは自動生成されるので貼り付けのみでページが反映
HTMLはコピー＆ペーストのみの操作なので専門知識は一切不要です。
SketchPageの編集画面でブロックを追加してページレイアウトを構成しますので直感で操作できます。
また、HTMLはソフト側で自動生成しますのでユーザー側ではタグは一切操作しません。
©aratana Inc.
36

38. 【バナーをつくる】約4,000種類のスタンプ・テンプレート(商品ページ・バナー)
POINT
SketchPageのスタンプはベクターデータという特殊な形式を採用してい
るので拡大・縮小・回転をしても画質が劣化しないという特徴があります。
また、分解・色の変更・合成もできますので自由に再編集が可能です。
スタンプ・テンプレートの追加アップデートは随時行っております。
©aratana Inc.
37

39. 実際に操作してみましょう
©aratana Inc.
38

40. ©aratana Inc.
39

41. ©aratana Inc.
40