# ダイナミック背景セクション

> **学べること**
>
> * 動的背景セクションの追加と設定方法
> * ビデオ、画像、オーバーレイを含む高度な背景オプション
> * モバイル最適化とレスポンシブ背景設定
> * アニメーションとトランジション効果

***

## 🎯 動的背景セクションとは？

この **ダイナミック背景セクション** Plain Jane v3.1 の強力で柔軟な背景システムで、詳細なカスタマイズオプションを使用して没入感のあるページ背景を作成できます。静的背景とは異なり、このセクションはビデオ背景、画像オーバーレイ、グラデーション、およびレスポンシブなモバイル設定をサポートします。

**主な機能：**

* フォールバック画像付きのビデオ背景サポート
* 不透明度コントロール付きのグラデーションオーバーレイ
* モバイルとデスクトップの個別設定
* アニメーションとトランジション効果
* 複数の背景サイズと配置オプション
* パフォーマンス最適化された読み込み

利用可能：

* ✅ Plain Jane v3.1+
* ✅ Plain Jane Interactive v2+

***

## 🔧 動的背景セクションの追加方法

1. 移動先： **オンラインストア > テーマ > カスタマイズ**
2. 背景を追加したいページに移動します
3. クリック： **「セクションを追加」**
4. を選択します **ダイナミック背景**
5. サイドバーで背景設定を構成します

> 💡 **注意**：このセクションは、ホームページ、ランディングページ、特別なプロモーションページでよく使用されます。

***

## 🖼️ 背景設定オプション

### **背景スタイル**

**カラー背景**

* 単色背景オプション
* 任意の16進カラー値を選択
* デスクトップとモバイルで別々の色設定
* ミニマリストデザインに最適

**画像背景**

* カスタム背景画像をアップロード
* 高解像度画像をサポート
* 複数のサイズと配置オプション
* ウェブ向けの自動最適化

**ビデオ背景**

* 動的背景用のMP4ビデオファイルをアップロード
* モバイルでは自動的に画像にフォールバック（パフォーマンスのため）
* ループと自動再生のコントロール
* パフォーマンスとデータ使用量に最適化

### **デスクトップ背景設定**

**背景色**

* デスクトップ用の主要背景色
* デフォルト： `#ffffff` （白）
* 画像/動画が読み込まれない場合のフォールバックとして使用されます

**背景画像**

* デスクトップ専用の背景画像をアップロード
* 推奨最小サイズ：1920x1080px
* JPG、PNG、WebP形式をサポート

**背景ビデオ**

* デスクトップ用の背景ビデオをアップロード
* MP4形式を推奨
* 最適なパフォーマンスのためにファイルサイズは10MB未満に保ってください
* 自動ループとミュート設定

### **モバイル背景設定**

**モバイル背景色**

* モバイルデバイス用の個別の色設定
* より良いモバイル体験のためにデスクトップとは異なることが多い
* 小さい画面向けに最適化

**モバイル背景画像**

* モバイル専用の背景画像
* 推奨サイズ：800x1200px（縦向き）
* モバイルでは自動的にビデオ背景を置き換えます

**モバイルで背景画像を表示**

* モバイルで画像を有効/無効にする切り替え
* 回線が遅い場合のパフォーマンスを向上させます
* フォールバックとしてカラー背景を使用

***

## 🎨 オーバーレイとグラデーション効果

### **トップオーバーレイ**

**オーバーレイ上部の色**

* 背景上部のグラデーションオーバーレイ色
* 奥行きを作りテキストの可読性を向上させます
* デスクトップとモバイルで別々の設定

**オーバーレイトップ不透明度**

* トップオーバーレイの透明度を制御（0〜100%）
* デスクトップ：デザインの柔軟性のために不透明度を調整可能
* モバイル：モバイル最適化のための個別不透明度制御

### **ボトムオーバーレイ**

**オーバーレイ下部の色**

* 下部のグラデーションオーバーレイ色
* 滑らかな色の移行を作成
* 視覚的な階層を強化します

**オーバーレイボトム不透明度**

* 下部オーバーレイの透明度を制御
* デスクトップとモバイルで独立した設定
* 控えめまたは劇的な効果を可能にします

***

## 📱 モバイル最適化

### **レスポンシブ挙動**

**自動モバイル切り替え**

* モバイルではビデオが自動的に画像に切り替わります
* モバイルのデータ使用に最適化
* デバイス間で視覚的一貫性を維持します

**モバイル専用設定**

* 色、画像、オーバーレイの個別設定
* モバイル閲覧向けに最適化されたファイルサイズ
* タッチに配慮したインタラクションの考慮事項

**パフォーマンス最適化**

* 背景画像の遅延読み込み（レイジーロード）
* 読み込みを高速化するための圧縮ビデオファイル
* ブラウザサポートに基づく自動フォーマット選択

***

## ⚙️ 高度なカスタマイズ

### **背景のサイズ設定**

**カバー（デフォルト）**

* 背景を領域全体に合わせて拡大縮小します
* 画像/動画の一部が切り取られる場合があります
* フルスクリーン効果に最適

**コンテイン（収める）**

* コンテナ内に収まるように拡大縮小します
* 画像/動画全体を表示します
* 余白（空白）ができる場合があります

**自動**

* 背景メディアの自然なサイズを使用します
* スケーリングは適用されません
* 特定のデザイン要件に最適

### **背景の位置**

**センター（デフォルト）**

* 利用可能なスペースの中央に背景を配置します
* バランスの取れた構図

**上/下の位置合わせ**

* コンテナの上部または下部に合わせます
* 特定の注目ポイントに有用

**左/右の位置合わせ**

* 水平位置の制御
* クリエイティブなレイアウトの可能性

***

## 🚀 ベストプラクティス

### **パフォーマンス最適化**

**ビデオ背景**

* ビデオファイルは10MB未満に保ってください
* 最高の互換性のためにH.264エンコードを使用してください
* フォールバックとして高品質のポスター画像を用意してください
* さまざまな接続速度でテストしてください

**画像最適化**

* 品質を損なわずに画像を圧縮してください
* 可能な場合はWebP形式を使用してください
* デスクトップとモバイルに適したサイズを用意してください
* 読み込み時間に対するファイルサイズの影響を考慮してください

### **デザイン上の考慮事項**

**コンテンツの可読性**

* テキストが読みやすいようにオーバーレイを使用してください
* アクセシビリティのためにコントラスト比をテストしてください
* さまざまなデバイスでの閲覧条件を考慮してください
* 読み込みに失敗した場合のフォールバックカラーを用意してください

**モバイル体験**

* 視覚効果よりモバイルのパフォーマンスを優先してください
* 遅い回線の実際のモバイルデバイスでテストしてください
* ユーザーのデータ使用量への影響を考慮してください
* 有意義なフォールバックを提供してください

### **アクセシビリティ**

**モーション感受性**

* ビデオ背景を無効にするオプションを提供してください
* ユーザーのモーション設定の好みを尊重してください
* 可能な場合は控えめなアニメーションを使用してください
* アクセシビリティツールでテスト

**カラーコントラスト**

* テキストの可読性のために十分なコントラストを確保してください
* さまざまな背景の組み合わせでテストしてください
* 色覚異常のユーザーを考慮してください
* オーバーレイグラデーションを戦略的に使用してください

***

## 🔧 トラブルシューティング

### **よくある問題**

**ビデオが再生されない**

* ビデオファイル形式を確認してください（MP4を推奨）
* ファイルサイズが制限を超えていないか確認してください
* 適切なエンコーディング設定を確認してください
* 異なるブラウザでテストしてください

**モバイルでのパフォーマンス低下**

* 画像ファイルサイズを削減してください
* モバイル背景の最適化を有効にしてください
* 実際のモバイルデバイスでテストしてください
* モバイルでのビデオを無効にすることを検討してください

**読み込みの問題**

* 画像とビデオのファイルサイズを最適化してください
* インターネット接続の要件を確認してください
* ファイル形式がサポートされているか確認してください
* 異なるブラウザのキャッシュ設定でテストしてください

### **ブラウザ互換性**

**ビデオのサポート**

* 最新のブラウザ：完全サポート
* 古いブラウザ：画像へのフォールバック
* モバイルブラウザ：パフォーマンスのために画像に置き換え

**画像形式**

* WebP：最高の圧縮、最新ブラウザでのサポート
* JPEG：汎用的な互換性
* PNG：透過性のあるグラフィックに最適

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.openspaces.design/english-ja/readme-1/sections-and-features/dynamic-background-section.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.