背景デザイン

背景画像の位置を手動で変更するには、水平位置 (左) と垂直位置 (上) の値を入力できます。値の単位は、px、% (デフォルト)、VW、VH の間で調整できます。

タイル

デフォルトでは、背景画像は垂直方向と水平方向の両方に複製されます。

背景を水平方向、垂直方向に繰り返すか、まったく繰り返しないかを選択できます。

固定またはスクロール

の中に 背景 設定では、スクロール時の背景画像の動作を選択できます。

1. 未修理: 画像はページとともにスクロールします
2. 修理済み: スクロールしても画像はそのまま残ります

すべての背景画像はデフォルトで 未修理選択する 修理済み 画像の幅が要素の境界ではなくビューポートによって制限されるようにします。

グラデーション

グラデーションは単独で適用することも、既存の背景色や画像に重ねて適用することもできます。

グラデーションには 2 種類あります。

1. 線形グラデーション
2. 放射状グラデーション

どちらのグラデーションの種類にも、グラデーションに沿って、ある色から別の色に変化するストップ (またはポイント) があります。

注記: Safari は透明度のあるグラデーションを「透明な黒」として解釈して補間します。そのため、Safari ユーザーには透明色が黒く見える場合があります。

線形グラデーション

線形グラデーションは、角度によって制御される 1 方向に色付きグラデーションを生成します。グラデーションの角度は、次の方法で変更できます。

1. 方向ダイヤルのドットをクリックしてドラッグするか、ダイヤルの任意の場所をクリックして角度の位置を設定します。
2. 矢印をクリックすると、角度が45度ずつ回転します。
3. 入力フィールドに希望の角度を入力する

グラデーションストップ

グラデーション ストップを使用すると、グラデーション バーのストップを選択して、グラデーションの色と不透明度を調整できます。下に背景画像レイヤーがある場合は、不透明度を下げると表示されます。

グラデーションにさらに多くの色を導入するには、グラデーション バーにストップを追加します。グラデーション バーの任意の場所をクリックすると、複数のストップを含めることができます。

グラデーション バーに沿ってドラッグすることで停止位置を調整できます。

停止を削除するには:

1. 停止を長押し
2. ストップの端が透明になるまで、ストップをグラデーションバーからドラッグします。
3. 停止を削除するには離します

繰り返す

有効化 繰り返す 既存のグラデーションの位置と角度を繰り返します。

これは、最初のストップと最後のストップの位置によって決まります。より明確な繰り返しグラデーションを作成するには、最初のストップまたは最後のストップをグラデーション バーの端から離します。

逆行する

反転アイコンは停止位置を反転します。

同心グラデーション

同心グラデーションは、円形のパターンでグラデーションを形成します。

左側のカラーブレークポイントは、同心円グラデーションの中心に表示される色を表します。

アライメント

配置コントローラーのポイントの 1 つを選択して、グラデーションの中心点を設定できます。たとえば、中心のドットを押して画像コンテンツを配置することができます。

水平位置 (左) と垂直位置 (上) の値を入力して、配置を手動で変更することもできます。値の単位を px、% (デフォルト)、vw、vh の間で変更することもできます。

寸法

要素の境界に関するグラデーションの動作は、プリセットの寸法によって決まります。プリセットには次のものが含まれます。

• 近辺側: 勾配はコアポイントから最も近い側に向かって始まります
• 近くの角: 勾配は中心点から最も近い角まで始まる
• 一番遠い側: 勾配は中心点から始まり、最も遠い側に達するまで伸びます。
• 一番遠い角: デフォルト設定。グラデーションはコアポイントから始まり、最も遠いコーナーに達するまで続きます。

色合い

どの背景にも色合いを追加できます。カラーセレクターを使用して色を指定し、不透明度レベルを定義します。

画像とグラデーションのレイヤー化

複数の背景画像、グラデーション、色合いを組み込んで重ね、階層化された効果を作成します。背景レイヤーを並べ替えるには、レイヤーの上にマウスを移動し、左側の点線の縦線をタップします。

レイヤーの表示を切り替えるには、目のシンボルをタップします。レイヤーを削除するには、ゴミ箱「消去”アイコンをクリックします。

背景ビデオ

バックドロップ ビデオは、特定のコンテンツ セグメントの背景として機能する、ノイズのないループ ビデオです。Web サイトの訪問者を引き付けて注目を集めたり、Web サイトに映画のような雰囲気を加えたりするのに役立ちます。

ただし、自動再生やループする背景ビデオは、認知障害、前庭障害、または運動不耐性のある人にとっては不快感や障害を引き起こす可能性があることを認識することが重要です。サイトで背景ビデオを選択する場合は、サイト訪問者が自動再生される背景ビデオを一時停止するためのコントロールを提供することが重要です。

重要な情報: Webflowには、アクセシビリティを向上させ、サイト訪問者が背景ビデオコンテンツを一時停止または再生するために必要なコントロールを提供できるように、デフォルトで背景ビデオ用の再生/一時停止ボタンが組み込まれています。さらに、背景ビデオは、サイト訪問者が 動きを減らしたい システム設定で設定します。

統合する 背景ビデオ クイック検索（CMD/CTRL+E）を使用するか、 追加パネル > コンポーネント セクション。キャンバスにバックドロップ ビデオを配置するとすぐに、ビデオをアップロードするように求められます。

次に、デバイスからビデオを追加します。

ビデオ構成

背景ビデオ モジュールには、デフォルトで次の 3 つのアクティブな設定があります。 ループビデオ, 自動再生ビデオ、 そして 再生/一時停止ボタンを含めるチェックkboxes を切り替えることで、これらの各設定を無効にするオプションがあります。 

ループビデオ 

起動すると、 ループビデオ この機能により、背景ビデオが継続的に繰り返されます。 

重要な： WCAG 成功基準 2.2.2: 一時停止、停止、非表示 自動的に動いたり、点滅したり、スクロールしたりするコンテンツが5秒以上続く場合、ユーザーには動きを一時停止、停止、非表示にするコントロールを提供する必要があることを指定します。 ループビデオ 機能も確保し、 再生/一時停止ボタンを含める アクティブになり、訪問者にアクセスしやすいエクスペリエンスを提供します。 

自動再生ビデオ 

有効にすると、 自動再生ビデオ この機能により、ページが読み込まれるとすぐに背景ビデオが開始されます。

重要な： WCAG 成功基準 2.2.2: 一時停止、停止、非表示 自動的に移動したり、点滅したり、スクロールしたりするコンテンツが5秒以上続く場合は、制御の必要性を強調します。したがって、 自動再生ビデオ 設定を確認してください 再生/一時停止ボタンを含める アクセシブルなエクスペリエンスを提供することもできます。 

再生/一時停止ボタンを含める

有効化 再生/一時停止ボタンを含める この機能により、背景ビデオに再生/一時停止ボタンが追加され、訪問者がビデオを開始または停止できるようになります。訪問者が再生/一時停止ボタンをクリックすると、背景ビデオは自動的に一時停止します。 動きを抑えることを好む OSでオプションが有効になっているかどうかに関係なく、 再生/一時停止ボタンを含める 状態。

重要: 無効にした場合 再生/一時停止ボタンを含める、訪問者 動きを抑えることを好む 彼らのOSではバックグラウンドビデオを再生できません。 

役に立つヒント: 明確な一時停止オプションがない自動再生の動画は、サイトの離脱率を高める原因となります。動画コントロールを目に見える形で提供することで、サイトの直帰率を下げることができます。 

再生/一時停止ボタンのデザインを好みに合わせてカスタマイズすることもできます。詳細については、背景ビデオの再生/一時停止コントロールの管理に関するチュートリアルを参照してください。

サポートされているビデオファイル形式

の 背景ビデオ ユニットは、webm、mp4、mov、ogg 形式の 30 MB 未満のビデオ ファイルを受け入れます。

リマインダー: 背景ビデオのファイル名に特殊文字 (ダッシュを除く) やスペースを使用しないでください。また、パフォーマンスを向上させるためにビデオを Web 用に最適化してください。

ビデオトランスコーディング

アップロードすると、ビデオ ファイルは、幅広いブラウザー互換性を確保するために他の形式 (mp4 および webm) にトランスコードされます。この時間を活用して、デザイナー ワークスペースでデザインを続行します。

背景ビデオのプレビュー

次のいずれかの方法でビデオをプレビューできます。

1. 背景ビデオ設定のビデオサムネイルにマウスを移動します
2. 新しいタブでプレビューするには、ビデオファイル名の横にある新しいタブで開くアイコンをクリックします。
3. 上部のバーのプレビューアイコンをクリックして、背景ビデオのレイアウトを確認します。

背景ビデオの置き換え

交換するには 背景ビデオ、アクセス 背景ビデオ 動画をダブルクリックするか、 設定パネル. 

また、背景ビデオの調整 要素を選択してクリックすることで作成できます 入力クリックするだけです ビデオを置き換える 設定ウィンドウで、新しいビデオをアップロードして変換します。

セグメントの背景ビデオを活用する

活用する 背景ビデオ セグメントとして挿入します。 背景ビデオ 要素。セグメント内のコンテンツの配置とスタイル設定は他の要素と同様で、すべてのスタイル設定オプションは スタイル パネル。

ヒント: ユーザーがデータ節約モードまたは低電力モードを有効にしている場合、タッチデバイスではバックグラウンド ビデオが自動的に開始されないことがあります。

背景ビデオのオーバーレイ

グラデーションや単色のオーバーレイを追加することで、プレゼンテーションの質を高めることができます。 背景ビデオ. 使用して カラーピッカー好みの色を選択し、不透明度を調整して見やすくします。オーバーレイは 背景ビデオ ただし、セグメントの内容の下にあります。

Webflow の背景はこのように機能します。