ポートフォリオ用にウェブサイトを収録するには？

• デザインファイルではなく、公開中のサイト。 実際のコンテンツ、実際の画像、実際の文字の描画。クライアントがその後に手を加えていたら、今あるものを使うか、保存しておいたビルドを収録します。
• まずデスクトップ版、次にモバイル版。 デスクトップとスマホの 2 本を並べれば、どんな説明文よりもレスポンシブ対応の仕事が伝わります。スマホ版はスマホの幅で読み込み、サイト本来のモバイルレイアウトが表示されるようにしましょう。
• ライトとダークの両方をデザインしたなら、両方とも。 テイクごとに OS の設定を切り替えるのではなく、カラースキームを指定して固定します。
• 自信のあるインタラクション。 ホバー時の状態をデザインしたカードやボタンをカーソルで指せば、その効果が動画の中で再生されます。

ポートフォリオを見て回る人は、各プロジェクトに数秒だけ目をとめて、見続けるかどうかを決めます。すぐに動き始めるか、ヒーローで 1 秒ほど静止させてから動かし、スクロール全体を 10〜20 秒に収めましょう。

ポートフォリオの動画にいちばん効くのは一時停止です。ヒーロー、機能紹介のグリッド、料金表など、判断の跡が見えるセクションごとに 1〜2 秒止めます。1 本の動画に入れられる一時停止は最大 6 か所、それぞれ 0.5 秒から 5 秒までです。ページが長いなら、全体を速くするのではなく、フッターの手前でスクロールが終わるようにトリミングしましょう。

4K で書き出す前に、各プラットフォームのアップロード上限を確認してください。アップロード時に再エンコードされる場所なら、たいていは 1080p のファイルのほうが無難です。

12 のプロジェクトを 12 通りの方法で収録すると、12 人の別々の人の作品に見えます。見せ方は一度決めて、それを繰り返しましょう。

• フレームはひとつ。 Safari か Chrome のウィンドウをライトかダークで、またはシンプルな枠線。どのプロジェクトにも同じものを使います。
• 背景もひとつ。 単色、グラデーション、36 種類のプリセットのどれか、またはウィンドウの後ろに置く自分の画像。写真なら、ぼかしとノイズでやわらげます。
• 動きと速さもひとつ。 イージングを同じにし、ページ 1 画面あたりの秒数もほぼそろえます。
• 余白、角丸、影も一度決めておけば、どのフレームでもウィンドウの収まり方が同じになります。

音のないループ動画はアニメーション画像のように振る舞い、ミュートでインライン再生が許可されていれば、最近のどのブラウザでも自動再生されます。再生を「下へ、そして戻る」にすれば、最後のフレームが最初のフレームと一致し、ループのつなぎ目で飛びません。

<video autoplay muted loop playsinline preload="metadata"
       poster="project-poster.jpg" width="1920" height="1080">
  <source src="project.webm" type="video/webm" />
  <source src="project.mp4" type="video/mp4" />
</video>

width と height を指定すると、ファイルの読み込み中にレイアウトがずれません。poster を指定すると、最初のフレームが届く前にも何かが表示されます。