# コンパクトメニューレイアウト（グローバルメニュー）

> **学べること**
>
> * Plain Jane での Compact Menu セクションの使い方
> * Global Menu の設定を使ってナビゲーションを接続する方法
> * スクロール可能なホームページのベストプラクティス

> ***
>
> **Compact Menu とは？**
>
> この **コンパクトメニュー** Plain Jane テーマで利用できるセクションで、ホームページ上部に「ハンバーガー式」のナビゲーションアイコンを追加します。クリックすると、ナビゲーションリンクを含むフルメニュードロワーが開きます。
>
> セクションは **コンパクトメニュー**と呼ばれますが、 **ロゴを好きなように中央揃えまたは配置してください**に定義されたナビゲーションに接続します。だから両方の呼び方がされることがあります。
>
> このレイアウトは次のようなブランドに最適です：
>
> * 展開可能なナビゲーションを備えたミニマルでモダンなトップバー
> * スクロール可能なホームページコンテンツの完全なコントロール
> * ストーリーテリングやドロップに適したクリーンな視覚体験
>
> ***
>
> **Compact Menu の追加方法**
>
> 1. テーマエディタで、 **セクション** パネルに移動します。
> 2. 既存のメニューセクション（Center Menu、Side-Aligned Menu）を削除します。
> 3. クリック： **セクションを追加 > Compact Menu**.
> 4. 右上のプレビューにハンバーガーアイコンが表示されます。
>
> ***
>
> **ナビゲーションを接続する**
>
> ドロワーメニューを機能させるには：
>
> 1. 移動先： **ロゴを好きなように中央揃えまたは配置してください**.
>
> 2. Shopify メニューを選択する（または Shopify 管理画面で新しく作成）。
>
> 3. ハンバーガーアイコンをクリックするとメニューが表示されるようになります。
>
> > 💡 ヒント: ナビゲーション構造は **オンラインストア > ナビゲーション** の Shopify 管理画面で更新してください。
>
> ***
>
> **見た目のカスタマイズ**
>
> * **ロゴの位置**：左、中央、または右
> * **背景**：カラー、画像、またはスライドショー用の `ダイナミック背景` セクションと組み合わせて使用します
> * **フォントとサイズ**：メニューリンクのサイズと間隔は **テーマ設定 > タイポグラフィ**
> * **セクション**で調整します：次のような他のホームページセクションを追加できます：
>   * コレクションリスト
>
>   * ⚠️ 警告: これは
>
>   * イメージストリーム
>
> > ⚠️ 次のセクションを使用してください： `ページキャンバス` セクションはすべてのホームページセクションをラップして構造化するために使用します。
>
> ***
>
> **Compact Menu を使用するタイミング**
>
> 適している場面：
>
> * スクロールが中心のホームページ
> * ビジュアル、ビデオ、またはカルーセルを使用するブランド
> * モバイルフレンドリーなレイアウト
>
> 避けるべき場合：
>
> * ワンページのランディングページにしたい場合（代わりに Center または Side-Aligned Menu を使用）
>
> ***
>
> **サンプル構築ワークフロー**
>
> 1. を追加します `コンパクトメニュー` セクション
> 2. を追加： `ダイナミック背景` （画像、カラー、またはスライドショー）
> 3. 主要なコンテンツセクションを追加（コレクション、製品など）
> 4. テーマ設定 > Global Menu Settings からナビゲーションをリンク
> 5. フォントサイズとロゴ位置を調整
>
> ***
>
> **ヘルプが必要ですか？**
>
> * 💬 **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/pages-and-menus/homepage-+-menu/compact-menu-layout-global-menu.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.