README.md

Let’s Pics

製品概要

背景(製品開発のきっかけ、課題等）

• きっかけ・課題
  • 英語を勉強したいという気持ちはちょくちょく芽生える（留学生対応をする機会があったが、全然話せなかったので話せるようになりたい！）
  • 大学に入り、TOEICを取らなければいけないが英語学習のやる気が出なかった
  • 中学、高校と単語テストがあったが、いやいや強制的にやらされて今はほとんど覚えていない
  • アプリで単語勉強してたが、いつの間にかやらなくなっていた
• 原因
  • 単調な学習方法がモチベーションを下げる
  • 現実とあまり関わりのない内容で必要性が薄れる
• ターゲット
  • 能動的な英語勉強が続かない人
    • 小学生〜大学生まで幅広く
  • 「英語を勉強したい！」「勉強しないとな〜」という考えが芽生え始めた人
  • 英語勉強で挫折経験がある人

製品説明（具体的な製品の説明）

必ず「デモ動画のリンク」及び「作品情報」が含まれているようにしてください（最低限機能が分かる程度のもので構いません。）

現実×英語学習×Tech

英単語 写真撮影 競争アプリ 「Let’s Pics」

このアプリはランダムな時間にアプリから通知が来て、お題に沿った写真を撮り、高いスコアを目指すゲーム型英語学習アプリです。

お題には英単語が出題され、ユーザーはそれに関連した写真を撮影してアップロードします。 その写真をAIが文章化し、その単語間の類似度や写真を挙げるまでの速度からスコアが算出されます。 つまり、お題に近い写真を取れば高得点を狙うことができます。

単語に関連した写真を撮るという現実のアクションと共に英単語を学習することで、長期記憶で単語の暗記を図っています。

特長

1. 自分で撮影した写真が英単語に変身

ユーザーは自分が撮影した写真を使って、身の回りにあるものから英語を学ぶことができます。

お題の単語に該当する写真を撮ることで、英単語と現実を結びつけることができます。

2. 競争する要素を取り入れた学習

競争するという対戦要素を加える事で、英語学習を一人では続けづらい方でも他の人よりも類似度の高い写真を撮るという意欲を掻き立たせることでモチベーションを維持したまま学ぶことができます。

また競争の要素があることで、単調な学習からの脱却ができます。

3. 毎日配信される「本日のお題」

ユーザーには毎日お題が通知されるため，生活の中で英語に触れる時間が増え，継続的な英語学習が可能になります。

解決出来ること

単調な学習方法による英語学習のモチベーション低下を改善し，楽しく続けられる学習体験を提供します。

現実と結びついた英語学習を通じて語彙の向上を図ります。

今後の展望

• お題の難易度変更
  • 単語の難しさ
  • 撮影の難しさ
• レベルアップ制度
  • ログインボーナスやランキング順位によって経験値を付与
    • ログイン・毎日の利用に付加価値を与えることを目的としている
  • 経験値をもとにステータスをレベルアップ
    • ステータス
      • 速さのスコアを伸ばす
      • 類似度のスコアを伸ばす
      • などなど
• レート機能
  • ランキング等によってレートが変動
    • 新規ユーザでもランキングに載ることができ、新規・古参関係なくアプリを楽しむことが可能
• チュートリアル
  • 撮影→アップロード→ランキングの確認
  • ポイントの付与→ステータスのレベルアップ
• モバイル実装

注力したこと（こだわり等）

• 英語学習の継続・モチベーションについて徹底追求したアイデア
  • 課題やターゲットから機能を抽出しているので、すべての機能に裏付けがある
• ランキング画面のデザイン（CSS）
  • Figmaでデザインを作成し、それを基にアプリ化することで整ったUI
• セルフホストで自分たちが環境を作って実行
  • 類似度出すためのAPIは外部APIではなくモデルを使用
  • オブジェクトストレージサーバ（MIniO）やアプリケーションもオンプレサーバで実行
  • 自立したサービスを提供できる

開発技術

事前開発範囲

• Nextjs,ts,prisma,biome,firebaseの環境構築
• #1

活用した技術

API・データ

• OpenAI API
  • 画像のキャプション生成
• WordNet
  • 英語の概念辞書
  • 単語間の意味的類似度計算に使用

フレームワーク・ライブラリ・モジュール

• Next.js
  • フロント・バックエンドのフレームワークとして使用
• TypeScript
  • フロントエンドのプログラミング言語として使用
• shadcn/ui
  • UIコンポーネントとして使用
• Biome
  • Next.jsのformatter, linterとして使用
• Cloudflare
  • アプリの本番環境の公開に使用
• Docker
  • 開発環境・本番環境でのアプリの動作のために使用
• Tailscale
  • 本番環境での操作のために使用
• Firebase Authentication
  • ログイン機能実装のために使用
• MIniO
  • 画像を保存するオブジェクトストレージとして使用
• PostgreSQL
  • お題、スコアなどの保存のDBとして使用
• Prisma
  • DB操作に使用
• FastAPI
  • 類似度を算出するためのサーバとして使用
• Figma
  • UI・UXデザイン作成の際にデザインツールとして使用
• draw.io
  • データモデリングのER図作成として使用

デバイス

• オンプレサーバでデプロイ

独自技術

• WordNetによる類似度計算のサーバー
• 類似度サーバとオブジェクトストレージサーバ（MIniO）を自分たちでホストするために、自前のオンプレサーバで本番環境を動作させ、独自ドメインでcloudflare tunnelを通して公開

ハッカソンで開発した独自機能・技術

• 独自で開発したものの内容をこちらに記載してください
• 特に力を入れた部分をファイルリンク、またはcommit_idを記載してください。