【開発記 第4回】買い物中に「迷わせない」ためのUI設計。AI判定を直感的に伝えるUXの極意
「よし、AIの判定精度は上がった。次はどう見せるか？」
アプリを開発する上で、技術と同じくらい重要なのがUI/UXです。特に『Glu-Suppo』は、スーパーの店頭という「慌ただしい場所」で使われるアプリ。ユーザーが立ち止まってじっくり画面を読むことはありません。
第4回では、買い物中のストレスを最小限にし、「かざすだけ」の体験を支えるデザインのこだわりについて解説します。
1. Google Stitchを活用した「クリーン」で「直感的」なUI
Glu-SuppoのクリーンなUIは、Googleが提供するデザインツール**「Stitch」**を活用して生まれました。
- 素早いプロトタイピング: Stitchを使うことで、コードを書く前にUIのイメージを素早く作成し、ユーザー体験を視覚的に検証できました。これにより、開発の初期段階から「本当にユーザーが使いやすいか」という視点を忘れずにデザインを進めることができました。
- Google Material Designとの親和性: Google製品であるStitchは、Material Designの原則に基づいたコンポーネントを簡単に扱えます。これにより、Androidユーザーにとって馴染み深く、直感的に操作できるデザインを効率的に実現できました。
2. 1秒で状況を伝える「信号機」カラー
スーパーの棚の前で、ユーザーが最も知りたいのは「詳細な理由」の前に、まず**「食べていいのかどうか」**です。
- 直感的な色使い: 判定結果を「安全（緑）」「注意（オレンジ）」「危険（赤）」の3色で画面全体に反映させました。
- 視覚的なヒエラルキー: 判定ステータスを一番大きく表示し、AIによる詳細なサマリーはその下に配置。まずは色で安心感を与え、気になった人だけが理由を読める構成にしています。
3. バーコード/OCRを自動切り替え！「かざすだけ」を極めるアニメーション
Glu-Suppoの最大の特長である「カメラをかざすだけ」の体験を、さらに直感的にするために、内部では2つのスキャンモードが動いています。
- 自動切り替えロジック: カメラが捉えた映像をリアルタイムで解析し、バーコードを認識すればバーコードリーダーモードに、**文字領域（原材料名）**を認識すればOCRモードに、アプリが自動で切り替わります。
- ユーザーへの視覚的フィードバック: この自動切り替えは、単に内部でロジックが動くだけではありません。カメラ画面上に表示される「スキャン枠」が、バーコードの際には細い線になり、OCRの際には広い四角の枠に変化するアニメーションを追加しました。
- これにより、ユーザーは「今、アプリが何を認識しようとしているか」を一目で理解でき、操作の迷いをなくしています。
- シームレスな体験: ユーザーはモードを意識することなく、ただ商品をかざすだけで最適なスキャンが行われます。この「思考させない」UXは、忙しい買い物中にこそ真価を発揮します。
4. 「カメラ」と「判定結果」をシームレスに繋ぐ
「スキャンする」から「結果を見る」までの流れで、画面遷移によるストレスを感じさせない工夫をしました。
- ハーフモーダルの活用: Jetpack Composeの
ModalBottomSheetやカスタムのハーフモーダルを使い、カメラ映像を背景に残したまま判定結果を表示します。 - 「探している感」を出すアニメーション: 解析中に表示されるキラキラしたエフェクトや進捗バー。これらは単なる飾りではなく、「AIがいま一生懸命調べていますよ」という状況を伝えることで、数秒の待ち時間を「期待感」に変える役割を持っています。
5. PermissionRequestのUXを最適化する
Androidアプリ開発で避けられないのが「カメラ権限」の取得です。
- なぜ権限が必要か伝える: 起動していきなり権限ダイアログを出すのではなく、「原材料をスキャンするためにカメラを使用します」という説明を挟んでからリクエストを出すようにしました。
- Jetpack Composeでの実装:
Accompanistなどのライブラリを活用し、権限が拒否された場合のフォローアップ画面（設定画面への誘導）も、アプリの世界観を壊さないクリーンなデザインで統一しました。
まとめ：UIは「AIとユーザーの通訳」
AIがいかに高度な判定をしても、それがユーザーに伝わらなければ意味がありません。 「情報の引き算」を徹底し、買い物という日常の動作に溶け込むデザイン、そしてGoogle Stitchで磨き上げた直感的な操作性とアニメーションによるスマートな自動切り替えが、Glu-Suppoの使い心地に繋がっていると信じています。
さて、いよいよ連載も終盤。次回、最終回は**「ストア公開編」**。 Google Play Consoleとの格闘、Android 15の最新仕様への対応、そしてリリースして初めて見えてきた景色についてお話しします。どうぞお楽しみに！