Weekly JStudy. #002（2021.04.25）

Webフロントエンドまわりを中心に1週間で学びを得たことを記録する週刊ブログです。 今週はマーケティング関連の本を読んでいたので、マーケティングまわりの学びもメモってます。

videoタグの動画の読み込み方

• preloadとautoPlay属性によって読み込み方が変わる
• preload
  • none: 全く事前読み込みしない
  • metadata: メタデータだけ事前読み込みする
  • auto: 動画ファイル全体を事前読み込みする
  • デフォルト値はブラウザによって異なる
• autoPlay
  • preload以上の優先度をもっている
  • autoPlay属性を使用した場合、preload="auto"になる
• インスタのストーリーの様な動画の自動再生はするが、連打操作によって動画が次々と読み込まれるような機能を実装する場合、素直にautoPlay属性を使用すると連打操作によってユーザーに見られることがないような動画をファイル全体で読み込んでしまい、次第にパフォーマンスが落ちていくという現象が起きる。
  • そもそも連打による動画の読み込みを間引く処理を入れるか、HTMLMediaElementのload()やplay()メソッドを駆使して、autoPlay属性のような機能を自前で実装する必要がありそう。

参考文献

• <video>: The Video Embed element - MDN Web Docs
• HTMLMediaElement - MDN Web Docs

---

スマホを使ってlocalhost環境のデバッグをする方法

• Dev ToolsやSimulatorでスマホの環境に寄せてデバッグすることはできるが、レンダリングエンジンが異なるため、実機で起動すると意図と異なる挙動をするときがある（特にwebkit）
• Android端末かiOS端末かによってデバッグする方法が異なる
• Android端末
  • 端末をPCにつなぎ、PC側でChromeを起動する
  • chrome://inspectにアクセスし、ポートフォワーディング設定をする
• iOS端末
  • 端末とPCを同じWi-Fiに接続する
  • 端末のプロキシを手動で設定し、PCのIPアドレスと接続したいポート番号にする
  • 端末をPCにつなぎ、safariでlocalhostにアクセスし、PC側でもsafariを開き、開発メニューからWebインスペクタを起動する

参考文献

• localhost をスマホ実機で確認する方法 - Qiita

---

Androidの一部環境で、loadedmetadataのタイミングで動画の長さを取得できない

• PCやiOSでは、loadedmetadataタイミングで動画の長さを取得することができた
• Androidも取れる環境と取れない環境があるっぽい（詳しい調査はできていない）
• 動画の長さはdurationchangeのタイミングで取得すれば間違いがないよ

参考文献

• Android video.duration does not load until video.play() - stackoverflow

---

個人でも実践できるマーケティング手法・用語

• 個人開発でお金を稼いでみたいとは思いつつ、プロダクトの広め方・売り方を知らなすぎる、大企業のマーケティングの真似はお金がかかりすぎてできないなあとなり、個人で実践できるマーケティング手法ってどんなのがあるんだろうと思い本を購入
• 3C分析
  • 自社(Company)、顧客(Customer)、競合(Competitor)をそれぞれリサーチし、戦略を考える分析手法
  • 自社と顧客の円が重なる部分に位置するプロダクトをつくることができれば最高
  • それが更に競合の円には入っていないようなものであればなお最高
• STP分析
  • 「すべての顧客を狙った商品は誰からも必要とされない」ので、どんな顧客にどのような立ち位置でプロダクトをアピールしていくか決定していく分析手法
  • セグメンテーション（Segmentation）
    • 性別・年齢・居住地域・年収・職業・家族構成など人口統計学な指標で、市場に散らばる顧客をグルーピングしていく
  • ターゲティング（Targeting）
    • グルーピングした群の中のどこを攻めていくか決定する
    • ターゲティングは知っているひとりの顔が浮かぶまで徹底的に
  • ポジショニング（Positioning）
    • 自社のプロダクトをXY軸平面上に位置付けて、他社との違いを明確にする
    • 2軸を何にするかはとても重要
      • コツは顧客がそのプロダクトに求めるニーズを軸にとること
• 4P分析
  • どんな商品(Product)を、いくら(Price)で、どこ(Place)で、どのように(Promotion)売るか戦略を策定するための分析手法
  • Product
    • 顧客が手に入れられる価値全て（売っている商品そのものだけでなく、店の空間や接客サービスといったものも含まれる）
  • Price
    • お金の支払い方法（割引サービスや会員制度といったものも含まれる）
  • Place
    • 商品をどこで手に入れられるのか（実店舗？オンライン？）
  • Promotion
    • 「顧客とのコミュニケーション全般」を指す
    • 何もテレビCMや看板などお金のかかる広告だけではない（SNSやブログでの情報発信など）
    • 大切なのは、「誰に何をどうやって伝えるか」を考えること
• 消費者行動モデル
  • 時の流れともに少しずつ形態が変わっている
  • 時代に合わせた消費者行動モデルに則って、顧客が進む仕掛けを用意することが、マーケティング戦略の肝
  • AIDMA
    • 1920年代に提唱され、100年にわたって知られている昔ながらの基本モデル
    • まだインターネットがなく、テレビCMや看板の広告しかなかった時代
    • ①Attention（注目）→②Interest（関心）→③Desire（欲求）→④Memory（記憶）→⑤Action（行動）
  • AISAS
    • ①Attention（注目）→②Interset（関心）→③Search（検索）→④Action（行動）→⑤Share（情報共有）
    • インターネット時代に入り、AIDMAでは説明できなくなって新たに提唱されたモデル
    • 顧客の動きが③Search（検索）⇄⑤Share（情報共有）を繰り返す場合がある
  • SIPS
    • SNSが広がったことで登場したモデル
    • ①Sympathize（共感）→②Identify（確認）→③Participate（参加）→④Share&Spread（共有・拡散）
• クロスSWOT分析
  • 自社の現状を分析し、今後の戦略を検討するためのフレームワーク
  • 内部要因の強み（Strength）・弱み（Weakness）、外部要因の機会（Oppotunity）・脅威（Threat）を書き出す
    • 強み（Strength）: 自社のプロダクトを顧客が利用する理由となる長所
    • 弱み（Weakness）: 競合と比較して劣っている部分
    • 機会（Oppotunity）: 外部環境の変化で、自社のビジネスチャンスとなり得る要因
    • 脅威（Threat）: 競合の同行など、自社の目標達成を阻害し得る要因
  • 4要素の各組み合わせごとに施策を考える
    • 強みx機会→積極的な施策、自社のよいところを更に伸ばす施策
    • 強みx脅威→差別化の施策
    • 弱みx機会→弱点の強化策
    • 弱みx脅威→防衛策・撤退

参考文献

• 弱者でも勝てるモノの売り方 お金をかけずに売上を上げるマーケティング入門