Q.AIでロゴやアイコンが現在使用してよいものかを判別できるって本当？

A.本当です！

今回、「現在使用されていないロゴやアイコン」が、誤って販促物に掲載されていないかを手持ちのスマートフォンを用いて、簡単に確認ができるAIチェッカーを作りました。

今回作成したもの

作成の背景

私は、とある小売業の本社で販促やプロモーションを担当しています。そこでほぼ毎日実施している業務の１つが、販促物のチェックです。
本社で作成するチラシやバナーに加え、支社で作成した特定のエリア向けの各種販促物についても、随時確認をしています。
この確認作業において、現在最大の課題となっているのが
「紙面やバナーに使用されているアイコンが現在使用してよいものかを判別する」というものです。

具体的に言えば、サービスの改廃やアイコンの刷新、使用契約等で、「少し前までは使われていたが、現在使ってはダメ」というものが販促物に載っていれば、削除または差し替えをするという、
万一見逃してしまったら、クリティカルな状態が発生する重要な業務なのです！

このチェックは全ての販促物制作で実施しており、ほぼ毎日行っているのですが、判別すべきロゴやアイコンの数が多く、全員が完璧な判別ができていない現状があります。
そのため、判別がほぼ完璧できるベテランメンバーが全て最終チェックを行うことになるなど、一部のメンバーへの負荷が大きくなっていることが、今回AIによるロゴ判別ツールを作るきっかけとなりました。

アイコンの使用判別で抱える本社と支社の現状と共通課題

これから、現状の本社と支社のそれぞれの現状と共通課題を洗い出していきます。

本社

現状
・販促担当者全員で回覧をするが、主に担当業務のものを中心にチェックをしている。
・販促担当者の全員が、全てのアイコンの使用可否判断をできるわけではない。

支社

現状
・都度アイコンの使用について、支社の販促担当者へ情報連携をしているが、五月雨式の連絡のため、使用基準の全てを確認できるツールが無い。
・支社の販促担当者の全員が、全てのアイコンの使用可否判断をできるわけではない。

ここから導き出せる共通課題は、
・確認作業が属人的になっており、人事異動が発生すると判断基準を失う可能性がある。
・使用基準を確認できるようなツールが現状ない。
という2点で、さらに業務では紙とWEBの双方に携わるため、どちらの媒体でも判別ができるツールである必要があります。

このような本社・支社の共通課題を解決するものとして、「Teachable Machine」という自身で機械学習モデルを作成できるツールを用いて、解決に向けて取り組みました。

使用したツール

・Teachable Machine
・Node-Red
・LINE Developers

①Teachable Machine

独自の機械学習のモデルが簡単に作成できてしまうGoogle社が提供している「Teachable Machine」を用いました。

Teachable Machineの実施の流れ
1.判別の基準となる写真を様々な角度から画像サンプルを撮影
2.トレーニングを実施
3.プレビューで確認

このたった3工程で、機械学習のモデルが自由に作れてしまいます！

私は現在使用してよいアイコンと、使用してはいけないアイコンを区別するために「使用してよいもの」と「使用不可のもの」と２つの名称に分けて、それぞれサンプル画像を登録していきました。

ここでの急所
☆各画像撮影枚数が増えれば増えるほど、判別の精度が高まります！
目安として1画像につき100枚程度撮影すると、精度が安定します。
最後にモデルをエクスポートした際に発行されるURLは後ほど使用しますので、必ずコピーして保存をしておくことが重要です！

②Node-Red

プログラミングスキルが無くても、手軽に始められるブラウザで動くプログラミング環境がこの「Node-Red」となります。
今回はFlowForgeを利用し、Node-REDのフローを作成していきました。

Node-REDフロー図

ここで示されているフロー図を分解し、設定の方法を説明していきます。

[post]/linebot(http in ノード)

ネットワークのカテゴリから「http in」をドラッグ&ドロップし、
ノードをダブルクリック。
右クリック後に表示されるメソッドには「POST」を、URLには「/linebot」を入力してください。

LINEメッセージ(function ノード)

機能のカテゴリーから「function」をドラッグ&ドロップし、
ノードをダブルクリック。
コード欄に赤枠内のコードをそのまま入力してください。

http request ノード

ネットワークカテゴリーにある「http request」をドラッグ&ドロップし、ノードをダブルクリック。
URLに「https://api-data.line.me/v2/bot/message/{{{messageID}}}/content」
種別は「Bearer認証」、トークンにはLINE Developersで設定した「チャネルアクセストークン」を入力してください。
最後に出力形式は「バイナリバッファ」を忘れずに選択することを忘れないでください！

Teachable Machine ノード

分析カテゴリにある「Teachable Machine」をドラッグ&ドロップし、ノードをダブルクリック。
URLには「Teachable Machine」で作成した独自モデルのURLを貼り付けて、最後に忘れずにimageに必ずチェックをいれてください。

template ノード

機能カテゴリにある「template」をドラッグ&ドロップし、ノードをダブルクリック。
プロパティには「msg.payload」、そしてテンプレートには「結果は「{{payload.0.class}}」でした。」という文言を入力をしました。
このテンプレートの文言が、LINEのトークに戻ってくるものになります。

Reply Message ノード

LINEカテゴリにある「Reply Message」をドラッグ&ドロップし、ノードをダブルクリック。
SecretとAccess TokenにはLINE Developersで設定したものを入力。
またReply Messageの枠に記入した文言は、リプライとして利用者へ返信されます。
今回は、ロゴやアイコンを確認いただいたお礼を返しています。

完成

上記の手順をおこなった後、Node-REDのフローをスタートさせると起動するはずでした。

Teachable Machineまではデバッグをつないでも大きな問題は発生していなように見え、実際にノードの下に判定された画像と結果が返ってきたのは確認ができました。

TemplateとReply Messageの設定の再確認や、自宅の通信環境があまり良くないことも原因かと考え、安定した通信環境で再度作成の取り組んだものの、途中で必ず接続が切れてしまい動作しませんでした。
また新しいシートでのNode-REDのフロー作成でも変化が無かったため、
Makeを使用した方法で動作するか、トライをしています。

最後に

現在はかなり前から所属している従業員でないとわからないような、ロゴやアイコンの見分けについても、Teachable Machineに機械学習をさせることで、容易に判別できることがわかりました。

私は現在小売業に従事をしていますが、LINE Botを用いれば店頭の販促物でもロゴやアイコンのチェックをして、旧バージョンの販促物がついたままになっていないかの確認ができたりして、非常に拡がりのあるツールであると感じています。

絶対にこのLINE Botを完成させます。