# 背景の設定

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

## 🎨 背景画像の要件

### 推奨仕様

* **解像度**: 最低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 デスクトップのエンゲージメント

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

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


---

# 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/plain-jane-interactive/sections-and-features/setting-the-background.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.