「在庫管理アプリを作ってみる①」 — スキャンから商品登録フローまで
- Bounce+
- 4 days ago
- 5 min read
前回は、現場で起こりがちな「在庫管理・棚卸しのしんどさ」と、現場に合わせてツールをカスタマイズする考え方を紹介しました。今回は、実際にアプリを作っていきます。
ノーコードツール AppSheet を使って、まずは、在庫管理アプリの“入口”になる 「商品登録」 の流れを作っていきます。
デモ用として、以下の動画のようなアプリを作っていきます。
初心者でも数日で作成が可能です。基本を押さえたら、それぞれの現場に合わせて、ぴったりのアプリを作っていくことが可能です（もし、伴走して一緒に作ってほしいなどのご要望があれば、お問い合わせフォームよりお気軽にお問い合わせください）
はじめに：どんなデザインのアプリにするか？
まず全体像から。今回作るアプリのデザインは、ひと言でいうと
「現場の動線を、そのままアプリにする」
です。
現場の在庫管理でストレスとなることの一つは、「どの画面に行けばいいか迷うこと」。
覚える必要があり、かつ誰かに委託するときには「教える」という手間も。
だから、アプリの入口を “バーコードスキャン”に固定 して、ユーザーが考えなくても次に進める導線を作ります。
在庫登録のフローを以下のものに確定します
商品のバーコードをスキャン（ここが起点）
商品未登録案内（未登録商品の場合のワンクッション。登録があれば「４」へ。）
商品登録フォーム（新規登録）
在庫登録フォーム（登録済み商品の数量更新）
そして下部のツールバーには最小限のページだけ置きます。
バーコードスキャン（最重要）
ダッシュボード
商品一覧（全体確認）
※ダッシュボードや在庫登録は次回以降で追加。今回は「アプリの入口である始めのステップ」を作成する回です。
以下のフロー図のように、次々に遷移するアプリを作ることで「どの画面に行けば良いのか」を覚える必要もなく、誰が使っても同じように在庫管理ができるツールを作ります。
1）スタート地点は「バーコードスキャン」だけにする
現場で一番迷いが無い動きは、だいたい共通しています。
「手に取ったものを、その場で読み取る」。
それに合わせ、アプリの起点を「バーコードスキャン」にします。
ホーム画面に機能を並べると、慣れていない人ほど探してしまう。
なので、最初の導線は徹底的にシンプルにします。
これが「バーコードスキャン」の画面。バーコードと書いてある欄の右端にあるアイコンをクリックすると、自動でスマホのカメラが起動します。
こちらが「バーコード」読み取りのために、自動で起動するカメラ画面。白い四角の中に、バーコードを合わせると、自動で「数字の読み取り」をしてくれます。簡単で、誰がやっても間違いが起きません。
2）スキャン結果を一旦受け止める
スキャンした瞬間に商品マスタへ書き込むより、
「スキャンした事実」を一旦記録する のが運用上おすすめです。
それに合わせて、最低限、以下を持たせます。
ScanID（一意のID）
バーコード（スキャン値）
スキャン日時
作業者（今回は複数人運用を想定し、Enumで選択）
これがあると、後で「誰がいつ何をスキャンしたか」も追えますし、スキャン後の分岐ロジックも作りやすくなります。これらは先ほどの「バーコードスキャン」画面に用意しておきます。
スキャン後の「バーコードスキャン」画面。自動でバーコードの数字が書き込まれていますね。
3）スキャン後の分岐：「既存」か「新規」か
ここからがアプリらしい部分です。
スキャンしたバーコードが 以前にスキャンされたかどうか （つまり、すでに登録がある商品かどうか）で、遷移先を分けます。
すでに登録済み → 在庫更新画面へ
未登録 → 「未登録です。新規登録してください」ページへ → 商品登録フォームへ
この分岐を作ると、現場は「次に何をすればいいか」で迷いません。
新規商品が多い現場ほど、この誘導が効きます。
こちらが商品登録がなかった場合の画面。メッセージが表示され、商品登録へ誘導されます。この際、商品登録ページへ遷移する「商品登録へ」というアイコンを「１つだけ」作っておくと、さらに迷いを低減できます。煩雑な画面は、プロっぽい見た目でスタイリッシュですが、機能選択が多ければ多いほど「迷い」を生み、間違いや、迅速でない操作につながります。
4）商品登録後は「次にやること」まで用意しておく
商品登録が終わったあと、ユーザーの次の行動はほぼ決まっています。
「じゃあ在庫を登録しよう」 です。
なので登録後は、 「在庫登録へ」 の導線（アクションボタン）を置いたページに遷移させるのがおすすめ。
“登録できたけど次に何をするか分からない” をなくすだけで、現場の使いやすさが一段上がります。
まとめ：この回で作るのは「迷わない入口」
今回は、在庫管理アプリづくりの前半として
入口は バーコードスキャン に固定
すでに登録があるかどうかで遷移を分岐
未登録は「未登録案内」→「商品登録」→ 「在庫登録」
という、“現場で迷わない入口” を形にしました。
実はこれ、定期的な「棚卸し」の際にも有効。
在庫日のバーコードをスキャンするだけで「商品詳細」画面に遷移するので、表示の個数と在庫数を比較するだけ。もし個数に違いがあった場合には、「在庫登録」画面にアイコンから遷移し、個数の修正ができます。
その際「棚卸しによる補正」であることを記録できるようにしておけば、後々に振り返りもできますね。
次回はこの「在庫登録」がメイン。
在庫登録（仕入れ・出庫・廃棄）とログの自動記録、消費期限管理やダッシュボード作成について、具体的に紹介します。
ご不明点や、カスタマイズツール作成についてのご相談をお問い合わせフォームより承っています。初回相談は無料ですので、お気軽にお問い合わせください。
Comments