この文書は、Framerを学ぶ日本国内のユーザーが直面する韓国語資料の不足による困難を解決するため、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerをお使いの皆様に少しでもお役に立てれば幸いです。

ビデオコンポーネントを追加する方法

1. トップメニューで[+] Insertボタンをクリック

2. Mediaセクションに移動

3. 希望のビデオコンポーネントをキャンバスにドラッグ

使用可能なコンポーネントには、基本のVideoコンポーネント、YouTubeコンポーネント、Vimeoコンポーネントがあります。選択するコンポーネントにより設定できるオプションが異なります。

Videoコンポーネント詳細設定

Framerでビデオを挿入した後、右パネルで様々なプロパティを調整し、望む形に構成できます。各項目は実際のユーザー体験に直接影響を与える要素であるため、どの設定が何を意味するのか正確に理解して使用する必要があります。

• Source (ソース)

  Uploadタブを選択しChoose Fileボタンをクリックすると、ローカルファイルから直接動画をアップロードできます。主に.mp4、.webm形式が使用されます。外部URLを利用したい場合はURLタブを選択してください。YouTubeまたはVimeoの動画URLを入力すると、コードの記述なしで自動的に動画が埋め込まれます。プレビューサムネイルも自動生成されるので、手軽に利用できます。

• Playing (再生状態)

  Yesに設定するとコンポーネントがレンダリングされると同時に動画が自動再生され、Noに設定するとユーザーがプレイボタンを押すまで再生されません。
  注意 : 自動再生の場合、ミュート設定が必須です。

• Radius (角の半径)

  動画の角を丸く処理できるオプションです。
  数字を入力または右端のアイコンを押して、全体または特定の角だけを丸めることができます。

• Poster (サムネイル)

  Yesを選択すると、動画が再生される前に表示するサムネイルを追加できます。Image > Uploadボタンを通じて希望の画像を挿入してください。ポスター画像は最低60 x 30ピクセル以上である必要があります。
  注意 : サムネイルは検索エンジン最適化(SEO)に役立ちます。

• Background (背景色)

  動画周辺の空白部分に表示される背景色を指定します。

• Start Time (開始地点)

  動画が開始される地点をパーセントで指定できます。
  (例: 10%に設定すると動画の10%地点から再生されます。)

  
  

• Loop (ループ再生)

  Yesに設定すると動画が終わった後、自動的に再開されます。
  短いデモ動画や繰り返しの多い効果の動画ソースに使用できます。

  
  

• Fit (画面比率調整)

  動画がコンポーネント領域に合わせられる方法を指定します。

• Controls (再生コントロール)

  Showを選択すると再生/停止ボタン、タイムラインなどのコントロールが表示されます。
  Hideを選択すると動画コントロールのインターフェースが表示されず、ユーザーが動画を操作できなくなります。

  
  

• Muted (ミュート)

  自動再生を使用するには、Mutedが必ず‘Yes’に設定されている必要がありますので、音声が必要なら動画コントローラーを‘Show’に設定し、ユーザーが直接選択できるようにしてください。

YouTubeコンポーネント設定ガイド

FramerではYouTubeリンクを入力するだけで簡単に動画を埋め込むことができます。基本設定の他にも自動再生、サムネイル品質、ボタンの色などを調整でき様々なシチュエーションに対応するカスタマイズが可能です。

• Video

  YouTube動画のURLを入力する項目です。https://youtu.be/...またはhttps://www.youtube.com/watch?v=...の形式がサポートされています。

  
  

• Autoplay (自動再生)

  Off: 基本設定。ユーザーが自分で再生しなければ動画は開始しません。
  On: ページが読み込まれると自動的に再生されます。
  ただし、ミュート(Mute)が有効であれば、ほとんどのブラウザーで許可されます。
  注意 : FramerがYouTubeに提供する連動特性はURL程度に限られており、Add Fetchのような連動項目は制限されています。

  
  

• Thumbnail (サムネイル品質)

  サムネイルはパフォーマンス最適化のために使用され、動画の読み込み前にユーザーに表示されるプレビュー画像です。
  オプション: Low Quality, Medium Quality (基本), High Quality, Off
注意 : パフォーマンスが重要なページでは、サムネイルを設定しておくとサイトの最適化に有利です。

  
  

• Color (プレイヤー色)

  YouTubeプレイヤーインターフェイスの色を選択します。
  オプション: Red (基本的なYouTubeテーマ), White (明るいインターフェーステーマ)

Vimeoコンポーネント設定ガイド

Vimeoは高品質の動画コンテンツやデザイン中心のポートフォリオサイトでよく利用されます。FramerではVimeo URLだけで簡単に埋め込むことができ、様々なオプションを通じて再生方法を細かく設定できます。

• URL

  Vimeo動画リンクを入力する場所です。
  例: https://vimeo.com/123456789

  
  

• Controls (プレイヤーコントロール)

  Show: 再生/一時停止ボタン、音量、全画面などのVimeoコントロールが表示されます。
  Hide: インターフェースをなくしてすっきりと動画のみ表示します。ポートフォリオ、アートワークの紹介などビジュアルに集中すべき場合は、Hideに設定するのが有利な場合があります。

  
  

• Autoplay (自動再生)

  Yes: ページがロードされると同時に動画が自動的に再生されます。ただし、ミュート(Mute)が有効であれば、ほとんどのブラウザーで許可されます。
  No: ユーザーが手動で再生しなければ動画は開始されません。

自動再生に関する注意事項

Chrome、Safariなどほとんどの最新ブラウザーは音声が含まれる動画の自動再生を阻止します。したがって、自動再生を設定するには必ずMuted オプションを共に有効化する必要があります。音声を要する動画の場合、ユーザーのクリックなど明示的なインタラクション後に再生されるよう構成することが良いです。

注意 : 動画がビューポートに入った際に自動再生されるように設定することも可能です。Framer公式ガイドへのリンク

ビデオアクセシビリティにおける考慮事項

音声のない動画であれば、聴覚障害者の方や音を切った状態でウェブサイトを利用している方のためにも、動画下部に簡潔にテキスト説明を提供するのが良いでしょう。

注意 : 実際のアクセシビリティの例についてはこのガイドラインを参考にしてください。

本記事はFramer公式ブログの‘動画を追加する’を翻訳・アレンジしたコンテンツです。