P2HACKS2023 アピールシート

プロダクト名

Spoon

コンセプト

毎日をひんやり保存

対象ユーザ

10代〜20代前半の可愛いものが好きな女性

利用の流れ

1. アプリを開いて, アイスにしたい景色を撮影する.
2. 写真から抽出された３色のアイスができあがる.
3. GPT-3.5 Turboによって, 色から連想される名前が付けられる.
4. 履歴画面から過去の写真やアイス, 生成された名前と日付をながめて楽しむ.

推しポイント

• 世界観を重視した統一されたデザイン・アニメーション.
• GPT-3.5 Turboによって人間には考えられない面白い名前が生まれる.
• 画像抽出は選ばれた12色からアイスとしてきれいな3色を選定するアルゴリズム.

スクリーンショット

開発体制

役割分担

• コーディング

  • 奥村 将也
  • 加納 源基

• デザイン

  • 三浦 夢叶
  • 山田 莉緒

開発における工夫した点

デプロイ先をVercelにした都合上, 別リポジトリで開発を進めています. 開発の途中経過はdiawel/spoonを参照してください.

• プロジェクトマネジメント面

  • GitHub IssuesによるIssue管理

    • developにマージする前には必ずレビューをするように徹底した.
    • 実装以外のタスクもまとめてバックログ的に活用することで, 少人数チーム内での見通しをよくした.

  • 進捗共有・日報チャンネルによる進捗管理.

    • 全体で「今日やったこと」, 「明日やること」を共有することでタスクの明確化やタスクの進行状況の共有を行った.

  • 毎日23時の定例会の開催

    • 定例会を開き, 議事録を作成しながらIssueeやAsigneeの確認をした.
    • コミュニケーションの中で, 必要な機能やタスクの洗い出しなどができた.

• 技術面

  • デザインへの注力

    • 「使いたい！」と思ってもらえるアプリにするため, Figmaを使用してチーム間でフィードバックをしながら制作した.
    • かわいい世界観を実現するため, アニメーションやアイスクリームのデザインに力を入れた.

  • UIベースでのディレクトリ構成

    • app/にはルーティングのためのファイルのみを配置し, 実際のページはlayouts/に配置した.
    • ページを構成する要素ベースでディレクトリを構成することで保守性とコンポーネントの再利用性を高めた.
    • スタイリングはNext.jsのデフォルトであること, モジュールごとの分割がディレクトリ構成に適していることの2点からCSS Modulesを採用した.

  • 手にとって遊んでもらうための複数デバイス対応

    • Next.jsで実装しPWAとすることで, 短期間でもAndroid・iOSの両方に対応した.
    • スマートフォン向けアプリでありながら, PCでもスマートフォンのモック上で利用可能にした.

  • 最新技術の活用

    • 新しい技術であるServer Actionsを利用した.
    • フロントエンドを軸としながらも, 一部バックエンドでの処理が必要な部分で, エンドポイントの実装コストを削減した.

開発技術

利用したプログラミング言語

• TypeScript

利用したフレームワーク・ライブラリ

• Next.js
• CSS Modules (スタイリング手法)
• Dexie.js (IndexedDB)
• OpenAI API

その他開発に使用したツール・サービス

• Vercel
• Figma
• Adobe Illustlator
• Procreate