Shopifyで円形（サークル）メニューを表示する前に避けたい失敗とは？ハイライトメニューアプリも紹介
目次
- はじめに
- そもそもShopify標準で円形メニューは作れるのか
- 導入前に避けたい5つの失敗
- 実装手段は2つ、どちらが失敗を避けやすいか
- ハイライトメニューアプリの料金とできることを比較
- 失敗を避けやすい一本「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」
- 「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」の導入手順
- コードで実装したい場合のサンプル
- よくある質問
- まとめ
はじめに
Instagram のストーリーズハイライトのような円形（サークル）メニューを Shopify に置きたい。そう考えて設定を始めたものの、画像がバラバラに並んでブランドの印象がむしろ崩れた、スマホで表示がはみ出した、テーマを更新したらメニューごと消えた――こうした失敗は、実装そのものよりも「導入前の判断」を飛ばしたことから生まれます。
この記事では、Shopify 円形メニューを設置する前に確認しておきたい失敗ポイントを先に洗い出し、その失敗を避けられる手段として Shopify サークルメニューの実装方法と Shopify ハイライトメニュー アプリを紹介します。一般的なメリット解説ではなく、「どこでつまずくか」を起点に読み進められる構成です。
なぜ今この UI が注目されるのか、数字でも触れておきます。経済産業省「電子商取引に関する市場調査」（2025 年 8 月公表）によると、日本の物販系 BtoC EC 市場のうちスマートフォン経由は全体の 61.7%（9 兆 3,904 億円）に達しました。グローバルでも EC サイトへのアクセスの約 77% がスマホ経由です。指で押しやすく、SNS で見慣れた円形のハイライト導線は、このスマホ主導の購買行動と素直にかみ合います。実際、モバイルフレンドリー化に取り組んだある化粧品系 Shopify ストアでは、直帰率が 62% から 51% に下がり、CVR が 0.8% から 1.5% へ改善した事例も報告されています。円形メニューによる回遊導線の強化は、こうした数字に直結しうる施策です。
この記事は以下の記事を参考にしています。
- Shopify でハイライトメニューを表示する方法を 5 つ紹介！
- Shopify にハイライトメニューを表示できるアプリ 7 選
- Shopify ストアにハイライトされたメニューを表示できるアプリについて徹底解説｜ご利用ガイド
そもそもShopify標準で円形メニューは作れるのか
最初に押さえておきたいのが、Shopify の標準仕様の限界です。Shopify 管理画面のナビゲーションメニューはテキストリンクが中心で、画像付きの円形アイコンを並べる機能は用意されていません。さらにメニューの階層は親子 3 階層までと決まっています。つまり「円形アイコンメニュー＝SNS 風のビジュアル導線」は、テーマ標準の設定だけでは実現できず、テーマのコードを編集するか、専用アプリを入れるかのどちらかが必須になります。
裏を返せば、Shopify 2.0 テーマであればアプリブロックをテーマエディタから挿入するだけでノーコード設置できるため、実装のハードル自体は年々下がっています。ここを理解しておくと、「標準機能でなんとかしようとして時間を溶かす」という最初の失敗を回避できます。
導入前に避けたい5つの失敗
円形メニューは見栄えがする分、雑に入れると逆効果になりやすい UI です。設定パネルを開く前に、次の失敗パターンを頭に入れておきましょう。
失敗1：画像のトーンがバラバラでブランドが安っぽく見える
円形メニューは画像で見せる UI なので、明るさ・構図・色味がそろっていないと、並べた瞬間に統一感が崩れます。これはデザインの良し悪し以前の問題で、同じ撮影セッションの写真を使うか、同一のフィルターやレタッチで揃えるだけで印象が大きく変わります。筆者の経験でも、画像差し替えだけでクリック率の体感が変わった場面は少なくありません。
失敗2：スマホではみ出す・タップしづらい
PC で整えたサイズのままスマホに出すと、円が大きすぎて横にあふれたり、逆に小さすぎて押しにくくなったりします。スマホでは円を小さめにして 3〜4 個を横スクロール、または 2 列で見せるなど、画面幅に合わせた出し分けが前提です。デバイスごとにサイズを指定できるかどうかは、手段選びの分かれ目になります。
失敗3：画像が重くてページ速度が落ちる
複数画像を読み込むため、最適化を怠るとモバイルで表示が遅くなります。円形メニューの実表示サイズは 120px〜150px 程度が多いので、元画像は Retina 対応を見込んでも 300px〜400px あれば十分です。Shopify は WebP 形式に対応しているため、WebP で書き出すとさらに軽くなります。ページ速度は SEO スコアにも響くので、設置後に Google PageSpeed Insights で測っておくと安心です。
失敗4：テーマ更新でカスタムコードが消える
テーマのコードを直接書き換える方法は自由度が高い一方、テーマをアップデートした際にカスタムコードが上書きされて消える事故が起きがちです。コード実装を選ぶなら、テーマを複製してバックアップを取る運用が欠かせません。この手間を負いたくないなら、アプリブロックとして実装される手段のほうが更新に強くなります。
失敗5：盛りすぎて肝心の導線がぼやける
円形メニューは目立つがゆえに、1 ページに複数置くとユーザーの視線が分散し、購入ボタンや商品情報がかすんでしまいます。本当に見てほしいコレクションだけに絞り、原則 1 ページに 1 つのサークルメニューにとどめるのが無難です。
実装手段は2つ、どちらが失敗を避けやすいか
上の失敗を踏まえると、選択肢は「テーマのコード編集」と「アプリの利用」の 2 つに整理できます。それぞれが上の失敗にどう効くかという視点で比べてみましょう。
テーマのコード編集
HTML / CSS / JavaScript（Liquid）を直接書いて構築する方法です。デザインを細部まで作り込めて月額費用もかからない反面、失敗4のテーマ更新リスクと失敗2のレスポンシブ対応を自力で背負うことになります。レスポンシブやブラウザ互換のテストまで含めると、ゼロからの実装は数日から数週間かかることもあり、担当者が変わったときの引き継ぎも課題になりがちです。コードが書ける人材がいて、独自デザインを追求したいストア向けの選択肢です。
アプリの利用
プログラミング知識がなくても、インストールと管理画面の設定だけで数分から数十分で公開できる方法です。アプリブロックとして実装されるため失敗4の更新リスクに強く、デバイスごとのサイズ調整で失敗2も回避しやすいのが利点です。注意点は、月額費用が発生すること、複数アプリ併用時に JavaScript が競合しうること、カスタマイズがアプリの機能範囲に収まること。とはいえ、後述のように月額数百円から始められるアプリも多く、まず試して効果を見たい場面では現実的な手段です。
ハイライトメニューアプリの料金とできることを比較
「アプリで入れる」と決めたとき、次に迷うのが価格です。検索意図に近い代表的な Shopify ハイライトメニュー アプリを、無料枠の上限・月額という、上位記事で手薄になりがちな軸で並べてみます（2026 年 6 月時点の確認値）。
| アプリ | 無料枠 | 有料プラン |
|---|---|---|
| シンプルメニューカスタマイズ｜お手軽アイコンメニュー | 7 日間無料トライアル | 月額 $2.29（年払いで実質2ヶ月分お得） |
| KOBU – Menu Highlight | Lite プラン無料（ハイライト最大4つ） | Pro 月 $4（無制限・グラデーション枠線・メニューバッジ） |
| Story Style – Insta Highlights | 無料プラン（3項目まで） | Basic $9.99／Advanced $15 |
この表から読み取れるのは、月額レンジが $0〜$15 と幅広く、無料枠の上限本数の差が選定の分かれ目になるという点です。KOBU は無料 Lite でも 4 つまで使え、円形と四角の 2 形式に対応し Shopify 2.0 テーマで動きます。Story Style はドラッグ&ドロップやアニメーションが魅力です。価格の安さと日本語サポートの両方を重視するなら、次に紹介する一本が最初に試したい候補になります。
なお、このキーワードで上位に出る Qiita 記事は実装手段を 5 つ（シンプルメニューカスタマイズ／KOBU／Mega Highlights Menu／Easy Highlights Menu／BL Story Highlight Menu Bar $1.99）並べていますが、導入後の効果検証（直帰率・回遊率）や、日本語 UI・日本語サポートの有無といった選定軸への言及は手薄でした。本記事はあえてその「効果」と「日本語対応」で手段を選ぶ視点を中心に据えています。
失敗を避けやすい一本「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」
ここまでの失敗ポイントをひととおり潰しやすいアプリとして、日本製の「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」を紹介します。日本語対応でノーコード、デバイス別のサイズ調整に対応し、月額も $2.29 と低価格という、上で挙げた失敗 2・4・5 に効く要素がそろっています。
- アプリ名: シンプルメニューカスタマイズ｜お手軽アイコンメニュー
- URL: https://apps.shopify.com/sa-148-circle-meny-app?locale=ja
- 価格: 月額 $2.29（7 日間の無料お試し期間あり／年払いで実質 2 ヶ月分お得）
このアプリは 20 言語以上に対応し、商品・コレクション・カスタムページごとにメニューを出し分けられる点が特徴です。ノーコードで、円形と四角の 2 種類のレイアウトをデバイス別に調整できます。
失敗回避という観点で、このアプリのどこが効くのかを具体的に挙げておきます。
- デバイス別サイズ調整で失敗2を回避: PC とモバイルでアイテムサイズを別々に指定できるため、スマホではみ出す・押しにくいという事故を防げます。
- アプリブロック実装で失敗4を回避: テーマにコードを書き込まず、アプリブロックとして設置するので、テーマ更新でメニューが消える心配が小さくなります。
- 3 種類のメニュータイプで導線を絞れる: 商品用・コレクション用・カスタム用を使い分け、本当に見せたいページだけに絞り込めるため、盛りすぎる失敗5を避けやすくなります。
- 軽量設計でページ速度を守る: 不要な機能を抑えた設計で、失敗3の速度低下リスクを軽減します。
- 日本語サポートで運用の不安を減らす: 日本製アプリのため、管理画面も日本語で、トラブル時も日本語で問い合わせできます。
- 月額 $2.29 で試しやすい: 7 日間の無料トライアルがあり、効果を確認してから本格導入できます。
筆者として補足すると、価格と日本語サポートの両立、そしてデバイス別の出し分けまで含めて月額数百円というバランスは、小規模ストアが最初に触れる一本として無理がありません。まずトライアルで自社の商材に合うかを見極めるのに向いています。
「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」の導入手順
こちらの解説は、公式のご利用ガイドでも詳しく説明されていますので、あわせてご参照ください。
→ 「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」ご利用ガイド
アプリのインストール
-
Shopify 管理画面にアクセス
Shopify 管理画面の左下にある「設定」をクリックし、「アプリ」→「Shopify App Store」へ移動します。または、こちらのリンクから直接アプリ詳細ページへアクセスしてください。
-
アプリを検索
検索窓に「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」と入力し、表示されたアプリをクリックします。 -
インストール
アプリの詳細ページから「インストール」ボタンをクリックし、インストールを始めます。
-
権限の確認
Shopify の管理画面で再度権限の確認などがあります。問題なければ、「インストール」ボタンでインストールを完了してください。
-
完了
アプリの管理画面が表示されれば、インストールは完了です。
この段階で 7 日間の無料トライアルが始まります。無料期間のうちに一通りの機能を試し、自社ストアに合うかを見極めましょう。
アプリブロックをテーマに追加
カスタマイズの前に、テーマへアプリブロック（またはアプリセクション）を追加します。追加方法は自動と手動の 2 通りです。
自動でテーマに追加（1 クリック追加）
-
アプリの管理画面を開く
Shopify 管理画面の「アプリ」から「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」を選択します。 -
テーマに追加
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
-
保存
テーマエディタが開いたら、アプリブロックが有効化されていることを確認して、「保存する」をクリックします。
注意：公開中のテーマの場合、保存すると実際のストアに反映されてしまうので気をつけてください。
手動でテーマに追加（任意ページに設置したい場合）
自動追加がうまくいかない場合や、商品ページなど特定のテンプレートに入れたい場合は手動追加が向いています。
-
テーマカスタマイズ画面を開く
Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。 -
ページを選択
テーマエディタ上部のプルダウンから、追加したいページ（ホーム / コレクション / 商品 など）に移動します。 -
セクションまたはブロックを追加
「セクションを追加」または「ブロックを追加」をクリックします。
-
アプリブロックを選択
「アプリ」タブから「商品サークルメニュー」「コレクションサークルメニュー」「カスタムサークルメニュー」のいずれかを選んで追加します。
-
保存
表示を確認し、問題なければ「保存する」をクリックします。
設定パネルでデザインを整える
ブロックを追加したら、テーマエディタの設定項目からデザインを調整します。失敗1（画像の不統一）や失敗2（スマホ崩れ）に効く項目を中心に、各ブロックの要点だけ押さえておきましょう。
商品サークルメニュー
メニュータイトル（例：「おすすめ商品」「FEATURED PRODUCTS」など）を決め、メニュー形状を円形か四角から選びます。重要なのは PC 時アイテムサイズとモバイル時アイテムサイズを別々に指定できる点で、ここを使えばスマホ崩れの失敗を防げます。表示したい商品を複数選択し、ボーダー色・幅、アイテム間隔、タイトル色・サイズ、ホバー時の拡大率やボーダー色、背景のグラデーション開始色・終了色まで調整可能です。さらに細かく詰めたい場合は、ブロック専用の追加 CSS を書き足せます。
コレクションサークルメニュー
新着・セール・カテゴリー別など、見せたいコレクションを複数選んで並べられます。メニュータイトル（例：「カテゴリー」「SHOP BY CATEGORY」など）や形状、デバイス別サイズ、コレクション名の表示有無を設定でき、デザイン項目（ボーダー、アイテム間隔、タイトル、ホバー、グラデーション）は商品メニューと同じ感覚でノーコード調整できます。コレクション専用の追加 CSS も利用可能です。
カスタムサークルメニュー
最も自由度が高いのがこのブロックです。リンクタイトル（1〜5）、リンク URL（1〜5）、リンク画像（1〜5）を個別に設定でき、遷移先はページ・商品・コレクション・外部サイトまで自由です。キャンペーンページや特集、Instagram などの SNS アカウントへの導線として使えます。デザイン項目とカスタム CSS は他のブロックと同様です。
設定して保存すると、即座にストアのプレビュー画面に反映されます。細かい調整を繰り返しながら、自社ストアに合った円形メニューに仕上げてください。
コードで実装したい場合のサンプル
「アプリを使わず自力で実装したい」「独自デザインを追求したい」「月額費用をかけたくない」という方向けに、コード例も用意しました。失敗4のテーマ更新リスクが残る点だけは念頭に置いてください。
基本のHTML / CSSサンプル
以下は Shopify テーマの任意のセクションに追記する、円形メニューの最小構成です。
<!-- 円形メニューのサンプル -->
<div class="circle-menu">
<h2 class="circle-menu-title">カテゴリーから探す</h2>
<div class="circle-menu-grid">
<div class="circle-menu-item">
<a href="/collections/new-arrivals">
<div class="circle-menu-icon">
<img src="{{ 'circle-new.jpg' | asset_url }}" alt="新着商品">
</div>
<p class="circle-menu-text">新着</p>
</a>
</div>
<div class="circle-menu-item">
<a href="/collections/sale">
<div class="circle-menu-icon">
<img src="{{ 'circle-sale.jpg' | asset_url }}" alt="セール">
</div>
<p class="circle-menu-text">セール</p>
</a>
</div>
<div class="circle-menu-item">
<a href="/collections/popular">
<div class="circle-menu-icon">
<img src="{{ 'circle-popular.jpg' | asset_url }}" alt="人気商品">
</div>
<p class="circle-menu-text">人気</p>
</a>
</div>
<div class="circle-menu-item">
<a href="/collections/limited">
<div class="circle-menu-icon">
<img src="{{ 'circle-limited.jpg' | asset_url }}" alt="限定商品">
</div>
<p class="circle-menu-text">限定</p>
</a>
</div>
<div class="circle-menu-item">
<a href="/pages/lookbook">
<div class="circle-menu-icon">
<img src="{{ 'circle-lookbook.jpg' | asset_url }}" alt="ルックブック">
</div>
<p class="circle-menu-text">ルックブック</p>
</a>
</div>
</div>
</div>
<style>
.circle-menu {
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
text-align: center;
}
.circle-menu-title {
font-size: 2rem;
margin-bottom: 40px;
color: #333;
font-weight: bold;
}
.circle-menu-grid {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}
.circle-menu-item {
text-align: center;
}
.circle-menu-item a {
text-decoration: none;
color: inherit;
display: block;
}
.circle-menu-icon {
width: 120px;
height: 120px;
border-radius: 50%; /* 円形にする */
overflow: hidden;
border: 3px solid #ddd;
transition: all 0.3s ease;
margin: 0 auto;
position: relative;
}
.circle-menu-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(0,0,0,0.1));
opacity: 0;
transition: opacity 0.3s ease;
}
.circle-menu-item:hover .circle-menu-icon::before {
opacity: 1;
}
.circle-menu-icon img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.circle-menu-item:hover .circle-menu-icon {
transform: scale(1.1); /* ホバー時に拡大 */
border-color: #333;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.circle-menu-item:hover .circle-menu-icon img {
transform: scale(1.05);
}
.circle-menu-text {
margin-top: 15px;
font-size: 0.9rem;
color: #666;
font-weight: 500;
}
/* スマホ向けメディアクエリ */
@media (max-width: 767px) {
.circle-menu-title {
font-size: 1.5rem;
margin-bottom: 30px;
}
.circle-menu-grid {
gap: 20px;
}
.circle-menu-icon {
width: 80px;
height: 80px;
border-width: 2px;
}
.circle-menu-text {
font-size: 0.8rem;
margin-top: 10px;
}
}
</style>
調整のコツは次のとおりです。.circle-menu-item ブロックを増減すればメニュー数を変えられ、.circle-menu-icon の width と height を同じ値で変えれば正円のままサイズを変更できます。枠線は border プロパティ（太めなら border: 5px solid #333;、差し色なら border: 3px solid #ff6b6b;）、ホバーの動きは .circle-menu-item:hover .circle-menu-icon の transform（大きく拡大なら transform: scale(1.2);、回転を足すなら transform: scale(1.1) rotate(5deg);）で調整します。画像パスは {{ 'circle-new.jpg' | asset_url }} の部分を、Shopify にアップロードした実ファイル名へ置き換えてください。失敗3を避けるため、alt 属性（例：<img src="circle-new.jpg" alt="新着商品コレクションへのリンク">）を必ず入れておきましょう。
実装は「オンラインストア」→「テーマ」→「コードを編集」から、sections/circle-menu.liquid を新規作成するか既存セクションに追記し、テーマエディタで該当セクションを追加してプレビュー確認後に保存・公開します。テーマ更新時の上書きに備え、テーマを複製してバックアップを取っておくと安心です。
動的に商品を取り込む実装例
固定の画像ではなく、最新のコレクションを自動で反映させたい場合は、Shopify の Ajax API を使って動的に生成する手もあります。以下は指定したハンドルのコレクションから商品を取得し、円形メニューを組み立てる JavaScript の最小例です。
// 指定コレクションの商品から円形メニューを動的生成する例
async function buildCircleMenu(collectionHandle, mountSelector) {
const res = await fetch(`/collections/${collectionHandle}/products.json`);
const data = await res.json();
const mount = document.querySelector(mountSelector);
if (!mount) return;
const grid = document.createElement('div');
grid.className = 'circle-menu-grid';
data.products.slice(0, 5).forEach((product) => {
const image = product.images[0] ? product.images[0].src : '';
const item = document.createElement('div');
item.className = 'circle-menu-item';
item.innerHTML = `
<a href="/products/${product.handle}">
<div class="circle-menu-icon">
<img src="${image}" alt="${product.title}" loading="lazy">
</div>
<p class="circle-menu-text">${product.title}</p>
</a>`;
grid.appendChild(item);
});
mount.appendChild(grid);
}
document.addEventListener('DOMContentLoaded', () => {
buildCircleMenu('new-arrivals', '#circle-menu-mount');
});
この方法なら新着商品を自動で差し替えられますが、API 取得・エラーハンドリング・表示速度の管理まで自前で面倒を見る必要があり、相応の開発知識が求められます。ここまで来ると、外部の開発者に依頼するか、はじめからアプリを使うほうが結果的に早いケースも多いというのが正直なところです。
よくある質問
Shopify標準のメニューで円形アイコンは出せますか
出せません。標準のナビゲーションはテキストリンク中心で、画像付きの円形アイコンを並べる機能がなく、階層も親子 3 階層までです。円形メニューはテーマのコード編集か専用アプリで実装する必要があります。
無料で円形メニューを設置できますか
完全自作のコード実装なら月額費用はかかりません。アプリでも無料枠を持つものがあり、たとえば KOBU は無料 Lite でハイライト 4 つまで、Story Style は無料プランで 3 項目まで設置できます。本数や機能の上限を確認したうえで選びましょう。
スマホ表示が崩れないか心配です
デバイスごとにアイテムサイズを指定できる手段を選べば、スマホ崩れの大半は防げます。コード実装ならメディアクエリ、アプリなら PC 時・モバイル時のサイズ設定で出し分け、複数端末でプレビュー確認してから公開するのが安全です。
Instagramのストーリーズ風にしたい場合は
円形でハイライト風に見せたいなら、画像のトーンを統一し、枠線やグラデーションで囲むのが定番です。ストーリーズ風・ハイライト風の見た目は、円形形状＋統一された画像＋細い枠線という 3 点で再現しやすくなります。
まとめ
Shopify 円形メニューの設置は、ビジュアル訴求と回遊導線を同時に強化できる施策ですが、成果を分けるのは「導入前にどの失敗を潰しておくか」です。本記事で挙げた 5 つの失敗を念頭に、手段を選んでみてください。
- 手段は 2 つ: テーマのコード編集（自由度は高いが更新リスクと工数を背負う）と、アプリ利用（ノーコードで更新に強い）
- アプリ比較の軸: 無料枠の上限・月額レンジ（$0〜$15）、そして日本語対応
- 失敗を避けやすい一本: 「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」（ノーコード、デバイス別サイズ調整、日本語サポート、月額 $2.29 で 7 日間無料トライアル）
- 設置後: 画像の統一・WebP 化、定期的な内容更新、設置前後の直帰率や回遊率の比較で効果を検証
コードが書けるなら直接実装も選択肢ですが、まず手軽に試して効果を確かめたいなら、無料トライアルからアプリで始めるのが現実的です。
参考記事
この記事は以下の記事を参考にしています。
