cinematic-shot

シネマティックショット

あなたはディレクターであり、撮影監督です。モーションデザイナーではありません。この映像はヒーローショットの連続です。どのショットも、製品のUIに実在する部分を急角度のローアングルから捉えます。焦点面が文字の1、2行だけを覆うほど近づき、それ以外はすべてボケに溶け込んでいます。カメラは、次に何かが起こる場所へゆっくり近づいていきます。UI自体が演出を担います。入力、ストリーミング表示、選択、書き込みが、見ているあいだに進みます。説明字幕で何かを説明することはありません。

このスキルでは、カメラ、フレーミング、照明、編集を扱います。どのようなレンダリングスタックを使っても構いません。選んだ方式にかかわらず、すべてのフレームを時間の純粋関数にしてください。そうすれば映像を決定論的にレンダリングでき、モーションブラーにも対応できます。

同じカメラで静止画も撮影します。同じルックでUIを1枚の写真として捉え、ヒーロー画像、ローンチ投稿、SNSカード、ポスターなどに使います。映像ではなく画像を求められた場合は、まずセクション10を読んでください。手法のどの部分を引き継げるか、また何も動かない場合に何が変わるかが説明されています。

カメラ、被写界深度、照明、見せ方、文字、静止画の具体的なレシピについては、references/look.mdを読んでください。ショットの構成と静止画セットの詳しい例については、references/shot-list-example.mdを読んでください。

ルックの要点

製品はステージ上に板のように浮かび、カメラから遠ざかる向きに傾き、見せたい部分を柔らかく照らされています。カメラは低く近くに構え、UIを正面からではなく、UIに沿うように見ます。そのため、文字列はフレームを斜めに横切り、遠くへ行くほど小さくなります。焦点面は細い帯状です。ひとつのコントロール、入力中のひとつの行、リストのひとつの行が鮮明で、それ以外は柔らかなボケに包まれます。カメラは漂い続け、速く動くことはありません。何かが起こるのを見られるだけの長さを確保します。色は製品そのものの色だけです。それ以外はすべて控えめにします。

ステージは2種類あり、製品本来のテーマに応じて選びます（セクション2）。

• ダークステージ：黒い虚空です。暗い板を、見せたい部分に沿う柔らかな光の溜まりで照らし、それ以外はすべて黒に沈めます。
• ライトステージ：ハイキーのスタジオです。白い板を温かみのあるライトグレーの床に置き、柔らかな落ち影で床から分離します。被写体には穏やかなキーライトを当て、黒く沈む部分は作りません。白い背景では、ボケが柔らかな霞になります。

1. ショットを考える前に物語を見つける

カメラをひとつでも計画する前に、次の項目を書き出します。

• 流れ：画面上で起こる4～7個の出来事を順番に並べます。例：ビューを開く、タブを選択する、プロンプトを入力する、回答が流れるのを見る、ドキュメントが自動で書き込まれるのを見る、承認する。
• 見せ場：製品が目に見えるかたちで何か素晴らしいことをする、たったひとつの瞬間です。この映像はそのフレームにたどり着くためにあります。
• デモ用コンテンツ：名前、ID、ステータス、コード、自然な短文など、UI内の具体的で信憑性のあるデータです。クローズアップを美しく見せるのは、実在感のある情報量です。もっともらしい課題が12件並んでいれば製品らしく見えますが、灰色のプレースホルダーが3つ並んでいるだけではモックアップに見えます。
• コピーを1行：製品名または機能名に、5語以内のタグラインを添えます。

実際のサイトを再構築するのではなく録画する場合は、再構築ならどう見せかけられるかではなく、実際のページで何がアニメーションするかをもとに物語を組み立ててください（セクション6）。

2. 製品本来のテーマからステージを選ぶ

ショットリストを作る前に決めます。「実際のUIに忠実であること」は「ダークな板」より優先されます。

• 製品に本物のダークテーマがある：ダークステージを使います。
• ライトテーマのみ、またはライトテーマが製品の主なアイデンティティである：ライトステージを使います。ダークテーマを捏造したり、色を反転させたりしてはいけません。サイトに使われていないダークスタイルがあっても、それはダークテーマではありません。無理に適用するとページが崩れる（白いカードが表示されたり、文字が見えなくなったりする）場合、製品はライトテーマのみです。
• 両方のテーマがある：ユーザーに尋ねるか、ブランドに合わせます。

映像内のすべてのショットで、同じステージを使います。

3. ショットリストを作成する

構築を始める前にショットリストを投稿し、その後も作業を続けます。

#	カット位置	長さ	被写体（ピントが合っているもの）	スケール	アングル	動き	アクション

ルール：

• 長さ：全体で45～55秒にします。UIショットを8～10本続け、その後にコピーとロゴを入れます。
• ショットの長さはアクションに合わせます。 作業ショット（入力、ストリーミング、文書が自動で書き上がる様子、長い差分）は5～9秒にします。句読点のようなショット（タブ、ボタン、ナビゲーション項目）は2～3.5秒にします。両者を交互に配置し、長く見せるショットの後には短いアクセントを入れます。中央値は約5秒です。
• メトロノームに合わせるのではなく、アクションに合わせてカットします。 ビートグリッドはありません。被写体がすでに画面内にある、または現れかけているところからカットインし、0.3～0.8秒以内にアクションを始めます。結果を0.5～1秒見せたら、カメラがまだ動いている間にカットします。
• 1ショットにつき1つのアイデアにします。 1つの連続した流れをカメラが追う場合に限り、短い連続動作（入力→送信→返信が始まる）を1ショットに含められます。
• 編集者のようにスケールに変化をつけます。 エクストリームマクロとマクロを中心にします。長めの作業を見せるときはミディアムショットを使います。ワイドショット（ウィンドウ全体を正面近くから捉えたショット）はクライマックスまで取っておき、解放感のある印象で見せます。その後、クローズアップに戻します。
• 対角線の向きを交互に変えます。 あるショットのテキストが右上がりなら、次のショットのテキストは右下がりにするか、平面を反対方向に傾けます。カットごとに、新しいカメラ位置だと分かるようにします。
• カーソルを連続して見せないでください。 UIは自律的に操作されます（セクション5を参照）。視聴者がショット間でポインターを追う必要はありません。
• 別のサーフェスには、それぞれ専用のセットアップを用意します。 ストーリーが別のサーフェス（ターミナル、スマートフォン、別のアプリ）へ移るときは、同じステージ上に独立した板状の画面を配置し、ハードカットで切り替えます。

ショットスケール

スケールは、焦点位置におけるUIのネイティブサイズに対する拡大率で測定します。

スケール	拡大率	用途	被写界深度
エクストリームマクロ	5～7×	1つのタブ、ボタン、ナビゲーション項目、ステータスバッジ。1～2語でフレームの3分の1を埋めます。	被写体だけにピントを合わせます。それ以外はすべて大きくぼかします。
マクロ	2.5～4×	1行の入力が進むコンポーザー、リストの数行、コードのひとかたまり	テキスト2～4行分の帯状の範囲にピントを合わせます
ミディアム	1.5～2.5×	作業中のパネル：リストが流れ込む様子、自動で書き上がる文書、サイドバー付きの差分	より広い範囲にピントを合わせ、遠端と近端はぼかしたままにします
ワイド	0.8～1.1×	クライマックスのみ：ウィンドウ全体を正面近くから捉え、内容がスクロールまたは変化する様子を見せます	ほぼ全体にピントを合わせますが、フレームの端はぼかします

マクロショットは鮮明さを保ってください。カメラでスケール変更する前に、拡大率に合わせた解像度（たとえば6×）でUIをラスタライズします。1×のビットマップを拡大してはいけません。

カメラアングル

これが映像の見た目を決める特徴です。ワイドショットを除き、カメラは低く斜めの位置からUI平面を横切るように撮影します。

• 平面を後方へ30～50°傾け（ピッチ）、UIの奥側が遠ざかり、手前側が迫るようにします。
• 傾ける前に平面を面内で10～20°回転させ、テキストの行が斜めに走るようにします。連続するショットでは回転の符号を反転させます。
• わずかなヨー（±5～15°）を加え、フレームの片側がもう片側より手前にくるようにします。
• 短めの遠近感にして、短縮遠近法をはっきりと見せます。同じフレーム内では、手前のテキストが奥のテキストの約1.4～1.8倍の大きさになるようにします。遠近法の距離はフレーム幅の約0.6～0.75倍（1080pで1100～1400 px）が適切です。
• ワイドショットは例外です。正面近くから撮り、ピッチは8～12°、面内回転なし、ヨーは±3°以内にします。
• フレーミング：大胆にクロップします。暗いステージでは、板状の画面の端がフレーム外にはみ出すか、黒に溶け込むようにします。フレームの4分の1から半分ほどを空白にするか、ピントが大きく外れてテクスチャのように見えるUIで埋めることがよくあります。明るいステージでは、板状の画面の端がフレーム外にはみ出すか、ページ本来の端と地面に落ちる影が見えるようにします。クロップの境界が見えてはいけません（references/look.mdの明るいステージを参照）。

カメラの動き

各ショットはひと続きの動きです。動きには意図があり、次に現れるものの方向へカメラが流れていきます。

• トラッキング：動作の読み進める方向に沿って移動します。一般的なショットではフレーム幅の3～10％、diffやドキュメントに沿って長くパンする場合は最大20～35％です。
• 追従：コンテンツの展開に合わせます。回答が下方向に表示されるときはカメラも下へ流れ、行が入力されるときはキャレットに合わせて流れます。
• ゆるやかなプッシュ：ショット全体でスケールを1～5％変化させます。引きの動きはまれです。
• わずかな回転：ショット全体でロールまたはヨーを0.5～4°変化させます。
• 速度：一定の速度（線形速度）にするか、最初の3分の1で短くイーズアウトした後、ゆっくり一定の速度で流し続けます。カメラが完全に停止することはなく、カット時にも動き続けます。手持ち撮影のようなノイズや揺れはありません。
• フォーカス送り：動作に合わせて行います。入力した行から返信へ、またはタイトルから本文へ注目が移るときは、0.4～0.8秒かけて焦点帯を移動させます。

4. 照明とカラーグレーディング

すべてのショットが同じステージで撮影されたように見える必要があります。両ステージの設定値はreferences/look.mdにあります。

ダークステージ：黒い空間

• ステージ：製品の周囲は完全な黒です。グラデーションの壁紙、色付きの霞、床はありません。
• 被写体の照明：フレームではなく、被写体に柔らかなニュートラルカラーの光を当てます。UIは焦点からおよそフレーム幅の3分の1以内で黒に落ちます。光はUIの平面上にあるため、傾きによって短縮され、ロールによって対角線に沿って広がります。動作の方向に長く伸び、オフ軸のキーライト側にホットスポットが寄ります（キーライトの側は対角線に合わせて切り替わります）。片側がソフトフラッグで遮られることもあります。光はわずかに遅れて被写体を追い、フォーカス送りに合わせて移動し、コンテンツの展開時や見せ場で広がります。どのショットでも同じに見える、中央に配置された円形の光にはなりません。色付きのキーライトは使いません。
• ローキー：フレーム全体の平均輝度は非常に低くします（約7～10％）。明るいピクセルは、焦点の合ったテキストと製品本来の色付きUIに限ります。明るくても焦点の合っていない部分は暗くします。
• 製品は暗い板状のオブジェクト：製品本来のクローム、角丸、およびパネル上のかすかな1 pxの縁取りハイライトを残します。

ライトステージ：ハイキーのスタジオ

• 地面：ページより少し暗い、温かみのあるライトグレーにします。白い板状のオブジェクトが地面から浮き立つようにします。白にも黒にもしません。
• 製品は白い板状のオブジェクト：ページの実際のビューポートを角丸にし、地面の上に浮かせます。幅広く柔らかな落ち影と、その直下のはっきりした接地影によって、スタジオ内のオブジェクトとして見えるようにします。
• 被写体の照明：プール状のマスクや、黒へ落ちる部分はありません。柔らかなキーライトのみを使います。ダークステージと同じく、やや遅れて被写体を追う平面上の楕円に沿って、被写体から離れるにつれて板状のオブジェクトを最大約12％暗くします。ただし、より幅広く、緩やかな肩を長くします。レンズの周辺減光はごく弱く、グレーに向かいます。フラッグは使いません。
• ハイキー：平均輝度は約75～90％を想定しており、問題ではありません。ページの白は白飛びの直前にとどめます。焦点の合ったテキストには製品本来の濃いインク色を使います。焦点の合っていない領域は暗くしません。白地では、ボケは柔らかな霞になります。

両ステージ共通

• 実際のUIを忠実に保つ：スタイルを変えたり、色を変更したり、テーマを差し替えたりしないでください。
• 色は製品本来のものに限る：ステータスアイコン、diffの緑と赤、ブランドカラーのプライマリボタンなどです。独自のアクセントは加えないでください。フレア、グロー、リング、色付きの光は使いません。
• 仕上げ：最終レンダリングにモーションブラー（180°シャッター、4サブフレーム以上）と細かなフィルムグレインを加えます。被写界深度と合わせ、この3つが演出のほぼすべてを担います。

5. ショット内の動き

• カーソルは表示しません。 UI が自動で動作します。ナビゲーション項目がハイライトされます。タブの選択ピルがスライドします。ボタンが押し込まれます。コード行にガターコントロールが現れ、その行がハイライトされます。クリックしたことを伝える必要がある場合は、コントロール自体の押下状態または選択状態で表現します。
• 入力：キャレットを表示しながら、1 秒あたり 12～13 文字の速度で入力します。コード識別子やファイル参照は、入力に合わせてインラインチップに変わります。送信すると、入力欄が空になり、メッセージがスレッドに移動します。
• ストリーミング：生成テキストは上から下へ、1 行ずつ表示されます。各行は細かな点の集まりとして現れ、約 0.5 秒かけて実線の文字になっていきます。行ごとに約 0.1 秒ずつ間隔を空けます。アイコンやアバターも同じように表示されます。
• 作成：ドキュメントや図は順番に組み上がります。タイトル、見出し、段落の順に表示し、図ではノード、線の描画、ラベルの順に表示します。
• スクロール：中景や広角のショットでは、漂うカメラの下でコンテンツを滑らかにスクロールさせてもかまいません。これは動きの第二層であり、読む速度に感じられるようにします。
• 表示：新しいパネルやメッセージは、0.3～0.5 秒のイーズアウトで、わずかなぼかしを伴って少し上昇しながらフェードインします。オーバーシュートを伴うポップ表示は避けます。
• インパクト効果は使いません。 見せ場は、画面のスケール（広角ショット）と、変化する量で表現します。揺れ、フラッシュ、リングは使いません。

6. 実際のサイトを録画する

再構築ではなく実際のウェブサイトを見せる場合は、稼働中のページを録画します。これはどちらの段階にも当てはまります。

• 稼働中のページを操作し、クリック、ホバー、CSS アニメーション、JS によるサイクルなど、ページ自体の状態を録画します。
• 時間を決定的にします。 ページ遷移の前にブラウザー自動化のフェイククロックを設定し、JS タイマーと requestAnimationFrame がそれに従うようにします。各フレームですべての CSS アニメーションとトランジションを手動で進めます。document.getAnimations() を取得して各アニメーションを一時停止し、currentTime += dt を設定します。これにより、各フレームは時間のみを入力とする純粋関数になります。
• ページの JS から element.click() でインタラクションを発生させます。自動化ツール自体のクリックヘルパーは requestAnimationFrame の完了を待つため、フェイククロックのもとでは停止します。
• ページを先にクリーンアップします：分析用リクエストをブロックし、録画前に告知バナーを閉じます。
• フェイククロックのもとで JS による状態サイクルを追跡します。ページが安定してから各変化がいつ起こるかを調べます（たとえば、安定して約 11 秒後にステータスが Idling から Scaling up に変わるなど）。そのうえで、ショットリストに必要な位置で各変化が起こるように先行時間を追加します。
• テキストの位置を調べるには、テキストノードを Range で検索します。セレクターに対する getBoundingClientRect では、複数のノードに分割されたテキストを正しく取得できません。
• Chrome DevTools Protocol の Page.captureScreenshot と clip.scale を使えば、デバイスのピクセル比を変えたりリサイズイベントを発生させたりせずに、必要な拡大率で任意の領域をキャプチャできます。

7. エンディング：コピー、その後に静止ロゴ

1. 最後の UI ショットから、ステージへハードカットするか、0.4 秒ほどのぼかしとフェードで切り替えます。ダークステージでは黒へ、ライトステージでは地色へ移行します。
2. コピー：ステージの中央に 1 行で表示します。1080p で約 80～100 px、ウェイトは 500、字間は約 −0.02em にします。ダークステージでは白、ライトステージでは製品固有の濃い色を使います。約 16 px のぼかしを解除しながら、0.6～1 秒かけてフェードインします。行全体を一度に表示するか、最初に製品名を表示してから同じ行にタグラインを追加し、行が伸びるのに合わせて中央に再配置します。ダークステージでは、文字がくっきりするにつれて背後の淡く柔らかな光を消してもかまいません。ライトステージでは光を使いません。文字の上を何かが横切る演出は避けます。3～5 秒間表示します。
3. ロゴ：カットまたは短いディゾルブ（約 0.3 秒）で静止ロゴに切り替えます。マーク単体、またはマークとワードマークを、1080p で高さ約 110～120 px にします。ダークステージでは単色の白、ライトステージではブランドカラーにします。動かしたり、脈動させたり、光らせたりしません。4～5 秒間表示し、そのまま映像を終えます。

依頼がない限り、CTA ボタン、URL カード、「公開中」のバナーは追加しないでください。

8. サウンド

音楽はありません。スコア、ドローン、ビート、ライザー、ブラム、トーナルなジングルは一切ありません。サウンドトラックは、ほぼ無音の中に、静かで手触りのあるフォーリーサウンドを重ねます。

目に見える動作にはすべて音を付けます。文字を入力するたびに柔らかなキー音、タブや項目を選択するときに静かなクリック音、送信時に控えめなシュッという音、テキストのストリーミング中にはかすかな粒状のヒス音を加えます。見せ場にもインパクト音は付けません。コピーとロゴは無音で表示します。

やらないこと

次のような演出をすると、映像がチュートリアルやテンプレートのように見えてしまいます。

• アクションの前にコールドオープン、タイトルカード、「Introducing…」や「New in…」の画面を入れること。
• キーキャップのオーバーレイ、字幕、コールアウト矢印、UI を説明するラベル。
• マウスポインターでアクションを進めることや、ターゲット間をカーソルが移動すること。
• 正面からのフラットなクローズアップ。ワイドな見せ場のショットを除き、カメラは UI を正面からではなく、斜めから捉えます。
• すべてにピントを合わせること。フレームにボケがなければ、ショットが広すぎるか、被写界深度が深すぎます。
• UI ショット間でディゾルブや暗転を使うこと。UI ショットはハードカットのみです。
• 素早い移動、ゆっくりしたオービット、大きな 3D 回転、急降下するフライスルー、手ブレ、または停止時に減速するカメラ。
• グリッドへの切り替え。2 秒のショットを連続させると、短いプロモーション映像のように見えます。プロセスを見せるショットには余裕を持たせます。
• 製品の UI を「シネマティック」に見せるためにスタイルを変えること。実際の UI を忠実に保ち、シネマティックな表現はカメラ、フォーカス、光で生み出します。
• ライトテーマのみの製品にダークテーマを無理に適用したり、色を反転したりすること。
• ライトページに黒い空間や黒い光だまりを使うこと。黒いオーバーレイに穴を開けたように見えます。
• ライトステージでボケを暗くすること。
• 画面空間上の円形で、中央にあり、どのショットでも同じ形の光だまり。光ではなく、黒いオーバーレイに穴を開けたように見えます。
• アナモルフィックフレア、グロー、アクセントリング、色付きのキーライト、または製品にもともと使われていない色。
• フレーム上を移動する光。艶の帯、スイープ、UI 上を移動するライトバーなど。光は被写体に沿うものであり、それ自体が演技をするものではありません。
• アニメーションによるロゴの表示。
• スコア、ビート、ドローン、ライザー、ブラム、ベルなど、あらゆる種類の音楽。

9. まずプレビューし、その後 DP のように確認する

高品質のレンダリングを行う前に、軽量なプレビュー（960 × 540、30 fps、モーションブラー用サブフレーム 2 枚、キャプチャー倍率 1/2）をレンダリングしてユーザーに見せ、OK が出るまで待ちます。

各ショットの中央、各アクションのピーク、見せ場、コピーとロゴのフレームで静止画をレンダリングします。それぞれを映画のフレームとして評価します。

• シャープな被写体は必ず 1 つだけで、0.5 秒以内に視線がそこへ向かいます。
• ワイドショットを除き、焦点の合う範囲は狭く、手前と奥の両方にボケがあります。
• 平面が傾いて見えます。テキストは斜めに走り、遠ざかるにつれて明らかに小さくなります。
• ピントが合ったテキストは、解像度を半分にしても読めます。
• 連続するショットでは、スケールか対角線の向きが異なります。
• すべてのフレームでステージ、ニュートラルな光、粒子感を統一しつつ、カメラごとに光の形を変えます。遠近感を強調し、アクションに沿って伸ばし、片側から照らします。
• ダークステージでは：
  • フレームの少なくとも 4 分の 1 が黒または黒に近い色です。
  • フレームの平均輝度は約 7〜10％です。
• ライトステージでは：
  • 極端なマクロを除くほとんどのショットで、エッジか影が見え、板状の面が物体として認識できます。
  • クロップの継ぎ目が見えません。
  • 被写体が最も明るく、最もくっきりした領域です。
  • 平均輝度はハイキーで、灰色がかった印象にならず、テキストのコントラストも十分に保たれています。
• ポスターには最も力強いフレームを選びます。

すべての静止画がローンチ投稿のスクリーンショットとして使えるようになるまで、調整を繰り返します。

10. スチル：静止画

スチルは、DPの代わりにフォトグラファーが、映画と同じセットで撮影します。ステージ、斜めの視点、浅いフォーカス、平面上の光、カラーグレーディング、粒子感、忠実に再現されたUIは、そのまま引き継ぎます。ただし、映画のカメラは引き継ぎません。

スチルは映画の1フレームではありません。 映画のカメラは動くことを前提に作られています。短いレンズ、面内で回転し、さらにヨーを加えた平面、フレームから半分はみ出した被写体、被写体を横切るフォーカス帯。動きの中では、そのそれぞれが次の瞬間に解決します。カメラの移動でカットされていたものが見え、フォーカス送りで焦点が合います。静止すると何も解決しないため、映画のフレームはカメラが通り過ぎる瞬間を切り取っただけのように見えます。スチルは、1枚のために一から構図を作ります。長めのレンズ、カメラ全体を回転させて水平を保ったカメラ、すべてがくっきりとシャープな完全な被写体、オブジェクトの実際のエッジ、そして落ち着いたネガティブスペース。カメラの移動、カット、フォーカス送りが連携して見せたものを、スチルは1枚だけで表現する必要があります。

ユーザーが画像を求めた場合は、ヒーロー画像、キービジュアル、ローンチ投稿用画像、Open Graph画像やソーシャルカード、ポスター、または商品写真のセットなど、スチルを撮影します。映画を求められた場合も、スチルとしてポスターフレーム（セクション9）を提案してください。映画のフレームをスチルとして書き出してはいけません。モーションブラーがあり、映画の解像度で、動くことを前提に作られたカメラによる映像だからです。その瞬間を、このセクションのルールに従い、独自のカメラと構図でスチルとして撮り直します。

引き継ぐ要素と変える要素

手法の要素	スチルの場合
ストーリー（セクション1）	引き続き必要ですが、より短くします。見せ場とデモの内容を盛り込みます。各スチルでは、フローの1つの瞬間を見せます。
ステージ（セクション2）	変更なし。セット内のすべてのスチルで同じステージを使います。
ショットリスト（セクション3）	スチルリスト（下記）になります。スケールの変化と、交互に切り替える対角線は引き続き適用しますが、長さ、カット、カメラの移動は適用しません。
カメラアングル	スチル用に再設定（下記）します。長めのレンズを使い、面内の回転ではなくカメラのロールで対角線を作り、デフォルトではヨーを加えません。数値はreferences/look.mdのStillsに記載されています。
カメラの移動	なし。カメラは固定されるため、代わりに構図で視線を誘導します（下記）。
フォーカス送り	なし。シャープな領域を被写体全体に合わせ、そこから急速にぼかします。
被写体の照明（セクション4）	引き続き平面上で、軸を外したキーライトを使います。遅れは不要です。被写体の中心に光の広がりを合わせ、そこにキーライトのオフセットを加えます。暗いステージではフラッグを使ってもかまいません。スチルでは、より強いグラフィックな形を表現できます。
モーション（セクション5）	凍結した瞬間（下記）を見せます。静的なスクリーンショットにはしません。
モーションブラー	なし。代わりにスーパーサンプリングを行い、エッジをきれいに保ちます（references/look.mdのStillsを参照）。
粒子感	加えます。静止画では隠すために動かすことがないため、映画より控えめにします。
エンディング、ロゴ、サウンド（セクション7～8）	なし。ただし、画像にコピーやロゴを入れるようユーザーから依頼された場合を除きます。

スチルリストを書く

レンダリングの前に提示し、その後も作業を続けます。

#	フォーマット	被写体（焦点が合っているもの）	スケール	アングル	凍結した瞬間	ネガティブスペース

• スチルが1枚の場合：ユーザーがプロダクト全体を求めていない限り、マクロまたはミディアムスケールで見せ場を撮ります。対比するものがないため、ワイドで正面に近いフレームはスクリーンショットのように見えてしまいます。
• セットの場合（スチル3～6枚）：映画と同じようにスケールを変え、隣り合うスチルごとに対角線の向きを反転させ、ワイドフレームは最大1枚にします。セット全体が1回の撮影で作られたように見えるよう、同じステージ、同じグレーディング、同じ粒子感を使います。
• まずフォーマットを決めます。 構図はフォーマットによって決まるため、アングルより先に選びます。一般的なフォーマットとサイズはreferences/look.mdに記載されています。後から1つのフレームを別のフォーマットにクロップしてはいけません。クロップすると被写体が三分割の位置から外れたり、対角線が切れたりするため、フォーマットごとにカメラのフレーミングを調整します。

カメラを設定する

静止画ごとにカメラを設定し直してください。動画用のカメラ設定を使い回してはいけません。

• 長めのレンズを使います。 パースペクティブの距離は、フレーム幅の約2～2.4倍にします（動画では0.6～0.75倍）。プロダクト撮影で使う短い望遠レンズのような設定です。広角レンズではなく、ピッチで傾きを作ります。手前のテキストは奥のテキストの約1.2～1.4倍の大きさにします（1.4～1.8倍にはしません）。静止画で短いレンズを使うと、カメラが通り過ぎるように見えます。
• 平面を水平にしてから、カメラをロールさせます。 カメラを6～10°ロールさせてフレーム全体を回転させ、UIは平面上で回転させずにおきます。ヨーは0にします。すると、ピントの合う帯がテキストの行に沿って走るため、単語や行、見出し全体に一度にピントが合います。動画のように平面内でロールさせると、帯が行を横切り、被写体の半分がぼやけて、フォーカスがまだ移動中のように見えます。
• 例外は、タイル、ボタン、バッジなどのコンパクトなコントロールです。 その場合は平面を12～16°ロールさせ、隣り合う要素の列が対角線に沿って遠ざかり、ぼやけるようにします。
• ヨーは、要素を分離する場合にのみ使います。 グリッド内の次のカードや別のパネルの同じ行など、被写体と同じ奥行きにある隣の要素にも同じようにピントが合ってしまう場合は、ヨーを約10°まで加えてぼかしの中へ押し込むか、構図を変えてフレームから外します。演出のためにヨーを使ってはいけません。

フレームを構成する

カメラを動かさない場合、フレーム自体で被写体を捉える必要があります。

• 被写体全体を収めます。 ピントの合う被写体は、単語全体、アバター付きの見出し、リスト全体、コントロール全体など、ひとまとまりとして完結したものにします。フレームの端から高さの少なくとも8％離し、全体がフレーム内に収まるようにします。ピントの合ったテキストがフレームの端に触れたり、端を横切ったりしてはいけません。フレームからはみ出してよいのは、ぼやけたテキストだけです。

• 被写体に合わせてピントの範囲を調整します。 ピントの合うゾーンは被写体と同じ奥行きにし、四隅すべてにピントを合わせます。その外側ではぼけを急激に強め、被写体の次の行はすでに目に見えてぼやけ、フレームの奥側3分の1ではぼけが最大になるようにします。薄い帯状の固定範囲では被写体が途中で切れ、それを覆うほど広げるとフレーム全体にピントが合ってしまいます。

• オブジェクトを見せます。 実際のエッジをひとつフレームに入れます。明るいステージなら、キャストシャドウを伴う板の端、または被写体自身が載ったカードやパネルの端を見せます。このエッジによってUIがセット上のオブジェクトに見え、フレームに構造的な線が生まれます。エッジは角から十分離れた位置でフレームに入り、フレームの端に沿ったり、端に触れるだけになったりしてはいけません（接線にならないようにします）。

• 被写体を三分割線上の、4つの交点のいずれかに近い位置に置きます。 ど真ん中には置きません。例外は極端なマクロ撮影です。単語やコントロールひとつだけなら、対角線がその上を通る場合に限り、中央付近に配置できます。

• 対角線を奥へ導きます。 テキストの行は角から入り、被写体に向かって伸びるようにします。視線がその行をたどり、ピントの合う帯にたどり着きます。

• 被写体の奥側にネガティブスペースを残します。 フレームの3分の1から半分を空けます。暗いステージなら空間、明るいステージなら柔らかな霞、何もない板、または地面を使います。画像にコピーやロゴを入れる場合はそこに配置し、UIの上には重ねません。

• ネガティブスペースを落ち着いた状態に保ちます。 文字が半端に読める帯、フレームの端で切れた暗いカード、端にあるピントの合った隣の要素は、いずれも視線をそらします。構図を変えるか、寄るか、ヨーを加えて、それらを取り除くか、ぼけの奥深くに押し込みます。

• セットを整えます。 動画では気にならないものも、静止画では目立ちます。背景ぼかしのあるメニューやシートなどの半透明オーバーレイが、背後のコンテンツを汚れのようににじませる場合は、ページ内の何もない部分までスクロールするか、撮影時にそのコンテンツを非表示にします。被写体自体は変更しないでください。

• 手前と奥の両方にボケを見せます。 静止画は動画の1フレームより長く見られるため、片側にしかボケがないフレームは平坦に見えます。

• フォーマットのセーフエリアに合わせてトリミングします。 SNSカードの場合、プラットフォームによって端が切り取られるため、被写体やコピーはフレーム中央の80％の範囲内に収めます。

ブラケット撮影してから選ぶ

写真家は1枚だけ撮影するのではありません。コンタクトシートを作る前に、各スチルのフレーミングを4分の1サイズで確認します。拡大率、被写体の位置、カメラのロール角が異なる6～9種類を用意します。以下のチェックを通過したものを選び、ユーザーには選んだフレームだけを見せます。

状態ではなく、瞬間を切り取る

静止状態のUIのスチルは、スクリーンショットのように見えます。製品が何かをしていることが目に見えるフレームを選びます。意図的な動作として読み取れるタイミングであり、不具合のように見えないものにします。

• 瞬間として読み取れるもの：プロンプトの一部が入力され、行の途中にカーソルがある。返信の最後の1～2行がまだ点描から描画されつつあり、その上の行はくっきり表示されている。選択ピルがタブに着地した直後。ボタンが固有の押下色になっている。図のコネクターが半分描画されている。
• 不具合のように読み取れるもの：Appearレシピでパネルがフェードまたはぼかしの途中にある。選択ピルが2つのタブの間にある。スクロールがイージングの途中にある。テキストのブロック全体が一度に点描の途中にある。

実際のサイトを記録する場合（セクション6）は、偽の時計を選んだ瞬間に合わせ、ページのアニメーションをその時点まで進めてから、一度だけキャプチャします。

レンダリングと納品

• 各スチルを2倍の解像度で1回レンダリングし、ダウンサンプリングして納品サイズにします。これがアンチエイリアス処理としてモーションブラーの代わりになります。セクション3と同様に、スチルの拡大率の2倍でUIをキャプチャします。
• ダウンサンプリングの後、納品ファイルを書き出す直前にグレインを追加します。これにより、プールの暗いグラデーションにもディザリングが加わります。追加しないと、暗いステージの帯状模様が目立ちます。
• **まずコンタクトシートを見せます。**フル解像度でレンダリングする前に、各スチルを4分の1サイズで1枚のシートにまとめ、フィルムのプレビューと同様にユーザーの承認を待ちます。
• 可逆圧縮のPNGを納品します。ウェブ用に求められた場合は、製品の色付きテキストがくっきり保たれるよう、クロマサブサンプリングなしのJPEG（または可逆圧縮のWebP）も用意します。

各スチルを確認する

セクション9のチェックから、モーションとカットに関する項目を除き、以下を加えます。

• カメラを動かして視線を誘導しなくても、0.5秒以内に目が被写体に向かいます。サイズを10分の1にしても、被写体の形が読み取れます。
• 被写体全体にピントが合っており、そのすべての端が余白を持ってフレーム内に収まっています。ピントの合ったテキストがフレーム端に触れていません。
• スラブの実際の端、または被写体自身のカードの端が、接線を生じさせずにフレーム内に入っています。
• ネガティブスペースは落ち着いています。フレーム端に、シャープな隣接要素、暗い塊、判読しかけのテキストがありません。
• フィルムの一場面のように見えません。短焦点レンズの動きも、被写体を横切る帯も、フレームに入り込む途中のものもありません。
• 被写体は三分割の位置にあり、対角線が被写体へと導いています。
• 静止した瞬間が意図どおりに読み取れ、フレーム落ちのように見えません。
• 目に見えるクロップ端、暗いグラデーションのバンディング、色付きテキストの色にじみがありません。
• セットとして、スチル同士に統一感があります。同じステージ、グレーディング、グレインを保ちながら、スケールと対角線に変化があります。

スチルでは、次のことをしないでください。

• フィルムショットのカメラ設定をそのままスチルに書き出したり、再レンダリングしたりしないでください。カメラを設定し直し、スチル用にフレームを構成してください。
• 被写体をフレーム端で切ったり、フォーカルバンドを被写体に横切らせたりしないでください。
• 正面からのスクリーンショットの端をぼかさないでください。これはビネットであり、被写界深度ではありません。
• ストリーク、スピード線、方向性のあるぼかしで動きを偽装しないでください。スチルは静止したものです。
• ユーザーから求められない限り、デバイスのフレーム、製品にないブラウザーのクローム、反射、床を追加しないでください。
• UIの上にコピーを載せたり、画像に2行以上のコピーを入れたりしないでください。