わりまるのスクリーンショット

わりまる

#Webアプリ開発 #企画・実装

飲み会や旅行の支払いを簡単に計算できるWebアプリ

概要

「わりまる」は、飲み会や旅行などのグループでの支払いを簡単に割り勘計算できるWebアプリケーションです。 従来の割り勘計算アプリが複雑すぎる、または機能が不足しているという課題を解決するために開発しました。

シンプルで直感的な操作性を重視し、誰でも迷わずに使えることを目標としています。 レスポンシブデザインで、スマートフォンからでも快適に利用できます。

主な機能

  • • 参加者の追加・削除
  • • 支払い項目の登録
  • • 自動割り勘計算
  • • 精算結果の表示
  • • レシート風プリント機能

技術スタック

  • • React
  • • TypeScript
  • • Tailwind CSS
  • • Vite
  • • GitHub Pages (デプロイ)

担当

企画・設計

ユーザー体験の設計
機能要件の策定

UI/UXデザイン

ワイヤーフレーム作成
ビジュアルデザイン

フロントエンド開発

React実装
レスポンシブ対応

デプロイ・運用

GitHub Pagesでの公開
パフォーマンス最適化

企画・実装プロジェクトとして、企画から運用まで全工程を一人で担当しました。

詳細

開発背景

友人との飲み会や旅行で、毎回割り勘計算に時間がかかることに課題を感じていました。 既存のアプリは機能が複雑すぎたり、使いづらかったりして、結局電卓で計算することが多い状況でした。

「誰でも直感的に使える、シンプルな割り勘アプリ」をコンセプトに開発をスタートしました。

技術的な工夫

React Hooks

React HooksのuseStateとuseEffectを効果的に活用することで、ロジックの再利用性と保守性を向上。 コンポーネントベースの状態管理で、スムーズなユーザー体験を実現しました。

レスポンシブデザイン

Tailwind CSSを活用し、スマートフォンファーストのレスポンシブデザインを実装。 特にタッチ操作での使いやすさを重視しています。

パフォーマンス最適化

Viteによる高速な開発環境とビルド最適化。GitHub Pagesでの安定した配信により、 どこからでも快適にアクセスできます。