こんにちは、なつまるです

今回は、前回に引き続きアプリを作った話②をしていきます

 

それでは、さっそく(時間と手間をかけまくった)収支画面を紹介していきます

 

収入一覧(年月表示)

※テストデータを入れているため、口座名、金額はあくまでテキトウです

こちら大きい種類でいうと【給与・ボーナス】と【給付・手当】、【その他】に分かれており
それぞれの金額合計もグレーのカテゴリ名の右部分に表示しています

給与は前月よりどれくらい上がったのか?というモチベーションのため
前月比も表示してみました

その他の項目は当初予定していませんでしたが
売却したり、株主配当があったり、ご祝儀をいただいたり・・・とちょこちょこお金が増えることがあったため追加実装しました

手当に関しては、もうすぐ子育てに入るので
子育てファミリーに必要なものになっています👶
コロナ手当を入れようか迷いましたが、一回限りだと思うのでその時はその他で登録します
(意外とその他が便利)

画像はフリーのものの仕様になっており、商業利用OKかわからないですが
個人のアプリなのでいいでしょうということで拝借・・・
弊社CHEATのロゴは、従業員ということで多めに見てくれるでしょう。笑

 

ヘッダー右のカレンダーアイコンは、クリックするとモーダルが表示されます

 

モーダルはこんな感じ

表示タイプと表示する期間を選択できますが
今年1月から使い始めたため、2022年1月より前は選択できません
データもないし、別にいいかなと・・・(手抜き)

 

 

収入一覧(年表示)

続いて、年表示バージョンです

一覧部分は年月表示とほとんど一緒ですが、こっちはグラフつきの豪華画面です(?)
先ほども言いましたが、データが2021年以前がないため前年比が全額になっております。笑

グラフについて、初めは給与のみ会社ごとに分けようと思ったのですが
実装がめんどくさかったのと
一覧部で詳細金額が見れること、あと目に見えて夫婦間での給料格差が出そうなこと(笑)を
考慮した結果、【給与】でまとめることにしました

 

一覧部分ですが、アコーディオン表示になっており
月ごとの金額が一覧で見れます

給与の場合のみ、収入・控除・手取りの合計を表示し
さらにふるさと納税を促す親切仕様です。笑
(いつもふるさと納税の計算が迷うので・・・)

他の項目のアコーディオン内もほとんど同じになっています

 

 

収入編集画面

続いて、編集画面の紹介です

基本的にその他カテゴリー以外は、日付の変更は不可にしています
(データの重複を避けるため&バリデーションの実装から逃げるため。笑)

変更したい場合は、右上のゴミ箱アイコンで削除→再登録という流れにしていますが
今のところ変更したい場合もなく、これでいいかなとなっています

5分ほどで作ったモーダル・・・笑

 

給与は手取りだけでなく、総支給額や控除総額なども管理したかったので
ちょっと他のカテゴリーとはUIが異なります

総支給額と控除金額を入力すると、自動で差引支給額が設定されるようにしています
(夫の要望。いい妻だなあ。)

 

金額部分においては、今後紹介する他の画面もふくめ
右寄せ&自動でカンマ区切り表示、数字以外の入力は削除にしています

 

 

新規作成画面

収入登録画面、まとめて紹介します

・・・と言っても、見たまんまですね
上のタブで切り替えが可能で、中身は編集画面とほとんど同じです

 

この画面のバリデーションがまあ、めんどくさく!

例えばすでに同月かつ同会社で給与が登録されている場合はエラー(2度も給料もらわないので)

給付で登録しようとして、何か未入力などでエラーがあればデフォルトで給付タブを表示したり

そしてDBのテーブルを分けたので、バリデーション通過後もデータを判別して保存先テーブルを分けて・・・と(これは自業自得)

どんだけ時間かけるねん!!!というくらいかけています

 

 

収入画面合わせての工数

デザイン:7人日
コーディング:10人日
設計など:10人日
実装:15人日

ざっくりですが、余裕で30人日超えてると思います
途中でやっぱり・・・と仕様変えたり、増やしたりしたことも大きいですが

このアプリで一番時間と手間(と愛情)をかけた画面になっています

 

 

まとめ

え?収支画面は?と思った方。
へへへ、まだ実装していません(^^)

やらなきゃな~と思いながらも、デザインを考えることさえ放置・・・
そのうちやるんで、また後日紹介にmm

 

それと、デザインわからないなりにもこだわったのがフォントです
特に数字に関して、等幅で見やすいフリーフォントをめっちゃくちゃ探してこれに落ち着いてます

PCではいけるけどスマホでは等幅じゃない・・・とかあって
フォント探しだけで3日ほどかけました

 

次回はフッターメニュー真ん中の【総資産】画面になります

興味のある人は、ぜひ次回も見てくださいね

 

それでは

まとめ

SHARE

TEXT BY なつまる

RECOMMENDED POSTこの記事もおすすめ!