PWAとプロダクトマネジメント

by Shumpei Shiraishi

Slide 1

Slide 1 text

CONFIDENTIAL PWA Night Conference 2021 株式会社テックフィード代表取締役CEO 白石俊平 1 TechFeedリニューアルの裏側から学ぶ PWAとプロダクトマネジメント

Slide 2

Slide 2 text

CONFIDENTIAL 2 白石を表す3つのキーワード: 1. エンジニア…Google／Microsoft公認エキスパートを歴任、著書多数 2. コミュニティ…7,000名超のエンジニアコミュニティ「html5j」を指揮、200回以上のイベントを企画。スポンサー企業はのべ200社以上。 3. スタートアップ…株式会社テックフィード代表取締役 CEO、TechFeedプロダクトマネージャー／UXデザイナー白石俊平株式会社テックフィード代表取締役CEO

Slide 3

Slide 3 text

CONFIDENTIAL 3 本日は、TechFeed=PWAを題材に、  PWAとプロダクトマネジメント  のお話をします。 

Slide 4

Slide 4 text

CONFIDENTIAL 4 海外情報がスイスイ読める！世界中から技術情報が集まる。人と、企業とつながる。エンジニアがエンジニアのために作った。エンジニア特化型オンラインコミュニティサービス。 TechFeed https://techfeed.io

Slide 5

Slide 5 text

CONFIDENTIAL TechFeedは、 1万7千人以上のエンジニアが使用するオンラインコミュニティです（ 2021/6時点）コミュニティ開始日運営期間（2021/02時点）人数 TechFeed 2020/07 1年3ヶ月 17,832人コミュニティA 2008/09 約12年 20,606人コミュニティB 2010/02 約10年 3,450人コミュニティC 2009/07 約11年 6,639人日本最大級のエンジニアコミュニティとの比較日本で今一番ホットなエンジニアコミュニティ。  5

Slide 6

Slide 6 text

CONFIDENTIAL 6 TechFeedは、上から下までweb技術  バックエンド Node/TypeScript NestJS TypeORM Express… フロントエンド TypeScript Angular Ionic Cordova ... ... デスクトップモバイルアプリ／ PWA

Slide 7

Slide 7 text

CONFIDENTIAL 7 PWAとプロダクトマネジメント  PWA / web技術は  2020年代のRuby on Railsになれる！ 

Slide 8

Slide 8 text

CONFIDENTIAL 8 PWA / web技術は  2020年代のRuby on Railsになれる！  ● とにかくラピッドに開発できる  ● ユーザー価値の作り込みに集中できる  ● 開発者も多い 

Slide 9

Slide 9 text

CONFIDENTIAL 9 TechFeedのリニューアル頻度  Product Market Fit (PMF) 目指してピボットスパイラル中  2020年 TechFeed Pro クローズドβ リリース 1月 TechFeed Pro 正式リリース 3月ストーリーズ 9月ソーシャル化 12月ヘッドライン 3月海外情報読むならテックフィード！ 6月 2021年

Slide 10

Slide 10 text

CONFIDENTIAL 10 TechFeedのリニューアル頻度  Product Market Fit (PMF) 目指してピボットスパイラル中  2020年 TechFeed Pro クローズドβ リリース 1月 TechFeed Pro 正式リリース 3月ストーリーズ 9月ソーシャル化 12月ヘッドライン 3月海外情報読むならテックフィード！ 6月 2021年これほどの頻度でリニューアルできるのは、上から下までweb技術で開発しているから

Slide 11

Slide 11 text

CONFIDENTIAL 11 TechFeedのリニューアル頻度  Product Market Fit (PMF) 目指してピボットスパイラル中  2020年 TechFeed Pro クローズドβ リリース 1月 TechFeed Pro 正式リリース 3月ストーリーズ 9月ソーシャル化 12月ヘッドライン 3月海外情報読むならテックフィード！ 6月 2021年最新リニューアルを通じて、PWAとPdMを語るこれほどの頻度でリニューアルできるのは、上から下までweb技術で開発しているから

Slide 12

Slide 12 text

CONFIDENTIAL 12 6/24 リニューアルの概要  海外のテック情報をスイスイ読める！    TechFeedが海外情報に特化した機能を多数搭載して大幅リニューアル。    「海外情報の約97%は日本で知られず終わっている」という状況の改善を目指す 

Slide 13

Slide 13 text

CONFIDENTIAL 13 プロダクトマネジメント・トライアングル  ● 開発  ● ユーザー  ● ビジネス  これらをうまくバランスさせるのがプロダクトマネージャーの役割 

Slide 14

Slide 14 text

CONFIDENTIAL 14 リニューアルのプロダクトマネジメント  各ステークホルダーとの対話を順に重ねて進めていく  1. ビジネス設計 2. UX/UIデザイン 3. 開発 Business User Development

Slide 15

Slide 15 text

CONFIDENTIAL 15 1. ビジネス設計  1. ユーザーをもっと増やしたい  a. ユーザーとは誰か？→エンジニアの皆様  2. エンジニアの皆様にさらなる価値を提供するには？  a. 私たちの提供する価値とは？  b. →エンジニアの皆様に、最高の情報をお届けすること  3. エンジニアにとっての最高の情報源とは…？ 

Slide 16

Slide 16 text

CONFIDENTIAL 16 なぜTechFeedが必要か  日本で読まれていない、良質な英語記事がたくさんある  TechFeedに集まっている英語記事200件を調査     ● 読むに値する（※）記事: 111件  ● うち、日本で紹介されていた記事:   3件（2.7%）    良質な英語記事の約97%は日本でコンテンツ化されていない。    ※調査員の主観により判断   良質、かつ日本でコンテンツ化されていない

Slide 17

Slide 17 text

CONFIDENTIAL 17 なぜTechFeedが必要か  英語のほうが、しっかりした読み物が多い  エンジニア向けのコンテンツに絞って、読み物／ニュース／TIPSに分類。    日本語では、TIPSが50%を占め、読み応えのある読み物は31.8%に留まる。  一方英語では読み物が56%を占める。    英語のほうが、しっかりした読み物が多い。 

Slide 18

Slide 18 text

CONFIDENTIAL 18 なぜTechFeedが必要か  日本人は英語をほとんど読まない  TechFeedでは従来より、自動翻訳やエキスパートのコメントなど、「英語記事を読む」環境は整えているものの、英語記事のクリック率は日本語記事の約1/5に留まる  日本語記事クリック率英語記事クリック率 6.2% 1.4%

Slide 19

Slide 19 text

CONFIDENTIAL 海外には良質な情報が溢れている。  が、それらを得るにも、得た情報を広めるにも、ハードルがあった。  19 TechFeedで世界をこう変えたい  海外情報一部のエンジニア日本のユーザーテックメディア

Slide 20

Slide 20 text

CONFIDENTIAL 1. 「良質な海外情報を日本に紹介する」ことに特化したサービスと、それを行う人々のコミュニティを作る   2. 日本のエンジニアリングスキルの底上げ   3. 「日本を世界一のIT国家にする」（TechFeedのミッション）   20 TechFeedで世界をこう変えたい  海外情報日本のユーザー TechFeed コミュニティエキスパート / インフルエンサー

Slide 21

Slide 21 text

CONFIDENTIAL 21 PWAとビジネス設計  ビジネス的な方針として、「良質な海外情報をユーザーに届ける」ことは固まった。  1. ビジネス設計 2. UX/UIデザイン 3. 開発 Business User Development

Slide 22

Slide 22 text

CONFIDENTIAL 22 PWAとUX/UIデザイン  どうやってユーザーに価値を届けるか？  1. ビジネス設計 2. UX/UIデザイン 3. 開発 Business User Development

Slide 23

Slide 23 text

CONFIDENTIAL 23 PWAとUX/UIデザイン  仮説  ● ペルソナ  ● カスタマージャーニー  ● デザイン  検証  ● ユーザーヒアリング  ● ユーザーテスト  ● モック 

Slide 24

Slide 24 text

CONFIDENTIAL 24 PWAとUX/UIデザイン  仮説  ● ペルソナ  ● カスタマージャーニー  ● デザイン  検証  ● ユーザーヒアリング  ● ユーザーテスト  ● Webブラウザ上で行えるのがとにかく楽！ ○ リモートでのユーザーテストも容易 ● 仮説検証サイクルが速い！ ○ 「次のユーザーテストまで2時間」ってタイミングでも修正してデプロイできる

Slide 25

Slide 25 text

CONFIDENTIAL 25 PWAと開発  デスクトップ／モバイル両方の大幅リニューアルを、エンジニア1名が3週間で達成  1. ビジネス設計 2. UX/UIデザイン 3. 開発 Business User Development

Slide 26

Slide 26 text

CONFIDENTIAL 26 Before 

Slide 27

Slide 27 text

CONFIDENTIAL 27 After  実際のアプリ画面を御覧ください

Slide 28

Slide 28 text

CONFIDENTIAL 28 PWAとプロダクトマネジメント（まとめ）  プロダクトマネージャーとしての、体感的なコストで言うとこんな感じ  1. ビジネス設計 2. UX/UIデザイン 3. 開発 Business User Development 25% 50% 25% ユーザーの皆様のための価値を作り込むことに注力できた！

Slide 29

Slide 29 text

CONFIDENTIAL 29 PWAとプロダクトマネジメント  PWA / web技術は  2020年代のRuby on Railsになれる！ 

Slide 30

Slide 30 text

CONFIDENTIAL 30 PWA / web技術は  2020年代のRuby on Railsになれる！  ● とにかくラピッドに開発できる  ● ユーザー価値の作り込みに集中できる  ● 開発者も多い 

Slide 31

Slide 31 text

CONFIDENTIAL 31 PWA / web技術は  2020年代のRuby on Railsになれる！  ● とにかくラピッドに開発できる  ○ JavaScriptさえ知っていればフルスタックエンジニア（弊社では）  ○ webアプリの「デプロイすれば即更新」「レスポンシブ性能」強すぎる  ● ユーザー価値の作り込みに集中できる  ○ 開発の（マネジメント）コストが圧倒的に低い  ○ デフォルトでクロスプラットフォームなのも楽すぎる  ● 開発者も多い  ○ 採用コスト低 

Slide 32

Slide 32 text

CONFIDENTIAL 32 ご清聴ありがとうございました。  海外情報をスイスイ読める！  全く新しくなったTechFeedを、ご愛顧のほどよろしくお願いいたします。  TechFeed https://techfeed.io