【Glide】ノーコードで見積りシミュレーションアプリを作成する方法

2023年1月20日 17:40

こんにちは、TAMディレクターの神嵜（かんざき）です。

今回は「Glide」を使って見積もりシミュレーションを作成したため、そのまとめを書いていきます。

以前の記事でもご紹介しましたが、「Glide」はサービスを小さく始めるのに大変相性の良いサービスです。

新しいサービスなどを導入する際には非常に便利なので、参考にしていただけますと幸いです。

———

Glideで作成した背景

以前お世話になっていた通信系の企業様から、家庭の通信費をシミュレーションできるようなものをミニマムに作成したいとご相談いただいたことがきっかけでした。

売上に直接紐づくようなツールであれば予算はおりやすいのですが、見積もりシミュレーションのように直接は紐付かないツールの場合、最初から多額の費用を投資することは難しいため、まずは安価に実装できるものから導入したいとのことでした。

また、Webの知見があまりない方も多いため「簡単に編集できるようにしたい」といったご要望もありました。

そこでスプレッドシートがデータベースとして使用でき、Excelが使える方なら編集が可能な「Glide」を提案し、プロトタイプを作成しました。

以下のリンクから実際のアプリを使用いただけますので、ぜひ触ってみてください。

———

設計の大枠は以下の通りとなっています。

Glideの操作画面からユーザーが自身の契約情報を入力すると、その値がスプレッドシートに渡されます。値を受け取ったスプレッドシートは、予め設定しておいた関数により自動的に料金を計算。算出された値がGlideのほうに反映される、という仕組みになっています。

料金の計算はGlide側でも可能なのですが、設定が複雑になりがちで、使い勝手やメンテナンス性が良くありません。

そこで今回は、スプレッドシート側で関数計算を行い、その結果をGlideで表示するようにしました。

それぞれの機能の棲み分けは、主に以下のようになっています。

・Glide：Web側の表示、入力フォーム
・スプレッドシート：料金の計算、データベース

具体的な使い方や操作の流れとしては、下記のようなイメージとなります。

1. 入力フォームから該当するプランを選択（Glide）
2. ①の値データベースに格納（スプレッドシート）
3. ②の値をもとに料金を算出（スプレッドシート）
4. ③で算出した値をWeb画面へ表示（Glide）

———

ユーザーが利用するアプリのデザインは以下のとおり。
これはGlide側で用意されているUIで、目的に応じて項目を選択するだけでデザインにも反映されます。

今回は「見積りシミュレーター」ということで、ひとつの機能に絞ったアプリ。そのため、ユーザーが操作に迷わず直感的に使えるように配慮しています。

Glideの管理画面の設計は以下のようになっています。

取得するデータの参照先を指定。そのあとは、Glideで用意されているレイアウトやボタンなどのパーツを選択するだけです。

画面に設置できるパーツは豊富に種類が用意されていますので、目的にあった要素を組み合わせて画面を設計していきます。

非常にシンプルなデザインですが、余白を空けたり、罫線を入れたりすることとで、見やすく使いやすいようにカスタマイズできます。

セレクトボックスやボタンから、自身が契約しているプランを設定すると、スプレッドシート側で自動的に計算されて、ページ下部の「料金表」に反映されます。

———

Glideの操作画面で入力した情報は、スプレッドシートの「選択リスト」の該当箇所に反映されます。
たとえば「コドモ光」を登録すると、E列の「利用NET」の項目に「コドモ光」が入力されます

タブの「【料金表】NET」には、各種サービスの基本料金が予め登録されています。この場合、「コドモ光」は「4,400円」となっていますね。

タブの「選択リスト」のK列「NET料金」のセルにはVLOOKUP関数が設定されています。これにより、E列に記入された情報を参照し、その料金を「【料金表】NET」から引っ張ってくるようになっています。

あとはこれを繰り返します。選択した「スマホ」や「データ容量」に応じた料金情報を、他のタブから受け取るように設定しています。

そして、P列の「合計」には、算出された料金の合計値を計算するように設定しています。

最後に、Glideの管理画面から、スプレッドシートで計算された値を表示するように設定すれば完了です。

入力した情報を元にスプレッドシートで料金計算がされ、その値をGlide側で受け取ります。こうすることで、入力した値によって料金を算出する「シミュレーションアプリ」が完成します。

———

見積もりシミュレーションと聞くと結構複雑な実装なりそうなイメージを持ってしまいますが、「Glide」とスプレッドシートを上手に使えば意外と簡単に作れてしまいます。

今回のアプリ作成時間としては、おおよそ3〜4時間ぐらいかと思います。

ディレクターの私でこれくらいの所要時間なので、データベース設計に詳しい方であればもっと短時間で作成できるかと思います。（というよりも作成時間の大半はこの作業でした。）

結局のところ、料金の算出はスプレッドシートで行っているので、いかにわかりやすいデータベース設計にできるかで使いやすさやメンテナンス性も変わってきそうです。

今回は見積もりシミュレーションを作成しましたが、他のアプリでもこの考え方は代用できると思うので、読んでいただいた方の参考になれば幸いです。