Kaleido Scan

プロダクト名：Kaleido Scan

由来： 絶えず変化していく売り上げ情報を捉え続けるスキャナー。KaleidoScope（「万華鏡」「絶えず変化するもの」）から命名。

コンセプト

商品との出会いにエンタメ性を足す カメラで商品をスキャンするだけで、売上データに基づいた「オーラ」が出現し、新しい商品との出会いをゲーム感覚で促進する。

プロダクトを作る目的

いつも同じ商品を買ってしまうユーザーに、新たな商品との出会いを生む機会を作る。

ターゲット

• いつも同じものを買いがちな人
• 年代は広い（モバイル端末に馴染みがある人全員）

AWS構成図

実際のスキャン画面

• スキャン画面

• ローディング画面
• スキャン結果画面
• 商品詳細画面

技術活用ポイント

テスト駆動開発(TDD)による開発

テストファイルを先に書き、それをパスするようにコードを書いていくので、コードの品質を担保することができます！

またコミット前に、lefthookを使用し、lint/testが自動で走るようにしているので、mainが壊れない状態を保つことができます！

IaCによるコード管理

インフラ環境をコードで設定、管理する手法IaC（Infrastructure as Code）にチャレンジしました！

AI活用

SKILLとsub-agentの活用

今回、AIではClaude codeを採用しました！ SKILLとsub-agentを定義し、専門的な知識を持たせ、プロジェクト開発により磨きをかけました！

• 作成したSKILL
  • clean-code-principles：YAGNI・DRY・SOLIDを自動適用させる
  • design-guide：フロントエンドスタイリングを行う際のデザインルールを定義 (タイポグラフィ、配色、レイアウトなど)
• 作成したsub-agent
  • code-reviewer：コードレビュー担当
  • test-runner：テスト実行担当

Git Worktreesによる並列開発

Git Worktreesで複数ブランチを同時展開しながらClaude Codeで並列作業する方法にも挑戦しました！ 今回では、複数のバックエンドAPIを並列開発によって同時に作ってみたりました！ the ハッカーみたいで楽しい！！！！！

チーム開発での工夫

コミュニケーション

コミュニケーションでは言いたいことをなんでも言い合える環境作りを重視しました！

具体的な取り組み

• DiscordとGithubを連携して通知が来るようにした
• タスクを積極的に見せてレビューしてもらう
• 個人のチャンネルを作ってWorking out loud促進

Working out loudとは、自分がやっていること、考えていること、次やろうとしているとしていること... などの思考過程を自分のチャンネルで呟きまくりながら、開発を進めていく手法です。自分の思考の整理にもなるし、チームメンバーが何をやっているかすぐに把握できるので、取り入れました！！

↓ 実際の画像

開発前のドキュメント整備

すぐに開発には入らず、まずはきちんと話し合いの時間を設け、ターゲット・コンセプトの認識をしっかり合わせました。

作るものが決まった後、まずはドキュメントを整えました！ 要件・API仕様・DB設計をMarkdownで書いてみんなで確認してから着手したので、メンバー間の認識齟齬がほぼなく、とてもスムーズに開発できました！

実際のドキュメント

苦労したこと

AIの応答速度と画像認識精度向上

ラベル範囲を返すことで精度が上がるのかを調べたり.... モデルを変えてみたり....

商品が映えるようなオーラのフロント実装

オーラ大きくしたり、ちっさくしたり、周期変えたり、また商品が見えるように中心を透過しました〜