スマホの中に小売店の必須業務つめこんでみた！

![dp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/ef6b5316-d5bb-f07b-6dae-88cda01ba061.png)

## 小売店あるあるの悩みを解決！
小売店に勤めている「ちいよわ」と申します。小売店では商品をどのくらい発注するのかやお客さまに関わる情報が随時更新されたり、広告品を安く売ったりと日々情報が更新されていきます。でも1から10まで全部確認しきれないよーといった<font color="Red">小売店あるあるの悩みを解決しました！</font>

## 社内課題をまとめてみると…

#### <font color="Red">①商品発注と在庫管理の課題</font>
小売店では商品を発注する際は昨年の売上のデータを参考にする場合が多いのですが、社内の膨大なデータの中から都度調べたデータを`パソコンや紙にメモをして…。`というのが時間がかかります。在席業務にあまり時間を割けないことや、メモしたデータや紙の場所を覚えておく必要があります。

#### <font color="Blue">②アナログなチェックリストの課題</font>
商品の知識を深める教育用の動画や商品の不具合があった際の商品の撤去から、各担当者への個別の連絡事項など期日が長いものから短いものや確実に情報共有しなくてはならないものから念のため伝えておこうぐらいの重要度のものまで多様です。`現在は印鑑をチェックリストの書類に押印`してもらい、確認していました。チェックリストの書類の場所がそれぞれで違っていたり、なにより印鑑での確認は制約が多く不便でした。

#### <font color="Green">③広告品の価格変更の課題</font>
広告品を安く販売する前後で価格の変更があるのですが、商品数が多いせいもあり、`安い価格のまま販売してしまったり、逆に広告品で安いはずなのに高い価格で販売してしまったり…。`せっかくご来店してくださるお客さまに対して信頼を損ねる結果となってしまいます。

## 社内課題を一掃する！
##### これらの悩みを一掃する！というコンセプトのもと今回の制作物に至りました！

https://2-bz1o.glide.page

実際の使用画面の動画はこちらから！

https://twitter.com/BonVoyagi1999/status/1688552839512248320


## 使用ツール
:::note info
1.Glide（パソコンでもスマホでも使えるノーコードツールになります。）
2.Google Sheets（中身のデータはこちらのデータを使用します）
:::

## 社内課題のデジタル解決法！
#### <font color="Red">①商品発注と在庫管理の解決</font>
まず`Google Sheets`に必要なデータを入力したものを用意します。


`Google Sheets`全体の画像
![必要発注数.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/96ec7d3d-7d38-bc9e-09e9-13196e69d5c3.png)

確認リスト入力の内容（後述いたしますが、入力と出力用で分けております）
![確認　入力.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/41124668-63b6-ed6d-ee07-b7330671be9b.png)

こちらは確認リスト出力の内容
![価格　出力.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/52c5fc85-ec49-cc3f-c046-5750d4c4974c.png)

こちらは価格変更入力の内容
![価格　入力.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/944467e0-bc76-c8a9-8a1f-85aaa495550b.png)


こちらが価格変更出力の内容
![価格　出力.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/32ae9dbd-8cae-c4c8-112e-983395a508fa.png)


ここまで作れたら次は`Glide`に移ります。制作物のタイトルを入力し、`Mobile`を選択し、`Continue`を押してください。
![グライド.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/d965a75c-d03f-9301-bcac-112a1622cf93.png)


`Google Sheets`を選択し、`Continue`を押してください。そうするとどの`Google Sheets`を利用するのかの選択画面になりますので、先ほど作成した`Google Sheets`を選択し`select`ボタンを押してください。
![グライド　スプシ選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/6382932d-8937-f043-63de-a63054db0d90.png)



するとある程度`Glide`側でそれっぽく作成してくれます。こちらは`必要発注数`のプレビュー画面のレイアウトです。先ほどの`Google Sheets`と`Glide`全体の入力が同じであれば似たような画面構成で作成できるかと思います。
![グライド全体.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/c098b6f5-3c31-d024-cdb3-f50bf66c03b5.png)


画面上側の`Data`ボタンを押すと引用した`Google Sheets`の入力画面に移動しますので、右側のプラスボタンを押して画像のような入力をすると、先ほどのプレビュー画面で入力したものが自動計算されます。
![グライド　データ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/262c65f9-7f72-224f-541a-ac4d0e734849.png)


商品名をクリックし、左下のコンポーネント一覧を画像にようにするとこのようにスマホからデータを入力し、先ほどの自動計算でリアルタイムに数字が変更されます。
![グライド　商品中身.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/a4c49829-786f-0a3d-ff8b-360be575549d.png)


:::note info
事前に`Google Sheets`側で画像をセルに挿入し設定したのですが、`Glide`でははじめに画像が表示されなかったので、こちらのプレビュー画面の際に画像を一つずつアップロードしました。`Google Sheets`側で画像を挿入ではなく、サイトから引用したURLを貼り付けなどにすると一発でうまくいくかもしれません。
:::

オプションを選択すると`Group by`の項目にカテゴリを選択すると、カテゴリごとに仕切られます。`SEARCH`のチェックボックスをオンにするとプレビュー画面の上部に検索窓が表示されます。必要発注数ではオンにしましたが、邪魔であればオフにしてください。
![発注オプション.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/dfd9fac3-c7d7-48a8-4efc-554fe3464ebe.png)

#### <font color="Blue">②アナログなチェックリストの解決</font>
続いて2つめのプレビュー画面のレイアウトです。
![確認　全体.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/3b6769f9-59f4-f020-cf5d-5c92bc718d59.png)


提出確認リストの`Data`の`確認リスト入力`がこちらです。
![確認　入力2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/610fc3e8-1023-9547-1a11-10e87cecceb9.png)


こちらが`Data`の`確認リスト出力`です。
![確認　出力2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/a83dc393-4837-7468-9c04-6e509983f4b2.png)


リストの中の確認事項をクリックした後に、画像のようにコンポーネントを入力ください。
![確認　途中.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/0470ce90-e5ea-36d0-1ea1-aeb512f3a0e1.png)


従業員さんの名前をクリックしたあとは画像のようにコンポーネントを入力ください。こちらは回答のコンポーネントです。
![確認　回答.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/4b9a5d5c-168d-d5a7-8fb5-6d2f8c9b2dbc.png)

こちらが確認日のコンポーネントです。
![確認　確認日.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/35ff25f6-b81d-7c31-ac59-661606a2bfa0.png)

:::note info
入力と出力のシートに分けたのは運用方法としてどなたかが確認し終わって、完了の回答を入力した際に、シートが一つだと佐藤さん一人の確認しか行えないためです。例えば佐藤さんがすべて完了にした後に、鈴木さんがすべて完了にするとデータが上書きされ鈴木さんがすべて完了したことしかわからず、佐藤さんが完了したかを`Google Sheets`上で確認できなくなるためです。はじめはこちらがいまいち理解できずつまづきました。`Google Sheets`のSourceの項目をどこから引用するのかと、Write toの項目をどこから引用するのかがポイントだと思います。
:::

#### <font color="Green">③広告品の価格変更の解決</font>
最後に3つめの課題解決です。画像のようにコンポーネントを入力ください。
![変更　全体.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/d7872ca3-8588-576b-5828-74736b06bfe8.png)


こちらが`Data`の入力`Google Sheets`です。
![価格　入力データ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/63410bbf-f06a-dcda-888d-75f16511d903.png)


こちらは`Data`の出力`Google Sheets`です。
![価格　出力データ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/65d04144-9af6-403c-2269-bbcda06a3b57.png)



レイアウトに戻ってリストのどれかをクリックした後のコンポーネントがこちらです。
![変更　名前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/c8602c75-9ab4-8a36-137a-3c50e6115e81.png)


従業員さんの名前のどなたかをクリックした後の回答コンポーネントがこちらです。
![変更　回答.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/8210785f-212b-5a66-44a1-cf1ab68096fb.png)


:::note info
`OPTION`の`Required`にチェックを入れると入力項目が必須入力に変更できます。
:::

こちらは確認日のコンポーネントです。
![変更　確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/b459dcba-2f24-d539-1341-a8930bbcf7ad.png)


## 直感的につくれちゃう！
今回はじめて`Glide`を使用して制作物を作ってみましたが、リアルタイムでプレビュー画面を見つつ、`Google Sheets`の中身も自動修正できるのは変更点が確認しやすく、感覚的に作れた部分が大きかったように感じました。パソコンで作成した`Google Sheets`をスマホ側で項目を追加できる点も便利です。業務で悩んでいたこともこちらであれば実戦的に解決に結びつけられると感じました。内容を変えれば応用もきき、拡張性もあると思えます。

## 試しに使ってもらった周囲の方々の反応！
以前部内の方々に業務改善を行なおうと思っているとは全体にはやんわり伝えており、その一環として今回こんなものを作ってみたんだけど、どうかな？？と何人かに試しに使ってもらうことに！

##### 1人目：部内全体の業務をほぼ把握してくれているBさん
「倉庫の在庫数も把握できると便利だね！」と言われましたが、そのあとに「でも直接見に行ったほうがサイズ感もわかるし早いかー」と言われました。たしかに画像ではサイズ感がわかりづらく、実際に棚に何個置けるかは実サイズを見てみないと分かりづらいかもしれないが、`Glide`を使えば改善はできそう。

##### 2人目：情報確認がこまめなDさん
「すごーい！こんなことできるの！？それならお客さんの承りの進捗管理とかにも使えるかもね！誰がどこまで作業しているのかもわかりやすくなるし！」とのこと。確かに一覧でまとまっていれば、まだ商品を引き取りに来店されていないお客さまがわかりやすくなり、こちらからご連絡する頻度を上げられるかもしれない。承り以外の進捗管理にも転用するような使い方ができるかもと思いました。

##### 3人目：ほか部署のコミュ力の塊のEさん
ほかの部署ですが、関連性の高い近くの部署の方の反応も伺ってみることに。「すごい！画期的ですね！」と言ってもらえてなかなかうれしく思えました。ただ「高齢の方が多い部署だから、はじめのとっかかりをわかりやすく伝えられるといいね！」とのアドバイスも。使い方は便利ではありますが、仕事もどんどん新しいことを覚えるということが日頃からあり、システムが変わるたびに従業員からは不満の声が出がちではあります。はじめから拒否反応が起きないように便利さを推しつつ、操作の簡単さを伝えて浸透させていこうと思いました。

一部登場人物はほかの記事でも登場していますので、良ければぜひ見ていってください！:arrow_down:

**前回の記事**

https://qiita.com/kotarou02/items/6477b649bc6c17de1cb6

**ほかの記事**

https://note.com/y_tadamura/n/nc5470c9f5b6f


## 参考にさせていただいた記事

「tomowkr」さまの記事です。大変参考にさせていただきました！

https://qiita.com/tomowkrh/items/1b2a2211c75712eff202