Shopifyにハイライトされた円形（サークル）メニューを表示する方法は？おすすめアプリも紹介！

はじめに
Shopify ストアに円形（サークル）メニューを表示することはできる？
Shopify に円形メニューを表示するメリット・デメリット
- メリット
- デメリット
円形メニューを表示する 2 つの方法
- テーマのコード編集による実装
- アプリを利用した実装
手軽に試すならアプリがおすすめ
おすすめアプリ「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」紹介
- 特徴
- メリット
「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」のインストール手順と簡単な使用方法
テーマのコード編集で実装する場合のサンプルコード
Shopify 円形メニュー設置後の活用ポイント
運用時の注意点
まとめ
- 参考記事

はじめに

近年、EC サイト運営においてユーザビリティとビジュアル訴求の両立がますます重要になっています。商品の魅力を伝えるだけでなく、訪問者が迷わず目的のページにたどり着けるよう、直感的なナビゲーションを提供することが求められています。そこで注目されるのが円形（サークル）メニューの活用です。

円形メニューは、重要なコレクションやカテゴリーを視覚的に強調し、ユーザーの目を引きつけることができる効果的な UI 要素です。Instagram 風のハイライトのようなデザインで、モダンで洗練された印象を与えることができます。

ところが、いざ Shopify ストアを運営していると、次のような疑問や課題が生じることがあります。

「Shopify に円形メニューを表示できるのか？」
「テーマを編集して円形メニューを追加したいけど、コード修正が難しそう」
「ノーコードで手軽に導入できるアプリはある？」
「どんなデザインやカスタマイズが可能なのか知りたい」

そこで本記事では、Shopify で円形（サークル）メニューを表示する方法をわかりやすく徹底解説します。

Shopify ストアで円形メニューを表示するメリット・デメリット
コード編集で実装する場合と、アプリを利用する場合の違い
おすすめ Shopify アプリ「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」の紹介
アプリの導入手順や簡単なカスタマイズ方法
コードを編集して円形メニューを設置するサンプル例

2026 年以降も拡大を続けるオンライン市場において、ビジュアル訴求とユーザビリティの両立はブランドの差別化において欠かせない要素です。円形メニューを効果的に活用することで、重要なコレクションやページへの導線を強化し、顧客の回遊率を高めることができます。

それでは、順を追って見ていきましょう。

この記事は以下の記事を参考にしています。

Shopify ストアに円形（サークル）メニューを表示することはできる？

結論から言うと、Shopify で円形（サークル）メニューを表示することは十分可能です。大きく分けて次の 2 通りの方法があります。

テーマのコードを編集して直接実装する
Shopify テーマの HTML / CSS / JavaScript (Liquid) を編集し、自分で円形メニューを構築する方法です。デザインの自由度が高い一方で、コーディング知識が求められます。
アプリを利用する
Shopify アプリの中には、円形メニューを簡単に追加できる機能を備えたものが存在します。今回紹介する「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」のように、ノーコードで短時間で導入できる点が魅力です。

どちらのアプローチもメリット・デメリットがあります。まずは円形メニューを表示すること自体の利点と注意点を整理してみましょう。

Shopify に円形メニューを表示するメリット・デメリット

メリット

視覚的に目を引き、クリック率が向上する

円形メニューは通常のテキストリンクやボタンとは異なる形状のため、ページ上で目立ちやすく、ユーザーの注意を引きつけやすいという特徴があります。特にホームページのファーストビュー付近に配置することで、重要なコレクションやキャンペーンページへの誘導率を高めることができます。Instagram 風のハイライトデザインは、SNS に慣れ親しんだ現代のユーザーにとって親しみやすく、直感的に操作できる UI となります。

ブランドの世界観をモダンに表現できる

円形メニューは、デザイン性の高いモダンな UI として認識されています。特にファッション、コスメ、ライフスタイル系のブランドにおいては、洗練された印象を与えることができます。各メニューに画像を設定することで、ブランドのコンセプトやライフスタイルを視覚的に伝えることが可能になります。

重要なコレクションやページをハイライトできる

すべてのコレクションを同列に扱うのではなく、特定のコレクションやカテゴリーを強調したい場合に円形メニューは非常に効果的です。新着コレクション、セール商品、人気カテゴリーなど、顧客に特に見てほしいページを目立たせることができます。これにより、ストア運営者が意図した導線でユーザーを誘導しやすくなります。

ユーザーの回遊率向上につながる

明確で魅力的なナビゲーションは、ユーザーが複数のページを閲覧するきっかけになります。円形メニューでカテゴリーを視覚的に整理することで、ストア内での滞在時間の延長や回遊率の向上につながります。特に商品数が多いストアでは、効率的なナビゲーションがユーザー体験の向上に直結します。

モバイルフレンドリーな UI

円形メニューは、タッチ操作に適した大きめのタップエリアを確保しやすく、スマートフォンでも使いやすいというメリットがあります。モバイル EC が主流となっている現在、モバイルでの操作性を考慮した UI 設計は必須です。

Instagram のストーリーハイライトのような見た目の円形メニューは、SNS から流入した顧客にとって親しみやすい表現方法です。ストアと SNS の世界観を統一することで、ブランド体験の一貫性を保てます。

デメリット

過度な装飾は逆効果になることも

円形メニューは目立つがゆえに、多用しすぎるとページ全体のバランスが崩れ、かえってユーザーの注意が散漫になってしまいます。重要なポイントだけに絞って使用することが大切です。また、デザインが凝りすぎていると、肝心の購入ボタンや商品情報が目立たなくなるリスクもあります。

画像の質が重要

円形メニューは画像を使用することが多いため、画像の質やテイストがバラバラだと、かえってブランドイメージを損ねてしまいます。統一感のある撮影やレタッチの品質管理が欠かせません。

ページ表示速度への影響

複数の画像を読み込むため、ページの読み込み速度が遅くなる可能性があります。画像の最適化を行わないと、特にモバイル環境でユーザー体験を損なうリスクがあります。

運用の手間

定期的にメニュー内容を更新したり、シーズンに合わせて入れ替えたりする必要があります。キャンペーンや新コレクションの展開に合わせて、継続的なメンテナンスが求められます。

モバイル表示への配慮が必要

PC では美しく見えるメニューも、スマホでは配置やサイズが適切でないと、見づらくなったりタップしづらくなったりすることがあります。レスポンシブデザインへの対応が必須です。

すべての業種に適しているわけではない

円形メニューはビジュアル重視のデザインであるため、特にファッション、コスメ、インテリア、ライフスタイル系の商材に適しています。一方、B2B 向けや機能性重視の商材では、従来型のナビゲーションの方が適している場合もあります。

円形メニューを表示する 2 つの方法

Shopify で円形メニューを実装する方法は、大きく「テーマのコード編集」と「アプリの利用」の 2 つに分けられます。それぞれの特徴を詳しく見ていきましょう。

テーマのコード編集による実装

テーマのコード編集画面

Shopify テーマのコードを直接編集して円形メニューを実装する方法です。この方法では、HTML、CSS、JavaScript（Liquid テンプレート言語）を使って、完全にカスタマイズされたメニューを作成できます。

メリット

デザインの自由度が高い: HTML / CSS / JavaScript を直接編集するため、独自のレイアウトやアニメーション、インタラクティブな機能など、思い通りのデザインを実現できます。円形の大きさ、配置、ホバーエフェクト、グラデーションなど、細部まで自由にカスタマイズ可能です。
月額費用がかからない: 自社でコードを組むだけなので、アプリの月額利用料などの追加コストはかかりません。一度実装すれば、継続的なコストが発生しないのは大きなメリットです。
パフォーマンスの最適化: 必要最小限のコードだけを実装できるため、不要な機能を省いて軽量化できます。適切に実装すれば、ページの読み込み速度への影響を最小限に抑えられます。
外部依存がない: アプリの仕様変更やサービス終了の影響を受けません。自社で完全にコントロールできるため、長期的な運用において安定性があります。

デメリット

開発リソースが必要: HTML / CSS / JavaScript の知識が必要で、コードが書ける人材がいないと実現が難しいです。外部委託する場合は開発コストがかかります。特に Liquid テンプレート言語の知識も必要となるため、学習コストも考慮する必要があります。
テーマアップデートで上書きされるリスク: テーマを更新した時にカスタムコードが消えてしまう可能性があり、都度メンテナンスが必要になります。バックアップを取っていないと、再実装に時間がかかります。
エラー発生時の自己責任: コードの不具合でレイアウト崩れやページ表示エラーが起きた場合、基本的には自力で解決する必要があります。デバッグに時間がかかることもあります。
実装に時間がかかる: ゼロからコーディングする場合、設計から実装、テストまで相応の時間が必要です。特にレスポンシブ対応やブラウザ互換性のテストなどを含めると、数日から数週間かかることもあります。
保守性の懸念: 担当者が変わった場合、カスタムコードの内容を理解して引き継ぐのが難しいことがあります。ドキュメント化されていないと、後任者が苦労する可能性があります。

アプリを利用した実装

Shopifyアプリストア

Shopify ストアに円形メニューを設置する方法として、専用アプリを利用する方法があります。この方法では、プログラミングの知識がなくても、数クリックで簡単に円形メニューを設置できます。Shopify アプリストアから適切なアプリをインストールし、管理画面から設定するだけで実装が完了します。

メリット

ノーコードで導入可能: アプリをインストールして、管理画面から設定するだけ。専門知識がなくても扱いやすいです。プログラミング経験がないマーケターやストア運営者でも、すぐに使い始められます。
短時間で導入できる: インストールから設定、公開まで、早ければ数分から数十分程度で完了します。今日思いついたアイデアを、今日中に実装できるスピード感は大きな魅力です。
サポートを受けやすい: 何か不具合があってもアプリ開発者のサポートを期待できます。日本語対応のアプリなら、日本語で問い合わせができるので安心です。トラブルシューティングの時間を大幅に削減できます。
簡単にカスタマイズ: 多くのアプリが GUI（グラフィカルユーザーインターフェース）でレイアウト、サイズ、色合い等を変更できるため、試行錯誤しやすいです。リアルタイムでプレビューを確認しながら調整できるため、理想のデザインに近づけやすいです。
テーマ更新に強い: コード編集の場合のようにテーマアップデートで上書きされる心配が少なく、メンテナンスも容易です。アプリブロックとして実装されるため、テーマの更新にも対応しやすい構造になっています。
機能のアップデート: アプリ開発者が定期的に機能を追加・改善してくれるため、常に最新の機能を利用できます。新しいデザインパターンや機能が追加されても、自動的に利用可能になります。
複数のテーマで使い回せる: 一度設定を作成すれば、他のテーマでも同じ設定を使い回せることが多く、テーマ変更時の手間が少なくなります。

デメリット

月額費用が発生する: アプリによっては、無料プランがなかったり、機能制限があったりします。本格的に使うには月額費用が必要になるケースが多いです。長期的に見ると、コストが積み重なることを考慮する必要があります。
アプリ同士の競合: 複数のアプリを組み合わせると、JavaScript の競合などが起こり得ます。相性の悪いアプリを同時に使うとエラーが発生することがあります。トラブルシューティングが複雑になることもあります。
カスタマイズ範囲が制限される: アプリが提供する機能の範囲内でしかカスタマイズできません。完全に自由なデザインを求める場合は、コード編集の方が向いているかもしれません。
外部依存のリスク: アプリの開発元がサービスを終了したり、仕様を大きく変更したりすると、ストアに影響が出る可能性があります。代替アプリを探す必要が生じることもあります。
パフォーマンスへの影響: アプリによっては、必要以上に重い JavaScript や CSS を読み込むことがあり、ページ速度に影響を与える可能性があります。導入前に速度テストを行うことが推奨されます。

手軽に試すならアプリがおすすめ

「とりあえず導入してみたい」「コードを書くのはハードルが高い」「すぐに結果を確認したい」という方には、やはりアプリを利用する方法がおすすめです。

特に次のような方には、アプリの導入が適しています。

プログラミングの知識がない: コードを書く自信がない、開発リソースがない方。社内にエンジニアがいない小規模ストアでも、すぐに導入できます。
短期間で実装したい: 今すぐに円形メニューを表示して効果を確認したい方。キャンペーンやセールのタイミングに合わせて、迅速に対応できます。
複数のデザインパターンを試したい: 様々なレイアウトや色合いを気軽に試してみたい方。A/B テストを行って、最も効果的なデザインを見つけることができます。
継続的なサポートが欲しい: 何かあった時に日本語でサポートを受けたい方。トラブル時も安心して対応できます。
テーマの更新に強いソリューションが必要: テーマを定期的に更新する予定がある方。アプリなら更新時の影響を最小限に抑えられます。

Shopify アプリストアには複数の円形メニューアプリが存在しますが、ここでは特にシンプルで使いやすく、日本語対応しているアプリをご紹介します。

「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」のインストール手順と簡単な使用方法

こちらの解説は、公式のご利用ガイドでも詳しく説明されていますので、あわせてご参照ください。
→ 「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」ご利用ガイド

アプリのインストール手順

Shopify 管理画面にアクセス
Shopify 管理画面の左下にある「設定」をクリックし、「アプリ」→「Shopify App Store」へ移動します。または、こちらのリンクから直接アプリ詳細ページへアクセスしてください。
アプリを検索
検索窓に「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」と入力し、表示されたアプリをクリックします。
インストール
アプリの詳細ページから「インストール」ボタンをクリックし、インストールを始めます。
権限の確認
Shopify の管理画面で再度権限の確認などがあります。問題なければ、「インストール」ボタンでインストールを完了してください。
完了
アプリの管理画面が表示されれば、インストールは完了です。

この段階で、7 日間の無料トライアルが始まります。無料期間のうちに一通りの機能を試してみて、自社ストアに合うかどうか判断しましょう。

アプリブロックをテーマに追加

アプリをカスタマイズするには、テーマにアプリブロック（またはアプリセクション）を追加する必要があります。以下の手順でアプリブロックを追加してください。

自動でテーマに追加（1 クリック追加）

アプリの管理画面を開く
Shopify 管理画面の「アプリ」から「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」を選択します。
テーマに追加
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
保存
テーマエディタが開いたら、アプリブロックが有効化されていることを確認して、「保存する」をクリックします。

注意：公開中のテーマの場合、保存すると実際のストアに反映されてしまうので注意してください。

手動でテーマに追加（任意ページに設置したい場合）

自動追加がうまくいかない場合や、特定ページ（商品ページや任意のテンプレート）に入れたい場合は、手動追加がおすすめです。

テーマカスタマイズ画面を開く
Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開きます。
ページを選択
テーマエディタ上部のプルダウンから、追加したいページ（ホーム / コレクション / 商品など）に移動します。
セクションまたはブロックを追加
「セクションを追加」または「ブロックを追加」をクリックします。
アプリブロックを選択
「アプリ」タブから「商品サークルメニュー」「コレクションサークルメニュー」「カスタムサークルメニュー」のいずれかを選んで追加します。
保存
表示を確認し、問題なければ「保存する」をクリックします。

アプリブロックのカスタマイズ

テーマに「商品サークルメニュー」「コレクションサークルメニュー」「カスタムサークルメニュー」ブロックを追加したら、テーマエディタの右側（または左側）に表示される設定項目からデザインを調整できます。

商品サークルメニューのカスタマイズ

商品サークルメニューブロックの設定パネル

商品サークルメニューでは、以下の項目をカスタマイズできます。

メニュー設定

メニュータイトル: サークルメニュー全体の見出しです。例）「おすすめ商品」「FEATURED PRODUCTS」など
メニュー形状: 「円形」または「四角」から選択できます。ブランドのイメージに合わせて選びましょう。
PC 時アイテムサイズ（px）: PC 表示時のサークルサイズをピクセル単位で調整できます。
モバイル時アイテムサイズ（px）: スマートフォン表示時のサークルサイズを指定します。スマホでは小さめに設定すると、複数のメニューが並べやすくなります。
商品タイトルを表示: 各サークルの下に商品名を表示するかどうかを切り替えます。

商品設定

商品を選択: サークルメニューとして表示したい商品を複数選択できます。重要な商品や人気商品、新着商品などを選びましょう。
カスタムタイトル: 最初に表示される商品のタイトルのみ、任意のテキストに変更できます。

デザイン設定

ボーダー色 / ボーダー幅: サークルの枠線の色と太さを調整できます。ブランドカラーに合わせて設定しましょう。
アイテム間隔（px）: サークル同士の間隔をピクセル単位で指定します。余白を調整することで、見やすさが大きく変わります。
タイトル色 / タイトルフォントサイズ: 商品タイトルの文字色とサイズを調整できます。
ホバー時拡大率: マウスホバー時にサークルを拡大する割合を指定します。微妙な動きを加えることで、インタラクティブな印象を与えられます。
ホバー時ボーダー色: ホバー時の枠線カラーを設定できます。
グラデーション開始色 / 終了色: サークル背景にグラデーションを適用できます。モダンで洗練された印象を与えたい場合に効果的です。

カスタム CSS

追加 CSS: このブロック専用の CSS を追加できます。より細かいデザイン調整を行いたい場合に使用します。

コレクションサークルメニューのカスタマイズ

コレクションサークルメニューブロックの設定パネル

コレクションサークルメニューでは、以下の項目をカスタマイズできます。

メニュー設定

メニュータイトル: サークルメニュー全体のタイトルを設定します。例）「カテゴリー」「SHOP BY CATEGORY」など
メニュー形状: 円形または四角形から選択できます。
PC 時アイテムサイズ / モバイル時アイテムサイズ: デバイスごとにサークルのサイズを調整できます。
コレクションタイトルを表示: 各サークルの下にコレクション名を表示するかを切り替えます。

コレクション設定

コレクションを選択: 表示したいコレクションを複数選択できます。新着、セール、カテゴリー別など、戦略的に選びましょう。
カスタムタイトル: 最初のコレクションのみ、表示名を任意のテキストに変更できます。

デザイン設定

※ 各項目は商品サークルメニューと同様に、ノーコードで調整できます。

ボーダー色 / ボーダー幅
アイテム間隔（px）
タイトル色 / タイトルフォントサイズ
ホバー時拡大率
ホバー時ボーダー色
グラデーション開始色 / 終了色

カスタム CSS

追加 CSS: このコレクションサークルメニュー専用の CSS を追加できます。

カスタムサークルメニューのカスタマイズ

カスタムサークルメニューブロックの設定パネル

カスタムサークルメニューでは、以下の項目をカスタマイズできます。

メニュー設定

メニュータイトル: サークルメニュー全体の見出しを設定します。
メニュー形状: 円形 / 四角形を選択できます。
PC 時アイテムサイズ / モバイル時アイテムサイズ: 表示サイズをデバイス別に指定できます。
リンクタイトルを表示: 各サークルの下にリンクタイトルを表示するかどうかを切り替えます。

リンク設定

リンクタイトル（1〜5）: 各サークルに表示されるテキストです。分かりやすい名前を設定しましょう。
リンク URL（1〜5）: 遷移先の URL を指定します。ページ URL・商品・コレクション・外部サイトなどを自由に設定できます。キャンペーンページ、特集ページ、SNS アカウントなど、自由度が高いのがカスタムメニューの魅力です。
リンク画像（1〜5）: 各サークルに表示する画像を設定します。統一感のある画像を使用することで、プロフェッショナルな印象を与えられます。

デザイン設定

※ 商品サークルメニュー、コレクションサークルメニューと同様の設定項目があります。

カスタム CSS

追加 CSS: カスタムサークルメニュー専用の CSS を追加できます。

これらの項目を設定して「保存」すると、即座にストアのプレビュー画面に反映されます。細かい調整を繰り返しながら、自社ストアに合ったデザインで円形メニューを表示してみてください。

テーマのコード編集で実装する場合のサンプルコード

「アプリを使わずに自力で実装したい」「独自デザインを追求したい」「月額費用をかけたくない」という方向けに、簡単なコード例を紹介します。以下は Shopify テーマの任意のセクションに HTML / CSS を追記し、シンプルな円形メニューを表示するイメージです。

基本的な HTML / CSS サンプル

<!-- 円形メニューのサンプル -->
<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: scale(1.2);
- 回転を追加: transform: scale(1.1) rotate(5deg);
グラデーションの追加
::before 疑似要素を使って、グラデーションオーバーレイを追加できます。
画像パスの変更
{{ 'circle-new.jpg' | asset_url }} の部分を、実際の画像ファイル名に置き換えてください。Shopify のファイルアップロード機能を使って画像をアップロードし、そのパスを指定します。
レスポンシブ対応の強化
メディアクエリを追加して、タブレットサイズなど中間サイズのデバイスにも対応できます。

実装手順

Shopify 管理画面で「オンラインストア」→「テーマ」→「コードを編集」を開きます。
セクションファイル（例：sections/circle-menu.liquid）を新規作成するか、既存のセクションに追記します。
上記のコードをコピー＆ペーストし、画像パスや URL を自社ストアに合わせて調整します。
テーマエディタで該当セクションを追加し、プレビューで表示を確認します。
問題なければ保存して公開します。

上記は一例ですので、サイズや位置、画像パス、デザインなどを自社ストアに合わせて適宜変更してください。また、テーマ更新時に上書きされるリスクがあるため、万一に備えてテーマを複製しておき、定期的にバックアップを取ることをおすすめします。

より高度な実装例

JavaScript を使って、動的にコレクションや商品を取得して円形メニューを生成することも可能です。Shopify Ajax API を活用すれば、最新の商品情報を自動的に反映させることもできます。ただし、この場合はより高度な開発知識が必要となるため、外部の開発者に依頼するか、アプリの利用を検討することをおすすめします。

Shopify 円形メニュー設置後の活用ポイント

円形メニューを設置して終わりではなく、どう活用するかが成果を左右します。以下にいくつかのアイデアを紹介します。

主要コレクションへの導線として活用

ホームページのファーストビュー直下に円形メニューを配置し、主要なコレクション（新着、セール、人気商品など）への導線を作ることで、ユーザーが迷わず目的のページに到達できるようになります。特に初めて訪問したユーザーにとって、視覚的に分かりやすいナビゲーションは重要です。

シーズンやキャンペーンに合わせた特集

季節の変わり目やセール期間、クリスマスやバレンタインなどのイベント時に、期間限定の特集メニューを円形メニューで訴求すると効果的です。タイムリーなコンテンツはエンゲージメントを高めます。定期的にメニュー内容を更新することで、リピーターにも新鮮な印象を与えられます。

ブランドストーリーの発信

「ブランドについて」「製造へのこだわり」「サステナビリティへの取り組み」など、ブランドの価値観を伝えるページへのリンクを円形メニューに含めることで、ブランドへの共感を醸成できます。商品を売るだけでなく、ブランドの世界観を伝えることが、長期的なファンづくりにつながります。

ルックブックやスタイリング提案への誘導

複数の商品を組み合わせたコーディネート例やスタイリング提案を見せるルックブックページへ、円形メニューから誘導することで、**クロスセル（関連商品の購入）**を促進できます。「この服にはこのバッグが合う」といった提案をビジュアルで示すと、顧客の購買意欲が高まります。

ギフトガイドや用途別提案

「誕生日プレゼント」「自分へのご褒美」「ビジネスシーン」など、用途別の商品提案ページへのリンクを円形メニューに設定することで、ギフト需要の取り込みが可能になります。特に記念日シーズンや年末年始は、ギフト需要が高まるため効果的です。

カスタムサークルメニューを使って、Instagram、YouTube、ブログなどの外部コンテンツへのリンクを設置することで、オムニチャネルでのブランド体験を提供できます。ストアだけでなく、SNS でもブランドとつながることで、顧客とのエンゲージメントが深まります。

商品ページでの関連コレクション提案

商品ページに円形メニューを設置し、「この商品が含まれるコレクション」や「おすすめのコーディネート」を提案することで、商品ページからの回遊率を高めることができます。購入後の「他の商品も見てみよう」という行動を促せます。

運用時の注意点

円形メニューを効果的に運用するために、次の点に注意しましょう。

画像の最適化

高解像度の画像をそのままアップロードすると、ページの読み込み速度が低下します。画像を圧縮し、適切なサイズにリサイズしてからアップロードしましょう。Shopify は WebP 形式に対応しているため、WebP 形式で保存するとさらに軽量化できます。

円形メニュー用の画像は、通常 120px〜150px 程度のサイズで表示されることが多いため、元画像は 300px〜400px 程度（Retina 対応のため 2 倍サイズ）あれば十分です。それ以上大きなサイズは不要です。

画像の統一感を保つ

円形メニューに使用する画像は、トーン、明るさ、構図などを統一することが重要です。バラバラの雰囲気の画像を並べると、かえってブランドイメージが損なわれます。同じ撮影セッションで撮った写真を使う、または同じフィルターやレタッチを施すなど、統一感を意識しましょう。

定期的な内容の更新

同じメニューをずっと表示していると、リピーターにとっては新鮮味がなくなります。季節やトレンド、在庫状況に合わせて、定期的にメニュー内容を入れ替えることで、サイトの鮮度を保ちましょう。

月に 1 回程度の更新を目安に、新しいコレクションやキャンペーンに合わせて内容を見直すことをおすすめします。

レスポンシブデザインの確認

PC では美しく見えるメニューも、スマホでは配置やサイズが適切でないと、見づらくなったりタップしづらくなったりすることがあります。複数のデバイス（PC、タブレット、スマホ）で表示を確認し、必要に応じて調整しましょう。

特にスマホでは、円形のサイズを小さめに設定し、3〜4 個程度を横スクロールで表示する、または 2 列で表示するなど、画面サイズに応じた最適化が必要です。

アクセス解析と効果測定

円形メニューを設置したことで、クリック数やコンバージョン率がどう変化したかを計測しましょう。Shopify アナリティクスや Google Analytics を活用して、設置前後で比較すると効果が見えやすくなります。

特に、どのメニューアイテムが最もクリックされているかを分析することで、顧客のニーズを理解し、さらに効果的なメニュー構成に改善できます。

ページ速度のモニタリング

円形メニューを追加した後、ページ速度が極端に遅くなっていないか定期的にチェックしましょう。Google PageSpeed Insights などのツール Page Speed Insights やを使って測定し、問題があれば画像の圧縮やレイジーロード（遅延読み込み）の実装を検討してください。

ページ速度は SEO にも影響するため、特にモバイルでのスコアに注意が必要です。

アクセシビリティへの配慮

画像には必ず適切な alt テキスト（代替テキスト）を設定しましょう。視覚障害のある方がスクリーンリーダーを使用する際に、メニューの内容を理解できるようになります。また、SEO の観点からも alt テキストは重要です。

例：<img src="circle-new.jpg" alt="新着商品コレクションへのリンク">

多用しすぎない

円形メニューは目立つがゆえに、1 ページに複数設置すると逆効果になることがあります。本当に重要なポイントだけに絞って使用することが大切です。通常は、1 ページに 1 つの円形メニューセクションで十分です。

クリック先のページも最適化する

円形メニューからのクリック率が高くても、遷移先のページが魅力的でなければ、すぐに離脱されてしまいます。円形メニューで誘導するページも、しっかりとコンテンツの質を高めることが重要です。

まとめ

Shopify ストアで円形（サークル）メニューを設置しておくことは、ビジュアル訴求を強化し、重要なコレクションやページへの導線を改善する上で非常に効果的な施策です。ユーザーの目を引きつけ、直感的なナビゲーションを提供することで、回遊率や滞在時間の向上が期待できます。

表示方法: コード編集とアプリ利用の 2 パターン
メリット・デメリット: デザインの自由度や運用コスト、更新リスクを総合的に検討
おすすめアプリ: 「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」
（ノーコードで手軽に導入でき、日本語サポートも充実。月額 $2.29 で 7 日間の無料トライアルあり）
運用ポイント: 画像の最適化、定期的な更新、効果測定を組み合わせると効果大

コードを書くスキルがあれば直接実装を検討しても良いですし、「とにかく簡単に試してみたい」という方はアプリを導入して、まずは手軽に運用をスタートしてみてください。

一度円形メニューを設置したら、その後は重要なコレクションやページへの導線を最大限に活用するビジュアル表現を工夫しながら、ストアの回遊性を高めていきましょう。定期的な内容更新やアクセス解析を活用して、継続的に改善を重ねることが成功の鍵です。

最後までご覧いただきありがとうございました。本記事があなたの Shopify ストア運営におけるナビゲーション改善のヒントになれば幸いです。