概要
例えば「ガソリン代はこの人が払った」「食材はまるまるさんが買ってきてくれた」みたいな、みんなで集まる時の“ちょっと複雑な割り勘”もサクッと計算できるアプリです！
直感的な操作で誰でもすぐ使えるシンプル設計。スマホからもサクサク使えて、幹事さんもラクラク！
主な機能
- • 参加者の追加・削除
- • 支払い項目の登録
- • 自動割り勘計算
- • 精算結果の表示
- • レシート風プリント機能
技術スタック
- • React
- • TypeScript
- • Tailwind CSS
- • Vite
- • GitHub Pages (デプロイ)
担当
企画・設計
ユーザー体験の設計
機能要件の策定
UI/UXデザイン
ワイヤーフレーム作成
ビジュアルデザイン
フロントエンド開発
React実装
レスポンシブ対応
デプロイ・運用
GitHub Pagesでの公開
パフォーマンス最適化
企画・実装プロジェクトとして、企画から運用まで全工程を一人で担当しました。
詳細
開発背景
友人との飲み会や旅行で、毎回割り勘計算に時間がかかることに課題を感じていました。 既存のアプリは機能が複雑すぎたり、使いづらかったりして、結局電卓で計算することが多い状況でした。
「誰でも直感的に使える、シンプルな割り勘アプリ」をコンセプトに開発をスタートしました。
技術的な工夫
React Hooks
React HooksのuseStateとuseEffectを効果的に活用することで、ロジックの再利用性と保守性を向上。 コンポーネントベースの状態管理で、スムーズなユーザー体験を実現しました。
レスポンシブデザイン
Tailwind CSSを活用し、スマートフォンファーストのレスポンシブデザインを実装。 特にタッチ操作での使いやすさを重視しています。
パフォーマンス最適化
Viteによる高速な開発環境とビルド最適化。GitHub Pagesでの安定した配信により、 どこからでも快適にアクセスできます。