【ノーコード開発事例】スプレッドシート×AppSheetでカフェ専用の業務アプリを作ってみた

飲食店やカフェを運営している事業者の皆さま、こんにちは。

当社では主に中小企業向けにコンサルティングサービスを提供していますが、オフィス内で併設のコワーキングカフェ「シゴトとアソビ」を運営しています。飲食店やカフェにとって日々の業務効率化は、利益を確保するためにはもちろん、時間やマンパワーの節約という点でも非常に重要です。

今回は、その実体験をもとにした業務効率化の手法として、スプレッドシートとAppSheetを組み合わせたカフェ業務アプリの一例をご紹介します。

このアプリでは、スプレッドシートをベースとし、メニュー管理、観葉植物の管理、仕入れ管理、掃除管理など、カフェ運営に必要な機能を効率的に行うことを想定しています。スタッフはスマホアプリを通じてメニューの確認やタスク管理ができるように設計しています。

カフェなどを運営している事業者の皆様の参考になれば幸いです。

また、当社ではAppsheetを含むGoogleのDX活用サポートサービスを提供しています。
Appsheetの無料相談も受け付けておりますので、興味のある方は気軽にお問い合わせください。

【アプリ開発の背景】カフェ運営上の業務課題を解消したかった

当社が運営しているカフェは、代表＋1〜2名で運営している小規模なカフェですが、それでも日々やることが多く、本業との並行ということもあり、できるだけ業務を効率化・省力化できないか模索していました。

例えば、日々の買い物や植物の水やり、掃除などで「いつやったっけ？」と忘れがちになることや、

牛乳が切れていることに気づいて急いで買いに行ったり、スタッフ間の作業指示も、LINEや紙のメモなどバラバラで、抜け漏れが発生することもしばしば…

メニューやレシピをスプレッドシートに記録していましたが、いざというときに見に行きにくいと感じることがありました。

そこで、本業でも支援しているノーコード開発ツールであるAppSheetを活用し、カフェ運営を効率化するためのアプリを作成することを決めました。

AppSheetとは？

AppSheetは、プログラミング不要で業務アプリを作成できるノーコードツールです。

Google Cloudのサービスの一つであるため、Google カレンダーやスプレッドシートなどとの連携もスムーズに行えます。アイデアとデータが揃えば、誰でもマウス操作だけで、オリジナルのアプリをつくることができます。

Appsheetでできることは下記のように、ノンプログラマーでもアプリ開発をできる機能が充実しています。

• プログラミング不要で業務アプリを作成可能
• 業務プロセスの自動化
• パソコン、モバイル、タブレットに対応
• 関数を使って細かな設計も可能
• Google Workspaceやクラウドサービスとの連携

カフェ業務アプリの概要

システムフロー

まずはシステムフローですが、下記のように、スプレッドシートとアプリを繋げたシンプルなものです。

アプリのデータはスプレッドシートから読み取られ、各機能（メニュー管理、植物管理など）ごとに画面が分かれています。ユーザーは、各画面を通じて情報の登録・更新・参照を行います。

スプレッドシートは今回業務に合わせて7テーブルを準備しています。（後ほど詳細を説明します）

カフェ業務アプリでできること・画面構成

今回開発したカフェ業務アプリで利用できる機能は下記4つです。

• 買い物管理
• 水やり管理
• メニュー管理
• 清掃管理

買い物管理

買い足し忘れを防ぐシンプルな買い物リストです。

• アプリ下の「買い物」タブをクリックすると、「未購入リスト」と「購入済リスト」が現れます。
• 未購入リスト右下の＋ボタンで、未購入リストへの追加ができます。
• また、未購入リストの商品をクリックすると、「購入済にする＞」ボタンが表示されます。
• 「購入済にする＞」を押下すると購入日（デフォルトでは登録日に自動設定）と共に購入済リストへ移動されます。

水やり管理

店内の観葉植物の追加と、どの植物に、いつ、水やり・葉水をしたかを細かく管理できます。

• お店にある観葉植物を一覧で管理できます。
• 植物管理では、植物名や、写真、水やり頻度を登録できます。また、前回水やり日を自動で表示します。
• 水やりや葉水をいつ・だれが・どの植物に行ったかを一覧で確認できます。
• 水やりや葉水は、植物管理に登録している植物を複数選択で一度に登録できます。

メニュー管理

店で提供するドリンク・フードのレシピをすぐに確認・登録できます。

• アプリ下の「メニュー」を押すと、商品カテゴリが表示されます。
• カテゴリをクリックしていくと、商品名に行き着きます。
• 商品名をクリックすると、レシピや提供方法の詳細が表示されます。
• メニューはアプリからも登録可能です。

清掃管理

だれが、いつ、どこを清掃したかを管理できます。

• アプリ下の「清掃」⇒上部の「清掃箇所」をクリックすると、清掃箇所の一覧が表示されます。
• 清掃箇所はお店や業務によって、適宜追加できます。
• 「清掃記録」では、日々の清掃記録を一覧で確認できます。
• 「清掃記録」の＋ボタンをクリックすると、場所ごと・担当者ごと・日付ごとの記録を登録できます。

カフェ業務アプリの作成手順

1. スプレッドシートの準備

まずは各シートに必要なテーブルとカラムを用意します。

カラムは各テーブルのA1以降、一行目に作成します。

ちなみに各シートのテーブル・カラム構成は↓のような感じにしました。

買い物管理機能のテーブル・カラム構成

１テーブルでシンプルなつくり。
後述しますが、アプリ作成の段階で、対応状況カラムの状況により［購入リスト］と［未購入リスト］をそれぞれのテーブルとして抽出する「スライス」という機能を使用します。

【買い物リストテーブル】
・買い物ID(key)
・商品
・備考
・対応状況
・期日
・購入日

水やり管理機能のテーブル・カラム構成

地味に一番複雑です。

植物管理テーブルと水やり管理テーブルはフォームからデータを登録する仕様なのですが、
水やり詳細テーブルは水やり管理テーブルのデータを登録することで自動生成されるように設定しています。

【植物管理テーブル】
・植物ID(key)
・植物名
・水やり頻度・説明
・写真

【水やり管理テーブル】
・水やりID（key）
・担当者
・日付
・水やり（外部key）
・葉水（外部key）
・植物ID（外部key）

【水やり詳細テーブル】※水やり管理テーブル作成後に、自動生成
・ID（key）
・植物ID（外部key）
・葉水（外部key）
・水やり（外部key）
・日付
・担当者
・水やりID（外部key）

カフェメニュー管理機能のテーブル・カラム構成

1テーブルのみ。かなりシンプルです。

【カフェメニューテーブル】
・ID（key）
・大カテゴリ
・小カテゴリ
・商品名
・提供方法、レシピ

清掃管理機能のテーブル・カラム構成

2つのテーブルから成り、そこそこシンプルです。衛星IDカラムで2つのテーブルをつないでいます。

【衛生記録テーブル】
・衛生記録ID(key)
・衛生ID(外部キー)
・担当者
・日付

【衛生管理テーブル】
・衛生ID(key)
・場所
・方法
・頻度

2. アプリへの取り込み

次にどれかのシートを開いた状態で、「拡張機能」⇒「Appsheet」⇒「アプリを作成」ボタンをクリックします。

データの接続が完了したら、AppSheetが自動的にアプリのひな型を生成します。ここから本当に「使える」アプリにするには次のステップ以降のカスタマイズが必須となります。

一度アプリのひな型を作ったら、残りのテーブルはアプリカスタマイズ画面のDataビューから取り込めます。

3. データベース設定

まずは取り込んだテーブルごと・カラムごとに最適な設定を施します。

ちなみに、カラム設定には主に下記のようなものがあります。

Type: データの種類を指定します。テキスト（Text）、数字（Number）、日付（Date）、参照（Ref）、リスト（EnumList）など、カラムのデータ内容に合ったタイプを設定します。
Display Name: アプリ上で表示する名前を設定できます。カラム名とは別に表示名を付けることで、アプリのユーザーにとって見やすい名前に調整できます。
Initial Value: データ入力時に自動で入る初期値を設定します。数値やテキスト、現在の日付など、特定の初期データが必要な場合に活用します。
Show?: カラムの表示・非表示を設定します。特定のユーザーのみが見えるデータを設定する場合などに活用します。
Required?: データ入力が必須かどうかを設定します。必須にしたい場合はチェックを入れることで、データの抜け漏れを防ぎます。
Editable?: データが編集可能かどうかを設定します。例えば、特定の条件で編集不可にしたい場合に活用できます。
AppFormula: カラムに表示する値を数式で設定できます。自動で値を計算したい場合や、他のカラムの値に基づいて値を決めたい場合に便利です。

【Tips】 Refでテーブルを繋ぐ

データ型を決めるTypeで、よく使われるデータ型として「Ref」というものがあります。

例えば、本アプリでは、下記のように記録用フォームに、予め設定した衛生場所を表示させたいので、refを用いて記録用のテーブル（衛生記録）と場所の選択肢を登録する用のテーブル（衛生管理）を繋いでいます。

Ref設定の画面は下記のような感じです。
TypeをRefにして、Source Table（ソーステーブル）につなぎたいテーブルを選択肢から選んでいます。

【Tips】 Initial valueで入力の手間をなくす

Initial valueは、そのカラムのデフォルトの値（最初から自動で記入されている値）を決める項目になります。

例えば、入力フォームで水やり日を登録したい時、当日の登録がほとんどであれば[今日の日付]が初めから入っていた方が手間が省けますよね。下記では[日付]というカラムにinitial valueとして[Today()]を設定することで、自動で[今日の日付]が入力されるようにしています。

入力フォームを見てみると、こんな感じで初めから日付が入力されています。これは便利！

【Tips】 Appformulaで自由自在にデータを持ってくる

Appformulaはスプレッドシートやエクセルでいう、関数のようなものです。

これをうまく使いこなすことで、アプリ開発の幅をグンと広げることが可能です。

例えば、下記（[水やりID].[日付]）の関数は、「違うテーブルから、このテーブルと水やりIDが同じ行の日付を持ってくる」というもので、vlookup関数に似ています。

【Tips】 バーチャルカラムで好きなデータを作る

バーチャルカラムを使えば、本来設定していないカラムも作成できます。

イメージとしては[単価]と[個数]が存在するテーブルに、新たに[売上（単価×個数）]のバーチャルカラムを設定するイメージです。バーチャルカラムを設定する際には先ほど説明した関数（Appformula）を設定する必要があります。

今回のアプリでは、下記のように、[葉水と水やり]というバーチャルカラムを設定しています。
例としては使い方がややこしいですが、「葉水をした植物と、水やりをした植物を重複なしでリストにする」というカラムになります。

【Tips】 スライスで好きなデータを作る

---

AppSheetには「スライス（Slice）」という便利な機能があり、スライスを使うと、テーブルから特定の条件に合致するレコードを切り出して（スライスして）、仮想的なテーブルを作成できます。

このアプリでは、買い物リストという一つのテーブルから、カラム[対応状況]が「済」になっているものを「購入済」スライステーブル、「未」のものを「未購入」スライステーブルとして切り出しています。

■スライスを使うメリット
表示や操作を効率化
特定の条件に合ったデータだけを抽出できるため、必要な情報をすぐに表示したり操作したりできます。
ビューの個別設定が可能
スライスは通常のテーブルと同様にビューを作成できるため、「購入済」リストや「未購入」リストごとに異なる表示や操作設定ができます。
データの管理やフィルタリングが容易
スライスによってデータの出し分けがしやすくなるため、従業員ごとのタスク管理や進捗状況の管理が簡単になります。

４.ビュータイプ設定

各テーブルに対して、Dataビューでカラムの設定が完了したら、次は各機能に対応するView（ビュー）を設定します。

各ビューの画面ではデータの表示方法を設定でき、UXを決定します。利用者の立場で使いやすいアプリにするには欠かせない設定です。

例えば、買い物管理には「購入済」「未購入」のテーブルビューを、植物管理には「水やり」と「葉水」を記録できるフォームビューを追加しています。

ビューは11種類ありますが、今回アプリ作成に使用したものをピックアップし、紹介します。
それぞれ特徴があるため、使いながら覚えていきましょう。

ビュータイプ	説明	参考画像
ダッシュボード	複数のビューを 1 か所に表示します。今回のように、水やり管理という大機能の中に植物管理と水やり詳細といった複数ビューをまとめたいときに役立ちます。
デッキ	画像と文字情報を組み合わせて表示できます。一覧を示すときによく使います。 後述するテーブルビューに似ていますが、タイトルや画像、サマリなど、必要な情報に絞って強調できるため、網羅性はありませんが、見やすさという点では使い勝手が良いビューです。
詳細	1 つの行（レコード）を詳細形式で表示します。 詳細を見たいデータをクリックするような使い方が多いです。 情報量が多いものに有効です。
フォーム	フォーム形式で表示し、データ入力や編集時に使用します。 閲覧専用のアプリでない限り、出現率100%のビューです。
テーブル	Excelやスプレッドシートの表形式のビューです。一覧を示すときに使います。 元データと同じ形なので使い勝手は良いですが、情報の濃淡がなく、見やすさという点ではデッキビューに劣ります。

【Tips】Column orderをManualにし、必要なカラムのみビュー表示する

ビューの設定の一つであるColumn orderでは、ビューごとに必要なカラムのみ表示させることが可能です。
例えば、キーカラムに割り振ったランダムなIDは検索やデータ抽出には必要ですが、あくまでシステムの裏側で持っておけば良いため、ビュー上は非表示にします。

【Tips】ダッシュボードビューを使って一画面に複数のビューを表示する

ダッシュボードビューを使用すれば一画面に複数のビューを表示できます。

例えば、このアプリでは、下記のような手順でダッシュボードビューを作成しました。
１，「清掃」というビューを作成（これが親となるビューです）
２，「清掃記録」「清掃箇所」というビューをそれぞれ作成（子となるビューです）
３，「清掃」ビューのView typeをDashboardとし、View entriesに先ほど２で作成した2つのビューを選択
４，Use tabs in mobile viewをオンにすれば、画像右のように、上記に切り替え用のタブが表示されます。

【Tips】DisplayのShow if設定でビューの表示を制御する

ビュー設定のDisplayに「Show_If」という設定項目があり、ビューの表示条件を設定できます。

例えば、現在ログインしているユーザに応じて表示させる情報を変更することが可能です。

本アプリには使用していませんが、例えば、今後シフト作成機能を搭載するとして、
管理者には全員分のシフトが確認できたり、シフトを編集・承認できたりするビューを表示、
スタッフには自分のシフトのみ確認できるビューを表示したり、といった具合です。

5.アクション設定

DataとViewの設定が完了すれば、アプリとしておおよその機能は完成していると思います。
ただ、より使いやすく、より簡単に操作できるアプリにするにはAction（アクション）の設定が欠かせません。

例えば、このアプリでは「未購入リスト」に入っているデータを「購入済リスト」へ移動するためのアクションボタンを作成しています。

ちなみに、アクションの設定は以外とカンタンです。
Actionメニュー（稲妻マーク）⇒各テーブルのadd action⇒個別アクション設定から設定できます。

【Tips】Behavior設定でアクションを表示する条件を設定する

アクションボタンは同じビューでも、表示したい時と表示したくない時がそれぞれあると思います。

例えば、このアプリでは、BehaviorのOnly if this condition is trueという設定項目を使って、その商品が「未購入」状態にあるときのみ、「購入済にする」ボタンを表示させています。

この場合、[対応状況]というカラムに’未’というデータが入っていた場合、表示させています。

【Tips】App: go to another view設定で任意のビューに飛ばす

アクションの種類はいくつかありますが、私がよく使う設定に「App: go to another view within this app」というものがあります。これは、クリック等の何らかのアクションを起こした際、Target項目に設定したビューに遷移するアクションです。

このアプリでは、買い物リストを追加するアクションとして設定しています。
addボタンは自動でも作成されますが、任意のフォームビューに飛ばしたい時などに便利です。設定は下記の通りです。

Action name: リスト追加
Do this: App: go to another view within this app
Target: linktoview(‘買い物リスト_Form’)

【Tips】ループアクションで1つのレコードから複数レコードを作成する

AppSheetでは、1つのレコードを入力するとその内容に基づいて複数行のレコードを自動生成するアクションも、ノーコードで実現できてしまいます。この機能を活用すると、手動で複数のレコードを作成する手間を省くことができ、大幅な業務効率化につながります。

このアプリでは、次のような流れでレコードの自動生成を行っています：

1. 水やり管理テーブルで、葉水や水やりを行った複数の植物を選択し、1つのレコードとして登録します。ここで、各植物のIDが一括で入力されます。
2. 登録が完了すると、水やり詳細テーブルに、選択された植物ごとに個別のレコードが自動生成されます。これにより、各植物の葉水や水やりの状況が詳細に記録され、いつ・誰が・どの植物に対して水やりをしたかが確認しやすくなります。

6.その他詳細設定

５までで、業務アプリとしては十分使える代物となっているはずですが、さらにデザインを洗練させるため、Settings という設定項目で細かくカスタマイズしていきます。

例えばTheme & Brandという項目では、アプリのメインカラーや、ロゴ、フッターやヘッダーの色合い、フォントなどを細かく設定することが可能です。

---

まとめ・所感

実際に開発・運用した感想

アプリのコンセプトと、スプレッドシートでのデータベース設計を初期段階でしっかりと行うことができれば、AppSheetでのアプリ開発は非常にスムーズでした。初期設定をしっかり行うことで、最初からある程度使える形に仕上がっているため、その後の微調整や機能追加もスムーズに進められました。

ただし、スクラッチでのシステム開発と比べると、デザイン面や細かい挙動など制約がある点もあり、割り切りが必要な部分もあります。AppSheetは、あくまで社内の業務アプリとしての利用に向いているため、デザインよりも機能性や効率化を優先することが重要だと感じました。それでも、自分たちの業務に特化したアプリを自由に作れる点では、市販のアプリに劣らず、むしろ自由度の面では勝っていると思います。

これまでLINEや紙でやり取りしていた業務内容を全て一つのアプリに集約できたため、共有の手間がなくなり、抜け漏れも減少しました。

また、運用を重ねる中でスタッフや自分たちの意見を反映し、機能をブラッシュアップできるのも大きな魅力です。こうした改善を重ねていくことで、業務によりフィットしたアプリに育てられるのは、AppSheetならではのメリットだと感じました。

今後の展望

今後はシフト作成機能、ユーザーごとのログイン機能を追加開発しようと思っています。

また、今回開発したアプリを雛形に、別の接客業や飲食業でも使えるテンプレートサービスの用意も検討中です。
興味のある飲食店の方がいらっしゃればお声掛けください。

小規模事業者こそ、Appsheetを使って業務効率化を実現しよう！

プログラミング不要で、業務アプリを簡単に作成できるAppSheetは、業務効率化を目指す小規模事業者、中小企業に最適です。
また、多くの中小企業が使用しているGoogleWorkspaceに無料付帯しているという点も利用のハードルを下げてくれますね。

是非この機会にAppSheetの活用を検討してみましょう！

当社ではAppsheetを含むGoogleのDX活用サポートサービスを提供しています。
今回作成したカフェ業務アプリに関する質問も含め、Appsheetの無料相談を受け付けておりますので、興味のある方は気軽にお問い合わせくださいね。