AIモデルを使用した画像解析ツール
GeXeL UI/UX デザイン／一部フロントエンド開発
MISSIONAIモデルを使用した画像解析ツールのユーザビリティをさらに高めるために。
パンの断面画像から見る品質チェック、髪年齢の見える化など、「画像の数値化」を通して、化学業界、食品業界、医療業界など、さまざまな分野で活躍できるAIモデルを使用した画像解析ツール、GeXeL（ジクセル）。
その最先端の技術サービスをさらにパワーアップするために、「誰でも簡単に使えるようなユーザビリティにしていきたい」とご相談を頂きました。
「AIモデル画像解析」という複雑に聞こえる操作を、誰でも直感的に操作できるUI/UXデザインを実現することが、私たちANKH Systemsチームにとっても大きなチャレンジになりました。
SOLUTIONチームとして動いてコミュニケーションを大事にするのが鍵。
どのようなUI/UXデザインが良いのかと言う答えは、1つではありません。
そこでまず、サービス提供者側の視座から離れ、このサービスを利用する「契約者ユーザー」の視座で、「初見でも次の操作がすぐにわかるのか」、「どうすればスムーズに作業を進められるのか」、「どこにボタンがあれば、どのような操作を期待するのか」など、「想像」を重ね、徹底的にディスカッションをして仮説検証をすることに取り組みました。
もちろん、「ユーザー」といっても十人十色なので意見が違います。
だからこそ、しっかりディスカッションを重ね合ったことが、「最大公約数」を導くことにつながりました。
この最適解を導くために、クライアント様にもご参加いただき、定例会議を開きながら、サービス提供者側の想いや設計意図、そしてデザイナーからの提案、エンジニア目線での意見なども混ぜ合わせることを心がけました。
TECHNOLOGYReactとMUIでのフロントエンド開発
今回、UI/UXデザインだけではなく、それを踏まえたフロントエンド開発もあわせてご依頼いただくことになりました。
技術スタックとしては、Reactを採用しています。
また、これに加えて、Googleが開発したReact用のUIコンポーネントライブラリ「MUI（Material-UI）」も採用しています。
初期開発は弊社が行い、その後、クライアント様エンジニアに引き継ぐことを前提とした開発を行いました。
POINT直感的に「AIをイメージ出来る」デザインに。
配色に関して、株式会社KNiT様のコーポレートイメージを踏襲し、かつ、直感的に「AI」を連想するような、黒と青のミックスをベースカラーとして採用しました。
また、長時間操作するであろうコントロールパネルだからこそ、目に優しい、そして集中力が散漫にならないようなイメージを心がけてデザインしていきました。
ビジネスツールなので、あえて遊び心は付けすぎないよう、余計なアニメーションやアイコンをつけずに進めましたが、
最終的には、株式会社KNiT様Webサイトのトンマナに、AI：ニューラルネットワークのデザインをログイン画面に取り込んでみました。
これにより、「これからＡＩの世界に入っていくんだ」と言う期待感と楽しさを感じていただけることを目指しました。
FUTURE画像解析ツール、GeXeL（ジクセル）との連携アプリケーションも・・・？
今回はサービス本体のUI/UXデザインとフロントエンド開発を担当しましたが、今後はGeXeLと連携したアプリやシステム開発も出来ればと思っています。
例えば、商品管理システムと連携して、その商品の品質をGeXeLで取得した数値結果と共に管理していくことで品質管理につなげるとか、
応用用途はいろいろ広がっていくと考えています。
そんな未来に、私たちのソフトウェア／アプリケーション開発分野における技術ソリューション提供が、ユーザー企業様にお役に立てる未来につなげていきます。