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

> **学べること**
>
> * 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）に当社ウェブサイトで直接対応