【実践】ノーコードで店舗アプリを作る方法｜家具店舗アプリ（前編）

本記事でわかること

• 店舗アプリ開発におけるデータベース設計の基本
• QRコード会員証の実装方法
• クーポン機能の作り方と管理方法
• ノーコードで店舗DXを実現する方法

はじめに

こんにちは。マーケティング担当の高橋です。

店舗DXや小売DXの取り組みが進む中で、顧客接点をデジタル化する「店舗アプリ」の活用が広がっています。一方で、独自アプリの開発にはコストや期間がかかるため、導入に踏み切れない企業も少なくありません。

そこで今回は、ノーコードアプリ作成ツールPlatio Canvas（プラティオ キャンバス）を活用し、家具店舗向けの専用アプリを作ってみます。

製品紹介資料 ～ ノーコードアプリ開発プラットフォーム「Platio Canvas」のご紹介

エンタープライズ向けノーコードアプリ開発プラットフォーム「Platio Canvas」のサービス資料です。Platio Canvasのサービス説明から、費用や流れまでわかりやすくご紹介しています。

※Platio Canvas（プラティオ キャンバス）とは、エンタープライズ向けノーコードアプリ開発プラットフォームです。システム開発におけるスピード、柔軟性、セキュリティ、デザイン性を高次元で両立し、社内業務からBtoC向けのアプリ開発まで幅広く対応できるのが特長です。
Platio Canvasの製品詳細はこちら

今回作成した店舗アプリ前半部分は、Platio Canvasを使って約3日で構築しました。

会員証・クーポン・お知らせといった機能も、すべてノーコードで実装できるため、プログラミングの知識がなくても開発可能です。「自社でも同じようなアプリを作れるのか試してみたい」という方は、たっぷり1ヶ月の無料トライアルで実際に体験いただけます。

家具店舗アプリの概要と実装機能

家具選びという体験は、店舗での実物確認から、自宅でのサイズ検討、そして購入後のアフターフォローまで、非常に長いタッチポイントが存在します。このプロセスをよりスムーズにし、お客様に便利に使ってもらえるUI/UXを意識したアプリを作っていきます。

今回作るのは以下の主要機能を実装した店舗アプリです。

• QRコード検索：店頭の商品タグから即座に詳細情報へアクセス
• デジタル会員証：ポイント管理をデジタル化し、スムーズな会計を実現
• クーポン機能：お客様一人ひとりに合わせた特典を提供
• 地図機能：最寄りの店舗を素早く検索し、来店導線を強化

ここからは、アプリの設計から実装のポイントまで、実際の仕様に沿って紹介していきます。
今回は1つの機能につき、データベースの作成、画面の準備をセットにして行っていきます。作っていくページは以下です。

• ホーム
• お知らせ
• 商品検索
• クーポン管理
• 店舗情報
• マイページ

実際の開発手順

ここからは実際に以下のステップで店舗アプリを構築していきます。

• Step1：ホーム画面（会員証）
• Step2：お知らせページ
• Step3：クーポン機能

Step1. ホーム画面（会員証機能）

はじめに会員証とし使えるホーム画面を作成していきます。

＜データベースの準備＞

ここでは、アプリの裏側となる「データベース」と、画面の「UI」をセットで作成していきます。
データベースとは、ユーザー情報やクーポン情報などを管理する仕組みです。

まず、Platio Canvas画面上部の「データベース」タブに切り替えて、データベースの編集をします。デフォルトでUsersテーブルが作成されています。Email、Passwordなどの列が初期で作成されていますので、このまま使っていきます。
テーブル名横の「・・・」を押して、テーブル名を「ユーザー」に変更しておきます。右端にある+ボタンから下記の型、名前の列を追加します。

• 数値型：会員番号
• 数値型：ポイント

＜アプリ画面の編集＞

Platio Canvasの画面上部の「キャンバス」タブに切り替えてアプリ画面の準備をします。
Platio Canvasではアカウント登録、ログイン、ホーム画面が最初に自動で作成されていますので、ホーム画面の修正をしていきます。左側のパネルから機能の部品（エレメント）を選び、ドラッグ＆ドロップで画面に配置します。

1. シェイプエレメントを選択して貼り付けます。画像のグレーの部分です。角丸を4pxに設定し、会員証の背景として利用します。
2. 次にテキストエレメントを2つ配置し、右パネルエレメントタブからテキストの内容を入力していきます。1つ目には「会員番号」と文字入力し、「変数の追加」を押して「Logged In User＞会員番号」の変数をテキストに追加します。これでユーザーごとの会員番号がテキストとして表示されるようになります。2つ目にも「Logged In User＞Username」の変数を追加し、ユーザー名を表示させます。
3. QRコード生成エレメントを画面に配置します。QRコードの値は「変数を追加」から「Logged In User＞会員番号」に指定します。
4. フッターを配置し、5つのタブを用意します。左から「ホーム」「商品検索」「店舗検索」「クーポン」「マイページ」を設定し、1番目のタブをアクティブに設定します。

Step2. お知らせページ

次にイベントやニュースなどのお知らせ機能を作っていきます。

＜データベースの準備＞

「お知らせ」テーブルを新規で作成します。デフォルトで追加されている「Name」の列名を変更し、「タイトル」に修正します。また、下記の型の列を追加します。

• テキスト：詳細
• 日時：公開開始日時
• 日時：公開終了日時
• 画像：サムネイル

＜アプリ画面の編集＞

全てのお知らせを並べる一覧と、1つ1つ詳しく読むための詳細ページをそれぞれ作っていきます。

お知らせ一覧

1. ホーム画面のヘッダーを選択し、右パネルから「右アイコン2」を選択、エレメントタブでアイコンを「logout」から「bell」に変更します。ホーム画面を選択し、コピー＆ペーストで新しいページを作成します。新しくできたページをクリックしてページ全体を選択し、右パネルからページ名を「お知らせ一覧」に変更します。
2. ホーム画面のヘッダーを選択し、右パネル上部のアクションタブからアイコンをクリックしたときの動作を編集します。設定されている「ログアウト」を右のゴミ箱ボタンから削除します。次にその下の「ページ移動」を選択し、ページの選択で「お知らせ一覧」に変更します。「ホーム」と「お知らせ一覧」のアプリ画面の間に矢印が伸び、ページの遷移も視覚的に表示されます。

3. 「お知らせ一覧」ページの会員証 を 選択して削除します。次にヘッダーをクリックした上で右パネルのアクションタブを選択し、「右アイコン2」の「ページ移動」を削除します。ヘッダーを選択して、右パネルのエレメントタブから「左アイコン」にチェックを入れます。これにより、左方向の矢印のアイコンが表示されます。次にアクションタブをクリックして「左アイコン＞アクションを追加する＞ページ移動＞戻る」を選択します。
4. 左パネルから「カスタム」エレメントを、お知らせ一覧ページに配置します。カスタムエレメント全体を選択し、右パネルから「カスタム＞データベースの選択＞お知らせ」を選択します。これでお知らせ一覧が表示できる設定になりました。Title、Subtitleというテキストエレメントが用意されていますので、Subtitleのテキストエレメントは削除、Titleのテキストには「変数を追加」で「Currentお知らせ＞タイトル」を入力し、行数は「1行」を選択します。次に左パネルから画像エレメントをカスタムエレメントの中に配置し、サイズを調整します。画像エレメントを選択し、右パネルから「画像ソース＞データベース＞Currentお知らせ＞サムネイル」を選択します。これでお知らせが一覧形式で表示されるようになりました。
5. 続いて一覧に表示されるお知らせの内容に条件を付けていきます。今回はあらかじめ公開期間中のお知らせのみ一覧に表示されるよう設定します。作成済みのカスタムエレメント全体を選択し、右パネルの「フィルター＞Allお知らせ」の下にある「＋OR」をクリックします。カスタムフィルターの欄が出現しますので、上から、「公開開始日時」「～の前」「日時＞Current Time」を選択します。更に「＋AND」をクリックして、「公開終了日時」「～の後」「日時 ＞Current Time」を選択します。

お知らせ詳細

1. 左パネルの「ページを追加する」を押下し、「お知らせ詳細」という名前の新規ページを作成します。
2. ヘッダー 、フッター をお知らせ一覧からコピーして貼り付けます。お知らせ詳細ページを選択した上で右パネルスタイルタブからステータスバーの色を白テキストに変更します。
3. お知らせ一覧をクリックするとお知らせ詳細に遷移する設定をします。お知らせ一覧ページのカスタムエレメント、１番上の１単位をクリックします。右パネルからアクションタブを選択し、「アクションを追加する」を押下し、「ページ移動＞作成済みのページから選択」から「ページの選択＞お知らせ詳細」を選択します。
4. お知らせ詳細ページを編集します。画像エレメントを配置し、右パネルのエレメントタブから、「画像ソース＞データベース＞Currentお知らせ＞サムネイル」を選択します。テキストエレメントを3つ配置、「変数を追加」からそれぞれ「Currentお知らせ＞タイトル」、「Currentお知らせ＞詳細」「Currentお知らせ＞公開開始日時」を入力します。公開開始日時の変数をもう一度クリックすると、「日付フォーマット」という欄が表示され、表示形式の変更ができます。デフォルトで「相対表示10日前」になっていますので、「日時YYYY/MM/DD」に変更します。
5. ヘッダーの遷移先の設定をします。ヘッダーを選択した上で、右パネルのアクションタブから、左アイコン、右アイコンどちらも「ページ移動＞お知らせ一覧」に設定します。

Step3. クーポン機能

＜データベースの準備＞

クーポンの種類を管理するためのテーブルを作成します。テーブル名上部の「テーブル追加」を押下し、「クーポンマスター」のテーブルを作ります。列名「Name」を押して「クーポン名」に変更します。以下に並める型、名前の列を追加していきます。

• 日時：使用期限
• 画像：画像
• テキスト：詳細
• 数値：使用回数制限
• 多対多の関係、ユーザー：取得したユーザー

次に、「クーポン使用」テーブルを作成します。クーポンの使用回数を管理するためのテーブルです。下記の列を追加します。

• 数値：残り回数
• 多対一の関係、ユーザー：使用したユーザー
• 多対一の関係、クーポンマスター：使用するクーポン

＜ページの編集＞

クーポンに関するページは8つに分けて開発していきます。

• クーポンを取得するページ
• クーポン詳細ページ
• 取得確認モーダル
• 取得後のモーダル
• クーポンを使用するページ（マイクーポン）
• クーポン使用詳細ページ
• 使用確認モーダル
• 使用後のモーダル

クーポンを取得するページ

1. 1番初めに作成したホーム画面を選択し、コピー＆ペーストでページを新たに追加します。追加したページを選択して、右パネルのページタブで名前を「クーポン取得」に変更します。ヘッダーとフッター以外のエレメントを削除し、ヘッダーに表示されているタイトルを「クーポン」に変更して下さい。次にフッターを選択し、右パネルエレメントタブから、アクティブタブを4番目のタブに変更します。
2. クーポン取得ページにカスタムエレメントを配置し、右パネルのエレメントタブから、「カスタム＞データベースの選択＞クーポンマスター」を選択します。次に使用期限以降のクーポンは表示させないようにカスタムフィルターを追加します。フィルター下部「＋OR」を押し、上から「使用期限」「～の後」「日時＞Current Time」を選択して下さい。更に、クーポンを既に取得している場合は表示させないように設定します（取得済みのクーポンはクーポンを使用するページで表示させます）。フィルターの「＋AND」をクリックし、上から「クーポンマスター＞取得したユーザー＞All」、「含まない」「Logged In User」を選択します。
3. カスタムエレメントの中にデフォルトで用意されているテキストエレメントにそれぞれ「Currentクーポンマスター＞クーポン名」「Currentクーポンマスター＞使用期限」の変数を設定します。使用期限の変数は日付フォーマットを「日付YYYY/MM/DD」に変更します。
4. カスタムエレメント内のシェイプを選択して引き伸ばし、画像エレメントをカスタムエレメント上に追加します。右パネルエレメントタブから、「画像ソース＞データベース＞Currentクーポンマスター＞画像」を選択して下さい。
5. フッターがカスタムエレメントの下に配置されている場合は、フッターを選択し、右パネルスタイルタブから「エレメントの重なり順＞最前面へ」を選択して下さい。
6. クーポンの取得や使用などのページの内容が更新された際、自動で最新情報が表示されるような設定を行います。ページ全体をクリックした上で、右パネル ページタブの「更新」から「自動更新」を選択します。これで常に最新情報が表示されるようになります。

クーポン取得詳細ページ

1. クーポン取得ページを選択し、コピー＆ペーストでページを追加します。ヘッダー、フッター以外のエレメントを削除します。ページタイトルを右パネルから「クーポン取得詳細」に変更しておきます。
2. クーポン取得ページからクーポン詳細ページへの遷移を追加します。クーポン取得ページのカスタムエレメントを選択し、右パネルアクションタブから「＋アクションを追加する」ボタンをクリック、「ページ移動＞作成済みページから選択＞クーポン取得詳細」を選択します。
3. クーポン取得詳細ページの編集をします。左パネルから画像エレメントを配置し、右パネルエレメントタブから、「画像ソース＞データベース＞Currentクーポンマスター＞画像」を選択します。テキストエレメントを3つ配置し、上から「Currentクーポンマスター＞クーポン名」「Currentクーポンマスター＞詳細」「Currentクーポンマスター＞使用期限」の変数を追加します。使用期限の変数は日付フォーマットを「相対表示 10日前」から「日時 YYYY/MM/DD」に変更しておきます。
4. 「ボタン1」エレメントを配置します。アイコンを消し、ボタン内のテキストを「取得する」に変更します。

クーポン取得確認モーダル

1. 左パネル「ページを追加する」ボタンからモーダルを選択し「クーポン取得確認モーダル」を追加します。
2. デフォルトでテキストエレメントが2つ配置されていますので、片方を削除して、残ったテキストエレメントに「クーポンを取得しますか？」と入力します。
3. デフォルトで用意されている「OK」のボタンを複製し、右パネルのエレメントタブからタイプを「枠付きボタン」に変更します。OKボタンのテキストを「はい」、枠付きボタンのテキストを「戻る」に変更します。
4. クーポンを取得した記録をデータベースに登録します。先ほど設定したモーダルの「はい」ボタンにアクションを付与します。右パネルのアクションタブから「アクションを追加する」を押下し、「更新＞Currentクーポンマスター」を選択、取得したユーザーの列に「Add＞Logged In User」を追加します。

5. さらに同じ「はい」ボタンにもう1つアクションを付与します。「＋アクションを追加する」から「作成＞クーポン使用」を選択し、Nameには「Currentクーポンマスター＞クーポン名」、残り回数には「Currentクーポンマスター＞使用回数制限」、使用したユーザーには「Logged In User」、使用するクーポンには「Currentクーポンマスター」を入力します。

クーポン取得済みモーダル

1. クーポン取得確認モーダルを選択し、コピー＆ペーストで複製します。右パネルのページタブからページ名を「クーポン取得済み」に変更しておきます。
2. クーポン取得確認モーダルの「はい」ボタンの遷移先をクーポン取得済みモーダルに設定します。「はい」ボタンを選択した状態で右パネルのアクションタブから「ページ移動＞ページの選択＞クーポン取得済み」を選択します。
3. テキストエレメントの内容を「クーポンを取得しました」に変更します。
4. 「はい」ボタンを削除し、「戻る」ボタンを押下したときの遷移先をクーポン取得ページに設定します。右パネルのアクションタブから「ページ移動＞ページの選択＞クーポン取得」に設定します。

クーポンを使用するページ（マイクーポン）

1. ページ「クーポン取得」を選択した上でコピー＆ペーストで複製します。ページ名を「マイクーポン」に変更しておきます。
2. フッターの4番目のタブからマイクーポンページに遷移するように設定します。全てのページのフッターについて、右パネルのアクションタブから「4番目のタブ」を選択し、「ページ移動＞ページの選択＞マイクーポン」に設定します。
3. マイクーポンページの編集をします。カスタムエレメントを選択し、データベースを「クーポン使用」に変更します。「クーポン名」のテキストを削除し、「変数の追加」から「Currentクーポン使用＞使用するクーポン＞クーポン名」を設定します。次に「使用期限」のテキストを削除し、「Currentクーポン使用＞使用するクーポン＞使用期限」の変数を追加します。日付フォーマットを「相対表示10日前」から「日時YYYY/MM/DD」に変更します。テキストエレメントを1つ配置し、「Currentクーポン使用＞残り回数」の変数を追加します。最後に画像を選択し、画像ソースを「Currentクーポン使用＞使用するクーポン＞画像」を選択します。
4. クーポンの残り使用回数が0のものを非表示にするフィルターを追加します。クーポン使用のカスタムエレメントを選択し、右パネルエレメントタブ、フィルターからカスタムフィルターを選択して下さい。「列の選択＞残り回数」「～以上」を選択し、最後に「1」を入力して下さい。

クーポン使用詳細ページ

1. クーポン取得詳細ページを選択し、コピー＆ペーストで複製し、ページ名を「クーポン詳細」に変更します。
2. マイクーポンからクーポン詳細へのページ遷移のアクションを設定します。マイクーポンページ中のクーポン使用のカスタムエレメントを選択し、右パネルのアクションタブから「ページ移動＞ページの選択＞クーポン詳細」を設定します。
3. クーポン詳細ページの内容を置き換えていきます。画像の画像ソースを「データベース＞Currentクーポン使用＞使用するクーポン＞画像」に設定して下さい。クーポン名、詳細、使用期限のテキストを、それぞれ「Currentクーポン使用＞使用するクーポン＞クーポン名」、「Currentクーポン使用＞使用するクーポン＞詳細」「Currentクーポン使用＞使用するクーポン＞使用期限」と設定します。使用期限の日付フォーマットは「日付YYYY/MM/DD」に変更します。最後にテキストエレメントを1つ配置し、「Currentクーポン使用＞残り回数」の変数を設定します。
4. 「取得する」ボタンのテキストを「使用する」に変更します。

クーポン使用確認モーダル

1. クーポン取得確認モーダルをコピー＆ペーストし、ページ名を「クーポン使用確認」に変更します。
2. クーポン詳細ページ、「使用する」ボタンからのページ遷移のアクションを設定します。「使用する」ボタンを選択したまま、アクションタブで「アクションを追加する＞ページ移動＞作成済みページから選択」を選択し、クーポン使用確認モーダルを設定します。
3. モーダル内のテキスト、「クーポンを取得しますか？」を「クーポンを使用しますか？」に変更します。
4. 「はい」ボタンをクリックした際のアクションを追加します。アクションタブから「アクションを追加する＞更新＞Currentクーポン使用」を選択します。残り回数について、「変数を追加」からCurrentクーポン使用の残り回数を選択し、「-1」と入力して使用回数がボタンを押すたびに減るように設定します。

クーポン使用済みモーダル

1. クーポン取得済みモーダルをコピー＆ペーストし、名前を「クーポン使用済み」に変更します。
2. クーポン取得確認モーダルの「はい」ボタンを選択し、「アクションを追加する＞ページ移動＞作成済みページから選択」を選択し、クーポン取得済みモーダルを設定します。
3. モーダル内のテキスト、「クーポンを取得しました」を、「クーポンを使用しました」に変更します。
4. マイクーポンページへ戻るようページ遷移のアクションを設定します。「戻る」ボタンをクリックした上で「アクションを追加する＞ページ移動＞作成済みページから選択」を選択し、「マイクーポン」を指定します。

前編のまとめ：アプリの土台とコミュニケーション機能の完成

前編では、店舗アプリの核となる、会員証機能、お知らせ配信、そしてクーポンシステムの構築を行いました。このように、会員証・お知らせ・クーポンを組み合わせることで、店舗アプリとしての基本的な顧客接点を網羅することができます。

ここまで進めてみて実感いただけたかと思いますが、Platio Canvasの大きな特長は「データベースの設計」と「UIの編集」が直感的に連動している点にあります。

• 会員番号をQRコードとして動的に表示する
• 配信期間に合わせてお知らせの表示・非表示を自動で切り替える
• 取得済みか未取得かに応じてクーポンの出し分けを行う

こうした本来であれば複雑なプログラミングが必要なロジックも、フィルター設定やアクションの設定だけでスマートに実装することができました。これにより、開発の工数を大幅に削減しながらも、ユーザーひとりひとりの状態に合わせた「パーソナライズされた体験」の土台が整いました。

今回作成した店舗アプリ前半部分は、Platio Canvasを使って約3日で構築しました。
通常であれば開発工数がかかる会員証やクーポン機能も、すべてノーコードで実装できるため、プログラミング経験がなくても開発可能です。
「まずは試してみたい」という方は、1ヶ月の無料トライアルで実際にアプリ作成を体験してみてくださいね。

後編では、さらなる店舗DXを加速させるための以下の機能を実装していきます。

• 商品検索：店頭のQRコードから即座に情報を引き出す検索体験
• 店舗情報：地図と連動し、来店導線を強化する店舗検索機能
• マイページ：ユーザー自身の情報を管理し、ロイヤリティを高める仕組み

（近日公開しますのでお楽しみに！）