背景・枠・余白

生の画面録画は端から端まで枠を埋め、誰かがスクリーンショットを撮影したものに見えます。背景の上に引っ込め、角を丸め、柔らかい影を足す。四秒ほどの作業で、印象は丸ごと変わります。各コントロールが何をし、どこから助けにならなくなるかを説明します。

背景は面であって絵ではない

八つの背景はすべてコードで描かれたグラデーションと単色です。明るい紙、暗いインク、冷たいスレート、暖かい砂、くすんだ苔、柔らかい熾火、素の単色、そして透明出力のための「なし」。意図的に静かにしてあります。背景の仕事は、録画を落とし込まれ照らされたものに見せることであって、見られることではありません。同じく意図的に、紫と青のオーロラはありません。それは製品動画を一瞬で古びさせ、ほかのすべてと同じに見せる視覚的な決まり文句だからです。明るい UI には明るい背景、暗い UI には暗い背景を——あるいは対比のためにその逆を——選び、それ以上考えないでください。

余白・角・影

余白は録画が枠の縁からどれだけ引っ込むかで、三つの中でいちばん仕事をします。5 % 前後が良い既定値、縦形式では余分な空間が意図として読まれるのでもう少し多く、端まで見せたいときはゼロ。角丸は生のキャプチャではなくウィンドウを想起させます。影は録画に空間上の位置を与えます。既定は強さ 85 %、ぼかしとオフセットは枠に対して比例するので、どの解像度でも釣り合いが保たれます。三つとも同じ方向に壊れます。余白が多すぎると UI は読めないほど縮み、角丸が強すぎると UI の隅を食い、影が濃すぎると二十年前のプレゼン効果に読まれます。

ウィンドウ枠とブラウザ枠

選択肢は三つ。なし、三つの点が付いた素朴なウィンドウバー、アドレスバー付きのブラウザ枠。ウィンドウバーはウェブサイトでないものすべてに合います。デスクトップアプリ、道具、パネル。ブラウザ枠はウェブサイトであることが重要なときに合い、アドレスバーは**あなたが打ち込んだ URL だけ**を、打たなければ何も表示しません。既定で空なのは意図的です。実演しているものではない、もっともらしい URL を出すのは視聴者を欺くことであり、それは私たちが出荷する気のない既定値です。バーは UI に合わせて明るい方と暗い方があります。

カメラが実際に動かしているもの

知っておく価値があります。構成されたデモが正しく見える理由を説明するからです。背景は固定されたままで、拡大したり動いたりするのは枠に入った録画のほうです。ズームは枠の中の画面へ入り込み、その下の面は元の位置に留まります。机の上の画面へ近づいていくカメラと同じで、世界全体が拡大するのとは違います。もし背景が録画と一緒に拡大したら、どのズームも安っぽいスライドの切り替えのように感じられるでしょう。同じ描画エンジンがプレビューと書き出しファイルの両方を描くので、編集中に見ているものがエンコーダの受け取るものです。