"ピッキング作業効率改善"結果をすぐにプッシュするアプリの開発

こんにちは！
しがないネットスーパー戦略担当者です！

今回はネットスーパーのピッキング作業の効率改善についてアプリを作成したのでご紹介させていただきます！

# ネットスーパー作業を簡単に紹介👑

<ネットスーパー作業イメージ>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/7dd002e2-3abf-5496-b06c-b48c56dc20fb.png)

お客さまからの注文を締め切った時点から作業を開始します！
お客さまの注文リストを持ち売場へGo！
商品を梱包しドライバーに渡します！

注文が入り、約3時間ですべてのお客さまのピッキング作業・梱包作業を完了するのがネットスーパー作業員のミッションです！

よかったらこちらの記事もご覧ください🔔

https://note.com/fair_knot733/n/n7e9382dc3d5a

# 私の部署のデジタル化　と　現状の課題
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/9442e2eb-689d-f4da-16c5-84d110795fa2.png)

ネットスーパー作業においては、どれだけ多くのお客さまの注文を処理できるかが大事です！現在、弊社のネットスーパー部署では、出荷スピードを上げるためにピッキング作業のデジタル化にチャレンジをしています！これまで紙で実施していたものがデジタルになったことで、ピッキングのスピードが大きく改善しました！

【デジタル化の結果】
1時間の処理点数が約1.5倍になりました！✨
**40点/1時間　➢➢➢　60点/1時間**


効率は大幅に上がりましたが、新たな課題を発見することに、、、

それは、、**ピッキング効率に個人差があること**

上記の数字は平均値で、ピッキングレートが80点/1時間の人もいれば40点/1時間の人もいます。何とかボトムアップを測りたい。

今回はそんな課題を解決するアプリ開発を行いました！
# 作業効率改善アイデア
現在、私はネットスーパー戦略部として、海外のネットスーパーシステムの導入検証をしています！そのシステムでは、作業状況をダッシュボードで表示をすることで管理者が作業担当者のピッキング時間を把握できるようになっていました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/98d8664b-9ee5-e016-fc83-0c1c44de6b52.png)

そこからインスピレーションを受け、
もしピッキング時間が即時に把握できるアプリがあれば現状課題の改善につながるのではないかと考えました！

現状では、作業時間を確認するものがないため、担当者からするとピッキングスピードが速かったのか遅かったのかを振り返ることができません。
もしかすると、即時に結果が分かることでその場で反省・改善をすることに繋がり、ピッキング効率が平均化されていくのではないかと推測しました！

# 実装内容

実際に作成したアプリはこちら！

https://x.com/tomo361352/status/1737827510166106303?s=20

①ピッキングする点数を入力
②担当者を選択
③作業開始前に開始時間を選択
④作業終了後に衆力時間を選択
⑤提出ボタンを押下

操作は出来るだけ簡単にしました！
現在、店舗のタスクとしてピッキング時間の報告業務があるみたいなので、そちらのフォーマットに連携した内容になっています！

登録したデータがGoogleのスプレッドシートに記載されるため、
そのまま提出すればOK！！！
報告業務の時短にも役立ってます😁
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/2c98897d-917d-197a-48a6-fbbce6e78d6c.png)

# 作成方法

使用ツール

[Glide](https://www.glideapps.com/)
[Googldeスプレッドシート](https://www.google.com/intl/ja_jp/sheets/about/)

## まずはスプレッドシート作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/c14e384e-2a29-52b3-7a52-7fb5413a2ada.png)

スプレッドシートには
①実際に入力してもらう内容を漏れなく記載してください！
②選択項目にしたいものは事前にデータを入れとく必要があります！
※私は名前をテストとして入れてます！

Glideでのフォームの作り方の詳細はこちらの記事をご覧ください🔔

https://note.com/fair_knot733/n/nd0ea65cce40a

## 結果を表示する画面を作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/2eec73d6-1174-8dd1-0236-66e56e52ac6e.png)

:::note info
作成方法の詳細は▶(折りたたみ)で表示しています。
作成方法が気になる方は▶をクリック！！
:::

**①タイトルを"お疲れさまでした！”としてGood!の画像を挿入しています。**
<details><summary>①タイトルの作成方法はこちら</summary>
まずは、スクリーンを作成します！

「＋」ボタンをクリック、Custom Screenをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/231e39f8-176c-b817-9120-b1d8dceb0516.png)

右側のタブで名前を変更します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/a7e757fb-0cd7-4030-d7f9-953f88526330.png)

まずは、
**①タイトルを作成します！**

「＋」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/9684d101-c67b-74e9-3c54-6c0dae2bf5ff.png)

Title➢Simpleをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/fceb80ec-1961-3e3d-970d-2c62e65ac47e.png)

私はCoverを選択しました！お好きなフォーマットにしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/517e98e9-dcec-0a6c-6707-1ed4e725462d.png)

Titleにはテキストを入れたいのでCustomを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/367f5a16-dc8b-d772-6aa5-04844c522672.png)

Titleには"お疲れさまでした！"と記載し、SubTitleは上記同様Customを選択し、無記入としてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/99a056bc-19e5-5647-e74e-5b982750fd4f.png)

イメージに自身で用意した画像を挿入します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/dab44708-77be-a50c-ac16-ed6516bfba7b.png)

以上でタイトルの作成は終了です！
</details>

**②ピッキングレートが一番大きく見えてほしいのでTextで文字を大きくして表示しています**

<details><summary>②Textの作成方法はこちら</summary>

"あなたのピックレートは○○です"と表示させます

「＋」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/9684d101-c67b-74e9-3c54-6c0dae2bf5ff.png)

TEXT➢Textをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/b98c3da1-fd03-bce7-c086-1f1cc37033ff.png)

右タブのTextに"今回のピッキングレートは"と入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/132e0f6d-2121-d298-d2a2-587a3e48025d.png)

Headline Mediumを選択し、中央揃えを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/3c3ea2c3-7491-c422-c615-6cdd80f6b7c0.png)

次にピッキングレートを表示させてきます

まず、Dataタブにてピッキングレートの計算式を入力していきます
Dataをクリック➢右側の「＋」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/9fffda78-0adf-f767-56c0-9409c701c5c8.png)

任意の名前に変更し
textをクリック➢Computedにカーソルをあて、Mathをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/f4b1ce8b-295e-8808-60a3-501e1a3dc8b1.png)

計算式を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/2cc3f0d9-6261-7b77-6ff4-a39c9a52e31e.png)

小数点表示、単位表示を変更してSaveをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/66e149af-8ed5-e591-50c5-af5c5d515b63.png)

計算後データが出来たので、Layoutに戻ります

「＋」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/9684d101-c67b-74e9-3c54-6c0dae2bf5ff.png)

TEXT➢Textをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/b98c3da1-fd03-bce7-c086-1f1cc37033ff.png)

右端の・・・をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/f3b2c2ec-8cf4-6f5a-3e66-6943d61c5ee6.png)

先ほど作った計算式のタイトルをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/e47b4054-9baf-8154-6e98-9826e24f3be0.png)

Headline Mediumを選択し、中央揃えを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/6e756351-9b11-d066-070d-ac1b7e72b171.png)

以上でTextの作成は終了です！

</details>

**③自身の実施詳細が分かるよう詳細も表示させました**

<details><summary>③詳細の作成方法はこちら</summary>

例のごとく「＋」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/9684d101-c67b-74e9-3c54-6c0dae2bf5ff.png)

CONTENT➢Fielderをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/db237bde-6e7d-3299-bff1-cea8cb5465d2.png)

タイトル名を入力し、Add itemで必要行数を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/e4fdfb10-68d7-d868-9ba1-52d9228da7c3.png)

左側)・・・をタップしCustomを選択、表示名を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/ec19660b-7436-54a2-31ed-7bfcdaca50f9.png)

右側)タブをクリックし、表示させたいデータを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/057da735-f9e2-b642-7c69-16c62e1f91dc.png)
</details>

**④提出画面に戻るボタンを設置して終了です！**

<details><summary>④戻るボタンの作成方法はこちら</summary>

例のごとく「＋」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/9684d101-c67b-74e9-3c54-6c0dae2bf5ff.png)

ACTIONS➢Buttonをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/7bd67731-6ca1-aa76-8520-0ab931062f41.png)

私は、WideではなくAutoに設定し、右寄せにしました！(任意)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/45d0fc48-c872-ce76-61c7-ce85aefaf36f.png)

表示名を変更し、元画面に戻るアクションに変更していきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/ddc8372e-127d-73dc-0f94-0468ee3d03cd.png)

Navigation➢Go to tabをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/5d4b84fc-9719-14e3-87ba-6b6563b881d9.png)

tabが元の画面になっていたらOK!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/e09fb30a-2d65-3697-4a21-961a31faf31c.png)

以上で戻るボタンの作成は終了です！


</details>








## 提出ボタンにActionを加える

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/6887c9ff-9d95-bb2a-30f7-12e40b6e35c5.png)

提出ボタンを押したら先ほど作成したページに飛ぶようにしたいので、アクションを追加する必要があります。
アクションについては別途フローを作成します

---提出ボタン押下後---
**①"提出完了"ポップアップ**
<details><summary>①提出完了ポップアップの作成方法はこちら</summary>

Actionをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/e4520daf-c32b-8a2f-0065-34d5a5823c24.png)

Actionsの「＋」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/ba6c830b-c4a4-89ef-d7e5-d1d0c9a37c35.png)

名前を変更し、対象のスプレッドシートが選択されているか確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/89fc5e45-1438-5378-0841-479bc631a6c0.png)

ここまでで準備完了
まずは、
①"提出完了"のポップアップを表示させます

Open linkをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/d5870fe5-d0a3-a7d3-0c2b-7ee2061890e9.png)

Interactionをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/3bcc02d4-f0dd-f6e8-37a1-534cfcc55ea8.png)

Show notificationをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/64ed4831-98f9-d6e8-a428-b10330256596.png)

"提出完了！"と文字を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/2d0a3791-ebff-775c-33c0-068e1fcdf132.png)
</details>



**②"少々お待ちください"ポップアップ
(レート計算時間を確保します)**

<details><summary>②少々お待ちくださいポップアップの作成方法はこちら</summary>

②"少々お待ちください"のポップアップと5秒時間を稼ぐアクションを追加します

「＋」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/09350b52-122d-1ff2-54f6-42ea9392dda6.png)

Interactionをクリックし、Waitをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/af31519d-245f-3f2d-83bf-4d2e44e13b3f.png)

秒数を5秒に変更し、"少々お待ちください"と入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/33d1226a-621d-be40-19b2-dc6d2b2c5cf8.png)

</details>

**③結果タブに移動**
<details><summary>③結果タブに移動の作成方法はこちら</summary>

③結果タブに移動のコマンドを作成します

Navigationをクリックし、Go to tabをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/f969dd8a-78c9-2f4c-aa88-3eb65b96fdbe.png)

表示したいタブが選択されていればOK!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/0036f493-b39e-1006-9678-99e7605d6670.png)


Actionの設定が完了したらLayoutに戻り、左タブのForm Containerをタップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/a39a2d18-7b8a-96e5-7d7e-fbda2a2432c1.png)

右側のタブをスクロール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/62c5d603-68a9-6001-0d4e-ea3ad7e3c082.png)

AFTER SUBMIT ACTIONで先ほど作成したActionを選択して完了！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/b77b7868-aa56-5946-7ad8-87959620ccff.png)

</details>

以上ですべての実装作業終了です！

# 実際に使ってみてもらった感想

早速、店舗の方に協力いただき、実際に使ってみた使用感を聞いてみました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3580778/5757e158-97ce-6314-7808-8e190f0111c1.png)

使ってみた感想：
【ポジティブ】
ゲーム感覚で面白い！
やった瞬間に結果がでるので成長に繋がりそう！

【ネガティブ】
担当者によっては、結果に対して何も思っていない人がいる、、

【改善提案】
ストップウォッチのように開始スタートがボタンになっているといい
成果が一覧で見れるといい(個人別にグラフ化？など)

結果を出したところで意図が伝わっていないとピッキングスピードは上がらなさそうです、、、
誰しもゲーム感覚になると少しでもレートを上げようと思うものだと思っていたのが間違いでした、、

# 今後のアップデート内容

今回実際にやってみてもらった感想を踏まえて今後のアップデート内容を考えてみます。

★操作性改善
カレンダーを選択ではなく、ボタンを押すと今の時間が表示されるようになる
(後で時間の修正は可能)

★機能改善
一覧で個人別にレートが見れるようなタブを作る
(グラフ化で過去と今の自分が比較できる仕様にする)

★制作意図を伝える
結果表示画面に目標の数値を入れる
ゲーム性を強める
(思わず何度も繰り返しやってしまうゲームアプリを参考にしてみたいと思います)

良く広告に出てくるゲームアプリ

https://play.google.com/store/apps/details?id=com.dreamgames.royalmatch&hl=ja&gl=US&pli=1

https://youtu.be/guUmnyzSudU?si=MoJOmwQEX_jJy6Ne

広告が毎回鬱陶しいんですが、こういうゲームって一回やってしまうと1週間ぐらいはまってしまいますよね笑


とまあ、そんな形でアップデートしていけたらと思っています！
進捗管理が出来るダッシュボードも作りたいな🤔

またアップデートがあれば記事を書きたいと思います！

ではまた！