クリック率が2倍になるバナー作成テクニック講座&ワークショップ

4,516 views

Published on

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

Published in: Education
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,516
On SlideShare
0
From Embeds
0
Number of Embeds
2,521
Actions
Shares
0
Downloads
28
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

クリック率が2倍になるバナー作成テクニック講座&ワークショップ

  1. 1. クリック率が倍になる!? ~ バナー作成テクニック講座 ~ 株式会社アラタナ 赤木 裕輔 ©aratana Inc. 〒880-0811 宮崎県宮崎市錦町1-10 宮崎グリーンスフィア壱番館5階 TEL:0985-23-3362(代表) FAX:0985-22-8580
  2. 2. はじめまして!アラタナです。 ©aratana Inc. 1
  3. 3. 様々な特徴 [第1部]はじめに(40分)19:00~19:40 ・商品ページ作成のポイント・コツ(商品ページを作る上で重要なページ構成について) ・画像作成のポイント・コツ (画像素材の配置・フォント選びについて) [第2部]ワークショップ(60分)19:40~20:40 ・実際にパソコンを使ってバナーやページ作成を行ないます [第3部]質疑応答(20分)20:40~21:00 ・皆さまからのご不明点・ご質問にお答えします ©aratana Inc. 2
  4. 4. [第1部]はじめに 1. 「買いたくなる」ページとは? ©aratana Inc. 3
  5. 5. はじめに |モノを買う時に考えること ©aratana Inc. 4
  6. 6. ベネフィットシーソー |五大ベネフィットと五大コスト ⇒値引き/おまけ/ポイント○倍 ⇒かかる時間を減らす(例:新幹線/英語速聴) ⇒家まで配達/飲むだけダイエットなど手間を省く ⇒レシピの提案/コーディネート提案 ⇒安心できる(例:安くないけど、なじみの店) ⇒楽しい!!(例:ディズニーランドの価値) ©aratana Inc. 5
  7. 7. ストーリー |商品ページで何を伝える? 【ベネフィット|利益】 《要素》 ・インパクトのある写真 どんな商品かな? 受け取ったお父さんから高レビュー続々 (送ったほうも送られたほうも嬉しい) でもホント? ランキング受賞、レビュー総数●●件突破 日本で●人のお父さんに届けられています ・商品から得られる価値が 分かりやすいキャッチ ★どんな人に、どう感じて 欲しいかがポイント! 【エビデンス|証拠・実績】 【アドバンテージ|競合優位性】 《要素》 ・「地方紙」や「実店舗」の 賑わい具合などもOK ・競合とこういう点が異なるこう いう点なら勝ってるという差別化 父の日ギフト用 焼酎セット希望 商品ページ 他店とどう違う? 最高品質だがまだ無名なので、有名なブラ ンド焼酎よりも断然安い 買っても大丈夫? 無駄にならない? 日持ちがいいので長く楽しんで頂けます、 「私たちが作っています」、全国送料無料 【フィーチャー|様々な特徴】 《要素》 ・セット内容や商品特徴 ・販売価格や送料など ・購入前の最後のひと押し 必要なのは「安心感」 ⇒買って失敗しないか。 ©aratana Inc. 6
  8. 8. 様々な特徴 限定型 ・現品限り ・先着●●名様限定 ・本日限り ・売り切れ間近!残り●個! ・ここでしか手に入らない! 価格型 ・しかも今なら~ 流行型 ・今大人気の~ ・メディアで話題沸騰中 ・リピーター急増 ・すっかりおなじみ ・まだ●●してないの? ・CMで話題の~ 価格型 適時型 ・父の日にまだ間に合う! ・冬に備えて~ ・夏まであと3ヵ月! 価格型 ・締切迫る! 価格型 ・【激安】●●%OFF ・通常価格●●円⇒●●円 ・~より安い! ・同じ買うなら~ ©aratana Inc. ・【訳あり】アウトレット ・●%増量中 ・赤字覚悟 ・メーカーだから出来る価格 価格型 7
  9. 9. 証拠 & 競合優位性 |どこが他商品より優れているの? 販売実績系 ・売れに売れて、累計販売個数●●個突破! ・○○人の方から嬉しいレビューを頂きました! メディア/認知度/ランキング系 ・雑誌●●の●月号に掲載されました! ・知ってる人は知っている・・・クチコミで大爆発! ・○週連続○○ランキング受賞中! 他の●●とどこが違うの? ①~ テキストテキスト 写真 ②~ テキストテキスト ・今大人気の~ ・メディアで話題沸騰中 ・リピーター急増 ・すっかりおなじみ ・まだ●●してないの? ・CMで話題の~ 価格型 レア型 ・マニア必見/通のあなたに ・プレミア必死 ・史上初登場の~ ・滅多にお目にかかれない幻の~ 価格型 写真 ③~ テキストテキスト 流行型 写真 だから、選ばれ続けているんです! ©aratana Inc. 8
  10. 10. 利益 |購入後に得られる「幸せ」を伝える 解決型 具体的なキャッチコピー ・○○な悩み、解決します。 例)「ダイエットしたいけど運動は苦手・・・」 そんなお悩み、解決します。 例)「初めてのお中元・・・何を送れば大丈夫だろう?」 そんなお悩み、解決します。 ・○○なアナタ、必見です。 ・これで悩みを解決! ・~するだけでOK ・~なんて不要! ・簡単に~できる! ・~で困っていませんか? ・使い勝手が良い! ・これで解放! ・やっと~出来る ・今までの~に満足できない方 ・悩みにおさらば ・もう気にならない ・頼りになる味方! 例)お子様が魚嫌いで困っているお母さん、必見です。 例)お弁当のおかずに毎回悩んでいるアナタ、必見です。 プチキャッチ+商品名+容量 写真 価格 ©aratana Inc. 9
  11. 11. 作成例 ©aratana Inc. 10
  12. 12. [第1部]はじめに 2. 画像作成のコツ 1. 目立たせる 2. 認識のしやすさ 3. メリハリ 4. 視線の流れ 5. 誘導 6. フォント ©aratana Inc. 11
  13. 13. 作成のポイント 1/目立たせる ©aratana Inc. 12
  14. 14. 作成のポイント 2/認識のしやすさ ©aratana Inc. 13
  15. 15. 作成のポイント 3/メリハリ ©aratana Inc. 14
  16. 16. 作成のポイント 4/視線の流れ ©aratana Inc. 15
  17. 17. 作成のポイント 5/誘導 ©aratana Inc. 16
  18. 18. 作成のポイント 6/フォント ©aratana Inc. 17
  19. 19. [第1部]はじめに 3. 書体の選び方 ©aratana Inc. 18
  20. 20. 書体を選ぶ時の基準 「視認性」 見やすさの度合い 「可読性」 読みやすさの度合い 「判読性」 文章を判断・推察しながら読むこと ©aratana Inc. 19
  21. 21. 書体を選ぶ時の基準 日本語の文字 ©aratana Inc. 20
  22. 22. 書体を選ぶ時の基準 タイトル=「太い」ゴシック体 ©aratana Inc. 21
  23. 23. 書体を選ぶ時の基準 長い文章…「細い書体」=「明朝体」 ©aratana Inc. 22
  24. 24. 書体を選ぶ時の基準 「読み間違えを減らす努力」 =「判読性を高める努力」 ✖ ©aratana Inc. ✖ 23
  25. 25. 書体を選ぶ時の基準 視認性・可読性・判読性 ◯ メイリオ、ヒラギノ角ゴ ✕ MSゴシック、MS明朝 →アンチエイリアス処理がうまくできない アンチエイリアス / コンピュータの画面に画像を表示する際に、斜め線や曲線などに発生する階段状のギザギザ(ジャギ)を目立たなくする技法。 ©aratana Inc. 24
  26. 26. 書体を選ぶ時の基準 文字は歪めないのが基本! ©aratana Inc. 25
  27. 27. 書体を選ぶ時の基準 袋文字を活用する! ©aratana Inc. 26
  28. 28. 書体を選ぶ時の基準 数字は大きく、単位は小さく! ©aratana Inc. 27
  29. 29. [第2部]ワークショップ ©aratana Inc. 28
  30. 30. チラシやPOP = プリンターで印刷 ©aratana Inc. 29
  31. 31. WEBページ = HTMLでコーディング ©aratana Inc. 30
  32. 32. 「画像」と「HTML(商品)ページ」の違い 画像 ©aratana Inc. HTML 商品ページ 31
  33. 33. 「HTML(商品)ページ」 ©aratana Inc. 32
  34. 34. 「デザイン」と「HTML」をカンタンに作成するツール ©aratana Inc. 33
  35. 35. ページ作成とバナー作成に特化したデザインツール デザインツール Illustrator, Photoshop …etc Webオーサリングツール Dreamweaver, ホームページ・ビルダー …etc ※DeNA ショッピング・Amazonについてはバナー作成のみの対応です ©aratana Inc. 34
  36. 36. ページ作成とバナー作成に特化したデザインツール デザインツール Webオーサリングツール ※DeNA ショッピング・Amazonについてはバナー作成のみの対応です ©aratana Inc. 35
  37. 37. 【ページをつくる】HTMLは自動生成されるので貼り付けのみでページが反映 HTMLはコピー&ペーストのみの操作なので専門知識は一切不要です。 SketchPageの編集画面でブロックを追加してページレイアウトを構成しますので直感で操作できます。 また、HTMLはソフト側で自動生成しますのでユーザー側ではタグは一切操作しません。 ©aratana Inc. 36
  38. 38. 【バナーをつくる】約4,000種類のスタンプ・テンプレート(商品ページ・バナー) POINT SketchPageのスタンプはベクターデータという特殊な形式を採用してい るので拡大・縮小・回転をしても画質が劣化しないという特徴があります。 また、分解・色の変更・合成もできますので自由に再編集が可能です。 スタンプ・テンプレートの追加アップデートは随時行っております。 ©aratana Inc. 37
  39. 39. 実際に操作してみましょう ©aratana Inc. 38
  40. 40. ©aratana Inc. 39
  41. 41. ©aratana Inc. 40

×