ゆかたのそら

https://github.com/prog8-fireworks/yukatanosora

GitHub

TypeScript

Svelte

浴衣を自由にデザインすることができるアプリ

haru

mi--

nobuaki

推しアイデア

生地の色や柄、帯、小物を組み合わせて、自由にカスタマイズ可能

作った背景

テーマ「夏休みだけ使うアプリ」から 「夏休みといえば花火大会!」→「自分好みの浴衣を着たい!」 という思いから、流行のデザインに左右されず、自分の好みや個性を反映できる体験を実現しようとしました。

推し技術

canvas操作でpng画像への柄や色をつけた

プロジェクト詳細

ゆかたのそら

このアプリについて

浴衣を自由にデザインすることができるアプリ 生地の色や柄、帯、小物を組み合わせて、自由にカスタマイズ可能 image

浴衣試着AI

googleのVirtual Try-On APIを使用 https://github.com/prog8-fireworks/yukata-try-on (デプロイはしてません) image

技術スタック

  • Svelte/SvelteKit
  • TypeScript
  • Cloudflare workers

AI活用

  • copilotで開発
  • Boltでプロトタイプ生成

image

  • コードレビューにCodeRabbitを使用
    • サマリーを書いてくれるので、PRの説明書き不要
    • レビューする人もわかりやすい
    • 口調をカスタマイズ

image

  • 小物や各選択肢のアイコンをgeminiで画像生成

image image``` image

頑張ったこと

4人中3人がハッカソン初参加&チーム開発初。うち1人は開発自体初挑戦。 gitの操作やVScodeの操作も不慣れな状態だった。

そこから完成ページのUI実装、ボタン機能、編集ページのアイコンを表示した。使用したアイコンや小物の画像、桜の画像は全て生成AIで画像を生成させた。

実現できたらもっとよかったこと

・ログイン機能をつけ、他のユーザーのデザインも閲覧できたりリアクションできる機能をつける ・浴衣の形など、カスタマイズの幅をもっと広げる

haru

@haru