Shopifyでハイライトメニュー（円形メニュー）を表示する方法を5つ紹介！
はじめに
2026 年現在、EC サイトの立ち上げや改善をスピーディーに進めたい事業者にとって、Shopify は相変わらず有力な選択肢です。テーマやアプリが充実しているため、デザイン変更や機能拡張がしやすく、成長フェーズに合わせてサイトを磨き込めるのが強みです。
その中でも見落とされがちなのが、「ストア内の導線」。
どれだけ良い商品を揃えても、ユーザーが目的のページに辿り着けなければ、回遊も購入も伸びにくくなります。
そこで注目されているのが、ハイライトメニュー（円形メニュー） です。
Instagram のストーリーズのように、丸いアイコンを横並びにして目立たせることで、
- 人気カテゴリ
- キャンペーン
- 新作
- セール
- よくある質問 / 配送案内
といった重要ページへ、迷わず誘導しやすくなります。
この記事では、「Shopify メニュー ハイライト」 を実現する方法として、Shopify 円形 メニュー を表示できるアプリを中心に、厳選して 5 つ紹介します。特に最初に紹介する 「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」 は、導入〜表示〜カスタマイズまでを画像つきで丁寧に解説します。
この記事は以下の記事を参考にしています。
- Shopifyにハイライトされた円形（サークル）メニューを表示する方法は？おすすめアプリも紹介！
- Shopifyのハイライトされた円形（サークル）メニューアプリ10選を紹介！
- Shopifyにハイライトメニューを表示できるアプリ7選
- Shopifyストアにハイライトされたメニューを表示できるアプリについて徹底解説｜ご利用ガイド
Shopify のハイライトメニュー（円形メニュー）とは？
ハイライトメニュー（円形メニュー） とは、テキスト中心のナビゲーションとは別に、画像（サムネイル）付きの丸いメニュー を表示して、特定リンクを目立たせる UI のことです。
一般的な設置場所としては、次のようなパターンが多いです。
- トップページのファーストビュー直下（回遊の起点にする）
- コレクションページ上部（カテゴリ移動を補助する）
- 商品ページ内（関連カテゴリ・おすすめ商品へ誘導する）
- 特集ページの上部（関連特集に回遊させる）
「どこを押せばいいか」が直感的に伝わるので、スマホ閲覧が多いストアほど相性が良いです。
Shopify でメニューをハイライトするメリットとデメリット
メリット
視認性が高く、クリックされやすい
円形サムネイルはテキストリンクより目に入りやすく、特集や人気カテゴリへのクリック率改善が期待できます。
回遊率が上がりやすい
「次に何を見ればいいか」を提示できるので、離脱を抑えてページ回遊を促進しやすくなります。
モバイルで使いやすい
横スライドの丸いメニューはスマホ操作と相性が良く、SNS で慣れた UI に近い導線が作れます。
テーマを大きく崩さずに導線を追加できる
アプリブロックで差し込めるタイプなら、テーマの構造を変えずに目立つ導線だけ追加できます。
デメリット
やりすぎると“メニューだらけ”になり逆効果
目立つ UI なので、並べすぎると主導線が散ってしまいます。最初は 5〜10 個くらいに抑えるのがおすすめです。
画像作成の手間が発生する
統一感のある丸アイコンを用意できると強い反面、画像がバラバラだと雑に見えます。テンプレを決めて量産できると理想です。
アプリ費用がかかる場合がある
無料プランがあるアプリもありますが、ハイライト数やデザイン自由度は有料で解放されるケースが多いです。
Shopify の標準機能だけでは円形メニューの実装が難しい
Shopify にはナビゲーションメニュー（メインメニュー / フッターなど）の仕組みがありますが、基本は テキストリンク中心です。
もちろんテーマのカスタマイズで円形 UI を作り込むこともできますが、運用しながら更新することを考えると、
- ノーコードで編集したい
- ページごとに別メニューを出したい
- すぐ試して改善したい
という場合は、アプリでの実装が現実的です。
Shopifyでハイライトメニュー（円形メニュー）を表示する方法を5つ紹介
今回紹介するのは、次の 5 アプリです。
- シンプルメニューカスタマイズ｜お手軽アイコンメニュー（日本語対応・ノーコード・用途別メニューが作れる）
- KOBU ‑ Menu Highlight（Built for Shopify・バッジやグループ管理が強い）
- Mega Highlights Menu（ストーリー風 UI・画像/動画/GIF を活かした導線に向く）
- Easy Highlights Menu（無料でシンプルに試したい方向け）
- BL Story Highlight Menu Bar（低価格帯でストーリー型メニューを導入しやすい）
ここから順番に解説していきます。
シンプルメニューカスタマイズ｜お手軽アイコンメニュー
はじめに
「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」は、サークル型（円形）のアイコンメニューをストア内に設置できる Shopify アプリです。
コレクションや特集ページなど、見せたい導線を“丸いアイコン”として並べられるので、Shopify メニュー ハイライトを手軽に実現できます。
特に便利なのが、ページの用途に合わせてメニューを作り分けられる点です。
- 商品ページ用のサークルメニュー
- コレクションページ用のサークルメニュー
- 任意リンクで作るカスタムサークルメニュー
そして、基本的に コード不要。テーマエディタからアプリブロックを追加して、見た目を調整するだけで表示できます。
気になる方は、以下からインストールできます。
シンプルメニューカスタマイズ｜お手軽アイコンメニュー
「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」でできること
まずは、どんな円形メニューが作れるのかイメージを掴みましょう。
このアプリの魅力は、「見た目が映える」だけではなく、導線設計として実用的なところです。ストアでよくある悩みを、次のように解決しやすくなります。
- 人気カテゴリへ一瞬で誘導したい
- セールや特集を目立たせたい
- 商品ページで“次に見るもの”を提示したい
- テキストメニューだけだとクリックされにくい
円形メニューでリンクをハイライトできる
ストア内のコレクションや任意ページへのリンクを、円形アイコンで視覚的に強調できます。
テキストリンクよりもパッと目に入るので、回遊の起点としてかなり優秀です。
商品・コレクション用のサークルメニューを作成できる
商品ページ専用の導線、コレクションページ専用の導線など、ページの役割に合わせて別メニューを用意できます。
これができると、「全ページで同じメニューを出して雑に誘導する」のではなく、そのページに最適な導線を作れます。
カスタムメニューを挿入できる
商品・コレクションに限らず、任意のリンクを組み合わせてメニューを作れます。
キャンペーン LP、会員登録、FAQ、配送案内など、運営に必要な導線を自由に設計できます。
メニューアイテムの表示形式を選べる
表示レイアウトを 2 種類から選べるため、ストアの雰囲気に合わせた見せ方に調整できます。
「かわいい・ポップ寄り」か「シンプル・ミニマル寄り」か、方向性に合わせて選ぶと馴染みやすいです。
デザインをノーコードでカスタマイズできる
アイコン・枠線・間隔・タイトルなど、ストアのトーンに合わせて調整できます。
「とりあえず置いた感」を消して、“ちゃんとデザインされた導線”に寄せられるのがポイントです。
1 クリックでテーマに追加できる
アプリを入れたら、テーマエディタでアプリブロックを追加するだけで表示できます。
コード編集が不要なので、まずはテスト導入 → 改善、が回しやすいです。
アプリのインストール方法
インストールは通常の Shopify アプリと同じ流れです。
以下の URL からアプリページへ移動できます。
シンプルメニューカスタマイズ｜お手軽アイコンメニュー
管理画面左下の「設定」をクリックします。
「アプリ」をクリックし、「Shopify App Store」に移動します。
検索窓でアプリ名を探し、詳細画面を開きます。
アプリの詳細画面で「インストール」をクリックして進めます。
権限確認が表示されるので、内容を確認してインストールを完了します。
インストール後、管理画面が表示されれば準備完了です。
アプリブロックをテーマに追加する方法
自動でテーマに追加する場合
アプリ管理画面で、アプリブロックを追加したいテーマを選択します。
「テーマに追加」をクリックします。
テーマ編集画面が開いたら、アプリが有効化されていることを確認し「保存する」で反映します。
手動でテーマに追加する場合
「トップページ以外に置きたい」「任意セクションに差し込みたい」場合は、手動追加が分かりやすいです。
まず、テーマを選択してプレビューを開きます。
テーマエディタで、追加したい場所へ移動して「セクションを追加」または「ブロックを追加」をクリックします。
アプリタブから、用途に応じたブロックを選びます（カスタム / コレクション / 商品）。
追加できたら、設定が完了したタイミングで保存します。
商品サークルメニューのカスタマイズ項目
商品サークルメニューは、特定の商品を丸いアイコンとして並べ、商品ページ内の回遊導線を作れるメニューです。
「関連商品」「おすすめ」「このシリーズも見てほしい」など、売上に直結しやすい導線を目立たせられます。
メニュー設定
メニュータイトルや形状など、全体の見せ方を整えます。
PC / モバイルでサイズ感を変えられるのも重要です。
スマホは大きめ・PC はやや小さめにすると、バランスが取りやすいです。
商品名（タイトル）を出す / 出さないも切り替えられます。
アイコンだけで意味が伝わるなら非表示、補足が必要なら表示が無難です。
商品設定
表示したい商品を選ぶだけで、丸いメニューとして並びます。
「先頭だけ別名にしたい」など、運用上よくある小技もできます。
デザイン設定
枠線の色や太さ、アイテム間隔、タイトルの色などを調整できます。
ストアのブランドカラーに寄せると、ハイライトメニューだけ浮かずに馴染みます。
ホバー時の拡大率があると、PC で「押せる UI」感が出て気持ちよくなります（やりすぎ注意）。
グラデーション背景も使えるので、セールや推し導線を“特別扱い”したい時に相性が良いです。
カスタム CSS
「もう少しだけ細かく整えたい」という時に、ブロック専用の CSS を入れられます。
コレクションサークルメニューのカスタマイズ項目
コレクションサークルメニューは、複数のカテゴリ（コレクション）へ誘導するための円形メニューです。
トップページに置いて「まずどこを見るべきか」を提示する使い方が鉄板です。
タイトルや形状、デバイス別サイズなどを設定できます。
表示するコレクションを選ぶだけで反映されるので、運用がラクです。
デザイン設定も一通り揃っており、まとめて調整できます。
カスタムサークルメニューのカスタマイズ項目
カスタムサークルメニューは、好きなリンクを自由に設定できるタイプです。
「会員登録」「診断コンテンツ」「ギフト特集」「ランキング」「店舗情報」など、商品やコレクション以外の導線に強いです。
タイトルや形状、サイズなどを整えた上で、リンクのタイトル・URL・画像を設定します。
最後に、必要なら CSS を追加して仕上げます。
運用のコツ
最後に、実際に Shopify 円形 メニューを“成果につながる導線”にするためのコツをまとめます。
-
最初は少なめに置く
5〜8 個程度から始め、クリックされないアイコンは入れ替えるのが定番です。 -
アイコンのトーンを揃える
写真・イラスト・文字入りなど、表現が混ざると雑に見えます。テンプレを決めると強いです。 -
配置場所は「回遊の起点」に置く
トップの上部、コレクション上部、商品説明の手前など「迷いが発生しやすい場所」に置くと効きやすいです。
「ストアを華やかにする」だけでなく、導線の起点として使えるのがこのアプリの良さです。
シンプルメニューカスタマイズ｜お手軽アイコンメニュー
KOBU ‑ Menu Highlight
KOBU ‑ Menu Highlight は、ストーリー風のビジュアルメニューを作りやすいアプリです。円形・四角形のメニューを選べるほか、メニューグループを複数作成して出し分けできるため、カテゴリが多いストアでも整理しやすいのが特徴です。
| 項目 | 内容 |
|---|---|
| アプリ名 | KOBU ‑ Menu Highlight |
| 開発者 | Activory |
| 価格 | 無料プランあり（Lite） / 有料（Pro: $4/月、年払いあり） |
| 主な機能 | 円形・四角形メニュー、リンク先自由、複数グループ、バッジ表示、カスタム CSS、モバイル/PC 表示切替 |
| 日本語対応 | 日本語翻訳なし（英語） |
| 評価 | 5.0（27） |
| 向いているストア | バッジで「New」「Sale」を目立たせたい、複数カテゴリを整理して回遊させたいストア |
ワンポイント解説
KOBU は「見せたい導線が多いストア」ほど便利です。複数のメニューグループを作ってカテゴリごとに分けられるので、トップは“人気導線”、コレクションは“関連カテゴリ”、商品ページは“おすすめ”のように整理しやすくなります。英語 UI に抵抗がなければ、運用の自由度はかなり高めです。
Mega Highlights Menu
Mega Highlights Menu は、SNS のストーリーのような UI で、商品・コレクション・リンクを視覚的に並べられるタイプです。画像ベースの導線づくりに寄せたいストアに向いています。
| 項目 | 内容 |
|---|---|
| アプリ名 | Mega Highlights Menu |
| 開発者 | Mega Profit Apps |
| 価格 | 無料プランあり / 有料（$2.49/月〜（年課金）・$2.99/月〜（月課金）、無料体験あり） |
| 主な機能 | ストーリー風のアイコンナビ、円形/四角形、画像・タイトル・配色などのカスタム、任意位置に設置 |
| 日本語対応 | 日本語翻訳なし（英語） |
| 評価 | 5.0（4） |
| 向いているストア | SNS っぽい UI に寄せたい、特集やカテゴリをテンポよく見せたいストア |
ワンポイント解説
Mega Highlights Menu は「世界観を大事にするストア」と相性が良いです。ストーリー風 UI は、見慣れたユーザーが多く、スマホでの導線づくりに強みがあります。反面、アイコン画像のクオリティが体験を左右しやすいので、テンプレを決めて統一感を作ると効果が出やすいです。
Easy Highlights Menu
Easy Highlights Menu は、無料で導入できるハイライトメニュー系アプリです。まずは円形メニューが自ストアに合うか、試してみたい場合に候補になります。
| 項目 | 内容 |
|---|---|
| アプリ名 | Easy Highlights Menu |
| 開発者 | Velmatrix |
| 価格 | 無料 |
| 主な機能 | 円形/四角形、任意セクションに配置、複数グループ、バッジ表示、サイズ/色/枠線などの調整、モバイル/PC 対応 |
| 日本語対応 | 日本語翻訳なし（英語） |
| 評価 | 0.0（0） |
| 向いているストア | とにかく無料で試したい、最小構成で導線追加したいストア |
ワンポイント解説
無料で始められるのが最大のメリットです。最初から作り込むというより、「トップに円形メニューを置くと回遊が伸びるのか」を検証する用途に向きます。テストで数字が動いたら、より高機能なアプリへ乗り換える判断も取りやすくなります。
BL Story Highlight Menu Bar
BL Story Highlight Menu Bar は、ストーリー型のハイライトメニューを低価格帯で導入しやすいアプリです。テーマエディタからノーコードで設定でき、モバイル対応も意識されています。
| 項目 | 内容 |
|---|---|
| アプリ名 | BL Story Highlight Menu Bar |
| 開発者 | BACKLIP |
| 価格 | 無料プランあり（パートナーストア向け） / 有料（月額 $1.99、年額 $1.59/月換算、無料体験あり） |
| 主な機能 | ストーリー風メニューバー、アイコンとリンク設定、配色・枠線・フォント・サイズ調整、モバイル対応、テーマエディタで設定 |
| 日本語対応 | 英語・スペイン語・フランス語（日本語翻訳なし） |
| 評価 | 1.0（1） |
| 向いているストア | 低コストで導入したい、ストーリー型メニューをまず試したいストア |
ワンポイント解説
価格面では導入しやすい一方、レビュー評価が高くないため、最初はテスト環境で動作確認をしてから本番導入するのが安全です。ストーリー型 UI はクリックされやすい導線になり得るので、「どのカテゴリを押してほしいか」を整理して、少数精鋭のアイコンから始めると運用が安定します。
どのアプリを選ぶべきか
最後に、選び方を整理します。
- 日本語で迷わず設定したい → 「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」
- バッジやグループ管理も含めて作り込みたい → 「KOBU ‑ Menu Highlight」
- SNS っぽいストーリー導線に寄せたい → 「Mega Highlights Menu」
- まず無料で検証したい → 「Easy Highlights Menu」
- 低コストでストーリー型を試したい → 「BL Story Highlight Menu Bar」
特に Shopify メニュー ハイライトは、入れた瞬間に売上が伸びるというよりも、
「回遊が増える → 離脱が減る → 購入が増える」
という形で効いてくることが多いです。設置したら、クリックされているか（導線が働いているか）を見ながら改善していくのがおすすめです。
まとめ
今回は、Shopifyでハイライトメニュー（円形メニュー）を表示する方法として、円形アイコンを使ったナビゲーションを実装できるアプリを 5 つ紹介しました。
ハイライトメニューは見た目が華やかになるだけではなく、導線設計の観点で 「ユーザーが迷わないストア」 に近づけてくれます。特集や人気カテゴリ、新作などを目立たせたい場合は、ぜひ一度導入を検討してみてください。
まずは小さく置いて、数字を見て、育てる。
この流れで、Shopify 円形 メニューを「飾り」ではなく「導線」として活かしていきましょう。
参考記事
この記事は以下の記事を参考にしています。