2026/01/14

Shopifyにハイライトメニューを表示できるアプリ7選

@ 信条刃

はじめに

今回の記事は Shopify App Store で提供されている、ハイライトメニュー（ストーリー風メニュー）アプリについての記事です。

EC の回遊率や「見てほしい導線（セール・新作・カテゴリ）」がうまく作れていないと、せっかく来てくれたお客様が商品に辿り着く前に離脱してしまうことがあります。
そんなときに効くのが、Instagram のハイライトのような「視覚的なメニュー」を置けるハイライトメニューです。

この記事では、Shopify で使えるハイライトメニューアプリ 7 選を、用途別に分かりやすく紹介します。最後に、アプリを使わずにコーディングで実装する方法（Online Store 2.0 セクション）も載せています。

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

ハイライトメニューとは

ハイライトメニューは、ストアのトップやコレクションページなどに「丸いアイコン（または四角いサムネ）」を横並びで表示し、カテゴリ・コレクション・キャンペーンページなどへ誘導する UI です。

よくあるテキストリンクのメニューと違い、

アイコン（画像）で直感的に理解できる
スマホでもタップしやすい
“今見てほしい導線” を強調できる

という特徴があります。
特にモバイル比率が高いストアほど、ハイライトメニューの恩恵は大きいです。

ハイライトメニューを調べるにあたり、まずは「Shopify のメニュー設計」と「Online Store 2.0（セクション）」の考え方を押さえておくとスムーズです。

Shopify のナビゲーション設計（ヘッダーメニュー / フッター / コレクション導線）
Online Store 2.0 のセクション運用（好きな場所にブロックを置ける仕組み）
モバイル UX（タップ領域、スクロールのしやすさ、視線誘導）

ハイライトメニューを導入する利点

ハイライトメニュー導入で得られる利点を解説します。

重要カテゴリへの到達を最短化できる
「新作」「セール」「人気カテゴリ」など、売上に直結するページへ 1 タップで誘導できます。
スマホの回遊率が上がりやすい
文字メニューよりタップしやすく、視認性も高いため、モバイルのストレスが減ります。
キャンペーンの露出を増やせる
期間限定の訴求を “常に見える場所” に置けるので、LP への導線が強くなります。
直帰率（バウンス率）の改善につながる
トップに来たユーザーが次に進む導線を迷わなくなり、離脱を抑えられます。
コレクションの深掘りを促進できる
大カテゴリから小カテゴリへ、自然な導線を作れます（例：アウター → コート → ロングコート）。
ビジュアルで「世界観」を統一しやすい
サムネイルやアイコンでブランドの空気感を揃えられます。
新商品・再入荷の “気づき” を作れる
「New」「Sale」などのバッジで注目を集められます。
探索型の買い物に強くなる
目的買いだけでなく「なんとなく見に来た人」も回遊しやすくなります。
テキストメニューの弱点を補える
多階層のメニューはモバイルで読まれにくいので、視覚メニューで補完できます。

ハイライトメニューアプリの選び方

ハイライトメニューアプリは、見た目が似ていても「できること」が意外と違います。選ぶときは、次のポイントをチェックするのがおすすめです。

Online Store 2.0 テーマのセクションとして配置できる（好きな場所に置ける）
丸型 / 四角型など形状を選べる
メニューグループを複数作れる（トップ用、商品ページ用など）
アイコン（画像）とリンク先を自由に設定できる
「New」「Sale」などのバッジ表示ができる
モバイル / デスクトップの表示出し分けができる
余白・サイズ・枠線・フォントなどデザイン調整の自由度が高い
上限（メニュー数・表示回数）と料金のバランスが良い
管理画面やサポートが日本語対応している（日本の運用だとかなり重要）

ここから、実際におすすめのアプリを 7 個紹介します。

価格比較

ここでは「メニューアイテムをしっかり運用できるプラン」を前提に、ざっくり比較します。
（無料でも試せるアプリは多いので、まずは無料導入 → 数値を見て有料移行が鉄板です）

シンプルメニューカスタマイズ｜お手軽アイコンメニュー
$2.29/月（7 日無料体験あり）
Easy Highlights Menu
無料
BL Story Highlight Menu Bar
$1.99/月（3 日無料体験あり）
年払いなら $1.59/月相当
KOBU ‑ Menu Highlight
$4/月（無制限 highlights は Pro）
Navigy ‑ InstaMenu Design
$7.99/月（最大 10 アイテム）
Story Style ‑ Insta Highlights
$9.99/月（無制限アイテムは Basic 以上）
Mega Highlights Menu
$2.99/月（3 日無料体験あり）
年払いなら $2.49/月相当

「安さ」だけで決めると、アイテム上限や日本語非対応で運用が詰まることがあります。
月額と上限、そして運用体験（設定のしやすさ）で選ぶのがおすすめです。

Shopify アプリの日本語サポート

ハイライトメニューは “見た目を調整する時間” が発生しやすいので、管理画面が日本語であることは地味に効きます。
翻訳しながら設定するストレスを減らしたい場合、日本語対応は優先度が高いです。

シンプルメニューカスタマイズ｜お手軽アイコンメニュー：日本語対応（管理画面表示言語に日本語あり）
Easy Highlights Menu：日本語未対応（英語）
BL Story Highlight Menu Bar：日本語未対応（英語/スペイン語/フランス語）
KOBU ‑ Menu Highlight：日本語未対応（英語）
Navigy ‑ InstaMenu Design：日本語未対応（英語）
Story Style ‑ Insta Highlights：日本語未対応（英語）
Mega Highlights Menu：日本語未対応（英語）

使いやすさ

「設定が簡単」「見た目が崩れにくい」「日本語で運用しやすい」という観点だと、最も迷いにくいのは 「シンプルメニューカスタマイズ｜お手軽アイコンメニュー」 です。価格も低く、まず導入して AB テスト的に効果検証しやすいのが良いです。

一方で、レビュー実績と安心感を重視するなら KOBU ‑ Menu Highlight が堅い選択肢になります（無料で試せて、必要なら Pro に移行しやすい）。

ここまでがアプリ導入の話でしたが、次は「アプリを使わずに自作したい人向け」に、コーディングでの実装例を載せます。

コーディングでハイライトメニューを実装する方法

「アプリを増やしたくない」「表示を完全にコントロールしたい」場合は、Online Store 2.0 のカスタムセクションとしてハイライトメニューを自作できます。

ここでは、丸型/四角型、バッジ、横スクロール対応の “ストーリー風ハイライトメニュー” を実装します。

実装手順

Shopify 管理画面で「オンラインストア」→「テーマ」→「…」→「コードを編集」
sections フォルダに highlight-menu.liquid を新規作成
下のコードを貼り付けて保存
テーマカスタマイズ（オンラインストアのカスタマイズ）で「セクションを追加」→「Highlight Menu」を選んで配置
ブロック（アイテム）を追加して、画像・リンク・ラベル・バッジを設定

{%- liquid
  assign shape = section.settings.shape
  assign size = section.settings.thumb_size
  assign gap = section.settings.gap
  assign show_on = section.settings.show_on
-%}

<div id="hm-{{ section.id }}" class="hm hm--shape-{{ shape }}">
  {%- if section.settings.heading != blank -%}
    <h2 class="hm__heading">{{ section.settings.heading | escape }}</h2>
  {%- endif -%}

  <nav class="hm__nav" aria-label="{{ section.settings.aria_label | escape }}">
    <ul class="hm__list">
      {%- for block in section.blocks -%}
        {%- liquid
          assign link = block.settings.link
          assign title = block.settings.title
          assign badge = block.settings.badge
          assign img = block.settings.image
          assign open_new = block.settings.open_in_new_tab
        -%}

        <li class="hm__item" {{ block.shopify_attributes }}>
          <a
            class="hm__link"
            href="{{ link | default: '#' }}"
            {%- if open_new -%} target="_blank" rel="noopener noreferrer"{%- endif -%}
            data-hm-title="{{ title | escape }}"
          >
            <span class="hm__thumb" aria-hidden="true">
              {%- if img != blank -%}
                <img
                  class="hm__img"
                  src="{{ img | image_url: width: 240 }}"
                  alt="{{ title | escape }}"
                  loading="lazy"
                  width="120"
                  height="120"
                >
              {%- else -%}
                <span class="hm__placeholder">
                  {{ title | default: 'Menu' | slice: 0, 1 | upcase }}
                </span>
              {%- endif -%}

              {%- if badge != blank -%}
                <span class="hm__badge">{{ badge | escape }}</span>
              {%- endif -%}
            </span>

            <span class="hm__title">{{ title | escape }}</span>
          </a>
        </li>
      {%- endfor -%}
    </ul>
  </nav>
</div>

<style>
  /* Scope styles to this section only */
  #hm-{{ section.id }} {
    --hm-size: {{ size }}px;
    --hm-gap: {{ gap }}px;
    --hm-border: {{ section.settings.border_width }}px;
    --hm-radius-square: {{ section.settings.square_radius }}px;
    --hm-border-color: {{ section.settings.border_color }};
    --hm-title-size: {{ section.settings.title_font_size }}px;
    --hm-title-color: {{ section.settings.title_color }};
    --hm-badge-bg: {{ section.settings.badge_bg }};
    --hm-badge-color: {{ section.settings.badge_color }};
  }

  #hm-{{ section.id }} .hm__heading {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.3;
  }

  #hm-{{ section.id }} .hm__nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #hm-{{ section.id }} .hm__list {
    display: flex;
    gap: var(--hm-gap);
    padding: 4px 2px;
    margin: 0;
    list-style: none;
    width: max-content;
  }

  #hm-{{ section.id }} .hm__item {
    flex: 0 0 auto;
  }

  #hm-{{ section.id }} .hm__link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    user-select: none;
  }

  #hm-{{ section.id }} .hm__thumb {
    position: relative;
    width: var(--hm-size);
    height: var(--hm-size);
    border: var(--hm-border) solid var(--hm-border-color);
    overflow: hidden;
    background: rgba(0,0,0,0.03);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #hm-{{ section.id }}.hm--shape-circle .hm__thumb {
    border-radius: 9999px;
  }

  #hm-{{ section.id }}.hm--shape-square .hm__thumb {
    border-radius: var(--hm-radius-square);
  }

  #hm-{{ section.id }} .hm__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #hm-{{ section.id }} .hm__placeholder {
    font-size: calc(var(--hm-size) * 0.42);
    font-weight: 700;
    opacity: 0.6;
  }

  #hm-{{ section.id }} .hm__badge {
    position: absolute;
    right: 6px;
    top: 6px;
    background: var(--hm-badge-bg);
    color: var(--hm-badge-color);
    font-size: 11px;
    line-height: 1;
    padding: 5px 7px;
    border-radius: 9999px;
    white-space: nowrap;
  }

  #hm-{{ section.id }} .hm__title {
    margin-top: 8px;
    font-size: var(--hm-title-size);
    color: var(--hm-title-color);
    line-height: 1.2;
    text-align: center;
    max-width: calc(var(--hm-size) + 18px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Device visibility control */
  {%- if show_on == 'mobile' -%}
    @media (min-width: 750px) { #hm-{{ section.id }} { display: none; } }
  {%- elsif show_on == 'desktop' -%}
    @media (max-width: 749px) { #hm-{{ section.id }} { display: none; } }
  {%- endif -%}
</style>

<script>
  (function() {
    var root = document.getElementById("hm-{{ section.id }}");
    if (!root) return;

    root.addEventListener("click", function(e) {
      var a = e.target.closest(".hm__link");
      if (!a) return;

      // 例：クリック計測用（必要に応じて GA4 などへ接続）
      // console.log("Highlight menu click:", a.getAttribute("data-hm-title"));
    });
  })();
</script>

{% schema %}
{
  "name": "Highlight Menu",
  "settings": [
    { "type": "text", "id": "heading", "label": "見出し", "default": "おすすめカテゴリ" },
    { "type": "text", "id": "aria_label", "label": "ARIA ラベル", "default": "ハイライトメニュー" },

    { "type": "select", "id": "shape", "label": "形状", "default": "circle",
      "options": [
        { "value": "circle", "label": "丸型" },
        { "value": "square", "label": "四角型" }
      ]
    },

    { "type": "range", "id": "thumb_size", "label": "アイコンサイズ", "min": 48, "max": 110, "step": 2, "default": 74 },
    { "type": "range", "id": "gap", "label": "アイテム間の余白", "min": 6, "max": 24, "step": 1, "default": 12 },

    { "type": "range", "id": "border_width", "label": "枠線の太さ", "min": 0, "max": 6, "step": 1, "default": 2 },
    { "type": "color", "id": "border_color", "label": "枠線カラー", "default": "#111111" },

    { "type": "range", "id": "square_radius", "label": "四角型の角丸", "min": 0, "max": 22, "step": 1, "default": 14 },

    { "type": "range", "id": "title_font_size", "label": "タイトル文字サイズ", "min": 10, "max": 16, "step": 1, "default": 12 },
    { "type": "color", "id": "title_color", "label": "タイトルカラー", "default": "#111111" },

    { "type": "color", "id": "badge_bg", "label": "バッジ背景色", "default": "#111111" },
    { "type": "color", "id": "badge_color", "label": "バッジ文字色", "default": "#ffffff" },

    { "type": "select", "id": "show_on", "label": "表示デバイス", "default": "both",
      "options": [
        { "value": "both", "label": "モバイル + デスクトップ" },
        { "value": "mobile", "label": "モバイルのみ" },
        { "value": "desktop", "label": "デスクトップのみ" }
      ]
    }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "メニューアイテム",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "画像（アイコン）" },
        { "type": "text", "id": "title", "label": "タイトル", "default": "New" },
        { "type": "url", "id": "link", "label": "リンク先" },
        { "type": "text", "id": "badge", "label": "バッジ（例：New / Sale）", "default": "" },
        { "type": "checkbox", "id": "open_in_new_tab", "label": "新しいタブで開く", "default": false }
      ]
    }
  ],
  "max_blocks": 20,
  "presets": [
    { "name": "Highlight Menu" }
  ]
}
{% endschema %}

この実装が向いているケース

アプリを増やさずに、軽量にハイライトメニューを置きたい
デザインをテーマ側で完全に管理したい
アイテム数が少なく、運用もシンプルでいい

逆に「管理画面での運用をもっと簡単にしたい」「複数グループを大量に回したい」場合は、この記事で紹介したアプリ導入のほうが運用コストは下がります。

終わりに

今回は、Shopify のハイライトメニューアプリ 7 選についての記事でした。

ストーリー風のハイライトメニューは、導入の手軽さに対して「回遊率」「セール導線」「カテゴリ理解」に効きやすい施策です。
迷っている場合は、まず無料プラン（もしくは低価格プラン）でトップページに置いて、クリック率や回遊の変化を見るところから始めるのがおすすめです。

また、アプリを使わずに実装したい場合は、記事内のセクションコードをそのまま貼り付けて試してみてください。

ここまでお付き合い頂き、誠にありがとうございました。

参考記事

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

@ 信条刃

Shopify

サイトTOP お問い合わせ

Shopifyにハイライトメニューを表示できるアプリ7選

はじめに

ハイライトメニューとは

ハイライトメニューを導入する利点

ハイライトメニューアプリの選び方

おすすめのハイライトメニュー Shopify アプリ

シンプルメニューカスタマイズ｜お手軽アイコンメニュー ☆ 迷ったらこれ

特徴・機能

価格設定

Easy Highlights Menu

特徴・機能

価格設定

BL Story Highlight Menu Bar

特徴・機能

価格設定

KOBU ‑ Menu Highlight

特徴・機能

価格設定

Navigy ‑ InstaMenu Design

特徴・機能

価格設定

Story Style ‑ Insta Highlights

特徴・機能

価格設定

Mega Highlights Menu

特徴・機能

価格設定

価格比較

Shopify アプリの日本語サポート

使いやすさ

コーディングでハイライトメニューを実装する方法

実装手順

sections/highlight-menu.liquid

この実装が向いているケース

終わりに

参考記事

最新の記事

目次

関連タグ

Shopifyにハイライトメニューを表示できるアプリ7選

Shopify に画像ギャラリーを表示できるアプリ10選

Shopifyストアで追従ボタンを実現できるアプリ10選

Shopifyで追従する今すぐ購入ボタンを実現できるアプリ10選

ShopifyでTikTokのアイコンを追従表示できるアプリ8選

Shopifyストアで画像LPを簡単に実現できるアプリ12選