その内容、テキストで書く？動画で説明する？ 〜かんたん説明動画の作り方〜 / How to make videos easily

https://line.connpass.com/event/261765/

Transcript

1. その内容、テキストで書く？動画で説明する？ 〜かんたん説明動画の作り方〜 2022/10/13 LINE Technical Writing Meetup vol.17 @jumpei_ikegami
2. 本日のおしながき • 自己紹介 • 説明動画の流行 • がんばらない動画制作ノウハウ • 動画の使い所と注意点
3. 自己紹介 gami (@jumpei_ikegami) • 経歴 ◦ 2016〜: PLAID ▪ Customer Engineer ◦ 2015〜: 富士通 ▪ 行政系SE • 個人活動 ◦ YouTuber、noteマガジン連載、Udemy講師 ◦ [主催] Customer系エンジニア座談会 （毎月開催！） ◦ [執筆]『完全SIer脱出マニュアル』 ◦ [登壇] Developers Summit 2021 Summerなど色々 ◦ [Podcast] しがないラジオ パーソナリティ（休止中）
4. 自己紹介
5. Customer Engineerとしてやっていること • ミッション ◦ 「プロダクトと顧客のギャップを埋めることでプロダクトの価値を最大化する」 • 関わるプロダクト ◦ KARTE • 主な業務 ◦ サポート問い合わせの調査 ◦ 顧客へのプロダクト利用設計、仕様説明、デモ ◦ テンプレート実装、プロダクト改善 FB ◦ 社員のTechnical Enablement支援 ◦ サポートサイトやDeveloper Portalのドキュメント執筆 ◦ Academyコース（学習コンテンツ） の作成
6. KARTEとは？ • BtoB SaaSプロダクト • 主に、WebサイトやNativeApp向けに下記を提供 ◦ リアルタイムユーザー解析基盤 ◦ アクション配信基盤 • 要は、大量のユーザー行動データをリアルタイムに解析し、ルールベースで適切なアクションを配信するプ ラットフォーム • 利用企業の業界も利用者の職種も様々 ◦ Webマーケターなど非エンジニア職種の利用者 が多い
11. Customer Engineerとしてやっていること
12. Customer Engineerとしてやっていること
13. Customer Engineerとしてやっていること
14. 「説明動画」制作の実績 • 累計約200本！ • 趣味 ◦ YouTube: Webやデジタル関連知識の解説動画 ▪ 51本（字幕あり） ◦ Udemy: 非エンジニア向けの JavaScript入門 ▪ 63本（字幕あり） • 仕事 ◦ KARTE Academy: プロダクトや周辺技術の解説動画 ▪ 95本（字幕なし、テキスト併記）
15. 本日のおしながき • 自己紹介 • 説明動画の流行 • がんばらない動画制作ノウハウ • 動画の使い所と注意点
16. 説明動画が充実しているサービスの例 • 最近、動画によるオンボーディング に力を入れているサービスが増えている • エンジニア向けサービスより、 NoCodeツールなど非エンジニアもターゲットに含むサービス の方が多い印 象 • ドキュメントやリファレンスとは別に 学習コンテンツをまとめているケースで、動画が活用されることが多い 印象
17. 説明動画が充実しているサービスの例 • Webflow
18. 説明動画が充実しているサービスの例 • Shopify
19. 説明動画が充実しているサービスの例 • Bubble
20. 動画制作・管理系のBtoB SaaSが増えている • これまで動画の制作や管理は多くのコストがかかり 、利用にはハードルがあった • サポートや社内コミュニケーションに動画を取り入れる企業が登場する中で、それを 簡単にするためのツー ルやSaaSも続々と登場している
21. 動画制作・管理系のBtoB SaaSが増えている • Loom ◦ “Async Video Messaging for Work”
22. 動画制作・管理系のBtoB SaaSが増えている • Quden ◦ “話し手と画面を組み合わせた動画で顧客対応・リモートワークをなめらかに ”
23. 動画制作・管理系のBtoB SaaSが増えている • VideoTouch ◦ “動画トレーニングプラットフォーム ”
24. 動画制作・管理系のBtoB SaaSが増えている • Vrew ◦ まるでテキストを編集するように、動画のカットと字幕編集ができる
25. 動画制作を頑張りすぎてはいけない • いわゆるYouTuberの動画編集などを見ていると、その リッチな動画編集にあこがれる • しかし、10万人に見られるエンタメ動画と 500人にしか見られないプロダクトの説明動画では、 投入してい いリソース量も力を入れるべき場所も全く違う
26. 本日のおしながき • 自己紹介 • 説明動画の流行 • がんばらない動画制作ノウハウ • 動画の使い所と注意点
27. 動画制作を頑張りすぎてはいけない • 特にプロダクトのサポート領域 で動画制作を始めるなら、できるだけコストを抑えハードルを下げないと続 かない • 良くない例 ◦ いきなりAdobe Premiere Proを使う ◦ いきなり良いカメラやデカい照明やグリーンバックなどの 高くて大きい機材を買う ◦ いきなり動画編集を 外注する
28. がんばらない動画制作ノウハウ • gamiが200本の動画制作の中で行き着いた「がんばらない動画制作」の方法（ 2022年10月現在） • 用意するもの ◦ カメラ付きノートパソコン ▪ Macbookなど。カメラはWebカメラでも可 ◦ 外付けマイク ▪ インカム付きヘッドホンとかでも良い ◦ QudenのChrome拡張機能 ▪ フリープランで10分の動画まで撮影できる ◦ Vrewのデスクトップアプリ ▪ なんと現在は無料
29. 動画制作の手順 • QudenのChrome拡張機能で、自分の顔とPC画面の映像+声を同時に収録する
30. 動画制作の手順 • 動画ファイルをダウンロードして、 Vrewに読み込ませる
31. 動画制作の手順 • Vrewで不要な部分をカットする
32. 動画制作の手順 • 字幕を付ける場合は、 Vrewの自動生成字幕を修正する
33. 動画制作の手順 • Vrewから動画ファイルを出力して、完成！ ◦ YouTubeなどで字幕を別にアップロードする場合は、動画への字幕表示を OFFにした上で、字幕 ファイルだけを別途出力できる
34. 本日のおしながき • 自己紹介 • 説明動画の流行 • がんばらない動画制作ノウハウ • 動画の使い所と注意点
35. テキストと動画の使い分け • 一言でいうと？ ◦ 「基本はテキストで書き、ここぞというときだけ動画を使う！」
36. テキストと動画の使い分け • 動画の強み ◦ 動きのある画面操作 をそのまま伝えられる ◦ 人感が出るので印象に残しやすい • 動画の弱み ◦ 実際に見ないと全体感がわからず自分に合った内容か判断できない ◦ とにかくメンテナンスコストが高い
37. テキストと動画の使い分け • 動画が向いているもの ◦ プロダクトを全く知らない人向けの デモ ◦ 顧客オンボーディング時の概要説明 ◦ 初学者向けの学習コンテンツ • テキストが向いているもの ◦ リファレンス ◦ （慣れた人向けの）ドキュメント ◦ 用語集 ◦ FAQ
38. gamiが過去に仕事で作った動画の例 • プロダクトの新機能プレスリリースに添付する デモ動画
39. gamiが過去に仕事で作った動画の例 • KARTEの顧客向けオンボーディングのためのシステム全体像説明
40. gamiが過去に仕事で作った動画の例 • 社内外向け学習コンテンツ「KARTEで学ぶSQL入門」
41. 動画の弱点を克服するために • 見ないと全体感がわからない。。。 ◦ → 視聴維持率を意識する ▪ オープニングとか入れず、 いきなり話し始める ▪ 最初に内容の全体感を示す ▪ なるべく短く簡潔に、できれば 1本の動画を5分程度におさめる
42. 動画の弱点を克服するために • メンテナンスコストが高い。。。 ◦ → 保守性に配慮する ▪ 頻繁に変更されそうな機能や画面 はなるべく扱わない ▪ とにかく1本の動画を短く、差し替えやすく
43. まとめ
44. 3行で言うと • ツールの発展により動画制作がかなり簡単になった • テキストと動画を使い分けることで、よりユーザーにわかりやすいコンテンツが作れる • みなさんも「動画で説明する」という手札 を持ってみてはいかが？
45. Thank you !