通信デバッグアプリ「ApiCatcher」の30秒紹介動画
iPhoneの上でHTTP/HTTPSの通信を捕まえて調べる開発者向けアプリ「ApiCatcher」の30秒の紹介動画です。PCのプロキシを経由する回り道から、iPhoneだけで通信を捕まえてリクエストを開くまでを公式の画面で見せています。
依頼を受けて制作したものではありません。FablessBridgeが公開情報をもとに自主制作した紹介動画です。製品名・画面・ロゴは各社のものです。
ApiCatcherとこの紹介動画
ApiCatcherは、HTTP・HTTPS・WS・WSSの通信を捕まえて中身を調べる開発者向けのアプリです。PCのプロキシを使わずにiPhoneの上で通信を捕まえられ、iOS・Android・macOS・Windowsで使えます。JSON Diff・Export・API Scanの機能も備えています。
- 製品
- ApiCatcher（通信デバッグアプリ）
- 動画
- 30秒・横16:9・画面の文字は英語・ナレーションなし
動画で見せたこと
- アプリがどのAPIを呼んでいるのか見えない状況を、赤い点が線の途中で消えていく様子で見せました。
- PCのプロキシを挟む回り道で詰まる場面から、iPhoneの上で直接捕まえる流れへ切り替えて見せました。
- 捕まえた後の調べ方として、履歴の行やリクエストのURL欄、JSON Diffなどの公式画面を見せました。
30秒の流れ
0〜3秒 公式アイコンと崩れた文字から整う「ApiCatcher」の名前が出て、iPhoneでHTTP/HTTPSを捕まえて調べる道具だと示します。
3〜8秒 「Which APIs does this app call?」と出て、端末から伸びる線の赤い点が途中で消えます。
8〜12秒 「The usual detour: a desktop proxy」と出て、PCを経由する回り道で詰まる様子を見せます。
12〜16秒 「Capture right on the iPhone」と出て、HTTP/HTTPS/WS/WSSの札から緑の点が公式の画面へ流れ込み、履歴の行を囲みます。
16〜20秒 「Open any request」と出て、リクエストの画面に寄りURL欄を囲みます。
20〜23秒 線が集まって公式アイコンになり、「No PC Proxy Required · Pure Mobile Capture」と出ます。
23〜26秒 「Then take it further」と出て、JSON Diff・Export・API Scanの公式画面を3枚並べます。
26〜30秒 アイコンと名前、対応する4つのOS、apicatcher.netで締めます。
表現で工夫したこと
窓の外をベクター・アーケード風にし、黒から紺の地にゆっくり回る八角形のトンネルと、光る細い線で描いた端末やノートPC、六角形のノードを置きました。CLIの製品ではないので架空のコマンドは打たず、ASCIIのロゴも描かずに、線が集まって公式アイコンが出るようにしています。場面のつなぎは、ベクターモニターの電源が切れるように画面が1本の線に潰れてから開く動きにしました。
製品サイトで公開されている情報だけをもとに、製品の見た目に合わせて制作しています。ナレーションは入れず、画面の動きと音楽で伝える構成です。
自社の製品の紹介動画を相談する
企画が固まっていない段階からご相談いただけます。
紹介動画を相談する料金と制作の流れを見る顧客案件と自社サンプルを見る