本ドキュメントは、Framerを学ぶ国内ユーザーが韓国語資料の不足で感じる困難を解消するため、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerをお使いの皆様のお役に立てればと思います。

Framerのロード最適化機能

Framerはウェブサイトの速度を維持するために動画のロード最適化機能を提供します。ただし、現在のところ動画ファイル自体を変換したり、容量を最適化したりはしていません。

1. ロード最適化の原理

動画をレンダリングすることは、特にモバイル環境でデバイスの性能に負担をかける可能性があります。Framerは動画の再生を遅らせ、ウェブサイトのバッテリーとデータ使用量を削減できるようにしています。

最適化を有効にするためには、以下の2つのステップを実行してください。

1. すべての動画にポスターを追加してください。
   注: これはSEOにも良い影響を与えることができます。

2. FramerのAssetsタブでVideoコンポーネントを最新版に保ってください。

Framerの動画最適化には以下のような機能が含まれています。

• ポスターを含んだ動画の遅延読み込み
  ポスターが設定された動画はビューポート付近に到達したときだけロードされるため、初期ロード時間が短縮されます。例えば、ページ下部の動画はユーザーがほぼ到達したときにロードされるため、初期ページ速度がかなり速くなる可能性があります。

• ビューポート外の擬似GIF動画は再生一時停止
  コントロールなしでミュート、ループ、自動再生される動画（実際にはGIFのように動作する動画）はビューポートを離れると一時停止します。これにより無駄なリソースの浪費を防ぐことができます。

2. 動画ファイル自体を最適化する方法

1. アップロード前にビデオコンテンツを最適化する
   Framerはアップロードされた動画を変換できないため、4K動画をアップロードすると小さい画面でもそのまま4Kで再生されます。

   • 適応品質を適用する
     ユーザーの画面やネットワーク速度に応じて適応品質を適用するには、FramerのInsertパネルでYouTubeまたはVimeoコンポーネントを使用してください。

   • 動画を圧縮する
     動画を圧縮するには、ffmpeg（ウェブ版）やHandbrakeの「Web Optimized」設定を使用してみてください。
     
     

2. 推奨ファイル形式とコーデックを選ぶ
   AV1コーデックは一部の古いiOSやMacOSバージョンではサポートされていません。ほとんどのブラウザで安定した再生を確保するためには、H.264コーデックと.mp4拡張子の使用をお勧めします。

movflags +faststart

注: 高度なユーザー向けには、ffmpeg実行時に上記のコマンドを追加してブラウザ再生速度を向上させることができます。

Framerが動画ファイルを直接最適化しない理由

ビデオ最適化は複雑でコストがかかるため、効果的にビデオファイル自体を最適化するには、YouTubeやVimeoのような大規模なメディア処理インフラが必要です。しかし、Framerはそのようなビデオストリーミングサービスを構築するよりも、ウェブサイト作成体験を最大限に簡潔で迅速にすることに集中しています。

ドキュメントの手順をすべて実行しても問題が続く場合は、FramerのContactページを通じてサポートチームにお問い合わせください。

この記事はFramer公式ブログの「How videos are optimized in Framer」を翻訳・アレンジしたコンテンツです。