Zenn
💭

【設計思想】割り勘計算アプリ「わりまる」の開発で学んだ、ユーザー体験を重視した設計のポイント

に公開
React
TypeScript
デザイン
UX
idea

CoverImage

はじめに

こんにちは、ぐみと申します。花見やタコパなど、持ち寄りパーティーをよく主催する中で、支払い計算の煩わしさを感じていました。特に、複数人が支払った場合の精算計算が面倒で、楽しい会話の途中で計算に時間を取られてしまうことが多かったんです。

今回は、そんな経験から生まれた 割り勘計算 WEB サイト「わりまる」 の開発を通じて学んだ、ユーザー体験を重視した設計のポイントについて解説します。

開発の背景と目的

アプリ名の由来と設計思想

ロゴ

「わりまる」という名前には、2 つの意味が込められています：

  • 「わり」は「割り勘」から
  • 「まる」は「支払いが丸く収まる」という願いから

この名前には、以下のような設計思想が反映されています：

  1. シンプルさの追求

    • 複雑な計算を自動化
    • 直感的な操作感
    • 必要最小限の機能

  2. ユーザー体験の重視

    • 楽しい会話を妨げない
    • スムーズな入力操作
    • 視覚的な分かりやすさ

開発環境と効率化

Cursor を活用した開発

「わりまる」の開発では、AI を活用した開発環境「Cursor」を採用しました。これにより、以下のような効率化を実現できました：

  1. コーディングの効率化

    • AI によるコード補完
    • 実装パターンの提案
    • バグの早期発見

  2. 設計の質の向上

    • AI との対話による設計の検証
    • ベストプラクティスの提案
    • コードレビューの効率化

  3. 学習の促進

    • 新しい技術の理解促進
    • 実装方法の提案
    • 問題解決のサポート

開発効率の具体的な改善

Cursor の活用により、以下のような具体的な改善が実現できました：

  1. 実装時間の短縮

    • 定型コードの自動生成
    • エラーハンドリングの提案

  2. コード品質の向上

    • 一貫性のある実装
    • パフォーマンスの最適化

  3. 開発体験の改善

    • ストレスフリーなコーディング
    • 効率的なデバッグ
    • スムーズなリファクタリング

解決したい課題と改善プロセス

1. 課題の特定

私自身、みんなで楽しむ行事での支払い計算に悩まされることが多くありました：

  • 計算が面倒で、楽しい会話に集中できない
  • 精算の計算で時間を取られてしまう
  • 持ち寄り行事での計算が複雑
  • 誰から誰にいくら送金すればいいのかわからない

2. 改善のアプローチ

これらの課題に対して、以下のような改善アプローチを採用しました：

  1. ユーザー視点での機能設計

    • シンプルモードと詳細モードの使い分け
    • キーボード操作の最適化
    • 視覚的なフィードバック

  2. 技術的な工夫

    • リアルタイムな計算処理
    • レスポンシブなデザイン
    • 高品質な画像生成

設計のポイント

1. ユーザー体験を重視した入力設計

シンプルモードと詳細モードの設計思想

「わりまる」では、ユーザーの入力スタイルに合わせて 2 つのモードを用意しています：

1. シンプルモード

  • 設計の意図：素早い入力に特化
  • ユースケース：花見での飲み物代など、単純な計算
  • メリット：最小限の操作で結果を出せる

シンプルモードの画面

2. 詳細モード

  • 設計の意図：内訳の記録に特化
  • ユースケース：食材費、飲み物、デザートなど項目別の入力
  • メリット：後から確認できる詳細な記録

詳細モードの画面

キー操作の設計思想

入力フィールドの設計では、以下のような思想に基づいて実装を行いました：

  1. 効率性の追求

    • キーボードから手を離さない操作
    • 直感的なフォーカス移動
    • 自動保存によるデータ保護

  2. ユーザビリティの向上

    • 数値入力の自動フォーマット
    • スマートフォンでの最適化
    • エラー防止の仕組み

2. 支払い状況の視覚化設計

設計思想

支払い状況の視覚化では、以下のような設計思想に基づいて実装を行いました：

  1. 直感的な理解

    • グラフによる視覚化
    • 色による情報の区別
    • 平均金額の明確な表示

  2. 情報の整理

    • 参加者ごとの支払い状況
    • 精算が必要な金額の把握
    • 一目で分かる差分表示

支払い状況の視覚化

改善プロセス

  1. 初期設計

    • シンプルな棒グラフ
    • 数値のみの表示
    • 基本的な色分け

  2. 改善点

    • 平均金額のライン追加
    • 色による情報の強化

3. 精算結果の共有機能設計

設計思想

精算結果の共有機能では、以下のような設計思想に基づいて実装を行いました：

  1. シンプルな共有

    • ワンクリックでの保存
    • 見やすいレイアウト
    • 分かりやすいファイル名

  2. 品質の追求

    • 高解像度での生成
    • クリーンなデザイン

  3. PR 要素の活用

    • ロゴの追加によるブランド認知
    • URL の表示によるアクセス促進
    • シェア時の自然な宣伝効果

精算結果の共有画面

改善プロセス

  1. 初期設計

    • 基本的なスクリーンショット
    • シンプルなレイアウト
    • 最小限の情報表示

  2. 改善点

    • ロゴの追加
    • レイアウトの最適化
    • エラーハンドリングの強化

  3. 技術的な課題と解決

    • 課題：html2canvas での VLS（Variable Length String）対応の問題
    • 解決：html2canvas Pro への移行

  4. 最終的な実装

    • 高品質な画像生成
    • ユーザーフレンドリーな操作
    • エラー時の適切なフィードバック
    • PR 要素の自然な配置

まとめ

「わりまる」の開発を通じて、以下のような設計のポイントを学びました：

  1. ユーザー体験の重要性

    • 直感的な操作性
    • 視覚的な分かりやすさ

  2. 改善プロセスの大切さ

    • 課題の明確な特定
    • 段階的な改善

  3. 技術的な工夫

    • 効率的な実装
    • 品質の追求

  4. 開発環境の選択

    • AI を活用した効率化
    • 継続的な学習の促進
    • 品質と速度の両立

これらの経験は、今後のプロジェクトでも活かせる貴重な学びとなりました。特に、AI を活用した開発環境の選択は、開発効率と品質の両方を向上させる重要な要素であることを実感しました。

→ わりまるを試す

最後まで読んでいただき、ありがとうございました！
もし気に入っていただけましたら、ぜひシェアをお願いします。

また、ご意見・ご要望などございましたら、お気軽にコメントください。

📚 関連記事：

Discussion