# 2. ホームページの設定

{% embed url="<https://youtu.be/KpO8Wdo-LeI>" %}

{% hint style="info" %}

> ⚠️ 注意: `ダイナミック背景` セクションは最新のPlain JaneおよびInteractiveのバージョンでは非推奨になりました。代わりに `ページキャンバス` を使用してください — 背景画像、動画、色などに同等の機能を提供します。
>
> ⚠️ 注意: このガイドは **サポートしていません** Plain Jane Starter ユーザーにも適用されます。
> {% endhint %}

### 学べること

* Plain Jane v3 および Interactive v2 でホームページのレイアウトをカスタマイズする方法
* センターメニュー、サイド配置メニュー、コンパクトメニューを追加・設定する方法
* 最良の結果を得るために各レイアウトをいつ使うべきか
* メニューをリンクしナビゲーションを管理する方法
* 必要に応じてホームページを完全にスキップする方法

>

***

### 🛠️ 新規ユーザー向け: メニューの設定

1. 移動先： **オンラインストア** > **ナビゲーション** を Shopify 管理画面で。
2. クリック： **メニューを追加** し、例えば次のような名前を付けます `テストメニュー`.
3. 次のようなメニュー項目を追加します:
   * `メンズ` → メンズコレクションへのリンク
   * `ルックブック` → カスタムページやホームページへのリンク
   * `お問い合わせ` → Shopify の組み込みお問い合わせページへのリンク
4. クリック： **保存**.

***

### 🎨 レイアウト1: センターメニュー

これは最も人気のあるレイアウトです（例: Supreme風のホームページ）。

#### 設定方法

1. テーマを **テキストの** エディタで開きます。

<figure><img src="/files/74e917de448fb45a103acdd7892c079d73c60e63" alt="Shopify theme customizer overview"><figcaption><p>ホームページセクションを表示するテーマカスタマイザーのインターフェース</p></figcaption></figure>

2. 次のセクションが存在することを確認してください:
   * `プリローダー`
   * `メールポップアップ`
   * `ページキャンバス`
   * `センターメニュー`

> 💡 ヒント: `ページキャンバス` は非推奨の `ダイナミック背景` セクションを置き換えます。背景画像や色に使用してください。

#### メニューをリンクする

* 左パネルの `センターメニュー` セクション

<figure><img src="/files/287b7ba96cc1170e4c336b10138a0e8c2ed617a9" alt="Center Menu section selected in theme customizer"><figcaption><p>設定パネルを表示している中央メニューセクションが選択されています</p></figcaption></figure>

* 右側パネルで、 **ドロップダウンからメニューを選択します** （例: `テストメニュー`)

<figure><img src="/files/895dc9a32723b9925dc31599e8003e7773e6657b" alt="Center Menu settings panel"><figcaption><p>メニューのドロップダウンを備えた中央メニュー設定パネル</p></figcaption></figure>

<figure><img src="/files/650e7715bfbff268ed0ca9a296cba63c2cca51ad" alt="Center Menu dropdown selection"><figcaption><p>利用可能なナビゲーションメニューを表示するメニュードロップダウン</p></figcaption></figure>

#### ソーシャルメディアアイコン

* アイコンを切り替え **オンにする**
* プロフィールの完全なURLを貼り付けます（例: TikTok、Threads、Tumblr）

> 💡 ヒント: センターメニューの下にスクロール可能なコンテンツを追加しないでください。すっきりとシンプルに保ちましょう。

***

### 🎨 レイアウト2: サイド配置メニュー

縦に最小限のメニューを望むブランドに適しています。

#### セットアップ手順

1. テーマエディタで、 `センターメニュー`.
2. クリック： **セクションを追加** > `サイド配置メニュー`

<figure><img src="/files/e493bdcc3ed5125fa50d29eb76fe7f7c1d30ccca" alt="Add section modal in theme customizer"><figcaption><p>利用可能なセクションを表示するセクション追加モーダル</p></figcaption></figure>

<figure><img src="/files/638de0bbe961eafb589a817351e830c017398961" alt="Side Aligned Menu section added"><figcaption><p>サイド配置メニューセクションが正常に追加されました</p></figcaption></figure>

3. 右側パネルからメニューを選択します

<figure><img src="/files/8241c2f5a6ba5c250f63fa17e97a67876f2f48b6" alt="Side Aligned Menu settings"><figcaption><p>サイド配置メニューの設定とカスタマイズオプション</p></figcaption></figure>

#### カスタマイズオプション

* 調整: **フォントサイズ**, **リンク間隔**、および **色**
* 切り替え： **ログインリンク** 表示（お客様アカウントが有効である必要があります）
* を選択 **ロゴの配置** （左または右）
* 変更: **フォントファミリー** の下で `テーマ設定 > タイポグラフィ`

> 💡 ヒント: このレイアウトの下に製品セクションを積み重ねるのは避けてください—スクロールに向いていません。

***

### 🎨 レイアウト3: コンパクトメニュー

このレイアウトは右上にハンバーガーアイコンを特徴とします。

#### セットアップ手順

1. を追加します `コンパクトメニュー` セクション

<figure><img src="/files/1aea14a0c11b6736a44e1f6a56a5c67e5567756b" alt="Compact Menu section in theme customizer"><figcaption><p>ホームページにコンパクトメニューセクションが追加されました</p></figcaption></figure>

2. テーマ設定 > グローバルメニュー設定 の下でメニューをリンクします `ロゴを好きなように中央揃えまたは配置してください`

<figure><img src="/files/47f10bb9618824455c2b92f564bca56b5e95f60e" alt="Global Menu Settings in Theme Settings"><figcaption><p>コンパクトメニューを構成するためのグローバルメニュー設定</p></figcaption></figure>

3. 背景＋コンテンツを追加

#### を使用して:

* セクションで次を行います: `ページキャンバス` 背景色を設定するか画像をアップロードする
  * 次のようなセクションを追加します

<figure><img src="/files/c7bb071912dac91d98528cd7e0e7fdf442d9d9c5" alt="Page Canvas settings for background customization"><figcaption><p>背景画像と色を追加するためのページキャンバス設定</p></figcaption></figure>

* 商品カルーセル `コレクションリスト` または `⚠️ 警告: これは`

> 唯一推奨される **スクロール可能なホームページ用のレイアウトです。** 🚀 ホームページをスキップする（任意）

***

### 訪問者を直接コレクションに送りたいですか？

テーマ設定 > ホームページ設定

1. 移動先： `エントリースクリーンをスキップ`
2. 有効にする **宛先ページを設定します（例: 特定のコレクション）**
3. 💡 ヒント: これはホームページを必要としない製品重視のブランドに便利です。

> 📌 最後の注意点

***

### すべてのホームページ背景のカスタマイズには

* を使用して **ページキャンバス** レイアウトは最小限で機能的に保ちましょう
* 変更をプレビューするには必ず保存してリフレッシュしてください
* サポートされるレイアウト:

センターメニュー（静的ランディング）

* サイド配置メニュー（最小限の垂直ナビ）
* コンパクトメニュー（スクロール可能なホームページビルダー）
* &#x20;

### **ヘルプが必要ですか？**

* 💬 **技術サポートはDiscordで参加してください：** <https://discord.gg/hcc2GvgZc6>
* 📧 **メールでお問い合わせ：** <support@openspaces.design>
* 💻 **ライブチャット：** 月〜金、現地時間午前10時〜午後6時（EST）に当社ウェブサイトで直接対応


---

# 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/getting-started/2.-setting-up-your-homepage.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.