すべてが整然と並び、欲しいものが数秒で見つかる店を想像してみてください。次に、その逆を想像してみましょう。乱雑な通路、案内表示もなく、延々と探し続ける状態です。あなたなら、どちらの店で買い物をしたいでしょうか？
Shopifyメニューとストアナビゲーションも、これとまったく同じです。しっかりと構成されたメニューは、お客様を必要な商品へまっすぐ導き、ストレスなく買い物を楽しんでもらえるため、売上アップにもつながります。逆にナビゲーションがわかりにくいと、お客様は自慢の商品を見ることすらなく離脱してしまうかもしれません。
この記事では、以下の内容を解説します。
- わかりやすいストアナビゲーションがユーザー体験と売上に与える重要性
- Shopifyメニューの設定方法とカスタマイズ方法
- 高評価のShopifyメニューアプリのおすすめ
読み終える頃には、探索しやすく思わず引き込まれるShopifyストアを作るための知識がすべて手に入っているはずです。
1. Shopifyメニュー：ストアナビゲーション向上ガイド
しっかりと構成されたメニューこそ、スムーズで快適な買い物体験の秘訣です。お客様がShopifyストアを訪れたとき、迷うことなく必要な商品にたどり着けるようにする必要があります。そこで役立つのがShopifyメニューです。
1.1. Shopifyメニューとメニュー項目とは
Shopifyにおけるメニューとは、お客様がストア内を移動するために使う、体系立てられたリンクの集合です。商品コレクションやブログページ、カスタマーサービス情報など、さまざまなセクションへの道しるべとしての役割を果たします。
各メニューは複数のメニュー項目で構成されています。メニュー項目とは、メニュー内の個々のリンクのことで、商品ページ、コレクション、外部URL、お問い合わせフォームなど、特定の行き先へお客様を導きます。
例えば、ファッションストアのShopifyメニューには、次のようなメニュー項目が含まれることがあります。
- ホームページ：お客様がすぐにメインページへ戻れる項目。
- カタログ／ショップ：全商品やカテゴリー別コレクションへ直接アクセスできる項目。
- 私たちについて：ブランドストーリーを伝える項目。
- お問い合わせ：カスタマーサポートやお問い合わせ用の項目。
メニュー項目はドロップダウンメニューの中に入れ子にでき、より整理された構造を作ることもできます。例えば「衣類」というメニュー項目の中に、「メンズ」「レディース」「キッズ」といったサブメニュー項目を展開できます。
1.2. Shopifyメニューの一般的な種類
Shopifyでは、マーチャントがいくつかの種類のメニューを作成できます。それぞれがナビゲーションの改善と顧客体験の向上に独自の役割を果たします。ひとつずつ見ていきましょう。
- メインメニュー：通常ヘッダーにあるメインのナビゲーションバーで、ホームやショップ、お問い合わせなどの主要ページに最適です。
- フッターメニュー：ストア下部にあり、ポリシーやFAQ、カスタマーサービスへのリンクによく使われます。
- ドロップダウンメニュー：1つのメニュー項目の下に複数のリンクをまとめてナビゲーションをわかりやすくする方法で、商品数が多いストアに最適です。
- 顧客アカウントメニュー：顧客アカウントを利用しているストアで使用でき、注文履歴やプロフィール設定、保存済み住所へすぐにアクセスできます。
1.3. Shopifyメニューでできること
Shopifyメニューでは、主に次のようなことができます。
- メニュー項目の追加：商品、コレクション、ウェブページ、ブログ記事、ポリシー、外部サイトなどへのリンクを作成できます。
- メニュー項目の編集：既存のメニュー項目の名前やリンク先を変更できます。
- メニュー項目の削除：メニューから項目を削除でき、ドロップダウンメニュー内の入れ子項目も同時に削除されます。
- メニュー項目の並べ替え：ドラッグ操作でメニュー項目の表示順を変更できます。
これらの操作は、Shopify管理画面の「メニュー」ページから行えます。ストアのナビゲーションを整理し、顧客体験の向上に役立ちます。
Shopifyメニューの種類がわかったところで、いよいよ実践です！次のセクションでは、Shopifyでメニュー項目を追加する方法を解説します。ストアの使いやすさを高め、売上アップにつながるナビゲーションを構築していきましょう。
2. Shopifyでメニュー項目を追加する方法
Shopifyでメニュー項目を追加するには、次の簡単な手順に従ってください。
- Shopify管理画面から「コンテンツ」＞「メニュー」に移動します。
- 編集したいメニューの名前をクリックします。
- 「メニュー項目を追加」をクリックします。
- 「名前」欄に、追加したいリンクの名前を入力します。この名前がお客様に表示されるメニュー名になります。
- 「リンク」欄で、リンクの種類を選択します。
- ホームページ：オンラインストアのホームページへリンクします。
- コレクション：すべてのコレクション、または特定のコレクションへリンクします。
- 商品：すべての商品、または特定の商品へリンクします。
- ページ：オンラインストア内の特定のページへリンクします。
- ブログ：オンラインストア内のブログへリンクします。
- ブログ記事：オンラインストア内の特定のブログ記事へリンクします。
- 検索：オンラインストアの検索ページへリンクします。
- ポリシー：オンラインストア内のポリシーページへリンクします。
- 「コレクション」「商品」「ページ」「ブログ」「ブログ記事」「ポリシー」のいずれかを選んだ場合は、ドロップダウンメニューからメニューに追加したい行き先を選択します。
- 「メニューを保存」をクリックします。
メニュー項目の追加はほんの始まりに過ぎません。ストアの成長に合わせて、ナビゲーションを常に新鮮でわかりやすい状態に保つため、名前の変更や並べ替え、リンクの更新が必要になることもあります。次のセクションでは、Shopifyでメニュー項目を編集する方法を解説しますので、ビジネスのニーズに合わせてストアのメニューを簡単に調整できるようになります。
3. Shopifyでメニュー項目を編集する方法
Shopifyなら、必要なときにいつでも簡単にメニューを変更できます。
- Shopify管理画面から「コンテンツ」＞「メニュー」に移動します。
- 編集したい項目を含むメニューの名前をクリックします。
- 「メニュー項目」セクションで、項目名の横にある「編集」をクリックします。
- 必要な変更を行います。
- メニュー項目の名前を変更するには、「名前」欄に新しいテキストを入力します。
- メニュー項目のリンク先を変更するには、リンク欄の横にある「×」をクリックし、新しい行き先を入力または選択します。
- 「変更を適用」をクリックします。
- 「保存」または「メニューを保存」をクリックします。
メガメニューやアイコン、画像、多階層のドロップダウンなど、より高度なメニュー機能が必要な場合は、Shopifyアプリが役立ちます。メニューのカスタマイズに人気のアプリには、次のようなものがあります。
- Qikify Mega Menu & Navigation：カスタマイズ可能なナビゲーションスタイルでユーザー体験を向上させるShopifyメニューアプリ。
- Meteor Mega Menus：画像と動的なレイアウトで美しいShopifyメニューを作成。
- Buddha Mega Menu：柔軟なドロップダウンと高度なスタイリングオプションを追加。
これらのアプリを使えば、Shopify標準のメニュー機能を超えて、より柔軟にメニューをデザインできます。
4. Shopifyナビゲーションメニューからドロップダウンアイコンを削除する方法
Shopifyナビゲーションメニューからドロップダウンアイコンを削除するには、テーマのコードにアクセスし、ドロップダウン機能に関連する矢印やアイコンを制御するCSSを編集する必要があります。通常は、アイコンを表示している特定の要素を非表示または削除するスタイルを追加します。
CSSの変更以上に柔軟な対応をお求めなら、サードパーティアプリを使えば、Shopifyストアのナビゲーションをカスタマイズ、再デザイン、あるいは全面的に刷新できます。これらのアプリでは、アイコンの削除、独自スタイルの追加、ユーザー体験全体の向上が可能です。
コードに触れることなくストアのナビゲーションを調整できる、より簡単な方法を提供しており、ノーコードを好むマーチャントに最適です。
5. Shopifyでドロップダウンメニューを作成する方法
Shopifyでドロップダウンメニューを作成するには、次の手順に従ってください。
- Shopify管理画面から「コンテンツ」＞「メニュー」に移動します。
- メインメニューの名前をクリックします。
- メインメニュー項目のいずれかをドロップダウンメニューのヘッダーとして選ぶか、新しいメニュー項目を追加してヘッダーにします。ヘッダーにリンクを設定したくない場合は、ヘッダーのメニュー項目の「検索またはリンクを貼り付け」欄に「#」と入力します。
- ドロップダウンメニューに含めるメニュー項目を追加するには、次の操作を行います。
- 「メニュー項目を追加」をクリックします。
- 「名前」欄に、メニュー項目の名前を入力します。
- 「検索またはリンクを貼り付け」欄に、メニュー項目の行き先を入力または選択します。
- 「追加」をクリックし、メニュー項目をクリック＆ドラッグしてヘッダーのメニュー項目の下に入れ子にします。
- 「メニューを保存」をクリックします。
Shopify標準のメニュー設定でもシンプルなドロップダウンは作成できますが、サードパーティアプリを使えば、メガメニューや複数カラムのレイアウト、画像、アイコンを取り入れて、ナビゲーションをさらに一段階引き上げることができます。
次のような選択肢もチェックしてみてください。
- Qikify Mega Menu & Navigation：商品数の多いストア向けに、体系的で整理されたナビゲーション体験を提供。
- Globo Mega Menu：アニメーションとアイコンを取り入れた、スタイリッシュでインタラクティブなドロップダウンを構築できます。
- Navi+ TabBar/Mega Menu Builder：高度なスタイリングオプションでカスタムのShopifyメニューバーやメガメニューをデザインできる強力なツール。
これらのアプリを使えば、コードに触れることなくプロフェッショナルで見た目にも魅力的なメニューをデザインでき、お客様にとってより魅力的なナビゲーションを実現できます。
6. Shopifyのメガメニューに画像とコレクションを追加する方法
メガメニューは、大量のリンクを視覚的に魅力的なレイアウトに整理できる強力なナビゲーション機能です。メガメニューに画像を追加すると、ユーザー体験が向上し、主要なコレクションを目立たせ、ナビゲーションをより直感的にできます。
さらに、コレクションを使えば関連商品をグループ化でき、お客様がストアを回遊しやすくなります。ナビゲーションメニューにコレクションを追加すれば、特定の商品カテゴリーへお客様を誘導できます。
テーマがカスタムコーディングに対応している場合は、LiquidファイルとCSSファイルを編集して、Shopifyのメガメニューに手動で画像を追加することもできます。
一方、コードの編集に不安がある場合は、Shopifyアプリを使うことで、メガメニューへ画像を簡単に追加できます。これらのアプリを使えば、画像や高度なレイアウトを取り入れた、より視覚的に洗練されたコレクションメニューを作成しやすくなります。
Shopifyのメガメニューアプリをインストールし、セットアップガイドに沿って進め、標準搭載のツールを使ってShopifyメニューをダイナミックに演出してみてはいかがでしょうか。お客様にとって、ストアがより回遊しやすくなります。
7. Shopifyメニューを極める：ストアナビゲーションを次のレベルへ
しっかりと構成されたShopifyメニューは、ナビゲーションの改善、買い物体験の向上、そしてお客様を適切な商品やページへ導くために欠かせません。シンプルなドロップダウンメニューの設定、画像の追加、コレクションの整理など、ストアのナビゲーションを最適化することで、エンゲージメントと売上の向上につながります。
Shopify標準のツールやサードパーティアプリを活用すれば、ストアのニーズに合わせた、シームレスで見た目にも美しいメニューを作成できます。時間をかけてメニュー構成を磨き上げれば、お客様はより快適な回遊とコンバージョン率の向上という形で応えてくれるはずです。
