こんにちは！インフラジスティックス・ジャパンのマーケティングチームのKayです。
私は普段このブログには登場しないのですが、先日App Builderを使って展示会で使えるヒアリングPWAアプリ開発に挑戦したので、App Builderの活用法としてご紹介したいと思います。
私のようなフロントエンド専任のエンジニアではなくても、App Builderを使えばUIを爆速で開発することができ、関係者との合意形成もスムーズに行うことができます。
この記事では、App Builderを活用した小規模なツール開発の事例、App Builderを使うメリットをご紹介いたします。
マーケチームが抱えていた展示会の課題
インフラジスティックスでは、これまで何度か展示会へのブース出展をしてきましたが、来場者さまからのヒアリング内容のメモにおいて、下記のような課題がありました。
紙のヒアリングシートの課題
- ヒアリングした内容をメモしきれない
- 紙のヒアリングシートはデータ化が煩雑
展示会では、ブースにたくさんの来場者の方がいらっしゃるため、せっかく来場者がご相談してくださった内容をメモする時間を十分に取れないということが多々あります。
また、紙のヒアリングシートを準備したこともありますが、手書きのメモはデータ化に課題があり、展示会終了後にスムーズにデータ化することができないという課題が残っていました。
ヒアリング情報と来場者情報の紐づけが煩雑
- 展示会提供のQRコードから読み取った来場者情報と名刺でデータ集計が煩雑
- 来場者の情報とヒアリングシートの紐づけ
- 紙のヒアリングシートはデータ化に課題
多くの展示会では、QRコードで来場者情報を読み取りすることができるシステムを提供していますが、QRコードではなく名刺交換させていただくことも多く、次の3種類のデータを突合する必要があります。
- QRコード由来の来場者情報
- 名刺情報
- ヒアリングシート
展示会のデータの集計作業はなるべく迅速に行いたいという社内のニーズに対し、突合作業が負担となっていました。
会場の通信が混雑する問題
展示会の会場では、多くの来場者・出展者が一斉に同じ場所で通信するため、回線が非常に混雑します。そのため、画像などの重いデータをネットワーク経由で送信しようとするのはなるべく避けたいという状況でした。
展示会ヒアリングアプリの概要
そこで、展示会のヒアリングを効率的に行うために、下記の観点でアプリを検討することにしました。
- 来場者のデータを管理しやすくすること
- ヒアリングした内容を効率的にメモできること
- 来場者の情報とヒアリングデータを紐づけられること
- 通信速度に影響されないように、オフラインで使用できること
- 個人情報を記録するため、セキュリティを担保できること
また、展示会に出展する準備などもあるため、実装に使える時間は最大で10日ほど。大がかりなアプリ開発ではなく、既存のツールをうまく活用して実現する必要がありました。
App Builderを使ったプロトタイプ開発
この時点で下記のようなアプリにしようとあたりをつけました。
- スタッフがiPadでヒアリング内容を記録できるアプリ
- iPadのカメラで来場者情報を読み取り機能を搭載する
- テキストではなくチェックボックスやスライダーなど直感的にメモしやすいUI
スタッフが操作しやすいUIを作るとなると、既存のWebフォーム作成ツールなどではUIのカスタマイズがしづらく、フルスクラッチで作るには工数がかかりすぎてしまいます。
そこで、当社のApp Builderを使って素早く使いやすいUIを作成し、プロトタイプを作成して社内から意見を募ることとしました。
素早く「動くもの」がつくれるから合意形成もスムーズ
「こういうアプリを作ろうと思っています！」と文章で説明するのは、意外に難しいですよね。今回はとにかく短期間でつくり上げる必要があったのである程度動くプロトタイプを先に作り、関係者へ説明したり、意見を募るのに実際に動くものを見てもらうことにしました。
UIは一番ユーザーから指摘が入りやすい部分です。「ボタンの位置を変えたい」、「レイアウトを変えたい」などの要望が入りやすく、機能を作りこみたいのに画面づくりに時間がかかってしまうということもしばしば。
App Builderでプロトタイプをつくって早期の段階から関係者と実際の画面を見ながら議論することで、開発の後半になってから変更の要望が入ることを防ぐことができ、すばやく仕様を固めることができました。
App Builderを使うと、UIをドラッグ＆ドロップで簡単に作ることができるので、プロトタイプを素早くつくるだけでなく、議論の結果の変更や調整すぐに反映することができます。
チームのメンバーからも「どんな風になるのか想像できていなかったけれど、実際に操作して試してみてアプリの使用感のイメージがついた」というコメントをもらいました。
UIデザインから直接コードを生成でシームレスに開発へ
通常のアプリ開発では、UIデザインが確定してからフロントエンドのコードを書くということが一般的だと思いますが、App Builderではドラッグ&ドロップで画面のデザインを作ったら、本番レベルのコードをすぐに生成することができます。
App BuilderならUI開発はドラッグ&ドロップでコンポーネントを配置するだけで済んでしまいます。
実際に、このアプリのUI開発の工数は修正や調整を含めても1日程度。私はフロントエンド専任のエンジニアではないため、デザインデータを基に自分でReactのコードを書いていたとしたら、5～7日はかかっていただろうと思います。
また、生成したコードはGitHubにプッシュしたり、コードをZipファイルでエクスポートすることもできるので、スムーズに開発に取り掛かることが可能です。
実際に動くプロトタイプを素早く作成し、スムーズに合意を形成、本番レベルのコードを生成してすぐに開発に取り掛かれる。これこそがApp Builderを使った開発のメリットだと思います。
完成したアプリ
作成したアプリには、チェックボックスやラジオボタンなどの選択項目の他、スライダーやカレンダーなどを使い、立ってiPadを操作する場合でも直感的に操作しやすいUIを実現しました。
App Builderでコードを生成し、そのコードを拡張する形で下記の機能を実装しました。
- オフラインに対応するため、React×PWAアプリ
- QRコード読み取り機能：「jsQR」ライブラリを使用
- PWA化：vite-plugin-pwaライブラリを使用
- ネットワークの不安定性を鑑み、すべてIndexDB（ブラウザのローカル）にデータを保存
- IndexDBからCSVファイルをエクスポート
App Builderを使うことによってUI開発が迅速に完了できたため、QRコードの読み取り機能やIndexDBへの保存・読み出し処理、PWA化に注力することができました。
さらに、UIが先に確定していると、どのような動き・処理を行う必要があるのかが明確になります。App Builder でUIのコードを生成してからChat GPTやGitHub Copilotなどの生成AIをコーディング支援に使うと、AIが「どこをどのように変えればいいか」というコンテキストを理解しやすくなり、AIの回答の正確性が向上するということも期待できます。
最近では、プロンプトエンジニアリングだけでなく、「コンテキストエンジニアリング」という考え方も提唱されるようになり、AIに正確な回答をしてもらうためには、コンテキスト（文脈）の設計が重要であると考えられています。UIという土台を先に固めることはAIにコンテキストを与えるという意味でも有効です。
開発にかかった工数
このPWAアプリの開発にかかった日数は全体で8日間。内訳は下記の通りです。
- App BuilderでUIのデザイン・実装：1日
- 機能の実装（QR読み取り・IndexDB周り・PWA化）：5日
- テスト・修正：2日
デザインデータをFigmaなどで作ってから、App Builderを使わずに実装していたとしたら、5～7営業日かかっていただろうことを考えると、約半分程度に短縮できたと思います。
まとめ
フロントエンド開発に慣れていないマーケティングチームのメンバーであっても、App Builder を使えば素早くUIを開発することができ、紙で運用していた業務をアプリ化することができたという事例をご紹介しました。
App Builder はUIデザインからコード生成までを一気通貫で行うことができ、フロントエンド開発に不慣れでも、質の高いUIをドラッグ&ドロップで実装することができます。
さらに、App Builder で生成したコードを基に、生成AIにコーディングを支援をしてもらうと、実装のスピードが飛躍的にアップします。
App Builder は、14日間無料でお試しいただくことが可能ですので、ぜひお試しください。また、どのようなアプリケーションがつくれるのか知りたい方は、サンプルアプリケーションも用意しておりますので、ご覧ください。
14日間無料トライアル
サンプルアプリケーション
