/brag-slim
作ったなら、自慢しろ。あなたはビデオ全体——ストーリー、ビジュアル、オーディオ、レンダリング——を、マシン上にあるツールだけで自分で作る。
トーンは何であれ、モダンで洗練された、磨き上げられたローンチビデオのように感じさせること：画面上やサウンドトラックの中で、そこにある価値のないものは何もない。
使用方法：/brag-slim [入力] [オプション]。オプション（フラグまたは平文）：
| オプション | デフォルト |
|---|---|
--tone <プリセットまたは自由形式> | 推論；明確に該当するものがなければ default |
--format landscape|vertical|square | landscape（1920×1080；vertical 1080×1920、square 1080×1080）、30fps |
--duration <秒> | 約20秒 |
成果物はカレントディレクトリの brag-output/ に書き込む（すでに存在する場合はタイムスタンプ付き brag-output-YYYY-MM-DD-HHmmss/）。すべての中間ファイル（フレーム、ダウンロード、スクリプト、ステム）は、その内部の work/ サブフォルダに保持する。
1. 調査
まず入力が何かを判断し、そこから素材を収集する。変更されるのはソースだけ。以下の質問以降のすべては、すべての入力で同じである。
| 入力 | 認識方法 | 素材の入手元 |
|---|---|---|
| プロジェクト | 入力がなく、カレントディレクトリがプロジェクトである | コード |
| ウェブサイト | http(s):// URL、または example.com のようなベアドメイン | ライブサイト |
入力がいずれのタイプにも一致しない場合、または入力がなくカレントディレクトリがプロジェクトでない場合は、ユーザーに何を自慢したいか尋ねる。
プロジェクト
コードを読む：メインページ、スタイル（正確な色とフォント）、README、ルート、主要コンポーネント。最良の素材は使用中のプロダクト——エントリー → 主要アクション → 結果という2～3の拍子を見つけよ。
ソースがあるので、それを直接使う：ビデオ内でプロジェクトの実際のコンポーネント、スタイルシート、フォント、画像、アニメーションをインポートまたはレンダリングし、再構築する代わりに使用する。
ウェブサイト
サイトを訪問者が見る通りの状態で取得する。多くのサイトはJavaScriptでページを構築するため、プレーンなダウンロードではほとんど空のシェルが返ってくることがある。その場合は、ヘッドレスブラウザでページを読み込んでレンダリング結果を取得する。Cookieバナーやその他のオーバーレイを閉じ、セクションごとにスクロールする。なぜなら、スクロールに応じてアニメーションするコンテンツは、単一の全ページキャプチャでは空白のままになるからである。
- コピー： 見出し、キャッチフレーズ、セクション見出し、機能名、コールトゥアクション、お客様の声。タイトル、メタディスクリプション、ソーシャルプレビュータグも確認する。
- アイデンティティ： サイトのCSSからの正確な色と、それが読み込むフォント。
- ビジュアル： ロゴ、プロダクトスクリーンショット、ヒーロー画像、デモ動画。使用するものを
work/にダウンロードする。 - スクリーンショット： ページをビデオのアスペクト比でキャプチャし、レイアウトを理解する。ビデオでは、フラットなスクリーンショット上をパンするのではなく、サイトの実際のマークアップ、CSS、アセットを再利用してアニメーション化する。
- 使用中のプロダクト： デモ動画、使い方のセクション、リンクされたドキュメントで、エントリー → 主要アクション → 結果のフローを確認する。
そして、すべての入力に対して
計画を立てる前に、次の問いに答える：それは何か（一文）？誰のためのものか、そして彼らに何をもたらすか？何が他と違うのか？最も印象的、または最も面白い主張は何か？視覚的なフックは何か？実際のUIやフローのうち、何を見せるべきか？どのトーンが合うか？一行の共有キャプションは何か？
2. 計画
brag-plan.md を書く：アングル、フック、2～3のハイライト、決め台詞、トーン、ビジュアルアイデンティティ、そして目標時間に合う長さのシーンごとのストーリーボード。
ユーザーが一つの部分——新しいバージョン、新機能、一つのアングル——を指差した場合、それをビデオの焦点にする。
構成： フック（2～3秒）→ 披露（2～4秒）→ 2～3のシャープなハイライト → 決め台詞／アウトロ（2～4秒）。出発点となる形であり、テンプレートではない。
クリエイティブの掟
- 短く。 15～25秒。18～22秒がスイートスポット。
- 初めての人にもわかる。 一度見ただけで、今まで聞いたことのない人でも、何をするものか、誰のためのものか、どう入手するかがわかる。それを最初に持ってくる。どう作ったかではない。
- フックがすべて。 最初の2秒で、誰かが見続けるかどうかが決まる。最初に計画せよ。
- 実際のものを示せ。 ソースから実際のもの——UI、コンポーネント、コピー、画像、動画、アニメーション——を再作成するのではなく再利用する。再利用できないものだけを再構築する。製品を説明するランディングページよりも、動作しているアプリケーションを優先する。製品使用中を示す小さな例示的なUIテキストは許容される（ファイル名、「エクスポート完了」トーストなど）。架空の主張、数字、お客様の声は禁止。抽象的な埋め草は決して使ってはならない。
- 具体的に。 このプロジェクトのために特別に作られたように感じさせること。プロジェクト自身のコピーと主張を使うこと。汎用的なSaaS用語（「ワークフローを効率化」は禁止）は使わない。
- 読みやすく。 テンポはモーションとカットから生まれ、テキストを早く消すことからではない。視聴者が読むことを意図された行は、完全に表示され、読むのに十分な時間（単語あたり約0.3秒、行全体が画面に表示されてからカウント）静止してから消える。テクスチャとしてのみのテキストは読まれる必要はない。
- 生き生きとさせよ。 一つずつ現れるもの、シミュレートされたクリック、スワイプ、タイピングは、静的なスライドより優れている。
- ユーモアは地位を獲得する。 ユーモアはプロジェクト自身の不条理さから生まれるものであり、無理に笑わせようとしてはいけない。
- すべてのフレームが投稿可能。 停止したフレームはどれも共有する価値があるべき。
トーン
プリセットはデフォルト。自由形式の指示（「2016年のフェイクSeries Aローンチ」）はそれらを洗練させたり上書きしたりする。
| トーン | 感触 | ペース／トランジション |
|---|---|---|
default | パンチが効いていて、遊び心があり、クリーン | 4～5シーン；ソフトなトランジション |
polished | シリアスで、エレガントで、抑制が効いている | 3～4シーン、長いホールド；ソフトなフェード |
yc-parody | 無表情なスタートアップローンチ、真面目に演じる | 4～5シーン、各1主張；ハードカット |
chaotic | 高速、大音量、オールキャップス | 6～8シーン、一部2秒未満；フラッシュ／ズームカット |
deadpan | 穏やか、ドライ、何も冗談ではない | 3～4シーン、大きな空きスペース；スローフェード |
cinematic | トレーラースケール、壮大な主張 | 4～5シーン、大きなタイポ；ドラマチックなワイプ |
app-store | クリーンな機能カード | 4～6シーン；スムーズなスライド |
サウンド
音楽と効果音は一つの作品として書く：効果音は音楽と同じキー、同じ空間にあり、上に重ねるのではなくブレンドする。実際のトラックがミックスされるのと同じように、基本的で適切なミックスを与える：効果音は音楽の下に柔らかく収まり、耳障りだったり尖っていたりせず、繰り返される小さな音は背景に留まる。
3. 構築、確認、レンダリング
このマシンで動作するもので構築する。ブラウザでビデオを描画する場合、すべてのフレームを時間の純粋な関数にし、各フレームをキャプチャする前にフォントと画像の読み込みを待つ。
フルレンダリングの前に、すべてのシーンとトランジション途中の静止画を確認し、はみ出し、衝突、低コントラストを修正する。2つの込み入ったレイアウト間の単純なクロスフェードは濁った多重露光になる；古いコンテンツを先に出す（古いコンテンツを消してから新しいコンテンツを入れる）か、背景を通してディップする。その後 brag.mp4 をレンダリングする。
4. 納品
- ポスター： 最も強い静止したフレーム（テキストが完全に入っていて、トランジション途中ではない）を
brag.jpgに抽出し、それをbrag.mp4のフレーム0として焼き付け、すべてのプラットフォームのサムネイルがそれを表示するようにする。フレームを追加するのではなくフレーム0を置き換えることで、長さとオーディオ同期を同じままにする。 share-copy.txt： 1～3文。そのまま投稿可能で、具体的で、トーンに合っている。「共有できるのが楽しみです」は禁止。- ユーザーに ビデオとコピーの場所を伝え、クリエイティブなアングルを一文で説明し、シーンのリロールまたは別のトーンの試行を提案する。