はじめに
Shopify で飲食店・カフェ・お弁当販売などを運営していると、「商品一覧をレストランのメニュー表のように見せたい」という要望に必ず突き当たります。Shopify の標準的なコレクションページは、あくまで「四角い商品カードが並ぶだけ」のシンプルなグリッド表示で、料理写真・説明文・バリエーション（サイズや量）・価格を1枚のカードにまとめて見せる、いわゆる「メニュー表」のような見た目にはなりません。
この記事では、Shopify でレストランメニュー風の商品一覧を作る方法と、そのために使えるアプリを比較します。実際にアプリストアで見つかる「レストランメニュー」関連アプリを開発ストアにインストールし、管理画面まで触ったうえで、それぞれの得意・不得意をまとめました。
紹介するアプリの中から、当社が開発した「シンプルレストランメニュー｜商品をメニュー形式で表示」も含めて解説します。
Shopifyの「レストランメニュー風表示」とは？
ここでいう「レストランメニュー風表示」とは、次のような特徴を持つ商品一覧のことを指します。
- 商品ごとに丸い画像・商品名・説明文が横並び（またはカード状）に並ぶ
- サイズ違い・容量違いなどのバリエーションが、価格付きで行ごとに一覧表示される
- お客様が商品ページに移動せず、一覧画面のまま数量を選んでカートに追加できる
- 売り切れの商品は自動的に見た目で区別される
飲食店やカフェのテイクアウト・デリバリー用ストアだけでなく、コース料理の案内、サブスクリプションボックスの中身紹介、料金表のようなページ作りにも応用できる表示形式です。
メリット・デメリット
Shopify の標準機能だけで頑張るか、専用アプリを使うか迷う方のために、それぞれの特徴を整理します。
メリット
- お客様が一覧を眺めながらそのままカートに追加できるため、購入までのクリック数が減る
- バリエーションと価格を表形式で見せられるので、サイズ違い・量り売りの商品と相性が良い
- 料理写真を中心に据えたレイアウトにできるため、飲食店らしい世界観を演出しやすい
デメリット
- 表示項目（画像・説明文・バリエーション）が多いため、商品数が非常に多いストアでは縦に長くなりやすい
- アプリによっては、Shopify の商品データと連動せず、手動でメニュー内容を打ち込み直す必要がある（後述）
- テーマ側の余白・フォント設定と衝突すると、見た目の調整に追加のCSS知識が必要になる場合がある
Shopify標準機能の限界
Shopify の標準テーマ（Horizon など）のコレクションページは、{% for product in collection.products %} のようなループで商品カードを並べる作りが基本で、次のようなことは標準機能だけでは実現できません。
- バリエーションを一覧画面に価格付きで並べて表示すること — 標準のコレクションページはコレクション全体の最安値（または代表価格）を1つ表示するだけで、バリエーションごとの価格を並べる機能はありません
- 一覧画面のまま数量を指定してカートに追加すること — 標準では「クイック追加」ボタンはあっても、バリエーションが複数ある商品は結局モーダルやページ遷移が必要になることが多い
- 全バリエーション売り切れ時にカード全体をグレーアウトすること — 個々のバッジ表示はテーマでカスタマイズできますが、カード全体のスタイルを条件分岐で変える作り込みは、Liquid のカスタマイズかアプリが必要です
これらを実現するには、テーマの collection.liquid を自作するか、この記事で紹介するような専用アプリを使うのが現実的です。
シンプルレストランメニュー｜商品をメニュー形式で表示
アプリの概要
「シンプルレストランメニュー｜商品をメニュー形式で表示」は、コレクションに登録した商品を、飲食店のメニュー表のようなカード形式でストアフロントに表示できる Shopify アプリです。料金は Basic Plan 月額 ＄7.99（年払い ＄79.99）で、インストールから7日間の無料体験があります。飲食店・カフェのテイクアウトメニューはもちろん、コース案内や料金表のようなページ作りにも使えます。
できること
コレクションの商品をメニュー形式で一覧にできる
表示したいコレクションを1つ選ぶだけで、そのコレクションに登録済みの商品が自動でカード状に並びます。コレクションの中身を入れ替えれば表示内容もそのまま切り替わるため、商品を1件ずつ登録し直す必要はありません。
メニューから直接カートに追加できる
サイズ違い・容量違いなどのバリエーションを持つ商品は、バリエーションごとに価格と数量ピッカーが並びます。お客様は数量を指定して「カートに追加」ボタンを押すだけでよく、商品ページへの移動は不要です。
売り切れ商品は自動で表示切り替え
商品に登録されているすべてのバリエーションが在庫切れになると、そのカードだけが自動的にグレーアウト表示に切り替わり、数量ピッカーとカートボタンの代わりに売り切れであることを示すテキストが表示されます。
アプリのインストール
- Shopify 管理画面の「設定」→「アプリと販売チャネル」から Shopify App Store を開き、「シンプルレストランメニュー」を検索してインストールします。
- アプリの管理画面で追加先のテーマを選び、「テーマに追加」を押すとテーマエディタが開き、ホームページの末尾にメニューのセクションが追加されます。
- テーマエディタでメニューのセクションを選び、「コンテンツ設定」の「コレクション」欄で表示したいコレクションを指定して保存します。
- コレクションページなど他のページに設置したい場合は、テーマエディタから該当ページを開き、「セクションを追加」でアプリの一覧から手動で追加します。
アプリ設定
管理画面のテーマエディタでは、以下の項目を細かく設定できます。
| 設定グループ | 主な項目 |
|---|---|
| コンテンツ設定 | セクションタイトル、コレクション、商品画像を表示、説明文を表示、販売元を表示、表示する商品数（4〜50件）、売り切れテキスト |
| レイアウト設定 | カラム数（PC:2/3、スマホ:1/2）、画像の配置（横/縦）、画像の形（丸/正方形/オリジナル）、画像の大きさ（PC/スマホ）、カードの背景色・枠線の色・枠線の丸み、バリエーションの間隔、カードの内側余白・間隔（PC/スマホ） |
| 文字設定 | タイトルの文字の大きさ・色・配置（PC/スマホ）、商品名の文字の大きさ・色、価格の文字の大きさ・色、説明文の文字の色 |
| カートボタン設定 | ボタンのアイコン（カート/バッグ/バスケット）、ボタンの色、ボタンの文字色 |
| 余白設定 | 上部・下部余白（PC/スマホ） |
| 追加設定 | 追加のCSS |
商品説明文は120文字を超えると自動で省略されます。また「表示する商品数」の初期値は50件で、コレクションに登録されている商品の並び順（Shopify の商品管理画面で設定する並び順）がそのままメニューの表示順になります。
🚨 1点注意点として、「テーマに追加」ボタンで自動追加されるのはホームページ固定です。コレクションページに表示したい場合は、上記のとおりテーマエディタから手動で追加する必要があります。
おわりに
「シンプルレストランメニュー｜商品をメニュー形式で表示」は、Shopify の商品データをそのまま使い、バリエーション選択からカート追加までを一覧画面で完結させたい方に向いたアプリです。詳細・インストールは Shopify アプリストアのページ からご確認ください。
競合アプリ4本を実際に使って比較
「レストランメニュー」でアプリストアを検索すると、ナビゲーション用の「メガメニュー」アプリが多数ヒットしますが、それらは本記事のテーマとは別物（サイトの案内メニューを作るアプリ）のため対象外としました。ここでは、実際に「飲食店のメニュー表示」を目的としたアプリ4本を開発ストアにインストールし、管理画面まで確認しました。
Restaurant Menu by Elfsight
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | Restaurant Menu by Elfsight |
| 開発者 | Elfsight |
| 価格設定 | ＄5.99/月（年払い ＄59.88/年）・7 日間の無料体験 |
| 主な機能・特徴 | わずか数回のクリックで複雑なメニューを作成できます、情報が豊富で鮮やかなアプローチにより、メニューの多様性をアピールできます、料理の独自性を表現できます |
| 対応言語 | 管理画面は英語のみ（実際に確認） |
| 評価 | ★ 4.5（3 件） |
実際にインストールして触ってみた
- アプリストアの掲載ページは日本語だが、管理画面（ウィジェットビルダー）は英語のみだった
- メニュー内容はテンプレートに入っている「DESSERT」「LUNCH」などのサンプル料理名・価格を手動で編集する形式で、Shopifyの商品データとは連動しない
- 商品や在庫と紐づかないため、カートに追加するボタンは無く、あくまで見た目のメニュー表（デジタルサイネージ）として使う設計
- 無料体験は7日間で、期限後は「Approve Charge」で決済を承認しないと使い続けられない
ワンポイント解説
アプリストアのスクリーンショットは料理写真付きで美しいが、実際は「見た目のメニュー表を作るウィジェット」であり、商品登録・在庫・カート機能は一切持たない。Shopifyで売っている商品をそのまま並べたい場合は不向き。
K: Restaurant Menu
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | K: Restaurant Menu |
| 開発者 | Kaktus |
| 価格設定 | ＄1/月・7 日間の無料体験 |
| 主な機能・特徴 | タブ、スライダー、リスト、またはグリッドを使用してメニューを表示し、柔軟にカスタマイズできます、数回のクリックで、タイトル、説明、価格を調整したり、新しい料理を追加したりできます、レストランのロゴ、連絡先情報、カスタムアイコンを追加できます、季節の料理や特別オファーを目立たせることができます。コーディングは不要です、ポップアップを有効にして、スムーズで魅力的な料理のプレビューを表示できます |
| 対応言語 | 管理画面は英語のみ（実際に確認） |
| 評価 | ★ 5（1 件） |
実際にインストールして触ってみた
- アプリストアの説明文は日本語だが、インストール後の管理画面（テンプレート選択画面）は英語のみだった
- 「Pick a Template」から始まる5ステップのウィザードで、テンプレートに入っている「Grillhouse Classic ＄18」のようなサンプルメニューを手動で書き換える方式。商品ページや在庫とは連動しない
- こちらも見た目のメニュー表示に特化しており、カートに追加する機能は確認できなかった
- 月額 ＄1 と価格は非常に安いが、機能はElfsightと同系統（静的なメニュー画像・テキストの表示）
ワンポイント解説
Elfsightと同じく「手動で作る飾り付きメニュー表」タイプ。価格は安いが、Shopifyの商品在庫と自動で同期されるわけではないため、メニュー内容の更新は手作業になる。
Restaurant Menu ‑ ServeUp
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | Restaurant Menu ‑ ServeUp |
| 開発者 | TK Digital |
| 価格設定 | ＄9.99/月・14 日間の無料体験 |
| 対応言語 | 管理画面は日本語（実際に確認） |
| 評価 | ★ 5（11 件） |
実際にインストールして触ってみた
- 管理画面・セットアップガイドともに日本語で表示された（アプリストアの言語表記どおり）
- インストール時の権限確認に「商品」へのアクセスが含まれており、Shopifyの実商品データを使ってメニューページを作成する仕組みだった
- セットアップガイドの案内文は「商品をレストランのようなわかりやすいセクションにまとめたメニューを作成し、お客様が簡単に閲覧して注文できるようにします」となっており、商品ごとにセクション分けする設計思想
- 「注文できるようにします」という案内文からカート機能もありそうだが、メニュー作成画面までは到達できず、カートに追加ボタンの有無は今回未確認
- 月額 ＄9.99 で今回比較した4本の中では最も高価格帯
ワンポイント解説
今回の4本の中で唯一、実際のShopify商品データと連動することを管理画面上で確認できたアプリ。方向性としては当アプリに最も近いが、価格は当アプリ（＄7.99）より高い。
MenuSync
アプリ概要
| 項目 | 内容 |
|---|---|
| アプリ名 | MenuSync |
| 開発者 | OM System Design |
| 価格設定 | 無料 |
| 主な機能・特徴 | 内部システムからメニューアイテムを自動的に取得し、即座に更新します、ワンクリックで、メニューアイテムを商品としてオンラインストアにプッシュします、シームレスな自動更新により、ストアの在庫を正確に保ちます |
| 対応言語 | 管理画面は英語のみ（実際に確認） |
| 評価 | ★ 0.0（- 件） |
実際にインストールして触ってみた
- そもそも「メニューを表示するアプリ」ではなく、外部の店舗用POS/メニュー管理システムに登録した料理データを、固有の店舗IDを使ってShopifyの商品として自動プッシュ（インポート）するための連携ツール
- 外部システム側のアカウントが無いと機能を使い始めることすらできない設計
- 実際にインストールして開いたところ、アプリの管理画面自体が「Database connection failed: SQLSTATE[HY000] [1044] Access denied for user 'owytechn_ppshopify'...」というデータベース接続エラーを表示して起動しなかった（2026年9月時点）
- レビュー件数は0件で、実運用されている形跡が乏しい
ワンポイント解説
「レストランメニュー」という名前だが、実態は外部POS連携専用のバックエンドツールで、単体のストアに直接メニュー表示機能を追加するものではない。しかも動作確認時点でアプリ自体がエラーで起動しなかった。
5つのアプリを比較
| アプリ | 日本語 | Shopify商品と連動 | カートに追加 | 月額 | 評価 |
|---|---|---|---|---|---|
| シンプルレストランメニュー｜商品をメニュー形式で表示 | ✅ | ✅ | ✅ | ＄7.99 | — |
| Restaurant Menu by Elfsight | ❌ | ❌ | ❌ | ＄5.99 | ★4.5（3） |
| K: Restaurant Menu | ❌ | ❌ | ❌ | ＄1 | ★5.0（1） |
| Restaurant Menu ‑ ServeUp | ✅ | ✅ | △（未確認） | ＄9.99 | ★5.0（11） |
| MenuSync | ❌ | △（外部POS連携時のみ） | ❌ | 無料 | — |
※「Shopify商品と連動」は、実際にインストールして管理画面・権限確認を確認した結果です。「△」は実機確認で判断しきれなかった項目、「—」はレビュー・評価が付いていない（新規または実運用が乏しい）ことを示します。
まとめ：どのアプリを選ぶべきか
4本を実際に触った結果、大きく2つのタイプに分かれることが分かりました。
- Elfsight・K: Restaurant Menu タイプ — テンプレートに入っているサンプルメニューを手動で書き換える「デジタルメニューボード」型。Shopify の商品データとは連動しないため、価格改定や新商品追加のたびに手作業の更新が必要です。見た目重視で、実際の通販商品とは別に「メニュー表」だけを見せたい場合に向いています。
- ServeUp・シンプルレストランメニュー タイプ — Shopify に登録済みの商品データをそのまま使ってメニューを組み立てる型。商品情報の二重管理が発生しません。
MenuSync のように、名前は「メニュー」でも実態が外部POS連携ツールで、単体では機能しないアプリも混ざっていたため、導入前に管理画面のスクリーンショットだけでなく、実際にインストールして確かめることをおすすめします。
Shopify の商品データをそのまま使い、追加の外部システムなしでメニュー表示とカート機能を両立させたい場合は、「シンプルレストランメニュー｜商品をメニュー形式で表示」をぜひお試しください。