Teachablemachine の画像判別でPOPが使用可能かどうかを判定するアプリを作ってみた
私は小売業の衣料品売り場で商品を企画・管理する職場で働いています。最近知った、Teachablemachine というもので画像を見分ける機能を、自分で簡単に扱えることを知りました。どこか使えそうなものがないかな・・と考えていたらありました！！商品を陳列する際に取り付けるPOP。現場を見ていると時々誤ったものがついていることがあります。画像で瞬時にわかれば常に正しいものが使われるようにできるはず と思い、POP判定アプリを作ってみました。
出来上がったもの
カメラの前にPOPを掲げるだけ
画像を判別して 〇使用可能です ×期限終了しています を表示します
わざと画像を荒くしています
POPってなに？
Point of purchase という言葉の略で、売り場でお客さまに商品の魅力・価値を伝えるツールです。従業員不在時でもお客さまに情報を伝えるものなので、正しい情報が載っていることは必須条件です。
POPには使用期限がある＜POPを変更する主な例＞
1.同じシリーズでもシーズンによって商品の内容（素材・量）が変わる
食品等では同じシリーズでも商品のパッケージを変えることで商品が違うことをわかりやすくしているのでお客さまも理解して商品を買うことができますが
衣料品の場合、全体のイメージを統一するため口紙と呼ばれるパッケージにあたる部分の大枠は変えず、POPで表現することでお客さまに内容が変わったことを伝えることがあります。
2.シーズンで導入する商品のカラー・柄が変わる
POPに今存在しないカラー・柄を掲載しているとお客さまはその商品があると思い、売り場で探されてしまうこともあります。
2.商品の値段が変わっている
素材・量とともに、値段も変更になることがあります。気づかずそのままにしているとレジでトラブルになってしまいます。
3.POPのモデルさんの契約期間が過ぎている
同じブランドでもシーズンによってモデルさんが変わる時は売り場のPOPも同時に変更が必要です
徹底が難しい
商品を準備する側としては、商品と一緒に新しいPOPを準備をし、「これを付けてね」と連絡をしています。が、なかなか徹底できていません。店舗からの「新商品ちゃんと並べましたよ」の写真報告をみてガッカリすることもしばしば。
担当がこれをチェックして、ＮＧ例・ＯＫ例を再度店舗に発信、修正するよう促しています。
使っていいPOPダメなPOPの区別がつかないからこうなるのかな。
毎回連絡文を見なくてもパっとわかる方法があれば、担当者も安心して古いPOPは処分できるし、売り場を巡回している上の職位の人でも、すぐにわかって、「これおかしいよー」とひとと声をかけすぐに修正してもらえるのではないかと考えました。
作成手順
まずTeachablemachine を開きます。
を開きます。
”使ってみる”をタップ 新しいプロジェクトの画像プロジェクトを選択
次に画像を登録します
Class1 の名前を表示したい名称に変え ウェブカメラをクリック
長押しして画像を登録。自動で連写してくれるので角度を変えたりしながら100枚程度登録
CLASSは同じ名称では登録できないので別の名称を付けます
モデルをトレーニングして、モデルのエクスポートを選択
共有可能なリンクをコピー（🐧とします）
Teachablemachine はここまでです。
次はcodepenを開きます
左上のPenをクリックすると新規のシートが開きます。
HTML/CSS/JSに下記内容をコピー＆ペースト
今回はテンプレートを使いました。
HTML の＜title> にアプリのタイトルを記入
JS の const modelURL = の箇所に先ほどのリンク🐧を貼り付け
See the Pen POP判定 by saka107 (@saka107) on CodePen.
Saveします
これでスマホでも使えます。ブラウザ検索でcodepenを探し、制作した時のアドレスでログインすれば、自分の作ったものが表示されるのですぐに使えます。アプリもありますが、ブラウザからであればインストール制限のあるスマホでもつかえちゃいます。
完成して
職場の人にも試してもらう
👩へえー、こんな形になったんだ（作る前に相談してました）すごいね。すぐ判定が出るならわかりやすい。現場の人でもすぐ使えるね。
👦これは便利ですね。使用期限書いてあるものがあるけど、字が小さすぎて読めないっていう現場の声はあったんですよ。画像でわかったら見間違いようがないですからね。
🧑POP変更の時に担当者不在だったりすると、判断しづらいときもあるから画像判断できるのは助かる。
との声をいただきました。
さらに現場でもチャレンジ
今回、実物が手元になく、自分でデータを印刷したものでモデル判定を作ったので実物POPで使えるのか・・という不安がありました。が、現場のPOPでも判定することができました。画像サンプル登録の際、縦横を引き延ばしたりしないでオリジナルの比率で印刷したものであれば、判定するものの大きさが変わっても問題ないようです。
・実物POPが手元にないのに画像サンプルを多数用意しなくてはならない
というのが当初の難点と思っていましたが、データ印刷したものでも大丈夫であれば、連絡発信者に同時に登録してもらえばそこまで手間にはならないかな、という感覚でした。
今回、現場の方の声を集めることはできませんでしたが、実現可能性は高そうです。
はじめは売り場写真を集めてサンプルデータにしようとしましたが、社内で確認共有のために挙げられている写真はPOP画像が荒く判定できず、今回はPOPデータを印刷したものを使いました。
公開することで意見をもらってさらに自分の考えもまとまりました。TeachableMachineは、音声やポーズもあるので他にも面白いことができそうだなと思います。困りごと解決のために使える手段が増えたことを実感しました。
ここまでおつきあいいただきありがとうございました。