Momi Yao

詳しい話はストーリへ！ 【課題】 タロット占いの結果を継続的に記録‧振り返ることができるサービスが少ないと感じ、自身の体験をもとに、 「占いを日記のように記録‧管理できるサービス」を企画しました。 【取り組み】 企画‧UI/UX設計からフロントエンド開発まで、一貫して担当しました。 ● React、Firebase Authentication、Firestoreを用いて、ユーザー認証‧データ保存機能を備えたWeb アプリケーションを開発 ● EventListenerを活用し、トップページに視差スクロールをイメージしたインタラクティブなアニメー ションを独自実装 ● HTML Drag and Drop APIを用いて、ユーザーがタロットカードを自由に配置し、オリジナルのスプ レッドを作成‧保存して占える機能を独自実装 ● 外部ライブラリに依存せず、カルーセルやカレンダーなどのUIコンポーネントを独自実装 ● OpenAI APIとUnsplash APIを連携し、コンテンツ生成や画像取得機能を実装 ● Tailwind CSSを用いてUIを構築 ● データ読み込み時にはSkeleton UIを導入し、待ち時間の体感を軽減 ● いいね‧コメント機能にはOptimistic Updateを採用し、ユーザー操作に対して即時にUIへ反映され るレスポンシブな操作体験を実現 ● 将来的な機能追加を考慮し、再利用性‧保守性を意識したコンポーネント設計を実施 【成果】 サービスの企画、UI/UX設計、フロントエンド開発、API連携、データベース設計までを一人で担当し、アイデ アを実際に動作するWebサービスとして完成させました。 特に、Drag & Dropによるカスタムスプレッド作成、インタラクティブなアニメーション、カレンダー、カ ルーセルなどのUIを自ら実装することで、Reactを用いた状態管理や複雑なユーザー操作の実装経験を積みま した。また、Skeleton UIやOptimistic Updateを導入し、機能の実装だけでなく、ユーザーが快適に操作でき るUI/UXの改善にも取り組みました。