Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Webデザイナーのためのマーケティング基礎講座

83,905 views

Published on

  • Be the first to comment

Webデザイナーのためのマーケティング基礎講座

  1. 1. Webデザイナーのための マーケティング基礎講座 Marketing Basic Course for Web Designers
  2. 2. ∼自己紹介∼ 名前: 枌谷 力(そぎたに つとむ) 所属: 株式会社ベイジ 職業: 代表/プロデューサー/アートディレクター 略歴: 立教大学文学部史学科卒。1997年∼2001年まで株式会社 NTTデータでコンサル営業に従事。その後、Web業界に転 職。Webデザイナー/Webディレクターとして6年間制作 会社でWebデザインやWebビジネスの提案業務に携わる。 2007年にフリーランスとして独立。2010年に株式会社ベ イジ設立。現在に至る。 Copyright©baigie inc. All rights reserved.
  3. 3. ∼本講義のゴール∼ “マーケティング視点”で デザインが見れるようになる キッカケを作ること Copyright©baigie inc. All rights reserved.
  4. 4. 第1章 序章 Introduction Copyright©baigie inc. All rights reserved.
  5. 5. マーケティングとは? Definition of Marketing. Copyright©baigie inc. All rights reserved.
  6. 6. マーケティング【marketing】とは、顧客が 真に求める商品やサービスを作り、その情報を 届け、顧客がその商品を効果的に得られるよう にする活動の全てを表す概念 出典:wikipedia Copyright©baigie inc. All rights reserved.
  7. 7. マーケティングと Webデザインの関係は? Relationship of Marketing and Web Design. Copyright©baigie inc. All rights reserved.
  8. 8. マーケティング戦略 商品開発 テレビ 広告 新聞 PR 雑誌 ネット ・・・ 交通広告 ・・・ Webサイト バナー SNS モバイル ・・・ コンテンツ 機能 Webデザイン テクノロジー ・・・ Copyright©baigie inc. All rights reserved.
  9. 9. マーケティングを理解してないと キレイなWebデザインはできても ビジネスの目的に合致した 正しいWebデザインはできない。 Copyright©baigie inc. All rights reserved.
  10. 10. マーケティング視点でデザインができないと・・・ ■ デザインに説得力がでない。 ■ 具体的な指示がないとデザインができない。 ■ 自分でアイデアを出しても提案できない。 ■ 説明やプレゼンができない。 ■ キャリアアップができない。 Copyright©baigie inc. All rights reserved.
  11. 11. マーケティング視点の デザインとは? Web Design from Marketing Logic. Copyright©baigie inc. All rights reserved.
  12. 12. 【マーケティング視点じゃないデザイン】 × 青色が映えるから、補色の黄色を使った。 × 全体が硬いイメージになりすぎたから、角丸にした。 × レイアウトが窮屈だから、余白を多めに使った。 × キレイな写真だったので、メインビジュアルにした。 × デザイナーの間で流行ってる書体だから、採用した。 × スタイリッシュだから、海外サイトのようにした。 Copyright©baigie inc. All rights reserved.
  13. 13. 部分最適の判断基準としては 必ずしも間違ってはいないが、 これらはデザイン視点であって、 マーケティング視点ではない Copyright©baigie inc. All rights reserved.
  14. 14. 【マーケティング視点のデザイン】 〇 ターゲットに対し、誠実なイメージをより強く訴求した方がいい ため、青の面積を広めに使った。 〇 競合とのイメージ面での差別化が不可欠であるため、競合が使っ ている都市イメージのビジュアル以外から選んだ。 〇 論理的な説明が必要な種類の商材だから、ファーストビューでは コピーがまず飛び込むデザインにした。 〇 女性層を獲得するためのキャンペーンだから、曲線を活かした女 性的なフォルムを多用すべきと判断した。 Copyright©baigie inc. All rights reserved.
  15. 15. マーケティング視点のデザインでは デザインの理屈ではなく ビジネスの理屈から解を導くから デザインに説得力が出る。 Copyright©baigie inc. All rights reserved.
  16. 16. マーケティングを勉強して できること/できないこと Ability and Inability of Marketing Study. Copyright©baigie inc. All rights reserved.
  17. 17. マーケティングを勉強してできるようになること ■ ビジネス視点でデザインが考えられるようになる。 ■ ゴールを理解してデザインができるようになる。 ■ 説得力のあるデザインができるようになる。 ■ 論理的に思考を組み立てることができるようになる。 ■ デザインの大局的な意味が見えてくる。 ■ オリエンからビジネス的な文脈が見えてくる。 ■ ビジネスパーソンと対等に話ができるようになる。 Copyright©baigie inc. All rights reserved.
  18. 18. マーケティングを勉強してできるように“ならない”こと ■ デザインがうまくなる。 ■ デザインのセンスが養われる。 ■ 良い写真やイラストを選べるようになる。 ■ デザインのトレンドを掴めるようになる。 ■ Photoshopなどのアプリの使い方がうまくなる。 ■ デザインの知識が増えていく。 Copyright©baigie inc. All rights reserved.
  19. 19. マーケティング視点を身に付けても 今日、明日の仕事を楽にはしてくれない。 ただし、キャリアを長い目で見たとき、 必ず良い影響を与えてくれる。 Copyright©baigie inc. All rights reserved.
  20. 20. 第2章 マーケティング概要 Outline Of Marketing Copyright©baigie inc. All rights reserved.
  21. 21. マーケティング視点を身に付ける方法 1. マーケティングのプロセスを知る 2. プロセスに登場する視点、切り口で デザインを考える Copyright©baigie inc. All rights reserved.
  22. 22. 5STEP マーケティングの 01 分析する∼アナライズ【Analyze】 02 戦略を決める∼ストラテジー【Strategy】 03 対象を決める∼ターゲティング【Targeting】 04 位置を決める∼ポジショニング【Positioning】 05 伝える∼コミュニケーション【Communication】 Copyright©baigie inc. All rights reserved.
  23. 23. 5STEP マーケティングの 01 分析する∼アナライズ【Analyze】 02 戦略を決める∼ストラテジー【Strategy】 03 対象を決める∼ターゲティング【Targeting】 04 位置を決める∼ポジショニング【Positioning】 05 伝える∼コミュニケーション【Communication】 Copyright©baigie inc. All rights reserved.
  24. 24. 3領域 分析の マクロ環境 外部要因 内部要因 Copyright©baigie inc. All rights reserved.
  25. 25. 企業やサービスの内側にある要因 商品 ラインナップ 技術力 ブランド 内部要因 販売体制 組織力 資金力 Copyright©baigie inc. All rights reserved.
  26. 26. 企業やサービスを取り巻く業界内の環境要因 市場 (顧客) 供給者 外部要因 代替 Copyright©baigie inc. All rights reserved. 競合
  27. 27. 企業やサービスに影響を与えている非常に大きな環境要因 人口動態 社会・文化 経済 マクロ環境 政治・法律 自然環境 技術の趨勢 Copyright©baigie inc. All rights reserved.
  28. 28. 実践 Practice Copyright©baigie inc. All rights reserved.
  29. 29. 競合 代替 Copyright©baigie inc. All rights reserved.
  30. 30. Copyright©baigie inc. All rights reserved.
  31. 31. 競合にも代替にも勝てる点 ■ 野菜が手軽に食べられる。 ■ 野菜がおいしく食べられる。 ■ 野菜が低カロリーで食べられる。 ■ 野菜が素早く食べられる。 Copyright©baigie inc. All rights reserved.
  32. 32. Copyright©baigie inc. All rights reserved.
  33. 33. Panasonic LUMIX LX7 Copyright©baigie inc. All rights reserved.
  34. 34. ■ラインナップ LUMIXシリーズのハイエンド機種 ■ブランド LUMIX = 浜崎あゆみ?綾瀬はるか? ■技術 コンデジトップクラスの明るさ ■体制 ライカとの提携関係 Copyright©baigie inc. All rights reserved.
  35. 35. 弊社 実績 Copyright©baigie inc. All rights reserved.
  36. 36. デザイナーが持つべき視点 このWebサイトは、どういうマクロ環境のもとで 必要とされているのだろうか? Webサイトには、どのような競合、代替、顧客、 供給先が存在しているのだろうか? Webサイトを作る企業には、どういう事情、強み、 バックボーンがあるのだろうか? 外部要因・内部要因から発想していくと、どうい うデザインになるだろうか? Copyright©baigie inc. All rights reserved.
  37. 37. 5STEP マーケティングの 01 分析する∼アナライズ【Analyze】 02 戦略を決める∼ストラテジー【Strategy】 03 対象を決める∼ターゲティング【Targeting】 04 位置を決める∼ポジショニング【Positioning】 05 伝える∼コミュニケーション【Communication】 Copyright©baigie inc. All rights reserved.
  38. 38. ~戦略の全体像~ 多角化 集中と選択 Divarsification Concentration and Choice ~競争優位の戦略~ コスト リーダーシップ Cost Leadership Copyright©baigie inc. All rights reserved. 差別化 ニッチ Differentiation Niche
  39. 39. 多角化 Divarsification 事業やビジネス領域を同時に広げていく経営戦略。 ■ ソニー ■ トヨタ自動車 ■ 東急グループ ■ NTTグループ ■ 花王 ■ JT ■ 東芝 ■ ソフトバンク Copyright©baigie inc. All rights reserved.
  40. 40. コストリーダーシップ戦略 Cost Leadership より低価格で提供することで優位に立つ戦略。 ■ 西友 ■ すき家 ■ ヤマダ電機 ■ マクドナルド ■ ユニクロ ■ ニトリ ■ エイサー ■ スシロー Copyright©baigie inc. All rights reserved.
  41. 41. 差別化戦略 Differentiation 価格以外の差別化ポイントで優位に立つ戦略。 ■ アップル ■ スターバックス ■ モスバーガー ■ 無印良品 ■ 任天堂 ■ オリエンタルランド ■ 伊勢丹 ■ パタゴニア Copyright©baigie inc. All rights reserved.
  42. 42. ニッチ戦略 Niche 他社との競争のない狭い分野を狙う戦略。 ■ ヤマト運輸 ■ アスクル ■ フェラーリ ■ ローム(半導体) ■ 日本電産(モーター) ■ マニー(医療器具) ■ かどや製油(ゴマ製品) ■ タカタ(安全器具) Copyright©baigie inc. All rights reserved.
  43. 43. 実践 Practice Copyright©baigie inc. All rights reserved.
  44. 44. ~ Question ~ 多角経営企業の コーポレートサイトは どうなりますか? Copyright©baigie inc. All rights reserved.
  45. 45. Copyright©baigie inc. All rights reserved.
  46. 46. ~ Question ~ コストリーダーシップ戦略を とっている企業・サービスの サイトはどうなりますか? Copyright©baigie inc. All rights reserved.
  47. 47. Copyright©baigie inc. All rights reserved.
  48. 48. Cocorose London Copyright©baigie inc. All rights reserved.
  49. 49. ■ 折り畳みができる ■ 折り畳めるけどオシャレ ■ 英国のセレブが愛用 Copyright©baigie inc. All rights reserved.
  50. 50. 弊社 実績 Copyright©baigie inc. All rights reserved.
  51. 51. 超音波溶着 微細な超音波振動と加圧力によって 瞬時に溶融し、接合する加工技術 Copyright©baigie inc. All rights reserved.
  52. 52. 弊社 実績 Copyright©baigie inc. All rights reserved.
  53. 53. デザイナーが持つべき視点 企業の基本的な経営方針は多角化なのか、集中と 選択なのか? コストリーダーシップ戦略であるならば、価格を 前面に出す必要はないのだろうか? 差別化戦略であるなら、差別化ポイントは何で、 どのような優先順位で表現すべきか? ニッチ戦略であれば、限定的なニーズに対して、 Webサイトはどうあるべきだろうか? Copyright©baigie inc. All rights reserved.
  54. 54. 5STEP マーケティングの 01 分析する∼アナライズ【Analyze】 02 戦略を決める∼ストラテジー【Strategy】 03 対象を決める∼ターゲティング【Targeting】 04 位置を決める∼ポジショニング【Positioning】 05 伝える∼コミュニケーション【Communication】 Copyright©baigie inc. All rights reserved.
  55. 55. ~ターゲティングの3つの視点~ デモグラフィック サイコグラフィック ニーズ・ウォンツ demographic Phycographic Needs,Wants Copyright©baigie inc. All rights reserved.
  56. 56. デモグラフィック Demographic 人口統計学的属性を基準にターゲットをセグメント化する 伝統的な手法 ■ 年齢 ■ 性別 ■ 職業 ■ 所得 ■ 学歴 ■ 地域 ■ 出身 ■ 国籍 ■ 婚姻歴 ■ 家族構成 Copyright©baigie inc. All rights reserved.
  57. 57. M1層 F2層 Copyright©baigie inc. All rights reserved.
  58. 58. ■ C1層 :4∼12歳の子供 ■ C2層 :13∼19歳の子供 ■ F1層 : 20∼34歳の女性 ■ F2層 : 35∼49歳の女性 ■ F3層 :50歳以上の女性 ■ M1層 :20∼34歳の男性 ■ M2層 :35∼49歳の男性 ■ M3層 :50歳以上の男性 Copyright©baigie inc. All rights reserved.
  59. 59. サイコグラフィック Phycographic ユーザの心理的特性の視点から、ターゲットをセグメント する手法 ■ ライフスタイル ■ 性格(キャラクター) ■ 価値観 ■ 態度(好意・批判) ■ 購買動機 ■ 利用頻度 ■ 趣味趣向 ■ 消費行動パターン Copyright©baigie inc. All rights reserved.
  60. 60. ニーズ・ウォンツ Needs and Wants 人々の潜在的・顕在的ニーズの種類によって、ターゲット をセグメントする手法 ■ 気軽に乗りたい ■ 丈夫な車がほしい ■ 安く乗りたい ■ 事故のリスクを少なく ■ 大人数で使いたい ■ 自己主張をしたい ■ 用途が多い方がいい ■ 環境にやさしい車がいい Copyright©baigie inc. All rights reserved.
  61. 61. 実践 Practice Copyright©baigie inc. All rights reserved.
  62. 62. ドイツの化粧品会社。日本では白髪 染めで有名。デモグラフィックでい うとどういうユーザがターゲット? Copyright©baigie inc. All rights reserved.
  63. 63. 30代後半以降の女性 Copyright©baigie inc. All rights reserved.
  64. 64. Copyright©baigie inc. All rights reserved.
  65. 65. 高級アイスクリームブランド。サイ コグラフィックでいうと、どういう ユーザがターゲット? Copyright©baigie inc. All rights reserved.
  66. 66. 甘いもの好き。充実感、達成感のあった 日に自分へのご褒美を買う人。少し高価 なスイーツを食べて、至福の時間を楽し む人がターゲット。 Copyright©baigie inc. All rights reserved.
  67. 67. Copyright©baigie inc. All rights reserved.
  68. 68. ■ PCで疲れないメガネがほしい ■ 軽くて壊れないメガネがほしい ■ スーツに似合うメガネがほしい Copyright©baigie inc. All rights reserved.
  69. 69. Copyright©baigie inc. All rights reserved.
  70. 70. デザイナーが持つべき視点 デモグラフィック、ライフスタイル、ニーズ・ ウィンツの、どれで考えられたターゲットか? デモグラフィックの場合、そこから落とし込んで ターゲットを絞り込んで考えられないか? ライフスタイルであれば、それに関連付けできる デザインが考えられないか? ニーズ・ウォンツであれば、ユーザのモチベー ションを高めるデザインはどういうのがいいか? Copyright©baigie inc. All rights reserved.
  71. 71. 5STEP マーケティングの 01 分析する∼アナライズ【Analyze】 02 戦略を決める∼ストラテジー【Strategy】 03 対象を決める∼ターゲティング【Targeting】 04 位置を決める∼ポジショニング【Positioning】 05 伝える∼コミュニケーション【Communication】 Copyright©baigie inc. All rights reserved.
  72. 72. ポジショニングとは どの領域のNo.1を目指すか ということ Copyright©baigie inc. All rights reserved.
  73. 73. 既存カテゴリのNo.1 既存のマーケットでNo.1になる。 Copyright©baigie inc. All rights reserved.
  74. 74. 新カテゴリのNo.1 新しいカテゴリを創出してNo.1になる。 Copyright©baigie inc. All rights reserved.
  75. 75. サブカテゴリのNo.1 既存カテゴリのサブカテゴリでNo.1になる。 Copyright©baigie inc. All rights reserved.
  76. 76. No.1のチャレンジャー No.1に立ち向かうチャレンジャーになる。 Copyright©baigie inc. All rights reserved.
  77. 77. 魅力的なフォロアー フォロアーであることを活用し、No.1を目指す。 Copyright©baigie inc. All rights reserved.
  78. 78. 実践 Practice Copyright©baigie inc. All rights reserved.
  79. 79. スマートフォン決済 新しいカテゴリのサービス。No.1 を目指して各社立ちあがったところ。 Copyright©baigie inc. All rights reserved.
  80. 80. Copyright©baigie inc. All rights reserved.
  81. 81. フェラーリに対するチャレンジャー Copyright©baigie inc. All rights reserved.
  82. 82. 弊社 実績 Copyright©baigie inc. All rights reserved.
  83. 83. フォロアー・チャレンジャーの 戦い方① 模倣する Copyright©baigie inc. All rights reserved.
  84. 84. リーダー:ポカリスエット Copyright©baigie inc. All rights reserved. フォロアー:アクエリアス
  85. 85. フォロアー・チャレンジャーの 戦い方② No.1、リーダーを リポジションングする Copyright©baigie inc. All rights reserved.
  86. 86. 伊右衛門 Copyright©baigie inc. All rights reserved. SUBWAY
  87. 87. デザイナーが持つべき視点 Webサイトは、どのポジションを狙ったものか? 新しいカテゴリのリーダーであれば、そのカテゴ リの価値はどのように伝えればいいか? チャレンジャーやフォロアーであれば、リーダー に対してどういう見せ方をすればいいか? そのブランドが目指しているポジションから、デ ザインのモチーフが生み出せないか? Copyright©baigie inc. All rights reserved.
  88. 88. 5STEP マーケティングの 01 分析する∼アナライズ【Analyze】 02 戦略を決める∼ストラテジー【Strategy】 03 対象を決める∼ターゲティング【Targeting】 04 位置を決める∼ポジショニング【Positioning】 05 伝える∼コミュニケーション【Communication】 Copyright©baigie inc. All rights reserved.
  89. 89. ~Webが関わる主なコミュニケーション方法~ 広告 PR SP 営業 クチコミ ダイレクト マーケティング キャンペーン イベント メディア運営 Copyright©baigie inc. All rights reserved.
  90. 90. 広告 テレビ、雑誌、ラジオ、交通機関など、人が集まるメディ アにお金を出して露出する。 ■ バナー広告 ■ ランディングページ Copyright©baigie inc. All rights reserved. ■ スペシャルサイト
  91. 91. Copyright©baigie inc. All rights reserved.
  92. 92. PR 話題を提供し、メディアに取り上げてもらう手法。直接的 にメディアにお金を払うことはない。 ■ プレスリリース ■ スペシャルサイト ■ PRイベントページ ■ Facebookページ Copyright©baigie inc. All rights reserved.
  93. 93. Copyright©baigie inc. All rights reserved.
  94. 94. SPツール 店頭ツール、サンプル、クーポンなど。コンタクトポイン トで直接的なコミュニケーションを行う。 ■ デジタルサイネージ ■ 店頭デモ ■ SP用アプリ ■ クーポンページ Copyright©baigie inc. All rights reserved.
  95. 95. Copyright©baigie inc. All rights reserved.
  96. 96. ダイレクトマーケティング メディアや営業などを介さず、また場所や時間的制約を受 けずに、直接コミュニケーションを行う。 ■ メールマガジン ■ 会員向けサイト ■ ステップメール ■ デジタルカタログ Copyright©baigie inc. All rights reserved.
  97. 97. Copyright©baigie inc. All rights reserved.
  98. 98. クチコミ 消費者から消費者にコミュニケーション。SNSの発達で注 目されているが、昔から存在する手法ではある。 ■ スペシャルサイト ■ Facebookページ ■ Twitterアカウント ■ Youtubeチャンネル Copyright©baigie inc. All rights reserved.
  99. 99. Copyright©baigie inc. All rights reserved.
  100. 100. 営業 営業担当のスタッフによって顧客とのコミュニケーション を行う。特にB2B商材などではメインとなる。 ■ B2Bサイト ■ 営業支援ツール ■ 会員向けサイト ■ 顧客管理ページ Copyright©baigie inc. All rights reserved.
  101. 101. 弊社 実績 Copyright©baigie inc. All rights reserved.
  102. 102. キャンペーン・イベント オープン/クローズドな各種キャンペーンやイベントを行 い、顧客との設定を創りだす。 ■ キャンペーンサイト ■ バナー広告 ■ Facebookページ ■ Twitterアカウント Copyright©baigie inc. All rights reserved.
  103. 103. Copyright©baigie inc. All rights reserved.
  104. 104. メディア運営 自らWebメディアを運営し、そこへの集客によってコミュ ニケーションを図る。 ■ コーポレートサイト ■ ブログ Copyright©baigie inc. All rights reserved. ■ 情報ポータル
  105. 105. Copyright©baigie inc. All rights reserved.
  106. 106. デザイナーが持つべき視点 作ろうとしているWebサイトは、どういったコ ミュニケーションの用途のためか? コミュニケーションの目的は何で、Webサイトで 優先されることはなんなのか? コミュニーションの目的を考えたときに、最適な デザインとはどういうものなのだろうか? Copyright©baigie inc. All rights reserved.
  107. 107. 第3章 最後に Closing Copyright©baigie inc. All rights reserved.
  108. 108. マーケティングの知識をデザイン に活かすための3つのポイント Copyright©baigie inc. All rights reserved.
  109. 109. 多面的に考える Copyright©baigie inc. All rights reserved.
  110. 110. 結論は自分で出す Copyright©baigie inc. All rights reserved.
  111. 111. 議論する Copyright©baigie inc. All rights reserved.
  112. 112. ご清聴ありがとうございました Copyright©baigie inc. All rights reserved.

×