# 背景の設定

背景はあなたのインタラクティブスペースの基盤です。このガイドでは、インタラクティブな体験を最適にするための背景画像の選択、アップロード、最適化方法について説明します。

## 🎨 背景画像の要件

### 推奨仕様

* **解像度**: 最低1600x900px（16:9アスペクト比）
* **ファイル形式**: JPGまたはPNG（読み込みを高速化するためにWebP対応）
* **ファイルサイズ**: 最適なパフォーマンスのために2MB未満
* **画質**: あらゆるデバイスで鮮明に表示される高解像度

### アスペクト比に関する考慮事項

* **16:9（1920x1080）**: 標準的なワイドスクリーン、ほとんどのデバイスで適切に動作します
* **4:3（1600x1200）**: より正方形に近いフォーマットで、製品重視のシーンに適しています
* **21:9（2560x1080）**: ウルトラワイドで、ライフスタイル撮影に映画的な雰囲気を与えます

## 📂 背景のアップロード

### 手順1：背景設定にアクセス

1. **テーマカスタマイザーを開く**
   * 移動先： **オンラインストア → テーマ**
   * クリック： **テキストの** Plain Jane Interactive 上で
2. **Interactive Environment セクションを選択**
   * Interactive Environment セクションをクリック
   * を探してください **背景** 設定

### 手順2：画像をアップロード

1. **画像ソースを選択**
   * **新規アップロード**: コンピュータから画像を追加
   * **既存を選択**: アップロード済みファイルから選択
   * **無料画像**: Shopifyのストック写真を閲覧
2. **画像最適化のヒント**
   * 高品質の元画像を使用する
   * アップロード前に圧縮する（TinyPNGなどのツール）
   * モダンブラウザ向けにWebP形式の使用を検討する

## 🔧 背景表示設定

### 画像フィットのオプション

#### カバー（推奨）

* **挙動**: コンテナ全体を埋める
* **利点**: 空白がなく常に全体を覆う
* **考慮点**: 画像の一部が切り取られる可能性がある
* **最適用途**: ライフスタイルのシーン、部屋の設定

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

* **挙動**: コンテナ内に画像全体を表示する
* **利点**: 画像を決して切り取らない
* **考慮点**: 画像の周りに空白ができる場合がある
* **最適用途**: エッジに重要なディテールがある製品写真

#### フィル（埋める）

* **挙動**: 画像を正確にフィットするよう引き伸ばす
* **利点**: コンテナにぴったり適合する
* **考慮点**: 画像の比率が歪む可能性がある
* **最適用途**: 抽象的な背景、パターン

### 背景の位置

切り取りが発生した場合にどの部分を表示するかを制御します：

* **中央**: デフォルト、主要な被写体を維持します
* **上**: 画像の上部に焦点を当てる
* **下**: 下部を強調する
* **左右**: 被写体が中心から外れている画像向け

### 背景のアタッチメント

* **スクロール**: 背景はページのコンテンツとともに移動します（デフォルト）
* **固定**: コンテンツがスクロールしても背景は位置を保ちます
* **ローカル**: 背景は要素のコンテンツとともにスクロールします

## 🎯 適切な背景の選び方

### シーンの種類

#### 部屋の設定

**最適な用途**: 家具、ホームデコ、照明

* よく照らされた室内空間
* 製品配置のための複数の面
* 自然な製品の文脈

**ヒント**:

* シーン全体で良好な照明を確保する
* 過度にごちゃごちゃしたスペースは避ける
* 部屋の角度（角度からの撮影 vs 正面）を考慮する

#### ライフスタイルの文脈

**最適な用途**: ファッション、アクセサリー、パーソナルケア

* 製品を使用または着用している人々
* 自然な環境
* 本物の状況

**ヒント**:

* 可能であれば多様なモデルを含める
* 製品を実際の使用例で見せる
* 販売可能なアイテムに焦点を維持する

#### 製品ショーケース

**最適な用途**: 技術製品、コレクション、新商品の場合

* クリーンでミニマルな背景
* 集中した製品配置
* プロフェッショナルなスタイリング

**ヒント**:

* 競合しない中立的な背景を使う
* 製品と背景のコントラストを確保する
* 照明で視覚的階層を作る

### 色とコントラストに関する考慮事項

#### 高コントラストの背景

* **利点**: インタラクティブポイントが明確に目立つ
* **最適用途**: クリーンでミニマルなデザイン
* **例**: 白いスタジオ背景、暗めのドラマチックなシーン

#### 低コントラストの背景

* **利点**: 控えめで洗練された印象
* **課題**: ポイントが見えにくくなる可能性がある
* **解決策**: 対照的なポイント色を使用する、微妙な影を追加する

## 📱 モバイル最適化

### レスポンシブな背景の挙動

* **自動スケーリング**: 画像が画面サイズに合わせて調整される
* **焦点の保持**: 重要な領域が表示されたままになる
* **パフォーマンス最適化**: モバイルデバイス向けに小さい画像を使用

### モバイル固有の考慮点

* **シンプルな構図**: 小さい画面では要素を減らしたほうが良い
* **大型の製品**: 販売可能なアイテムが見えるようにする
* **タッチのアクセシビリティ**: インタラクティブ領域の周りに余白を残す

### 代替のモバイル背景

モバイル用に異なる画像の使用を検討する：

* **タイトなトリミング**: 主要な製品に焦点を合わせる
* **縦向きの構図**: ポートレート画面に適している
* **簡素化されたシーン**: 気を散らす要素を減らす

## 🎨 高度な背景テクニック

### 重ねた背景（レイヤー）

複数の画像レイヤーで奥行きを作る：

```css
.interactive-background {
  background-image: 
    url('foreground-layer.png'),
    url('main-background.jpg');
  background-position: 
    center center,
    center center;
}
```

### アニメーション背景

控えめなアニメーションは体験を向上させることができます：

* **パララックススクロール**: 背景が異なる速度で動く
* **微妙な動き**: ゆっくりと浮遊したり揺れたりする効果
* **色の遷移**: 徐々に変わるライティング効果

### 季節ごとの変化

異なる季節に合わせて背景を更新する：

* **ホリデーテーマ**: 祝祭的な装飾や色使い
* **季節商品**: 夏の屋外と冬の室内の対比
* **プロモーション期間**: セール専用のスタイリング

## 🔍 テストと最適化

### パフォーマンステスト

* **読み込み速度**: 画像の読み込み時間を監視する
* **モバイルパフォーマンス**: さまざまなデバイスでテスト
* **帯域幅の使用量**: データに配慮するユーザーを考慮する

### 視覚的テスト

* **異なる画面サイズ**: タブレット、モバイル、デスクトップ、大型画面
* **ポイントの可視性**: インタラクティブ要素が目立つことを確認する
* **色の正確さ**: 異なるモニターで確認する

### A/Bテストのアイデア

* **画像スタイル**: ライフスタイル重視 vs 製品重視
* **カラースキーム**: 暖色系 vs 寒色系
* **複雑さのレベル**: ミニマル vs 詳細な背景
* **季節性の関連性**: 現在の流行 vs 時代を超えたイメージ

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

### よくある問題

#### 画像が読み込まれない場合

* **ファイルサイズを確認する**: プラットフォームの制限内であることを確認する
* **形式を確認する**: サポートされている形式を使用する（JPG、PNG、WebP）
* **ファイルのアクセス許可**: 画像がアクセス可能であることを確認する

#### 低品質の表示

* **解像度**: より高解像度の元画像を使用する
* **圧縮**: ファイルサイズと品質のバランスを取る
* **形式の最適化**: より良い圧縮のためにWebPを検討する

#### モバイル表示の問題

* **アスペクト比**: さまざまな画面寸法でテストする
* **読み込み速度**: モバイルネットワーク向けに最適化する
* **タッチ操作**: ポイントが引き続きアクセス可能であることを確認する

### パフォーマンスの問題

* **読み込みが遅い**: 画像を圧縮し、モダンな形式を使用する
* **メモリ使用量**: 大きなファイルの影響を監視する
* **帯域幅に関する懸念**: 低解像度の代替案を提供する

## 💡 クリエイティブな背景アイデア

### ストーリーテリング背景

* **ブランドの物語**: 会社の歴史や価値観を示す
* **顧客の旅路**: 異なるライフステージや使用ケースを示す
* **製品の進化**: ビフォー/アフターのシナリオ

### インタラクティブな環境

* **バーチャルショールーム**: 実店舗のレイアウトを再現する
* **イベントスペース**: トレードショーやポップアップショップの環境
* **顧客の空間**: 実際の顧客の家や職場

### 芸術的アプローチ

* **イラスト風の背景**: カスタムアートワークやグラフィック
* **ミクストメディア**: 写真とイラストを組み合わせる
* **抽象的な構成**: ブランドテーマの芸術的解釈

## 📊 分析とインサイト

### 背景のパフォーマンス指標

* **エンゲージメント率**: インタラクティブセクションでの滞在時間
* **クリックパターン**: ユーザーが最も対話する場所
* **コンバージョントラッキング**: 異なる背景からの売上
* **デバイスの好み**: モバイル vs デスクトップのエンゲージメント

### データに基づく最適化

* **ヒートマップ**: 最もクリックされた領域を特定する
* **コンバージョン分析**: どの背景が売上を促進するか
* **ユーザーフィードバック**: 視覚的な好みに関して顧客にアンケートを行う
* **季節的パフォーマンス**: 時間を通じて背景の有効性を追跡する