【徹底解説】Shopify アプリ「シンプルレストランメニュー｜商品をメニュー形式で表示」でできること

【徹底解説】Shopify アプリ「シンプルレストランメニュー｜商品をメニュー形式で表示」でできること

飲食店やお弁当・惣菜のテイクアウト、ケータリング、カフェのドリンク販売をネットショップで始めると、多くの方がつまずくのが「商品一覧がメニューに見えない」という問題です。Shopify の標準のコレクションページは、商品画像が大きく並ぶ物販向けのグリッドで、1 品ずつ商品ページを開いてサイズを選び、カートに入れて戻る、という動きを前提にしています。レストランのメニュー表のように、料理名と価格を見比べながらその場で数量を決めて注文する体験とは少し違います。

この記事では、その差を埋める Shopify アプリ「シンプルレストランメニュー｜商品をメニュー形式で表示」を、管理画面とテーマエディタの全画面・全設定項目にわたって解説します。ストアオーナー向けのアプリ紹介ページでは触れられていない、設定を変えたときに実際どう見えるのか、どこまで値を上げると崩れるのか、スマホでは何が自動で切り替わるのか、といった点まで、開発ストアで実際に設定を切り替えて撮った画面を使って説明します。

アプリの掲載ページは Shopify App Store から開けます。設置の手順だけを短く確認したい方は、Shopifyでコレクションの商品をレストランメニュー風に表示できるアプリについて徹底解説｜ご利用ガイド もあわせてご覧ください。この記事は、設置よりも「どう設定するとどう見えるか」に重心を置いています。

シンプルレストランメニューとは

「シンプルレストランメニュー｜商品をメニュー形式で表示」は、Shopify に登録済みの商品を、コレクション単位でレストランのメニュー表のようなカードに並べるアプリです。テーマに追加するブロックが 1 つあり、そのブロックで表示したいコレクションを選ぶと、そのコレクションに入っている商品が自動でカードになって並びます。

1 枚のカードに入るのは、商品画像、商品名、販売元、商品説明、バリエーションごとの価格、数量ピッカー、カートに追加ボタンです。お客様は商品ページへ移動せずに、メニューを見ながら数量を決めてカートへ入れられます。

メニュー用のデータを別に持たない仕組み

このアプリの一番の特徴は、メニュー専用のデータベースを持たないことです。表示内容はすべて、Shopify の商品とコレクションから Liquid（Shopify のテンプレート言語）で直接読み出しています。アプリの管理画面で料理名や価格を入力する画面はありません。

そのため、価格を改定したいときは Shopify の商品管理で価格を変えるだけで、メニューの表示も同じタイミングで変わります。新メニューを追加したいときは、商品を作ってコレクションに入れるだけです。メニュー表と商品の二重管理が起きない、というのがこの設計の狙いです。

1 つのブロックで 1 カテゴリーを担当する

ブロック 1 つに指定できるコレクションは 1 つです。フード・ドリンク・デザートのようにカテゴリーを分けたいときは、カテゴリーごとにコレクションを作り、ブロックを並べて追加します。開発ストアでは、ホームページに「Fast Food」「Catering」「Backing」「Drinks」の 4 ブロックを縦に並べて、1 ページの中でメニュー表らしく見せています。

シンプルレストランメニューのメリット

商品ページを開かずに注文が完結する

カートに追加ボタンを押すと、バリエーションと数量がそのままカートに入ります。追加に成功するとボタンが 1.5 秒ほどチェックマーク（✓）に変わり、ヘッダーのカート数も書き換わるので、お客様は「入った」ことをその場で確認できます。ピザのハーフとレギュラーのように、同じ料理でサイズ違いを並べる業態では、商品ページへの往復がなくなるだけで注文の手間がかなり減ります。

価格や在庫の変更が自動で反映される

前の章で触れたとおり、表示内容は Shopify の商品データそのものです。セール価格（比較価格）を設定した商品は、元の価格が取り消し線付きで並び、その横にセール後の価格が出ます。在庫が尽きた商品は自動で薄いグレー表示になります。メニュー表を作り直す作業がそもそも発生しません。

見た目をテーマエディタだけで作り込める

カラム数、画像の配置と形、カードの色と角丸、文字サイズと色、ボタンのアイコンと色、余白まで、39 個の設定項目がテーマエディタに並んでいます。コードを書かずに、ストアの雰囲気に合わせたメニューを作れます。PC とスマホで別々に持てる値が多いのも特徴です。

テーマのデザインに引きずられにくい

ブロックのスタイルは、ブロックごとに付く ID で範囲を限定して書かれています。テーマ側の CSS と衝突しにくく、同じページに複数のメニューブロックを置いても、それぞれ別の色・別のレイアウトにできます。

シンプルレストランメニューのデメリット

導入前に知っておいてほしい制約も正直に書いておきます。

1 ブロックにつき 1 コレクションまで

複数のコレクションを 1 つのメニューにまとめて表示する機能はありません。カテゴリーの数だけブロックを追加する必要があります。カテゴリーをタブで切り替えるような見せ方も、このアプリ単体ではできません。

並べ替えはコレクション側で行う

アプリにはメニューの並び順を決める設定がありません。並び順は、選んだコレクションの並び替え設定（手動、ベストセラー順など）がそのまま使われます。おすすめを先頭に置きたいときは、Shopify の商品管理でコレクションの並び順を手動にして並べ替えます。

売り切れテキストの初期値は英語

売り切れのときに表示する文言の初期値は、ストアの言語に関係なく「Sold out」です。日本語のストアで使うときは、最初に「売り切れ」や「本日完売」などに書き換えておきましょう。

設定値の組み合わせによっては窮屈になる

PC で 3 カラムにして画像を横（左）に置くと、カードの幅が狭くなり、価格が数量ピッカーの上に折り返します。画像の大きさを上げすぎると、カートボタンがカードからはみ出します。どちらも後ほど画面付きで説明しますが、設定の自由度が高いぶん、プレビューで確認しながら値を決める必要があります。

表示できる商品は 1 ブロック 50 件まで

「表示する商品数」の上限は 50 件です。1 つのコレクションに 50 件を超える商品を入れても、それ以降は表示されません。大きなカテゴリーは、コレクションを分けておくと扱いやすくなります。

料金プラン

料金は 1 プランのみで、機能による差はありません。

• 月額プラン … 7.99 ドル
• 年額プラン … 79.99 ドル（月額で 12 か月払うより実質 2 か月分安い計算です）
• 無料体験 … インストールから 7 日間

すべての設定項目を無料体験中から使えるので、実際のストアの商品で見た目を作り込んでから契約を判断できます。

インストール

アプリの追加は、Shopify 管理画面の設定から行います。

「設定」から「アプリと販売チャネル」を開き、画面内のアプリストアを検索する入口から「シンプルレストランメニュー」または「restaurant menu」で検索します。

アプリのページで「アプリを追加する」を押し、権限の確認画面で「アプリをインストール」を押せば完了です。インストール後は、管理画面の左メニューの「アプリ」の下にアプリ名が追加されます。

アプリ管理画面の構成

アプリの管理画面は「設定」ページ 1 枚だけです。メニューの中身はすべて Shopify の商品とテーマエディタで扱うため、管理画面で行うのはテーマへの追加と、管理画面の表示言語の切り替えだけです。

ページを上から順に見ると、次の 4 つのカードが並んでいます。

• テーマに機能を追加 … 追加先のテーマを選び、ワンクリックでテーマエディタを開くカード
• 案内バナー … 自動追加が使えない場合の警告と、ホームページ以外への追加方法の案内
• 言語設定 … アプリの管理画面の表示言語を切り替えるカード
• おすすめアプリ … UnReact の他のアプリの紹介

各画面の説明

設定ページ「テーマに機能を追加」

「テーマを選択」のプルダウンには、ストアに入っているテーマがすべて並びます。公開中のテーマには「（公開中のテーマ）」と付き、初期状態ではそれが選ばれています。

カードには 2 つのボタンがあります。

• テーマに追加 … 選んだテーマのテーマエディタが新しいタブで開き、ホームページの末尾にメニューのブロックが追加された状態になります
• テーマをプレビュー … ブロックを追加せずに、選んだテーマのホームページをテーマエディタで開きます

ここで押さえておきたいのは、「テーマに追加」が追加するのは常にホームページ（index テンプレート）だということです。コレクションページや固定ページに置きたい場合は、このボタンではなく、テーマエディタで手動追加します（後述の「テーマへの追加」で説明します）。

また、「テーマに追加」を押しただけでは、まだ公開されているストアには何も変わりません。テーマエディタでコレクションを選び、右上の「保存」を押して初めて反映されます。

設定ページの案内バナー

テーマのバージョンや構成によっては、テーマ選択欄が空になったり、自動追加がうまく動かなかったりすることがあります。その場合の注意が警告バナーとして常に表示されています。困ったときは画面右下の「ご利用ガイド」ボタンから手動追加の手順を開けます。

その下のバナーは「他のページにもメニューを追加する」の案内です。ホームページ以外に設置したい方は、ここからテーマエディタの手順を確認できます。

設定ページ「言語設定」とおすすめアプリ

「言語を選択」のプルダウンで言語を選び、「変更する」を押すと、アプリの管理画面の表示言語が切り替わります。

ここで変わるのは管理画面だけで、お客様が見るメニューの表示には影響しません。テーマエディタに出るブロックの設定ラベルは、こことは別に、ストアの言語設定に合わせて自動で切り替わります。ブロックの設定ラベルは 20 言語分が用意されています。

その下の「おすすめアプリ」は、UnReact が提供している他のアプリの一覧です。右上の × で閉じられます。

テーマへの追加

ここからは、テーマエディタ側の操作です。開発ストアでは Shopify の無料テーマ Horizon を使っています。

テーマエディタでブロックの位置を確認する

「テーマに追加」から開いた場合も、手動で追加した場合も、メニューは左の一覧に「シンプルレストランメニュー｜商品…」という名前のブロックとして表示されます。Horizon では、セクションの中にブロックが入る形になります。

ブロックをクリックすると、右側のプレビューの該当箇所が青い枠で囲まれ、左側に設定パネルが開きます。カテゴリーごとにブロックを分けた場合は、ここで上下にドラッグして並び順を入れ替えられます。

ブロックを手動で追加する

ホームページ以外に置きたい場合や、カテゴリーを増やしたい場合は、テーマエディタの上部で対象のページ（コレクションページなど）に切り替え、「セクションを追加」、またはセクション内の「ブロックを追加」を押します。開いた一覧の上部にある「アプリ」タブに切り替えると、このアプリのブロックが出てきます。

ブロックを追加したら、設定パネルの「コレクション」で表示するコレクションを選び、右上の「保存」を押します。

なお、コレクションページにブロックを置いた場合は、「コレクション」を空のままにしておくと、そのページで表示中のコレクションが自動で使われます。コレクションごとにテンプレートを作らなくても、1 つのコレクションテンプレートで全コレクションをメニュー表示にできる、ということです。逆に、ホームページなどコレクションと関係のないページでは、コレクションを選ばない限りメニューは出ません。

ストアフロントの見た目を変える

設定パネルは、コンテンツ設定、レイアウト設定、文字設定、カートボタン設定、余白設定、追加設定の 6 グループに分かれています。ここからはグループごとに全項目を、実際に値を変えた画面と一緒に説明します。画面はすべて開発ストアのテーマエディタで設定を切り替えて撮ったもので、撮影後は保存せずに元へ戻しています。

コンテンツ設定

メニューに何を出すかを決めるグループです。

• セクションタイトル（初期値: 空欄）… メニューの上に出る見出しです。「Fast Food」「本日のランチ」のようにカテゴリー名を入れると、ブロックを並べたときに区切りが分かりやすくなります。空欄なら見出しは出ません
• コレクション（初期値: 未選択）… メニューにするコレクションを 1 つ選びます。選んでいないと「Select a collection to display the menu.」という案内だけが表示されます。選んだコレクションに商品が 1 件も無い場合も、同じ案内になります
• 商品画像を表示（初期値: ON）… 商品のメイン画像（1 枚目の画像）を出すかどうかです
• 説明文を表示（初期値: ON）… 商品説明を出すかどうかです。HTML の装飾は外され、120 文字を超えると「…」で切り詰められます
• 販売元を表示（初期値: OFF）… 商品の「販売元（ベンダー）」を商品名の下に小さく出します
• 表示する商品数（初期値: 50）… 4〜50 件の範囲で、コレクションの先頭から何件まで出すかを決めます
• 売り切れテキスト（初期値: Sold out）… すべてのバリエーションが売り切れた商品に、数量ピッカーとボタンの代わりに出す文言です

「販売元を表示」を ON にすると、商品名のすぐ下に販売元が入ります。開発ストアでは販売元がストア名のままなので、すべてのカードに同じ文字列が出ています。

複数の店舗やブランドの商品を 1 つのストアで売っている場合、たとえばフードコート型のサイトやマルシェの出店者ごとの商品を並べるときに役立ちます。

「商品画像を表示」を OFF にすると、カードは文字だけのメニューになります。

ドリンクやトッピングのように写真で差が出にくい商品は、画像を消して文字だけにすると、居酒屋のお品書きのような一覧性の高いメニューになります。カテゴリーごとにブロックを分けていれば、フードは画像あり、ドリンクは画像なし、という使い分けもできます。

「説明文を表示」は、説明文が登録されている商品にだけ効きます。説明文を書いていない商品はもともと何も出ないので、ON のままでも見た目は崩れません。120 文字で切れる点を意識して、商品説明の冒頭にアレルゲンや辛さ、量の目安など、メニューで伝えたい情報を寄せておくのがコツです。

「表示する商品数」は、コレクションに入っている商品数より小さい値にすると、そこで打ち切られます。ホームページには人気の 4 品だけを出し、コレクションページでは全品を出す、といった使い方ができます。

レイアウト設定（カラム数）

レイアウト設定は項目が多いので、カラム数、画像、カードの 3 つに分けて説明します。

• カラム数（初期値: 2）… PC で 1 行に並べるカードの数で、2 か 3 を選びます
• カラム数（スマホ）（初期値: 1）… スマホで 1 行に並べるカードの数で、1 か 2 を選びます

カラム数を 3 にすると、1 行に 3 品が並びます。

画像を横（左）に置いたまま 3 カラムにすると、カードの中で文字と操作部分に使える幅が減り、価格が数量ピッカーの上の段へ折り返します。崩れてはいませんが、横並びのすっきりした印象は薄れます。3 カラムで使いたい場合は、画像の配置を縦（上）にする組み合わせがおすすめです。

画像を上に置くと、価格・数量・ボタンの行がカード幅いっぱいを使えるので、3 カラムでも 1 行に収まります。品数が多いカテゴリーを一覧で見せたいときの定番の組み合わせです。

スマホのカラム数は、プレビューをスマホ表示に切り替えて確認します。テーマエディタ上部のスマホのアイコンを押すと切り替わります。

2 列にすると一度に見える品数は増えますが、カード幅が狭いため商品名が折り返しやすく、価格と数量ピッカーも縦に積まれます。料理写真で選んでもらいたいなら 1 列、品名で選ぶ商品が中心なら 2 列、という基準で選ぶと迷いません。

レイアウト設定（画像の配置・形・大きさ）

• 画像の配置（初期値: 横（左））… 画像をカードの左に置くか、上に置くかを選びます
• 画像の形（初期値: 丸）… 丸、正方形、オリジナルの 3 種類です
• 画像の大きさ（PC）（初期値: 30%）… PC でカードの幅に対して画像が占める割合です。10〜100% で指定します
• 画像の大きさ（スマホ）（初期値: 50%）… スマホでの同じ割合です

画像の形は、メニューの印象をいちばん大きく変える項目です。初期値の丸は、ピザやパンケーキのように上から撮った料理写真と相性がよく、お皿をそのまま並べたように見えます。正方形にすると、角が少し丸い四角に切り抜かれます。

正方形は、斜めから撮った料理写真や、ハンバーガーのように高さのある料理に向いています。丸だと上下が切れてしまう写真でも、正方形なら全体が入りやすくなります。

オリジナルを選ぶと、写真を切り抜かずに元の縦横比のまま表示します。

商品ごとに写真の縦横比がばらばらだと、オリジナルではカードごとに画像の高さが揃いません。撮影時に比率を揃えられないなら、丸か正方形で切り抜いたほうが整って見えます。

画像の配置を縦（上）にし、画像の形を正方形にすると、料理写真を主役にしたカードになります。

画像の大きさ（PC）は、上げすぎに注意が必要です。開発ストアで 75% まで上げると、画像がカードの大半を占め、右側の商品名や価格の領域が足りなくなりました。

画像を横に置く場合、カードからはみ出した部分は表示されないので、カートボタンが押せなくなります。横配置で大きく見せたいときは 40% 前後までに留め、それ以上大きくしたいときは配置を縦（上）に切り替えるのが安全です。縦配置なら、画像の下に文字が回り込むので 100% でもはみ出しません。

レイアウト設定（カードの色・角丸・余白）

• カードの背景色（初期値: #ffffff）… カードの塗りの色です
• カードの枠線の色（初期値: #e8e8e8）… カードを囲む 1px の線の色です。数量ピッカーの区切り線にも同じ色が使われます
• カードの枠線の丸み（初期値: 16px）… カードの角の丸さで、0〜24px で指定します
• バリエーションの間隔（初期値: 4px）… 同じ商品のバリエーションの行と行の間隔で、0〜20px です
• カードの内側余白（PC）（初期値: 20px）… カードの縁から中身までの余白です
• カードの間隔（PC）（初期値: 24px）… カード同士のすき間です
• カードの内側余白（スマホ）（初期値: 16px）… スマホでのカード内の余白です
• カードの間隔（スマホ）（初期値: 16px）… スマホでのカード同士のすき間です

内側余白と間隔は 8〜40px の範囲で指定します。

カードの背景色を淡いベージュにすると、白い背景のページの中でメニューのまとまりが浮き上がります。

写真の背景が白い商品が多いときは、カードを白のままにすると画像とカードの境目が分かりにくくなります。そうしたときこそ、背景色を少しだけ付けるのが効果的です。

カードの枠線の丸みを 0px にすると、角がない四角いカードになります。

和食店や老舗のように落ち着いた雰囲気を出したいときは角を落とさない四角、カフェやスイーツ店のように柔らかく見せたいときは 16px 以上、という使い分けができます。

バリエーションの間隔は、サイズ違いが多い商品で効いてきます。

初期値の 4px は行がぎっしり詰まった印象になります。スマホで指で押すことを考えると、バリエーションが 3 つ以上ある商品では 10px 前後まで広げると誤タップを減らせます。

文字設定

• タイトルの文字の大きさ（PC）（初期値: 28px）… セクションタイトルの文字サイズで、16〜40px です
• タイトルの文字の大きさ（スマホ）（初期値: 22px）… スマホでのセクションタイトルの文字サイズです
• タイトルの文字の色（初期値: #1a1a1a）… セクションタイトルの色です
• タイトルの配置（PC）（初期値: 左揃え）… 左揃え、中央揃え、右揃えから選びます
• タイトルの配置（スマホ）（初期値: 左揃え）… スマホでのタイトルの横位置です
• 商品名の文字の大きさ（初期値: 22px）… 16〜32px で指定します
• 商品名の文字の色（初期値: #1a1a1a）… 商品名の色です
• 価格の文字の大きさ（初期値: 16px）… 14〜28px で指定します
• 価格の文字の色（初期値: #1a1a1a）… 価格の色です
• 説明文の文字の色（初期値: #666666）… 商品説明の色です

タイトルの配置を中央揃えにすると、カテゴリー名がページの中央に来ます。

ブロックを縦に並べてカテゴリーを分けるときは、中央揃えにすると紙のメニューの見出しらしくなります。

商品名の文字の大きさを上げると、料理名がカードの主役になります。

なお、スマホでは商品名の文字の大きさが自動で 2px 小さくなります。PC で 22px に設定すると、スマホでは 20px で表示されます。スマホ用の値を別に持たない代わりに、狭い画面で商品名が折り返しにくいよう調整されています。

商品名の文字の色を変えると、バリエーション名の色も一緒に変わります。

これは画面からは分かりにくい仕様です。商品名の色は、バリエーション名、数量ピッカーの「-」「+」、数量の数字にも使われます。ブランドカラーを商品名に入れると、メニュー全体の文字の印象がその色に寄ります。価格だけを目立たせたい場合は、商品名の色は黒のまま、価格の文字の色だけを変えるのがおすすめです。

同じように、説明文の文字の色は、商品説明のほかに販売元、セール前の価格（取り消し線付き）、売り切れテキストにも使われます。セール前の価格は、価格の文字の大きさより 2px 小さく表示されます。

カートボタン設定

• ボタンのアイコン（初期値: カート）… カート、バッグ、バスケットの 3 種類から選びます
• ボタンの色（初期値: #4caf50）… ボタンの背景色です
• ボタンの文字色（初期値: #ffffff）… ボタンの中のアイコンの色です

アイコンをバッグにすると、ショッピングバッグの形になります。

バスケットにすると、買い物かごの形になります。

テーマのヘッダーに出ているカートのアイコンと同じ形を選ぶと、「このボタンを押すとカートに入る」ことが直感的に伝わります。Horizon のヘッダーはバッグの形なので、開発ストアならバッグが合います。

ボタンの色は、メニューの中でいちばん目立つ要素です。

初期値の緑は、どんな色のカードの上でも押せるボタンだと分かりやすい色です。ブランドカラーに変える場合は、カードの背景色との差がはっきり出る色を選びましょう。ボタンの文字色はアイコンの色で、追加が成功したときに出るチェックマークは、この設定に関係なく白で表示されます。

余白設定

• 上部余白（PC）（初期値: 0px）… ブロックの上に空ける余白です
• 下部余白（PC）（初期値: 0px）… ブロックの下に空ける余白です
• 上部余白（スマホ）（初期値: 0px）… スマホでの上の余白です
• 下部余白（スマホ）（初期値: 0px）… スマホでの下の余白です

いずれも 0〜100px で指定します。

カテゴリーごとにブロックを並べる場合、ブロック同士がくっついて見えるときは、下部余白で 40px 前後空けると区切りが自然になります。スマホは画面が縦に長くなるので、PC より少なめの値にするのが基本です。

追加設定

• 追加の CSS … このブロックだけに効く CSS を書ける欄です

ここに書いた CSS は、ブロックの ID で囲まれた形で出力されます。具体的には #block-ブロックID { ここに書いた内容 } という形になります。そのため、box-shadow: none; のようにプロパティだけを書くと、ブロック全体を囲む要素に効きます。カードやボタンなど中の要素に効かせたいときは、クラス名から始まるルールを入れ子で書きます。

画像の例では、カードに影を付けています。

.sa-157-ur-restaurant-menu__card { box-shadow: 0 6px 18px rgba(0,0,0,.12); }

これは CSS の入れ子（ネスト）の書き方として扱われ、このブロックのカードだけに影が付きます。同じページの他のメニューブロックや、テーマ全体には影響しません。入れ子の CSS は、現在の主要なブラウザで動きますが、古いブラウザでは無視されます。見た目の微調整に留め、表示に欠かせない指定は書かないようにしておくと安心です。

スマホでの見え方は自動で切り替わる

スマホ（画面幅 749px 以下）では、設定とは別に次の調整が自動でかかります。

• 画像の配置を横（左）にしていても、画像はカードの上に置かれ、中身は中央揃えになります
• 商品名の文字サイズは、設定値より 2px 小さくなります
• 価格・数量ピッカー・ボタンの行は、カードの幅いっぱいに広がり、左右に振り分けられます
• 数量の入力欄の文字は 16px になります（iPhone で入力欄を押したときに画面が拡大されるのを防ぐためです）

先ほどのスマホのプレビューで、画像の配置が横（左）のままなのに画像が上にあったのはこのためです。PC は横並びでコンパクトに、スマホは写真を大きく、という見せ方が、設定を 1 つも変えなくても成り立つようになっています。

画面には出ていない仕様

設定パネルには出てこないものの、運用で知っておくと役立つ仕様をまとめます。

• 売り切れの判定 … 商品のバリエーションがすべて購入不可になると、カード全体が半透明（不透明度 50%）になり、色も 40% ほどグレーに寄ります。一部のバリエーションだけが売り切れの場合は、そのバリエーションの行だけが売り切れテキストに置き換わります
• 数量の上限 … 在庫を追跡していて「在庫切れの場合でも販売を続ける」をオフにしている商品は、数量ピッカーの上限が在庫数になります。それ以外の商品は上限が 99 です。直接数字を入力した場合も、上限を超えた値は上限に戻されます
• バリエーション名 … バリエーションが 1 つだけの商品は、バリエーション名の行が出ず、価格と数量ピッカーだけになります
• 商品へのリンク … 商品画像と商品名は商品ページへのリンクになっています。詳しい説明を読みたいお客様は、そこから商品ページへ移れます
• マウスを重ねたとき … PC ではカードに薄い影が付き、画像が少し拡大され、商品名が薄くなります。ボタンも少し大きくなります
• カート数の更新 … カートに追加すると、ヘッダーのカート数を書き換え、ヘッダーとカートのセクションを最新の状態に差し替えます。テーマで一般的に使われる要素名を手がかりにしているため、独自に作り込んだテーマでは、ページを再読み込みするまでカート数が変わらない場合があります

売り切れの見え方は、季節限定メニューの運用で特に効きます。完売した商品を手で非表示にしなくても、メニューの中で自然に目立たなくなり、在庫が戻れば元の表示に戻ります。

業態別のおすすめ設定

ここまでの設定を組み合わせた例を、業態ごとに挙げます。どれも開発ストアで見え方を確かめた組み合わせです。

ピザ・パンケーキなど上から撮った料理が中心の店

• 画像の形 … 丸
• 画像の配置 … 横（左）
• カラム数 … 2

初期設定のままがいちばん映える業態です。お皿の写真が丸く切り抜かれ、横にサイズ違いの価格が並ぶので、デリバリーのメニュー表と同じ読み方ができます。

ハンバーガー・パフェなど高さのある料理が中心の店

• 画像の形 … 正方形
• 画像の配置 … 縦（上）
• カラム数 … 3

丸く切り抜くと上下が切れる料理は、正方形で上に大きく置くと全体が見えます。3 カラムでも価格の行が折り返しません。

ドリンク・トッピングなど品数が多い店

• 商品画像を表示 … OFF
• バリエーションの間隔 … 10px 前後
• カラム数 … 3

文字だけのメニューにして、一度に多くの品を見渡せるようにします。カテゴリーごとにブロックを分け、写真が必要なフードだけ画像を ON にする使い方とも相性がよい設定です。

和食・老舗など落ち着いた雰囲気の店

• カードの背景色 … 生成りやベージュ
• カードの枠線の丸み … 0px
• タイトルの配置 … 中央揃え

紙のお品書きに近い見た目になります。ボタンの色を深い緑や紺にすると、全体の色数が抑えられて上品にまとまります。

コードで自作する場合

アプリを使わずに、同じような表示をテーマのコードで作ることもできます。ここでは、コレクションの商品をカードで並べ、バリエーションごとにカートへ追加できる、最小限の実装を紹介します。

まずは Liquid で、コレクションの商品とバリエーションを回してカードを出力します。セクションの設定でコレクションを受け取り、商品ごとにバリエーションの行を作る形です。

{%- assign menu = section.settings.menu_collection -%}
<div class="my-menu">
  {%- for product in menu.products limit: 20 -%}
    <div class="my-menu__card">
      <img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.title | escape }}">
      <h3>{{ product.title }}</h3>
      {%- for variant in product.variants -%}
        <div class="my-menu__row">
          <span>{{ variant.title }}</span>
          <span>{{ variant.price | money }}</span>
          {%- if variant.available -%}
            <input type="number" value="1" min="1" data-qty="{{ variant.id }}">
            <button type="button" data-add="{{ variant.id }}">追加</button>
          {%- else -%}
            <span>売り切れ</span>
          {%- endif -%}
        </div>
      {%- endfor -%}
    </div>
  {%- endfor -%}
</div>

この Liquid だけでは、ボタンを押しても何も起きません。カードの見た目を整える CSS と、スキーマ（テーマエディタに出す設定項目の定義）も別に書く必要があります。

次に、ボタンを押したときに Shopify のカート API へ追加する JavaScript です。/cart/add.js にバリエーション ID と数量を送ると、ページを移動せずにカートへ入れられます。

document.addEventListener('click', async (e) => {
  const btn = e.target.closest('[data-add]');
  if (!btn) return;
  const id = btn.dataset.add;
  const qty = Number(document.querySelector(`[data-qty="${id}"]`).value) || 1;
  btn.disabled = true;
  const res = await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ id: Number(id), quantity: qty }),
  });
  btn.disabled = false;
  if (!res.ok) alert('カートに追加できませんでした');
});

このコードは、カートに入れるところまでしか面倒を見ません。ヘッダーのカート数を更新する処理は、テーマごとに要素の名前が違うので、使っているテーマに合わせて書き足す必要があります。

自作する場合は、ほかにも次のような作業が必要になります。

• 在庫を追跡している商品で、数量の上限を在庫数に合わせる処理
• すべてのバリエーションが売り切れた商品のカードを薄く表示する処理
• PC とスマホでカラム数や画像の大きさを切り替える CSS
• テーマエディタで色や余白を変えられるようにするスキーマの定義（このアプリと同じ自由度なら 39 項目）
• テーマを更新したときに、自作したコードを新しいテーマへ移し替える作業

特に最後の点は見落とされがちです。テーマのファイルに直接書いたコードは、テーマを新しいバージョンへ乗り換えたときに引き継がれません。アプリのブロックは、テーマとは別に配信されるので、テーマを入れ替えても「ブロックを追加」から同じものを置き直せます。月額 7.99 ドルを、この保守の手間と比べてみると判断しやすいはずです。

メニュー表ウィジェット型アプリとの使い分けと併用

アプリストアで「restaurant menu」と検索すると、Restaurant Menu by Elfsight や K: Restaurant Menu のように、アプリの画面で料理名と価格を手入力してメニュー表を作るウィジェット型のアプリが見つかります。こちらは Shopify の商品と連動しない代わりに、商品として売らない料理も自由に載せられます。このアプリとは役割が違うので、どちらか一方ではなく、両方を置き分けるという考え方もできます。

どちらを先に入れるかの判断

先に考えるべきなのは、「メニューに載せたい料理を、ネットショップで売るかどうか」です。

• オンラインで注文を受けたい料理が中心 … このアプリを先に入れます。商品を登録すれば、それがそのままメニューになります
• 店内でしか出さない料理を紹介したいだけ … ウィジェット型のほうが向いています。売らない料理を Shopify の商品として登録すると、検索結果や商品一覧にも出てしまうためです
• 両方ある … 売る料理はこのアプリ、店内限定の料理はウィジェット型、と分けて置きます

併用するときの設定手順

両方を置くときは、お客様が「どちらのメニューから注文できるのか」で迷わないようにすることが大切です。

1. オンライン注文できる料理だけを集めたコレクションを作ります（例: 「テイクアウトメニュー」）
2. ホームページかコレクションページに、このアプリのブロックを追加し、そのコレクションを選びます。セクションタイトルに「ご注文いただけるメニュー」のように、注文できることが分かる名前を入れます
3. 店内メニューのウィジェットは、「店舗情報」などの別ページに置きます。同じページに置く場合は、このアプリのブロックの下部余白を 60px 以上にして、間を空けます
4. カートボタンの色を、ウィジェット側のデザインと明確に違う色にします。ボタンがあるほうが注文できるメニューだと、見た目で区別できます

同じ料理を両方に載せると、価格を改定したときにウィジェット側だけ古い価格が残ります。両方に載せる料理は作らない、というルールにしておくと、価格の食い違いを防げます。

商品データを使うアプリ同士で迷ったら

Restaurant Menu ‑ ServeUp のように、Shopify の商品データを使ってメニューを作るアプリもあります。こうしたアプリと比べるときは、この記事で紹介した設定項目のうち、自分のストアで必ず使うものを 3 つほど決めて、それぞれの無料体験で同じ商品を並べてみるのが確実です。画像の形、カラム数、スマホの見え方のように、写真の写り方に関わる項目は、説明文だけでは差が分かりません。

うまく表示されないときの確認ポイント

• 案内文だけが表示される … 「コレクション」が未選択か、選んだコレクションに商品が入っていません
• 一部の商品が出てこない … 「表示する商品数」で打ち切られていないか確認します。コレクションの並び順で、出したい商品が上限より後ろにある可能性があります
• 価格がボタンの上に折り返す … 3 カラムで画像を横（左）に置いていないか確認します。画像の配置を縦（上）にすると 1 行に収まります
• カートボタンが切れている … 画像の大きさ（PC）が大きすぎます。40% 前後まで下げるか、画像の配置を縦（上）にします
• 設定が保存されない … テキスト欄に入力したまま保存ボタンを押すと、入力欄からフォーカスが外れるだけで保存されないことがあります。一度別の場所をクリックしてから保存し、再読み込みして確かめます
• 保存したのに古い表示のまま … ストアフロントはキャッシュされるため、URL の末尾に ?cb=任意の文字 を付けて開き直すと、最新の表示を確認できます

まとめ

「シンプルレストランメニュー｜商品をメニュー形式で表示」は、Shopify に登録した商品を、そのままメニュー表として並べるためのアプリです。メニュー用のデータを別に持たないので、価格の改定、新メニューの追加、売り切れの表示まで、商品を管理するだけでメニューが追いかけてきます。

見た目の面では、39 個の設定項目で、ピザ店の丸いお皿のメニューから、和食店の四角いお品書きまで作り分けられます。ただし自由度が高いぶん、3 カラムと横配置の組み合わせや、画像の大きさの上げすぎのように、窮屈になる組み合わせもあります。この記事の画面を目安に、プレビューを見ながら値を決めてください。

7 日間の無料体験中からすべての設定を試せます。自分のストアの料理写真で、丸と正方形のどちらが映えるか、スマホで 1 列と 2 列のどちらが選びやすいかを確かめるところから始めてみてください。インストールは Shopify App Store から行えます。

おすすめ Shopify アプリ

飲食店やテイクアウトのストアで、このアプリと組み合わせやすい UnReact のアプリを紹介します。

シンプル営業日カレンダー｜お手軽休業日設定

定休日や臨時休業をカレンダーでストアに表示できるアプリです。テイクアウトの受け取り可能日を伝えたい店舗に向いています。

• シンプル営業日カレンダー｜お手軽休業日設定

シンプル予約システム｜来店日時指定・イベント予約カレンダー

来店予約やイベントの申し込みを、商品ページでそのまま受け付けられるアプリです。コース料理や料理教室の予約に使えます。

• シンプル予約システム｜来店日時指定・イベント予約カレンダー

UR: Allergen & Nutrition Facts

バリエーションごとの栄養成分とアレルギー情報を商品ページに表示するアプリです。メニューの説明文に書ききれない食品表示を補えます。

• UR: Allergen & Nutrition Facts

シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示

在庫が少なくなった商品にバッジを自動で付けるアプリです。数量限定のランチやお弁当の「残りわずか」を伝えられます。

• シンプル残り僅かバッジ｜お手軽コレクションページ在庫数表示

シンプルスマホナビゲーション｜お手軽モバイルボトムメニュー

スマホの画面下部に、固定のナビゲーションメニューを追加するアプリです。メニューのページへの導線をいつでも押せる位置に置けます。

• シンプルスマホナビゲーション｜お手軽モバイルボトムメニュー