メインコンテンツにスキップ

割り勘計算アプリ

グループの一部の人だけで分担する支出にも対応した割り勘アプリで、キーを入力するたびにリアルタイムで再計算されます。結果はリンク、テキストの要約、画像で共有でき、アカウントやバックエンドは必要ありません。

Lovable
·0件のリミックス

こんな用途におすすめ

  • グループ旅行の費用を管理する友人同士
  • 均等でない割り勘での共有費用の管理
  • 食事会や週末旅行のあとの精算
  • 毎月の家賃や光熱費の分担

主なポイント

  • リアルタイム再計算
  • 支出ごとの除外設定
  • 送金回数が最少の精算
  • 共有リンクによるスナップショット
  • 複数の通貨表記
  • テキストと画像でのエクスポート

技術スタック

ライブラリ

  • shadcn/ui
  • DnD Kit
  • Rive
  • TanStack
  • React Flow
  • Recharts
  • Framer Motion

デプロイ

  • Lovable
  • GitHub

このテンプレートについて

この割り勘アプリは、グループの一部のメンバーだけで分け合った支出にも対応します。メンバーを追加し、各自が支払った金額を記録しましょう。支出ごとに名前チップをタップすれば、その支出を分担しなかった人を除外できます。精算結果は入力するたびに再計算されます。

各支出の負担者設定は精算計算に反映されます。精算には送金回数を最小にするアルゴリズムが使われ、入力のたびに更新されます。レイアウトは1画面構成で、左側に支払者カード、右側にリアルタイムで更新される精算パネルが並びます。スプレッドシートの数式や手計算は必要ありません。

このテンプレートは1画面で構成されています。割り勘の名前と通貨セレクターを配置した固定トップバー、インライン編集と負担者チップを備えたメンバー・支出の列、アニメーション付きの統計タイルと必要な支払いの一覧を表示する精算パネル、そしてリンクのコピー、テキスト要約のコピー、PNGのダウンロード、サンプルの割り勘データへのリセットができる共有行です。

共有スプレッドシートでは、支出ごとに分担を計算するための数式を手作業で組む必要があります。Splitwiseのようなアプリは登録が必要ですが、この割り勘アプリはすべてブラウザ上で動作し、URLで共有できます。

おすすめの活用例

旅行グループの旅行後の精算

グループ旅行の後には、ホテル代はある人が払い、夕食代は別の人が負担し、美術館には行かなかった人もいる、ということがよくあります。この割り勘アプリなら、各支出を支払った人の下に記録し、その支出に関係のない人を除外できます。送金回数が最少になる送金リストで、各自が誰にいくら送ればよいかが正確にわかります。スプレッドシートの数式を使わなくても、数分のデータ入力で済みます。

ルームメイトの毎月の家賃・光熱費の分担

ルームメイト同士で家賃は均等に分け、光熱費は使用量に応じて分ける場合、1人あたりの単純平均では正しく計算できません。家賃、電気代、インターネット代、食費をそれぞれ別の行として作成し、月の途中で不在だった人をオフにしましょう。精算パネルは費用を追加するたびに合計を更新し続けるので、誰がいくら払うかで揉める前に問題が解消します。

注文が人によって異なるチームディナーの会計

3人が料理を注文し、ワインは2人だけで分けたチームディナーでは、品目ごとの細かな設定が必要です。全員で分ける料理の合計額と、飲んだ2人で分けるワインの合計額を追加しましょう。各自の負担額がその場で再計算されるので、翌日に支払いを催促することなく、その場で精算を済ませられます。

幹事のためのイベント費用管理

誕生日パーティーや週末のお出かけを計画するときは、飾り付け、料理、会場費、そして主役が払うべきではないプレゼント代を管理する必要があります。各費用を支払った人の下に記録し、誕生日の人のチップをタップしてプレゼント代から除外したら、精算リンクを共有して参加者全員が自分の残高を確認できるようにしましょう。このリンク1つで、「いくら払えばいい?」というメッセージのやり取りが不要になります。

はじめ方

1. テンプレートをリミックスする

「リミックス」をクリックして、このテンプレートを自分のLovableワークスペースにコピーします。支払者カード、負担者チップ、精算パネル、共有行を備えた1画面の割り勘アプリ一式が手に入ります。Alice、Ben、Jillのサンプルの割り勘データがすぐに読み込まれるので、何も変更しないうちから除外機能を試せます。

2. ブランドをカスタマイズする

トップバーを開き、アプリ名とアイコンをプロジェクトやグループのイメージに合わせて変更します。スタイル設定でメインのアクセントカラーを調整し、ブランドのビジュアルに合わせましょう。通貨セレクターはすでに9種類の通貨に対応しているので、グループでよく使う通貨を選んでください。

3. コンテンツを追加する

サンプルの割り勘データを消去するか、「リセット」をクリックして一から始めます。グループの各メンバーの名前を入力してEnterキーを押すと、その人の支払者カードが作成されます。各カードに支出行を追加し、好きな形式で金額を入力します(30,4も$20も正しく読み取られます)。特定の費用から誰かを除外するには、負担者チップをタップします。精算パネルは入力に合わせて更新されます。

4. ツールを連携する

このテンプレートはバックエンドなしで、すべてブラウザ上で動作します。複数のデバイスからアクセスしたい場合はSupabaseを接続してデータを永続保存したり、直接支払いを受け付けたい場合はStripeを追加したりして拡張できます。ほとんどのグループにとっては、URLにデータを埋め込んだリンクとテキスト要約のエクスポートで十分です。

5. 公開する

Lovableの「共有」ボタンを使って、割り勘アプリを公開URLに公開します。そのリンクをグループに送りましょう。各メンバーがリンクを開くと精算結果が表示され、自分がいくら払えばよいかが正確にわかります。各リンクはコピーした時点の割り勘データのスナップショットなので、共有した後も自分のコピーを編集し続けられます。

まとめ

このテンプレートは、グループで費用を分担し、支出ごとに誰が何を負担するかを細かく設定したい人に向いています。一部の人だけで分ける支出にも対応し、入力のたびに再計算する、実際に使える割り勘アプリが手に入ります。さらに、できるだけ少ない送金回数でグループの精算を完了できます。3人の食事代でも、さまざまな支出が数十件ある12人の旅行でも、同じように活躍します。

まずはテンプレートをリミックスし、グループの実際の金額を入力してみましょう。サンプルの割り勘データを使えば、除外機能と精算アルゴリズムの動きを1分もかからずに確認できるので、自分のデータを追加する前に計算が正しいか検証できます。その後は、共有リンクを公開したり、グループチャット用にテキスト要約をエクスポートしたり、精算結果の画像をダウンロードしたりできます。最初の編集から共有用の精算リンクの作成まで、1時間もかからずに完了できます。

機能・できること

  • 支出ごとの負担者チップ

    支出ごとに各メンバーの参加をオン・オフで切り替えられます。一部の人だけで分担する支出には琥珀色のドットが付くため、最終的な精算で見落としがありません。

  • キー入力ごとの再計算

    残高、合計、送金額が1文字入力するたびに更新されます。「計算」ボタンもページの再読み込みも不要で、結果を待つ必要もありません。

  • 送金回数を最少にするアルゴリズム

    最も多く借りている人と最も多く貸している人から順に組み合わせることで支払い回数を最小限に抑え、端数処理も自動で行います。

  • URLエンコードによる明細共有

    明細全体がクエリ文字列にエンコードされるため、コピーしたリンクからメンバー、支出、負担者の設定をワンクリックですべて復元できます。

  • ヨーロッパ式の数値表記に対応

    30,4や1.234,56のように金額を入力すると、最後のカンマまたはドットを小数点として読み取ります。表記形式を手動で切り替える必要はありません。

  • 元に戻せるメンバー削除

    支払った人とその人の支出をすべて一度に削除できます。トーストに表示される「元に戻す」ボタンで、負担者の設定も含めてすべて復元できます。

  • 精算結果の画像エクスポート

    ブラウザのCanvas APIを使って、精算パネルをPNGとしてダウンロードできます。リンクがなくても、どのグループチャットでも結果を共有できます。

  • 9種類の通貨記号

    USD、EUR、GBP、JPY、AUD、CAD、INR、SGD、AEDを切り替えられます。すべての金額が選んだ記号ですぐに表示し直されます。

  • 操作できるサンプル明細

    初回アクセス時には、一部の人だけで分担する支出を含むドライブ旅行のサンプルが入力済みの状態で読み込まれるため、何か入力する前にツールの動きを確認できます。

関連テンプレート

AIムードボードキャンバス画像とテキストメモをドラッグ&ドロップで配置
Lovableスライドコードで動くプレゼンビルダー
Lovable InsightsGoverned metrics, self-serve dashboards