はじめに
最近、Vibe Coding系の開発ツールに触れる機会が増えています。
その中で今回は、2026/05/30に東京で開催された TRAE Hackathon に、友人2名とともに3名チームで参加し、TRAEを活用した短時間でのMVP開発に挑戦しました。
TRAE Hackathonは、限られた時間の中でアイデアをプロトタイプに落とし込み、最終的にデモとして発表するハッカソン形式のイベントです。
今回のTrackとしては、【Video Generation】、【AI Glasses】、【Productivity Enhancement（生産性向上）】 など、複数のテーマが用意されていました。
その中で私たちは、自身の普段の業務とも比較的近い Productivity Enhancement Track を選択しました。
今回開発したのは、アパレル店舗やECでの接客・提案支援を想定した AI試着アプリ です。
Hackathonの限られた時間の中ではありましたが、写真アップロード、体型情報入力、衣服アイテム選択、AI試着結果の生成までを一連のデモとして見せられる形まで構築し、最終的に 一等賞を受賞 することができました。
本記事では、今回のTRAE Hackathonでの開発体験をもとに、以下の観点で整理します。
- 課題設定とアイデアの背景
- MVPとして何を作ったのか
- Demo：実際の操作フロー
- 今後の拡張可能性
1. 課題設定とアイデアの背景
1-1. Productivity Enhancement Trackで考えたこと
今回私たちが選択したのは、Productivity Enhancement（生産性向上） のTrackです。
このTrackを選ぶにあたり、最初に意識したのは、単に「面白いAIアプリ」を作るのではなく、実際の業務や日常の作業の中で、どのような時間・手間・判断負荷を減らせるかという点でした。
私は普段、業務効率化や自動化に関わる機会が多いため、今回のHackathonでも、AIを使って人の作業をどのように支援できるかをテーマにしたいと考えました。
1-2. 着目した課題：試着イメージを短時間で伝える難しさ
今回着目したのは、アパレル店舗やECにおける 「試着イメージの提示」 です。
服を提案する場面では、商品そのものの写真だけでは、顧客が実際に着用したときのイメージを持ちにくいことがあります。特に、体型・雰囲気・姿勢・好みによって、同じ服でも印象は大きく変わります。
一方で、店舗スタッフやEC運営担当者が、顧客ごとに個別の着用イメージを用意するには手間がかかります。この部分にAIを活用できれば、接客や提案の生産性を高められるのではないかと考えました。
| 課題 | AIで支援できる可能性 |
|---|---|
| 商品写真だけでは着用イメージが伝わりにくい | 顧客に近い人物画像で試着イメージを生成する |
| 顧客ごとの提案に時間がかかる | 写真・体型情報・服を入力して短時間で結果を出す |
| ECでは試着体験を提供しにくい | Web上で疑似的な試着体験を提供する |
| 店舗スタッフの提案が属人的になりやすい | AIにより提案イメージ作成を補助する |
1-3. アイデア：AI試着アプリ
上記の課題をもとに、今回私たちは AI試着アプリ を作ることにしました。
アイデアとしては、ユーザーの写真や体型情報を入力し、衣服アイテムを選択すると、AIが試着イメージを生成するというものです。
想定した利用シーンは、以下のようなものです。
- アパレル店舗で、スタッフが顧客に複数のコーディネート案を素早く見せる
- ECサイトで、購入前に自分に近い着用イメージを確認する
- スタイリストが、提案前のラフイメージを短時間で作成する
- 社内の商品企画や販促資料作成で、着用イメージを簡易的に作成する
このように、今回のアイデアは単なる画像生成のデモではなく、接客・提案・販促業務における「イメージ作成の工数」を下げるためのツール として整理しました。
2. MVPとして何を作ったのか
2-1. 今回のMVPで目指したこと
Hackathonでは開発時間が限られているため、すべての機能を作り込むのではなく、まずは価値が伝わる最小限の体験を作ることを重視しました。
今回のMVPで目指したのは、ユーザーが写真や体型情報を入力し、衣服アイテムを選択すると、AIによって試着イメージが生成される、という一連の流れをデモとして見せられる状態にすることです。
特に意識したのは、デモを見た人が「実際の接客やECでも使えそう」とイメージできることです。
そのため、単にAIで画像を生成するだけではなく、ユーザーがどのような順番で操作し、どのタイミングで結果を確認するのかという体験設計も重視しました。
2-2. LookPilot StyleAIの全体像
今回私たちが開発したのは、LookPilot StyleAI というAI試着アプリです。
想定した利用シーンは、アパレル店舗やECにおいて、スタッフや運営担当者が顧客に対して複数の着用イメージを短時間で提示する場面です。
ユーザーの写真や体型情報をもとに、衣服アイテムを選択し、AIによって試着イメージを生成することで、接客・提案・販促におけるイメージ作成の工数を下げることを目指しました。
MVPとしては、以下のような流れを一通り体験できることを目標にしました。
1. 写真アップロード
↓
2. 体型情報の入力
↓
3. 衣服アイテムの選択
↓
4. AI試着画像の生成（ポーズ変更も可能）
↓
5. 生成結果のプレビュー
2-3. 技術構成
技術構成は、短時間でMVPを構築しやすいように、フロントエンドとバックエンドを分けたシンプルな構成にしました。
| 領域 | 技術 |
|---|---|
| Frontend | Next.js / React |
| Backend | FastAPI |
| UI | Tailwind CSS |
| 状態管理 | Zustand |
| AI推論 | Gemini（Nano Banana） |
| 画像保存 | Backend static storage |
3. Demo：実際の操作フロー
この章では、今回作成した LookPilot StyleAI のデモ画面を紹介します。
Hackathonの発表では、アプリの技術的な細部よりも、ユーザーがどのような流れでAI試着を体験できるのかが伝わることを重視しました。
3-1. ポータル画面
まず、アプリの入口としてポータル画面を用意しました。
ポータル画面の操作
この画面では、AI試着アプリのイメージが直感的に伝わるように、中央に大きくキャラクターを配置し、左下にはアプリの簡単な機能説明を表示しています。
また、左下の矢印ボタンをクリックすると、表示されているキャラクターが切り替わるアニメーションを用意しました。
ポータル画面で意識したのは、いきなり操作画面に入るのではなく、ユーザーに「これはどのようなアプリなのか」を短時間で理解してもらうことです。
右上には、日本語・英語・中国語の3言語を切り替えられる機能も配置しています。
Hackathonのような場では、参加者や審査員のバックグラウンドがさまざまであるため、多言語対応を意識した構成にしています。
右下の 「DISCOVER IT（体験する）」 をクリックすると、正式な操作画面であるワークベンチ画面に遷移します。
3-2. ワークベンチ画面の全体像
ポータル画面から遷移すると、AI試着の全体状況を確認できるワークベンチ画面に入ります。
ワークベンチ画面の全体像
ワークベンチ画面では、現在のアバター状態、クローゼットに登録されているアイテム数、スタイリスト提案への導線などを確認できるようにしました。
この画面から、まず 「アバター生成」 をクリックし、ユーザー自身の写真と体型情報をもとにデジタル人物を作成します。
3-3. アバター生成：写真と体型情報を入力する
アバター画面では、ユーザーの全身写真をアップロードし、身長・体重・肩幅・胸囲・ウエスト・ヒップなどの体型パラメータを入力します。
アバター生成画面
必要な情報を入力した後、「生成開始」 をクリックすると、数秒後にユーザー用のデジタル人物が生成されます。
生成結果は「現在のアバター」として保存され、後続のスタジオ画面で試着に利用できます。
3-4. クローゼット：衣服・アクセサリーを登録する
次に、クローゼット画面で試着に使う衣服やアクセサリーを登録します。
クローゼット画面
この画面では、商品画像をアップロードし、トップス・パンツ・スカート・アウター・アクセサリーなどのカテゴリを選択して、クローゼットに追加できるようにしました。
3-5. スタジオ：ポーズとアイテムを選んで試着する
最後に、スタジオ画面でポーズと試着アイテムを選択し、AI試着を実行します。
ポーズ変更
AI試着実現
スタジオ画面では、左側でポーズを選択し、下部でクローゼットに登録したアイテムを選びます。
中央にはポーズプレビューを表示し、右側にはAI試着結果のプレビュー領域を配置しました。
生成には一定の時間がかかるため、実際のアプリとして考える場合は、ローディング表示や進捗表示、失敗時の再実行導線も重要になります。
4. 今後の拡張可能性
今回のDemoでは、Hackathonの時間制約もあり、まずは「写真アップロード → アバター生成 → 衣服登録 → ポーズ選択 → AI試着」という一連の流れを見せることを優先しました。
一方で、このアイデアはDemoで終わるものではなく、店舗接客やEC、スタイリング提案の領域に広げることで、より実務に近い形で活用できる可能性があると感じました。
4-1. 店舗接客支援への応用
まず考えられるのは、アパレル店舗での接客支援です。
店舗では、スタッフが顧客の好みや体型、購入目的を聞きながら、複数の商品を提案する場面があります。このとき、AI試着アプリを使えば、実際に試着室に入る前に、いくつかのコーディネート案を短時間で見せることができます。
たとえば、以下のような使い方が考えられます。
- 顧客に複数のスタイル案をその場で提示する
- 色違い・サイズ違いのイメージを比較する
- スタッフの提案を画像として可視化する
- 試着前の候補絞り込みに使う
このように、AI試着は「試着そのものを置き換える」というより、接客時の提案や意思決定を補助するツールとして活用できると考えています。
4-2. ECでの購入前体験への応用
次に、ECサイトとの連携も考えられます。
ECでは、商品画像やモデル着用写真はあっても、購入者自身に近い着用イメージを確認することは難しい場合があります。
AI試着機能を商品ページに組み込めれば、購入前に「自分が着たらどう見えるか」をより具体的にイメージできるようになります。
これにより、購入前の不安を下げたり、サイズ・色・スタイル選びを支援したりできる可能性があります。
また、返品理由の一つである「イメージと違った」というギャップを減らす方向にもつながるかもしれません。
4-3. レコメンド・CRMとの連携
さらに発展させる場合は、単に試着画像を生成するだけでなく、レコメンドやCRMとの連携も考えられます。
| 拡張方向 | 内容 |
|---|---|
| 商品レコメンド | 体型・好み・購入履歴に応じて服を提案する |
| CRM連携 | 顧客属性や過去の購買情報をもとに提案を変える |
| スタイリング提案 | 天気・利用シーン・トレンドに応じてコーディネートを提案する |
| 多言語対応 | 訪日客や海外EC向けに複数言語で案内する |
特に、スタイリング提案まで含めると、AI試着アプリは単なる画像生成ツールではなく、顧客ごとに提案内容を組み立てる AIスタイリスト に近づいていきます。
おわりに
最後に、今回のHackathonにおけるDemo発表時の様子と、1等賞を受賞した際の写真を掲載します。
Demo発表時の写真
受賞した際の写真
今回のTRAE Hackathonを通じて、TRAEのようなAI開発ツールは、アイデアを短時間でMVPに変換するうえで非常に有効だと感じました。
一方で、AI Coding Agentに任せればすべてが完成するわけではありません。
課題設定、MVPのスコープ判断、デモで伝えるストーリー、生成結果の品質確認などは、人間側がしっかり考える必要があります。
今回開発したAI試着アプリは、Hackathon向けのDemoではありますが、店舗接客やECでの提案支援に応用できる可能性もあると感じました。
今後も、AIに任せる部分と人間が判断する部分を切り分けながら、実務に近い形でAI開発ツールの活用方法を検証していきたいと思います！
アクセンチュア株式会社に所属する社員有志による運営です。アクセンチュアの社員による様々な発信をまとめています。なお、投稿内容は社員個人の見解であり、所属する組織を代表するものではありません。
Discussion