header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image
この記事では下記を説明します:
  • メニューを追加する
  • メニューアイテムを追加・管理する
  • メニューにドロップダウンを追加する
  • メニューのレイアウトを変更する
  • 縦型メニューと横型メニューをデザインする
  • モバイルでのヘッダーメニューを調整する
  • よくある質問

Wix Harmony エディタ:メニューを追加・管理する

15分
この記事内
  • メニューを追加する
  • メニューアイテムを追加・管理する
  • メニューにドロップダウンを追加する
  • メニューのレイアウトを変更する
  • 縦型メニューと横型メニューをデザインする
  • モバイルでのヘッダーメニューを調整する
  • よくある質問
この記事では、2026年1月にリリースされた新 Wix Harmony エディタについて説明します。Wix Harmony エディタまたは Wix エディタのどちらを使用しているか不明な場合は、こちらで詳細を確認してください。
メニューを追加すると、訪問者がサイト内をスムーズに移動して、あなたのコンテンツをすばやく見つけることができるようになります。メニューには、重要なページやリンクを選択して、外観や動作を自由にカスタマイズすることができます。これにより、どのデバイスでも美しく表示されて機能するメニューを、サイトに整えておくことができます。
Wix Harmony エディタでサイトを作成し、ライブサイトの横型メニューに、アイテムがドロップダウン表示される様子を示したスクリーンショット。

メニューを追加する

メニューは、訪問者がサイト内のページを移動するのに役立ちます。「パーツを追加」パネルの「メニュー」カテゴリーで「横型メニュー」、「縦型メニュー」、「ハンバーガーメニュー」を選択すると、簡単にサイトページと連動したサイトメニューを追加することができます(新しいページを作成すると、自動的にそのページがメニューに表示されます)。
また、特定の領域に個別のカスタムメニューを追加して、それを横型メニュー、縦型メニュー、またはハンバーガーメニューとして表示することもできます。たとえば、サイトのフッターや独自のナビゲーションが必要なページに、カスタムメニューを作成することが可能です。

メニューを追加する方法:

  1. エディタに移動します。
  2. エディタ左上で「+追加」をクリックします。
  3. メニュー」カテゴリーを選択します。
    ヒント:カテゴリー横の「矢印」アイコン  をクリックすると、一覧を表示することができます。
  4. 追加したいメニューの種類に応じて、以下の手順に従います:
ヒント:
ヘッダーにメニューバーを追加すると、モバイルでは自動的にハンバーガーメニューになります。これにより、訪問者がさまざまなモバイル端末からメニューを表示してアクセスできるようになっています。
Wix Harmony エディタの「パーツを追加」パネルで「メニュー」カテゴリーが表示されているスクリーンショット

メニューアイテムを追加・管理する

メニューを追加したら、表示するアイテムを選択します。通常のサイトページ、複数のアイテムから成る Wix のアプリや CMS のすべてのページ、または複数のアイテムから成るページから特定のページを選択することができます。ドロップダウンコンテナやリンクを追加して、クライアントのニーズに合わせてメニューアイテムをカスタマイズすることも可能です。
既存のメニューとそこに表示されるアイテムは、いつでも編集することができます。コンテンツを最新の状態に保つために、アイテムを追加したり、不要なアイテムを削除したり、アイテムの順序を変更したりすることができます。

メニューを管理する方法:

  1. エディタに移動します。
  2. メニューをクリックします。
  3. メニューを管理」をクリックします。
  4. 実行する内容を選択します:
Wix Harmony のサイトメニューと「メニューを管理」パネルのスクリーンショット

メニューにドロップダウンを追加する

ドロップダウンを追加すると、関連するページを 1つのメニューアイテムにまとめることができます。ページやリンクなどの親アイテムを選択し、その下に他のページをネストすることで、ドロップダウンを作成することができます。

ドロップダウンを追加・設定する方法:

  1. エディタに移動します。
  2. メニューをクリックします。
  3. メニューを管理」をクリックします。
  4. ドロップダウンタイトルにするメニューアイテムを指定します。
  5. 最初のメニューアイテムをドロップダウンに移動させます:
    1. ドロップダウンタイトルの下に該当するメニューアイテムをドラッグします。
    2. ドラッグしたアイテムにマウスオーバーし、「その他アクション」アイコン  をクリックします。
    3. (ページ名)の下に移動」を選択します。
  6. ドロップダウンに移動させたい他のアイテムについても、上記の手順 5 を繰り返します。
Wix Harmony のサイトメニュー、「メニューを管理」パネルでアイテムを移動させ、ドロップダウンを作成しているスクリーンショット
代わりにマウスでドラッグする:
以下の GIF のように、メニューアイテムを他のメニューアイテムの右下にドラッグアンドドロップすると、そのアイテムを該当するメニューアイテムのサブアイテムに素早く変更することができます。

Wix Harmony の「メニューを管理」パネルで、アイテムをドラッグしてドロップダウンの下にネストしているスクリーンショット

メニューのレイアウトを変更する

メニューのレイアウトを分かりやすいものに変更にすると、訪問者が一目で移動したいページを見つけられるようになります。すべてのアイテムを行または列で表示したい場合は、「メニューバー」を選択してください。訪問者の画面にアイテムを表示する十分なスペースがない場合でも、横型メニューではその際の動作を制御することができます。一方、コンパクトなアイコンでナビゲーションを開きたい場合は、「ハンバーガーメニュー」を選択してください。これは、シンプルでミニマムなレイアウトや、モバイルなどでスペースが限られている場合に適しています。

メニューのレイアウトを変更する方法:

  1. エディタに移動します。
  2. メニューをクリックします。
  3. アクションバーで「形式を変更」をクリックします。
  4. メニュー」下で該当するオプションを選択します:
    • メニューバー:メニューアイテムがバーに表示されます。「表示方向」下で、バーを横向きまたは縦向きにするかを選択します。
      ヒント:横型メニューで、訪問者の画面にアイテムを表示する十分なスペースがない場合は、アイテムの動作を選択することもできます。「テキストに合わせる」を選択してメニューがテキストに合わせて広がるようにするか、「Fit to scroll(スクロールで表示)」を選択してスクロールでさらにアイテムを表示できるボタンを追加することができます。
    • ハンバーガー:訪問者には、クリックするとメニューが開く小さなアイコンが表示されます。これは、サイトをすっきりとさせて、ミニマムなレイアウトにするのに適しています。
Wix Harmony エディタのサイトメニューの「形式を変更」パネルに、利用可能なオプションが表示されている様子を示したスクリーンショット。

縦型メニューと横型メニューをデザインする

メニューは、色、枠線、テキスト、角、レイアウトなどを細かくカスタマイズすることができます。縦型メニューの場合でも横型メニューの場合でも、メニューバーとそのアイテムの外観をカスタマイズしたり、ドロップダウンのデザインや間隔を調整したりすることができます。
ハンバーガーメニューをデザインしている場合:
ハンバーガーメニューについての詳細は、こちらからご覧ください。ボタンからコンテナに至るまで、さまざまな部分をデザインすることができます。

縦型メニューまたは横型メニューをデザインする方法:

  1. エディタに移動します。
  2. メニューをクリックします。
  3. アクションバーで「すべてのデザインオプション」アイコン  をクリックします。
  4. Choose a Menu bar part(メニューバーのパーツを選択)」下で、該当するメニューのパーツを選択します。
サイトメニューの「デザイン」パネルに、デザインするパーツを選択するためのオプションが表示されている様子を示したスクリーンショット。

モバイルでのヘッダーメニューを調整する

スマートフォンでは、サイトのヘッダーがモバイル用にシンプルに表示されます。デスクトップ用のヘッダーパーツ(ナビゲーションリンク、SNS アイコンなど)はコンパクトなハンバーガーメニューの中に格納され、上部には必要なもののみが残ります。このモバイルメニュー内のパーツは、必要に応じて移動させたり、削除したりすることができます。

モバイルでのヘッダーメニューを調整する方法:

  1. エディタに移動します。
  2. ページ右上の「モバイル」アイコン をクリックします。
  3. ハンバーガーメニューアイコンをクリックします。
  4. Regular Mode(通常モード)」ドロップダウンをクリックし、「ハンバーガーメニュー」を選択します。
モバイル用のハンバーガーメニューで、「通常モード」ドロップダウンをクリックし、「ハンバーガーメニュー」を選択する様子を示したスクリーンショット。
  1. 実行する内容を選択します:
    • コンテナ内のパーツを再配置する:ハンバーガーメニューのコンテナ内で、パーツをドラッグして移動させます。
    • コンテナにパーツを追加する:「パーツを追加」パネルを使用して、ハンバーガーメニューのコンテナにさらにパーツを追加します。これらのパーツはモバイル専用であるため、デスクトップには表示されません。
    • パーツをヘッダーに戻す:パーツを右クリックし、「ヘッダーに移動」を選択します。
Wix Harmony サイトのモバイル表示でハンバーガーメニューを編集しており、ボタンを右クリックしてヘッダーに戻しています。

よくある質問

詳細については、以下の質問をクリックしてください。

Helpmate

こんにちは、さん

さらにヘルプが必要ですか?
Unlock personalized helpLog in to get the most out of Helpmate.