サイトのコンテンツの背後で動画を自動的に再生させて、魅力的な視覚効果を追加します。

サイトの背景のスタイルの1つに、動画を使用してダイナミックな視覚効果を得るというものがあります。たとえば、背景動画の上にテキストや画像を追加することで、ページの立体感と躍動感を演出することができます。これらの動画は無音でループ再生されます。背景動画については、次のことができます。

• サイトのバージョンに応じて、ページ セクション、バナー、その他のエリアでYouTubeおよびVimeo動画を使用できます。
• バージョン7.1では、所有する動画をセクションの背景にアップロードできます。

見た目と雰囲気をカスタマイズするには、定型化されたフィルターやオーバーレイの色を適用することもできます。

すべての背景スタイル設定オプションについては、「サイトの背景のスタイル設定」を参照してください。

ヒント: 画像効果やユニークな背景用アートを使ったアニメーション背景を追加することもできます。詳細については、「セクションの背景画像」および「セクションの背景用アート」を参照してください。

動画を見る

始める前に

一般的なヒント

• ストリーミング動画の品質と解像度は、動画のホスティング サービスが責任を負います。ストリーミングの品質は、Squarespaceの管轄外です。動画の画質が低く見える場合は、デザインのヒントを参考にしてください。
• Squarespaceにアップロードした動画は、デバイス、ブラウザー、インターネット接続に応じて1080pまたは360pで表示されます。表示する解像度を手動で選択することはできません。
• デザインのヒントに従った背景動画はコンピューターには表示されますが、モバイル端末の場合、訪問者の接続速度やブラウザーのバージョンによっては表示されない場合があります。モバイル端末で背景動画を読み込めない場合は、モバイル用代替画像が表示されるように設定してください。
• ページの背景またはバナーのオーバーレイの色は、動画のバッファ中に表示されます。動画の読み込みに数秒かかる場合は、モバイル用代替画像が表示されることがあります。読み込み時間はインターネット接続によって異なります。
• 背景動画はYouTubeとVimeoのURLをサポートしていますが、埋め込みコードの追加はサポートしていません。
• 背景動画は、デバイスが低電力モードまたは省電力モードのときは表示されません。モバイル用代替画像を追加すると、代替画像が表示されます。代替画像を追加しない場合、代わりに動画のサムネイルと、応答しない再生ボタンが表示されます。

YouTube

• オーバーレイ広告を無効にします。そうしない場合は、背景動画の上にオーバーレイ広告が表示されます。
• 動画が読み込まれると、訪問者にはYouTubeロゴ、動画のタイトル、時計アイコン、または共有アイコンが一時的に表示されることがあります。これは、レイアウトとデバイスによって異なります。
• 動画の前に再生される動画広告 (プレロール広告) は、背景動画では再生されません。

Vimeo

• Vimeoから背景動画を追加するには、有料のVimeoプランが必要です。
• カバー ページまたはバナーにHD Vimeo動画を追加することはできません。

デザインのヒント

背景動画はサイトの視覚的な魅力を高める良い方法ですが、他のサイト コンテンツの邪魔にならないようにする必要があります。ここでは、背景動画を美しく見せるためのベスト プラクティスをいくつか紹介します。背景動画をアップロードする場合は、動画の要件をご覧ください。

どの動画を背景に使うかを考える際は、以下のヒントを参考にしてください。

ヒント	備考
動画ファイルを小さくする	埋め込み動画の場合、動画の長さに制限はありません。アップロードされた動画の場合、動画の長さ制限は60秒です。動画の長さと解像度は、動画ファイルのサイズに影響します。 サイズの大きな動画ファイルは読み込みに時間がかかり、訪問者の接続状況によっては動画が途中で一時停止することがあります。次の点に留意してください。 理想的なフレーム レートは、特に動画がスローモーションで表示される場合、毎秒約60フレームです。 モバイル端末で動画がぼやけて見える場合は、フレーム レートを毎秒60フレーム以上に上げてから、動画を再アップロードしてみてください。 動画の長さは40秒以内にしてください。 短い動画では、ループ時に背景色が表示される頻度が高くなります。 1080pの解像度と少なくとも3 Mbpsのビットレートを使用してください。 動画を撮影するときは、ショットの動きやショット内のオブジェクトの動きをなるべく抑えてください。背景動画は、多くの場合、動きが少ない方がより滑らかに見えます。
横長の縦横比を使用する	セクションの背景は、コンテンツと訪問者のブラウザーのウィンドウ サイズに基づいて自動的にサイズが変更されます。 トリミングを最小限に抑えるには、横長の縦横比 (16:9など) の動画を使用してください。 動画の被写体が中央付近にあって、周囲にトリミングしても問題ない程度のスペースがある動画を探したり録画したりするようにしてください。
ページあたりの背景動画の数を制限する	ページあたりの背景動画の数は2個以下としてください。これによりページ サイズが小さくなり、読み込み時間が短縮されます。
スムーズなトランジションの動画を選ぶ	動画のアクセシビリティを維持するために、1秒間に3回以上点滅するコンテンツを動画内に含めることは避けてください。 トランジションを考慮し、急激なカット チェンジや過度のパンを避けてください。画面の揺れが激しい動画は、訪問者に不快感を与える場合があります。
テキストとのコントラスト	フォントの色を変更します。たとえば、動画が終始暗い場合は、オーバーレイ テキストに明るい色のフォントを選択します。 フィルターを使用して動画の明るさを変更します。 色のコントラストの詳細については、「Squarespaceサイトのアクセシビリティを高める」を参照してください。

ステップ1 - 動画ファイルまたはURLを準備する

バージョン7.1では、セクションの背景に動画ファイルをアップロードすることで背景動画を追加できます。動画をYouTubeまたはVimeoにアップロードして、その共有URLを見つけることもできます。

注: URLに動画の特定のセクションのタイム スタンプが含まれないようにしてください。タイム スタンプを含めると、動画が読み込まれなくなります。

動画をアップロードする

動画ファイルのアップロードを準備するにあたり、まず動画が動画アップロード要件を満たしていることを確認してください。アップロードする背景動画の長さ制限は60秒です。

YouTube

1. YouTubeアカウントを作成するか、ログインします。
2. 動画をアップロードするか、すでにアップロードした動画を見つけます。
3. 動画が [限定公開] または [公開] に設定されており、埋め込みが許可されていることを確認してください。
4. 動画の共有URLをコピーします。

Vimeo

1. Vimeoアカウントを作成するか、ログインします。
2. 動画をアップロードするか、すでにアップロードした動画を見つけます。
3. 動画のプライバシー設定が [公開] または [Vimeoから非表示] に設定されていることを確認します。[任意の場所] または [特定のドメイン] への埋め込みを許可します。特定のドメインにのみ埋め込みを許可する場合は、表示されるテキスト フィールドに必ずWebサイトのドメインを追加してください。
4. 動画の共有URLをコピーします。

ステップ2 - 動画を追加する

動画を追加する手順は、サイトのバージョンと動画を追加する場所によって異なります。

ヒント: URLを追加するまでは、デモ プレースホルダーとして海を映した短い動画が表示されます。

ロック画面

画像やスライドショーの代わりに背景動画をロック画面に追加できます。ロック画面はすべてのサイトでサポートされています。

ロック画面に動画を追加するには、次の手順に従ってください。

1. [ロック画面] パネルを開きます。
2. [ロック画面] をクリックします。
3. [メディア] をクリックします。
4. [動画] タブをクリックします。
5. 動画のURLを [動画URL] フィールドに貼り付けます。

ステップ3 - 背景の幅を選択する

背景動画は、セクションの端から端までフルブリードで表示することも、はめ込みで表示することもできます。

• [フル ブリード] は、サイトの幅いっぱいに、ブラウザー ウィンドウの一方の端からもう一方の端まで画像を広げます。
• [はめ込み] を選択すると、画像が少しインデントされ、画像の周囲に境界線が生成されます。

画像が [はめ込み] に設定されている場合、境界線の色を設定できます。

ステップ4 - フィルターを追加する

フィルターを使用すると、動画に変化を加えて、スタイリッシュな見た目にすることができます。フィルターは、動画のモバイル用代替画像にも影響します。フィルターの効果は動画の色やイメージに依存するので、適切な効果を見つけるためにいろいろ試してみることをおすすめします。

フィルターを追加するには、[動画] タブの [フィルター] ドロップダウン メニューをクリックします。[反転] を除くすべてのフィルターでは、スライダーを使用して効果の強弱を調整できます。フィルター効果はブラウザーによってレンダリングが異なる場合があります。

ステップ5 - 再生速度を変更する

YouTubeまたはVimeoのURLリンクを使用している場合は、[再生速度] の設定を変更して、動画の速度を増減できます。既定の速度は1xで、これは動画が通常速度で再生されることを意味します。

ステップ6 - モバイル用代替画像を追加する

モバイル ブラウザーは背景動画をサポートしていますが、接続速度とブラウザーのバージョンによっては、すべての訪問者にバナー動画が読み込まれない場合があります。バナー動画を読み込めない場合は、モバイル用代替画像が表示されるように設定できます。フィルターはモバイル用代替画像にも適用されます。最良の結果を得るには、画像をアップロードする前にWeb表示用に書式設定を行ってください。

モバイル用代替画像を追加する方法は、サイトのバージョンによって異なります。モバイル用代替画像を追加するには、次の手順に従ってください。

ヒント: モバイル用代替画像としてアニメーション.gifを追加して、動画と同様の効果を生み出すこともできます。

背景動画を無効にするか削除する

既存の背景動画が不要になった場合は、動画を無効にするか削除できます。背景動画を無効にするには、背景画像に切り替えます。これにより、設定した画像が背景動画に置き換わります。背景動画を削除できるのはバージョン7.1サイトのみです。動画を削除すると、サイト上の動画ストレージのスペースが増えます。

動画を見る (バージョン7.0)

この動画はSquarespaceバージョン7.0に適用されます。