Glideで飲食店アプリ (Barメニュー＋店舗紹介など) をつくってみる

ディレクターの高橋です。

広報の山口がAdaloで店舗アプリ作ってみたということで、わたしは Google スプレッドシートから PWA っぽい Web アプリが作れる「Glide」をがっつり使ってみました。

実は 2020-21 年頃に一瞬話題になった際にがっつり触ってまして、「千葉で電源・Wifiがあるカフェ・コワーキングスペースまとめ」という Web アプリをリリースできるところまでは学習していたので、割と語れる内容は多いと思います。

ということで、本記事では「Glide 使うと何がどこまでできて、できないことは何なのか」だけでなく「昔から進化した部分」「運営の方向性」なども踏まえて書かせていただきますので、セルフサーブ型のノーコードツールにご興味がある方は最後まで読んでいただけると幸いです。

Glideとは？ノーコードツールの中での立ち位置

Glide は、2020年頃に IT 業界で「Google スプレッドシートから PWA が作れちゃうツール」と少し話題になったノーコード開発ツールです。競合として Bubble・Adalo なんかもありますが、同じスプシベースなので Google が提供する「AppSheet」が最大の競合です。

「PWAが作れるツール」と紹介されていることもありますが、PWA という概念・哲学を提唱した Google のガイドラインから考えると成果物は PWA ではなく Web アプリだと思います（後述）。

当時は「あくまでスプレッドシートからさくっと Web アプリ作れるのすごいよね」って感じで、作りこむ想定ではありませんでした。当時と比較すると無料プランではほぼ実運用が不可能になり、月 49 ドルのプランか 99 ドルのプランは必須になりましたが、ノーコード開発ツールとしてはかなり機能が拡充されています。

実際に Glide で作った Web アプリ（こういうものが作れますのイメージ）

東京・千葉の境界線上にある小岩という町のお店で、遠方からも多くのお客さんが訪れる 「Cocktail Bar Raven」から画像やカクテルメニューをお借り（許諾済）して、Web メニュー＋αを試しに作ってみました。※正式に運用するわけではないのでリンクはありません

階層としては

• TOP
• 店舗紹介
• お知らせ
• テイスティングセットメニュー
  • テイスティングセット詳細
• 酒のボトル一覧
  • ボトル詳細
• カクテルメニュー
  • カクテル詳細
• 新着メニュー（新着フラグあるものを表示し、↑の詳細ページに遷移）
• スタッフ一覧
  • スタッフ詳細

とシンプルですが、通常の Bar に比べてメニュー数がかなり多いことや定期的にイベントのご案内があるなど、Web メニューの中ではかなりボリューミーな部類になります。

またメニューとしては「酒のカテゴリごとに表示」「テイスティングセットに含まれるボトルはワンタップで詳細が見れる」など必要要件も結構多いです。

[補足] 筆者のスペック

• HTML/CSS は書ける
• JS・php は GPT 先生に聞きながらであれば簡単なことはできる
• 基本的にバックエンドは苦手
• 非エンジニアの中ではだいぶ理解がある部類だが、所詮は非エンジニア

なので、ノーコードで CMS 的な役割を果たしてもらえるのはありがたいという温度感です。

Glideで作るメリット（ここがすごいよGlide）

項目リストは秒で Web アプリ化

「お酒のボトル一覧」「カクテルの一覧」「各メニュー詳細」はスプレッドシートから自動でページが作成され、基本的なデザイン編集はマウス操作で完結し、フッターメニューの表示・非表示もチェックボックスの ON/OFF だけで完結します。

PWA ではないものの一応プログレッシブ寄りな Web アプリで、「ホーム画面に追加（インストール）」ボタンも出てくるので、リピーター・常連客が多い飲食店のメニューなんかには最適です。

関連記事：iOSでプッシュが可能になったので、PWA のメリット・できること・事例をわかりやすく解説します

一般的なノーコード開発ツールっぽくなってた（新しくなってた部分）

昔はスプレッドシートから爆速でアプリ構築！という MVP 開発の極みみたいなツールで、固定ページを作るとかはあまり想定されてませんでした。

しかし現在は固定ページを作り、

• コンテナに画像とかタイトルとか本文とかボタンとか作る（全部GUI）
• フッターとかメニューバーとか表示する場所決める

と、割と 「スプレッドシートから自動生成されたリストページ」以外の任意のページを作りやすくなっていました。

アクションボタンをつくれる

ボタンなどを設置すると、マウス操作でタップ時の挙動を指定できます。

• シェアする
• 電話をかける
• Google Map で開く

あたりは使用頻度が高そうですし、がっつり作りこむ人向けには JSON とかも対応しています。ここまでくると「ノーコードとは（哲学）」って感じですが…。

コミュニティ化する機能も

当社のようなアプリ開発会社ですと、「アプリの役割はエンゲージ向上なのでコミュニティ戦略に尽きますよね」という話は自社からもクライアント・商談相手からもよく聞かれます。

Glide だとサインインしてのコメント投稿、料理・ドリンクに対するレビュー投稿なんかもできるので、ただリストにある項目を表示するだけの単方向アプリ以上のことが可能です。

プッシュ通知もベータ版として実装

古い記事では「できないこと」の中に入ってますが、最新のドキュメントでは（一般的な PWA 同様に iOS16.4 以上の最新 OS のみですが）先行案内「preview mode」で提供してるとのこと。

紹介ページ：https://www.glideapps.com/docs/push-notifications

ただ、当社ブログでも紹介していますがプッシュ通知はホーム画面に追加（インストール）しているユーザーのみ対象となり、その導線はなかなかシビアなので「Glide で PWA を作れば月額 1～2 万でプッシュ通知まで打てる！」というほどのメリットにはなりえません。リピート促進まで期待する場合はネイティブアプリまたは LINE 公式アカウントに頼りましょう。

Glideで飲食店アプリを作る際に必要な知識・スキル

プログラミング不要で開発できるノーコードツールとはいえ、マウス操作だけですべてが完結するわけではありません。

このへんは Adalo など他のツールともかぶるのですが、下記のような知識・スキルは必須です。

ARRAYFORMULA

スプシの項目からページを作る割合が高いので、「既存の列を組みわせて文字列を作る処理を繰り返す」という ARRAYFOMULA は必須です。

運用側はスプレッドシートを「情報を入力・管理するため」に列を使いますが、Glide では「タイトル」「説明文」「注釈」の 3 項目しかリストには表示できないので、必要な情報をまとめて「Web に表示するための列」を作ることになります。 ※注釈は変な位置に入るので実質 2 項目ですし

お店側が新しいカクテルメニューを増やす際、スプレッドシート上に入力するのは

• 名前：M-30 Rain
• スタイル：ショート
• ベース：ウォッカ
• 度数：★★★★☆
• 価格：￥1,200
• 説明文

あたりの細切れの情報です。

なので、「カクテルの説明」として「Short Style / ★★★★☆」としたい場合は
=ARRAYFORMULA(D2:D & " Style / " & E2:E)
といったスクリプトを書くことになります。

列は「非表示」にしてもアプリ内に反映されるので、店舗スタッフが手入力・編集する列以外は非表示にしておけるのも地味に良い点です。

ノーコードツールの定番 if 処理も必須

ノーコード開発ツールの宿命です。データの表示・非表示フラグはほぼ if です。

if 実装のメリットもあり、「新入荷」や「在庫」のチェックボックスを作ってアプリ内に反映させると、店舗スタッフがスマホからスプレッドシートの該当チェックを操作して表示・非表示を更新できます。

あとは普通にバグ処理にも使います。ARRAYFORMULA ですべての行に何かしらのデータが入ると、そこに行が存在してる扱いになり、名前などが空欄 (null) のメニューが表示されてしまいます。

なので、ボトルリスト＆カクテルリストには if で "(名前) is not empty" という表示条件を追加することになります。

シート同士の連携は慣れが必要

お酒のボトルを「スピリッツ (ジンとかウォッカ)」「ウィスキー (日本のとかスコットランドのとか)」というジャンル別に表示する場合は、

• シートA：お酒のカテゴリ名と大枠を並べる
  • 大枠「スピリッツ」＋カテゴリ「ジン」「ウォッカ」など
  • 大枠「ウィスキー」＋カテゴリ「ジャパニーズウィスキー」「スペイサイドウィスキー」など
• シートB：お店に置いてあるボトルを全種並べる＋列に「カテゴリ」を追加してシートA と一致させる
• カテゴリ「ジン」＋名前「季の美」＋詳細情報
• カテゴリ「ジャパニーズウィスキー」＋名前「山崎 12y」＋詳細情報

というカテゴリ自体の管理シートを作ることで、

• 1: トップに「カテゴリ」の全項目を大枠ごとに表示し、詳細ページへのリンクを設置
• 2: カテゴリ名「ジン」をタップすると、シートBで「ジン」に紐づいたボトルの一覧をリスト表示
• 3: 各アイテムをタップすると、シートBの該当行の情報をすべて表示

という UI/UX を実現できます。

--

もう少し高度な連携の事例として、バーメニューでは

• 複数のボトルを飲み比べできる「テイスティングセット」のメニューを作る
• 各セットには説明文の他、各ボトルの詳細ページへのリンクを貼る

という要件が発生します。

これは結構なハマリポイントで、最短実装はボトル一覧に「セット」のカテゴリを追加することなんですが、ボトル詳細を別の行に再度入力する必要があります。

VLOOKUP で引っ張ってくる方法もありますが、シート自体が見づらくなったり現場スタッフのスマホ運用では事故の可能性も（たぶん）増します。※なんとなくのディレクター目線だと、同じシートに同じボトルの情報が 2 行生まれるのは好ましくない実装だと感じました

ということで、

• シートB：お店に置いてあるボトルを全種並べる
• シートC：テイスティングセットのメニュー一覧を並べ、値段や説明文を入力
• シートD：テイスティングセットごとに含まれるボトルを並べる
  • 「セット名」はシート C と一致させる
  • 「ボトル名」はシート B と一致させる

という若干複雑なシート管理になるのですが、これだとアプリ側の挙動がベストとはいえないものになるなど、スプシベースの爆速 MVP 開発ツールだからこその限界 も感じます。

（Glide 触ったことない段階だとこうやって書かれても理解しづらいと思いますが、ちょっと複雑な構成やろうとしてみると分かるはずです）

Glideでは（まだ）できないことや、ちょっと実運用では厳しそうな部分

スマホ運用だと画像のアップロードが難しい

第一の壁です。Glide は CMS ではないので、スプレッドシートに画像の絶対パスを入力することでアプリ内に表示します。

IT ツールに慣れていないスタッフがスマホから追加しようとしても、認証なしで Web 表示できる URL を発行するのは結構難しいと思います。

PC 使えるスタッフにしても、

• Glide の管理画面から画像アップして URL を取得する（最安プランだとストレージ 5GB もらえる）
• ホームページ用のレンタルサーバーにアップする
• Google フォトの共有フォルダに発行して公開 URL を取得する

あたりだと思うので、サクサク追加していけるイメージはないです。Glide の管理画面はスマホから使いやすい感じでもないですし。

アプリのオフライン利用はできない

飲食店の Web メニューとしては、一度端末にインストールしたユーザーはオフラインでもメニュー閲覧できたほうが親切だと思うんですが、スプラッシュ画面以外は一切表示できません。

あとキャッシュも効いてなさそうですし、これを PWA と呼ぶのは Google 的にも本意ではなさそうです。もともと PWA とは通信環境が悪い国でも Web アプリの UX を良くしようという概念なので…。

Web アプリの起動が遅い（全然 PWA じゃない）

仮に飲食店にご提案するとなると個人的にここが一番ネックかと思いました。

ホーム画面にインストールしてみましたが、

スプラッシュ画面（数秒）→「Made by Glide」という表示でくるくるアニメーション（5秒）→ホワイトアウト→Made by Glide」という表示でくるくるアニメーション（5秒）→起動

という感じで、結構ストレスです。固定ページを増やしたりスプシの行数が多くなったりするほど重くなりそう。最安プランでも全シート合計 25,000 行まではサポートされる（列は無制限らしい）のでリミットオーバーすることはないと思いますが、起動時間とのトレードオフになるとインフラの最適化ならぬ「スプシの最適化」に頭を悩ませることになりそうです。

結局 「がっつり作りこむなら完全ノーコードのツールではない」 という話にもなる気はします。

無料プランで実運用は実質不可能

月 49 ドル～の有料プランで CSS カスタムを開放しないと

• フォントは選択肢すらない
• アクセントカラーを 1 色選べるけどカラーコード指定不可
• スプシ準拠のリスト表示の文字サイズとかも変更不可能

なので、項目が多い少ない・優先度が高い低いという状況に対応しづらいです。

ただ、そもそも無料プランはスプレッドシートの更新が反映されない＝メニューの更新が面倒になり実運用が難しいので、最初から月額 1～2 万のツールとして考えたほうが良いです。 有料プランであればデザイン面は問題にはなりません。

＜補足＞
2020-21 年頃にアカウントを作った（アプリを作ってた？）人は「Legacy プラン」という扱いで合計 1,000 回のスプレッドシート更新自動同期が付与されていますが、「Canva は無料プランでも 50 回までは AI 生成が使えます」という話と同様で、実運用に耐えられるものではありません。

料金が高くなっていく可能性は全然ある

個人店だと、プッシュ配信に制限があったりオフライン起動・起動速度などに課題を持つツールに月額 1～2 万円は厳しいという肌感覚があると思います。

昔は無料プランでもギリギリ実運用できそうな感じでしたが、今では月 49 ドル～の有料プランが必須になっています。既に一回値上げされた金額であり、投資回収フェーズに入ってると思うので、今後 3 年間 49～99 ドルで使い続けられるかというと微妙ではないかと。

なので複数店舗出店している法人のほうが向いていますが、「店舗別メニュー」とか実装しようとすると Glide でやるのがベストなのか？という話にもなってきます。

Glide を AppSheet と比較すると？（AS も軽く触ってみた）

• 同じくスプレッドシートから Web アプリを作成
• Glide より高度なことができるらしい
• Glide より安価で、スプシの自動更新が30分くらいでちゃんと反映される
• 「ホーム画面にインストール」ボタンがメニューに設置できるのは良い

が

• Glide と比べるとかなり難しい
• Glide と比べるとノーコードで作れる範囲がかなり狭い
• UI・ガイドすべて英語で、自動翻訳ONにするとエディターが崩れるので英語が苦手な人は使いづらい（Glide も全英語ですが、自動翻訳 ON のまま実用できます）
• 別付けディスプレイの大画面でやっと快適になるくらい盛りだくさんの編集画面で、普通のノートパソコンだと作業効率が落ちそう
• カスタムCSSが使えないらしく、フォントとかヘッダー画像サイズとかいじれないのが致命的

なお、Glide の公式サイトでは Bubble, Adalo, FlutterFlow なども含めて「Glide vs 特定のノーコードツール」の比較 LP がたっぷり用意されており、日本なら秒で炎上しそうな PR 戦略となっています。

A powerful no code alternative to AppSheet (Glide Official)

この比較ページでも AppSheet の欠点は「扱いにくい UI」としており、Glide 運営側は自信を持っている部分なのかと思われます。

逆に、非 IT 系の店舗運営者の方とか筆者のような非エンジニアでなく、現役ジュニアエンジニアの方とかであれば AppSheet のほうが使い倒せる可能性はあります。

まとめ

今回のは仲の良いバーテンダーとの話の流れで「自社ブログのネタにもなるしちょっと試してみるわ～」と個人的に作ってみた程度の温度感ですが、（数年前に触ったことがあったとはいえ）ガワは 0.5 人日くらいでさくっと作れました。

ディレクター目線だと起動速度の遅さが結構致命的に感じるのですが、開発難易度の低さでいえばノーコード開発ツールの中でもトップクラスではないかと思います。

また、ネイティブアプリを開発・運用できるノーコード＆ローコードプラットフォーム「Pasta」を事業展開する会社の中の人としても、アプリ事業を企画・推進する方にはぜひ一度こういった自力で作れるタイプのノーコードツールを触っていただきたいという気持ちがあります。

Glide や Adalo などでノーコードでアプリを作って軽く運用してみると、

• マウス操作（プログラミング不要）でどこまでできると助かるか
• 「完全なノーコードサービスはカスタマイズ性が低いから、やりたいことが実現しきれない」とはどういうことなのか

というメリット・デメリットが自分事として理解できるようになります。

当社としても Glide や Adalo のようなツールに任せたいケースもありつつ、これらのツールでは不十分という企業に対しては初期費用を抑えてアプリを構築しつつ柔軟にカスタマイズしていけるローコード開発をおすすめしています。

自社アプリの企画・開発でお悩みのことがある場合はぜひ一度お気軽にご相談ください。