飲食店向けスマホアプリ
テンプレートマニュアル
2020/6/28
Code for Kitakyushu

このマニュアルについて
 このマニュアルは、Code for Kitakyushuが提供している
「飲食店向けスマホアプリテンプレート」を使って飲食店の方がス
マホアプリを公開するためのマニュアルです。
 テンプレートとは：「ひな形」の事。提供されているひな形をコピーして
自店舗の情報に書き換えることで、そのまま自店舗スマホアプリにするこ
とが出来ます。
 このマニュアルは、2020年6月に提供開始したテンプレートのバージョン
や、その他ツールの状況に準拠しています。最新版の画面とは少し異なる
可能性があります。
 スマホアプリを開発するために必要なのは、Windows10が動作し、
インターネット接続可能でブラウザが使えるPC、そして動作確認用
にスマホ。それぐらいです。
 Macでも作れると思いますが、製作者がMacを持っていないため動作保
証は出来ません。
 ブラウザはGoogle Chromeでの動作確認を行っています。
🄫Code for Kitakyushu
2

スマホアプリの仕組みについて
（読み飛ばしてもOK）
 このスマホアプリは、Googleスプレッドシートと、glideという
ツールを使います。
 Googleスプレッドシートは、Google社が提供している表計算ソフ
ト、つまり、Excelみたいなものです。
 glideとは、アメリカのベンチャー企業「Typeguard, Inc.」が提供し
ている、Googleスプレッドシートからデータを読み取ってプログラ
ミングなしにスマホアプリを作れるツール（サービス）です。
 Googleスプレッドシートに店舗情報（データ）を書き込んでおき、
glideでスマホアプリの見た目を整えます。
 Googleスプレッドシート、glideはいずれも無料で利用できます。
 それぞれ有料版もありますが、少なくとも、チェーン店などで非常に多く
の情報を持っていない限り、無料範囲内で利用可能です。
 無料版だからといって、閲覧者数に制限がかかることはありません。
🄫Code for Kitakyushu
3

スマホアプリ公開の流れ
1. Googleアカウントを作成する
2. Glideのアカウントを登録する
3. Glideでテンプレートを自店舗向けにコピーする
4. Googleスプレッドシートで自店舗の情報に書き換える
➢ 基本情報（店名等の項目）の書き換え
※ 画像を使用する際のGoogle側設定について
➢ メニュー情報の書き換え
➢ コース料理情報の書き換え
➢ クーポン情報の掲載
➢ お知らせの掲載
※コース／クーポン／お知らせがない（不要）場合のglide設定について
5. アプリ名・アイコンの設定を行う
6. 公開の確認
🄫Code for Kitakyushu
4

1.Googleアカウントを作成する
 この項目は、Android携帯を使っているなど、既にGoogleア
カウントを作成している場合は読み飛ばして構いません。
 メールアドレスとして、GMAILを使っていれば
（xxxx@gmail.comといったメアド）、Googleアカウントを
作成しているという事になります。
 Googleアカウントの作成については、以下のサイトが詳しい
ので、こちらをご覧ください。
 https://office-hack.com/gmail/create-account/
 https://www.google.co.jp/ にアクセスして右上に出てくる
ボタンから作成したアカウントでログインできれば成功です。
🄫Code for Kitakyushu
5
ログイン前の画面
ログイン画面
ログイン後の画面
（成功）

2.Glideアカウントを登録する
 https://go.glideapps.com/ にアクセスし「Sign up with Google」を押します。
 作成したアカウントを選びます。
 一人で複数のGoogleアカウントを持っている場合、表示されます。
 GlideによるGoogleアカウントへのアクセスを許可します。
 登録が完了し、スプレッドシートかテンプレートからアプリを作るか尋ねられます
が、一旦は「Do this later（後でやる）」を選択します。
🄫Code for Kitakyushu
6
初期画面 Googleアカウント
選択画面
アクセス許諾画面 登録完了画面
登録後の初期画面
（アプリはまだありません）

3.Glideでテンプレートを自店
舗向けにコピーする
 ブラウザで飲食店向けスマホサイトテンプレートにアクセスする。
https://restaurant-template.glideapp.io/
 「COPY THIS APP」を選択し、コピーすると、自動的にglideの編集画面に遷移します。
 編集画面の左上「g」のボタンからダッシュボードに戻ると、コピーしたアプリが表示されています。
 ここまでで、一旦glideの操作は終わりです。
🄫Code for Kitakyushu
7

Glide編集画面の見方
🄫Code for Kitakyushu
8
プレビューする部分 編集する部分
ﾚｲｱｳﾄ
調整
タブ
編集
全体
設定
ｽﾌﾟﾚｯﾄﾞ
ｼｰﾄへの
ﾘﾝｸ
編集内容選択（レイアウト／特徴）
※一覧表示時のフィルター条件などもこちらから
ページのスタイル選択
ページの全体的な見た目を選択します
詳細画面／一覧画面／地図表示画面など
いくつかのスタイルが選択できます
表示項目の並び順や内容を設定
サポートされている項目タイプは
・テキスト
・電話番号
・外部リンク
・地図
・メディア（画像／動画）
など、さまざま
※テンプレートの並び順は暫定ですので、
変更いただいて構いません。

4.Googleスプレッドシートで
自店舗の情報に書き換える
 glide編集画面で「スプレッドシートへのリンク（Edit
sheet）を選択すると、データが格納されているシートが
ブラウザ上で開かれます。
 このシート上に書かれている内容が、そのままデータとして
スマホアプリに表示されます。
 1行目に書かれた列名が「項目名」、2行目以降が実際のデー
タとなります。
🄫Code for Kitakyushu
9

基本情報（店名等の項目）の
書き換え
🄫Code for Kitakyushu
10
ｽﾌﾟﾚｯﾄﾞｼｰﾄ列名(項目名) 内容
店舗名 店舗の名称。トップ画像のタイトルとして表示されます。
店舗代表画像（ロゴ等） トップに表示する画像。お店のロゴなど。
画像1～4 お店の雰囲気が分かる画像。１～４は横フリックで切り替えます。
お店の紹介(お店の魅力を一言で表すと…？) お店のキャッチコピーを書いてください。短く簡潔に、大事です。
営業時間 最新の情報を書いてください。
定休日 〃
電話番号 お店の代表番号もしくは携帯番号。タップすると直接電話できます。
住所 お店の住所。タップで地図アプリが開きナビゲーション出来ます。
緯度・経度 住所の緯度経度。マップへ正確にピン打ちするために必要。詳細後述
アクセス 最寄駅等からの所要時間などを書いてください。
ホームページURL PC用のホームページがある場合、URLを書いてください。
Facebook Facebookページがある場合、URLを書いてください。
Twitter アカウントがある場合、アカウントURLを書いてください。
Instagram 〃
予約はこちら 予約サイトと連携している場合、こちらにリンクを貼ってください。
※各項目にデータが書かれていない(空白セル)場合、スマホアプリには項目(タイトル)自体表示されません

（補足）画像を使用する際の
Google側設定について
 Glideでは画像（や動画などのメディア）を使用する場合、URLの形式で指定します。つまり、一旦、
インターネット上で見れる状態になっている必要があります。
 PC用ホームページや、Youtubeなどに公開されている画像・動画にはURLが付与されています
 Googleアカウントを作成していれば、無料で15GBまでクラウド上でファイルを管理する「Google
ドライブ」が利用可能ですので、画像を使用する場合は、この「Googleドライブ」を使いましょう。
 Googleドライブにアップロードした画像は、初期設定では自分にしか見れないようになっていますの
で、スマホアプリの画像を格納するフォルダを作成し、インターネット上で公開する設定を行います。
🄫Code for Kitakyushu
11
【フォルダおよび画像の公開設定手順】
1. https://drive.google.com/drive/my-drive にブラウザでアクセスします。
2. フォルダと書かれている辺りで右クリックし「新しいフォルダ」を選択し、
適当な名前を付けます。（この場合は「スマホアプリ画像用」としています）
3. 作成したフォルダの名前の上で右クリックし「共有可能なリンクを取得」
4. 「リンクを取得」画面の下部「▼」をクリックし「リンクを知っている全員」を
選択し、完了をクリック。
5. Web公開設定が成功していれば、フォルダアイコンが変更されます。（人の図）
6. このフォルダの中にアップロードしたファイルは、Web上で閲覧可能になるため、
画像はこのフォルダにアップロードします。
https://hep.eiz.jp/google-drive-upload/ （参考記事）
7. 画像をアップロードしたら、上記3.同様「共有可能なリンクを取得」し、
「リンクをコピー」をクリックすれば、その画像に付与されたURLが取得できます。
8. スプレッドシートにURLを貼り付ければ、画像をスマホアプリ上で表示可能となります。
（右クリックして「貼り付け」もしくはショートカットキー「Cntrol-v」）
※「https://drive.google.com/file/d/XXXXXXX(←ランダムな文字列)/view?usp=sharing」といった形の
URLになっていれば成功です。
＜手順2.「新しいフォルダ」作成＞
＜手順3.「共有可能なリンク」取得＞
＜手順4.「リンクを知っている全員」選択＞
＜手順5.公開設定されたフォルダアイコン例＞
＜手順7.画像ファイルの「共有可能なリンク」コピー＞

メニュー情報の書き換え
 メニュー情報（料理／ドリンク）は①カテゴリ→②一覧→③詳細
の3段階表示になっています。
🄫Code for Kitakyushu
12
＜①カテゴリ＞ ＜②一覧＞
＜③詳細＞

メニュー情報の書き換え
 料理／ドリンクの表示情報は、それぞれGoogleスプレッドシートの下記情報を参照しています。
🄫Code for Kitakyushu
13
料理 ドリンク
カテ
ゴリ
「料理カテゴリ」シート
・カテゴリ
・説明
・代表画像
「ドリンクカテゴリ」シート
・カテゴリ
・説明
・代表画像
一覧/
詳細
「料理一覧シート」
・料理番号※非表示項目
・カテゴリ
・料理名
・価格(税抜)
・説明・オプション等
・画像※URL
「ドリンク」シート
・ドリンク番号※非表示項目
・カテゴリ
・ドリンク名
・価格(税抜)
・説明・オプション等
・画像※URL
カテゴリ
説明
代表画像
カテゴリ代表画像
(ｶﾃｺﾞﾘ)説明
料理名
価格(税抜)
説明・
ｵﾌﾟｼｮﾝ等
※現状、詳細画面は一覧画面での表示項目しか載せてないので割愛
スプレッドシートに列を増やせば項目追加可能です。
※「カテゴリ」の値は、「料理カテゴリ」⇔「料理一覧」及び
「ドリンクカテゴリ」⇔「ドリンク」シートの間でそれぞれ
共通の設定値（例「炭火焼鳥・串」等）を使ってください。
ここの値を元に紐づけを行うことで、自動的に一覧表示しています。
（カテゴリ名は自由に変えられますが、変えた場合は一覧側もあわせて下さい）

コース情報の書き換え
 コース情報はスプレッドシートの「コース」から表示しています。
🄫Code for Kitakyushu
14
項目名
コース番号※非表示項目
コース名
値段
料理品数
利用人数
飲み放題
予約締切
予約可能曜日
コース詳細
画像※URL
利用可能クーポン1～4※
＜一覧＞ ＜詳細＞
コース名
値段
コース詳細
※各項目にデータが書かれていない(空白セル)場合、
スマホアプリには項目(タイトル)自体表示されません
※「利用可能クーポン1～4」には「クーポン」シート
に記載の”クーポン番号”を記述してください。
（詳細後述）

クーポン情報の書き換え
 クーポン情報はスプレッドシートの「クーポン」から表示しています。
🄫Code for Kitakyushu
15
項目名
クーポン番号※非表示項目
クーポンタイトル
提示条件
利用条件
有効期限
＜一覧＞ ＜詳細＞
※各項目にデータが書かれていない(空白セル)場合、
スマホアプリには項目(タイトル)自体表示されません
クーポン
タイトル
提示条件
有効期限
「クーポン利用可能コース」には、コース情報の
設定項目「利用可能クーポン1～4」に、クーポン
番号が設定されているコースの一覧を表示します。
コースA
コースB
コースC
クーポン1
クーポン2
＜例＞
この場合、コースA,B,Cに設定する”利用可能クーポン”
は、それぞれ「1」「1,2」「1」となります。
クーポン1の詳細では、コースA,B,Cの一覧が表示されます。

（補足）コース／クーポン／お知
らせがない（不要）場合のglide設
定について
 コース/クーポン/お知らせがない、あるいは、あってもサイトに掲載はしない場合は、
glide編集画面の設定で、タブを非表示にすることが出来ます。
① タブ設定用メニューを選択する
② 非表示にしたいタブをドラッグして、「HIDDEN TABS」へドロップします
🄫Code for Kitakyushu
16
タブ
設定用
ﾒﾆｭｰ
①
②
タブが消えました。
再表示したい場合は、また、上へドラッグ＆ドロップしてください。

5.アプリ名・アイコンの設定
 アプリ名やアイコンはglide編集画面で設定します。
🄫Code for Kitakyushu
17
全体設定画面（歯車マーク）で
「DESIGN」タブを選択し、
「Upload」ボタンでPC内のアイ
コン画像をアップロード
全体設定画面（歯車マーク）で
「GENERAL」タブを選択し、NAME(ア
プリ名)/Description(説明)/Author(製
作者)をそれぞれ記述。
※Descriptionの設定値がGoogle検索結果の説明書きになるはずですが、上手く反映されないケースもあるようです。🄫Code for Kitakyushu

6.公開の確認
 Glideから公開用のURLを設定したうえで、スマホ等から表示確認を
行います。
 URLの初期値はランダムな文字列となっており分かりにくいですので、店
舗にちなんだURLを設定することをお勧めします。
🄫Code for Kitakyushu
18
公開用のボタン
URLを設定します。
「XXX.glideapp.io」の
XXX部分が変更可能です。
※有料版にする
と”glideapp.io”部分も
変更可能
ここで表示されたQRコードを読み込む、あるいは
URLをコピーしてブラウザで表示を確認します。

おまけ(開発経緯やFAQ的なもの)
 なぜ無料なの？実は後で有料とかになったりしない？
 少なくとも、使っているツール（google／glide）は無料版の機能しか使っていませんので、ご安心ください。
 ちなみに、有料版の機能を使えばサイト閲覧者数の分析なども出来ます。
また、メニューの種類が500以上ある場合などは有料版の必要がありますが、一般的な飲食店のスマホアプリの場合はそ
こまで不要ではないでしょうか。
 本テンプレート及びマニュアルを作製したきっかけは、コロナ禍を乗り越えるための飲食店支援として「北九州テイクアウ
トマップ」（https://bento-ktq.glideapp.io/）を開発・運営している中で、飲食店毎の情報発信力に大きな差があると感じ
たことです。
 元々ITコミュニティである我々“Code for Kitakyushu”（https://www.code4kitakyushu.org/）は「ITの力を使って市民自ら
が地域の課題を解決する」という目的で活動を続けています。
 この中で、地域の魅力を伝えるためにも、飲食店の方々がより簡単に、無料で自店舗の魅力を発信できる仕組みを提供する
ことで、地域を支える飲食店が存続していただけるのが目的の一つです。
 無料で出来るのは分かったけど、書いてある内容が良く分からない。
 無料ツールの組み合わせで作っているため、分かりにくい部分もあるかと思います。今後、ノートPCを持ってきていただき、
セミナー形式での使い方説明会なども考えていきたいと思います。
 個別サポートは受けられる？
 基本的には個別サポートはありませんが、上記のセミナーや、コミュニティの月次定例イベントなどでお応えできればと。
 こんなものを無料で公開したら、他のIT企業やデザイナの商売の邪魔では？
 このアプリは無料で作れるツールの組み合わせでしかありませんので、機能は限られています。IT企業/デザイナの方々には、
ここからもう一歩先に進もうとしていらっしゃる飲食店の方々を、紹介させていただくのも一つの在り方かと思っています。
 また、IT企業/デザイナの方が本テンプレートを利用してご自身の商売をされることを妨げるものではありません。ただし、
その場合はご一報いただけるようお願いいたします。（E-Mailアドレス： code4kitakyushu@gmail.com）
🄫Code for Kitakyushu
19