ダイナミック背景セクション
Plain Jane および Plain Jane Interactive 向け
このビデオで学べること
動的な背景セクションの追加と設定方法
ビデオ、画像、オーバーレイを含む高度な背景オプション
モバイル最適化とレスポンシブな背景設定
アニメーションとトランジション効果
🎯 動的背景セクションとは？
この ダイナミック背景セクション Plain Jane v3.1 の強力で柔軟な背景システムで、詳細なカスタマイズオプションを使って没入型のページ背景を作成できます。静的背景とは異なり、このセクションはビデオ背景、画像オーバーレイ、グラデーション、レスポンシブなモバイル設定をサポートします。
主な機能：
フォールバック画像付きのビデオ背景サポート
不透明度コントロール付きのグラデーションオーバーレイ
モバイルとデスクトップの個別設定
アニメーションとトランジション効果
複数の背景サイズおよび位置設定オプション
パフォーマンス最適化された読み込み
利用可能：
✅ Plain Jane v3.1+
✅ Plain Jane Interactive v2+
🔧 動的背景セクションの追加方法
に移動します オンラインストア > テーマ > カスタマイズ
背景を追加したいページに移動します
をクリック セクションを追加
を選択します ダイナミック背景
サイドバーで背景設定を構成します
💡 注記：このセクションはホームページ、ランディングページ、特別なプロモーションページでよく使用されます。
🖼️ 背景設定オプション
背景スタイル
カラー背景
単色背景オプション
任意の16進カラー値を選択
デスクトップとモバイルの色を個別に設定可能
ミニマリストデザインに最適
画像背景
カスタム背景画像をアップロード
高解像度画像に対応
複数のサイズおよび位置オプション
Web用に自動最適化
ビデオ背景
動的な背景用にMP4ビデオファイルをアップロード
モバイルでは自動的に画像にフォールバック（パフォーマンスのため）
ループと自動再生のコントロール
パフォーマンスとデータ使用量に最適化
デスクトップ背景設定
背景色
デスクトップ用の主要な背景色
デフォルト：
#ffffff（白）画像／ビデオが読み込まれない場合のフォールバックとして使用
背景画像
デスクトップ専用の背景画像をアップロード
推奨最小サイズ：1920x1080px
JPG、PNG、WebP形式をサポート
背景ビデオ
デスクトップ用の背景ビデオをアップロード
MP4形式を推奨
最適なパフォーマンスのため、ファイルサイズは10MB未満に保ってください
自動ループおよびミュート設定
モバイル背景設定
モバイル背景色
モバイルデバイス用の個別カラー設定
より良いモバイル体験のためにデスクトップと異なることが多い
小さい画面に最適化
モバイル背景画像
モバイル専用の背景画像
推奨サイズ：800x1200px（縦向き）
モバイルでは自動的にビデオ背景を置き換えます
モバイルで背景画像を表示
モバイルで画像を有効／無効にするトグル
遅い接続でのパフォーマンスを向上
フォールバックとして色背景を使用
🎨 オーバーレイとグラデーション効果
上部オーバーレイ
オーバーレイ上部の色
背景上部のグラデーションオーバーレイ色
奥行きを作り、テキストの可読性を向上させる
デスクトップとモバイルの個別設定
オーバーレイ上部の不透明度
上部オーバーレイの透明度を制御（0〜100%）
デスクトップ：デザインの柔軟性のために不透明度を調整可能
モバイル：モバイル最適化のための個別不透明度制御
下部オーバーレイ
オーバーレイ下部の色
下部のグラデーションオーバーレイ色
滑らかな色の遷移を作成
視覚的な階層を強化
オーバーレイ下部の不透明度
下部オーバーレイの透明度を制御
デスクトップとモバイルで独立した設定
控えめから劇的な効果まで可能にする
📱 モバイル最適化
レスポンシブ動作
自動モバイル切替
モバイルではビデオが自動的に画像に切り替わる
モバイルのデータ使用量に最適化
デバイス間で視覚的一貫性を維持
モバイル専用設定
色、画像、オーバーレイを個別に設定
モバイル表示向けに最適化されたファイルサイズ
タッチ操作に配慮したインタラクション
パフォーマンス最適化
背景画像の遅延読み込み（レイジーロード）
高速読み込みのための圧縮ビデオファイル
ブラウザサポートに基づく自動フォーマット選択
⚙️ 高度なカスタマイズ
背景サイズ設定
カバー（デフォルト）
背景を領域全体を覆うようにスケール
画像／ビデオの一部がトリミングされることがある
フルスクリーン効果に最適
コンテイン
コンテナに収まるようにスケール
画像／ビデオ全体を表示
空白が残ることがある
オート
背景メディアの自然なサイズを使用
スケーリングは適用されない
特定のデザイン要件に最適
背景位置
中央（デフォルト）
使用可能スペースの中央に背景を配置
バランスの取れた構図
上／下の配置
コンテナの上部または下部に揃える
特定の注目ポイントに有用
左／右の配置
水平方向の位置調整
クリエイティブなレイアウトの可能性
🚀 ベストプラクティス
パフォーマンス最適化
ビデオ背景
ビデオファイルは10MB未満に保つ
互換性のためにH.264エンコーディングを使用
フォールバックとして高品質のポスター画像を用意する
さまざまな接続速度でテストする
画像の最適化
画質を落とさずに画像を圧縮する
可能な場合はWebP形式を使用する
デスクトップとモバイル向けに適切なサイズを用意する
読み込み時間へのファイルサイズの影響を考慮する
デザインに関する考慮事項
コンテンツの可読性
テキストが読みやすいようにオーバーレイを使用する
アクセシビリティのためにコントラスト比をテストする
異なるデバイスでの表示条件を考慮する
読み込みに失敗した場合のフォールバックカラーを用意する
モバイル体験
視覚効果よりもモバイルのパフォーマンスを優先する
実際のモバイル端末で遅い接続を想定してテストする
ユーザーのデータ使用量への影響を考慮する
意味のあるフォールバックを提供する
アクセシビリティ
モーション感度
ビデオ背景を無効にするオプションを提供する
ユーザーのモーション設定の好みを尊重する
可能な場合は控えめなアニメーションを使用する
アクセシビリティツールでテストする
色のコントラスト
テキストの可読性のために十分なコントラストを確保する
さまざまな背景の組み合わせでテストする
色覚異常のユーザーを考慮する
オーバーレイグラデーションを戦略的に使用する
🔧 トラブルシューティング
一般的な問題
ビデオが再生されない場合
ビデオファイル形式を確認する（MP4を推奨）
ファイルサイズが制限以内であることを確認する
適切なエンコーディング設定を確保する
異なるブラウザでテストする
モバイルのパフォーマンスが低い場合
画像ファイルサイズを削減する
モバイル背景の最適化を有効にする
実際のモバイル端末でテストする
モバイルでのビデオ無効化を検討する
読み込みの問題
画像およびビデオのファイルサイズを最適化する
インターネット接続の要件を確認する
ファイル形式がサポートされていることを確認する
異なるブラウザのキャッシュ設定でテストする
ブラウザ互換性
ビデオサポート
最新のブラウザ：完全サポート
古いブラウザ：画像へフォールバック
モバイルブラウザ：パフォーマンスのため画像に置き換え
画像形式
WebP：最高の圧縮、最新ブラウザでのサポート
JPEG：普遍的な互換性
PNG：透過性のあるグラフィックに最適
最終更新