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