(前編) 運営している家計簿サービスに新機能を搭載して大幅リニューアルしました

::: note info
**本記事の後編が公開されました！ ぜひ、こちらもご覧ください！**
[(後編) 運営している家計簿サービスに新機能を搭載して大幅リニューアルしました
](https://qiita.com/nisyuu/items/a0f36837235ae01695b2)
:::

2022年8月1日に、以前から開発を進めている家計簿サービスをリニューアルしました。
サービス名も変わり、新機能も追加してのリニューアルです。

新サービス名は**SUMUMA**です。読み方は**スムマ**です。
[SUMUMA](https://sumuma.com/lp/general)

![スクリーンショット 2022-08-07 9.44.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243199/f8e2648d-43ce-b5af-664e-0f55302835a2.png)

# リニューアル経緯
リニューアル前は、**DAIFUKU**というサービスで運営していました。Qiitaにも何度か記事を投稿しているので、詳細はこちらをご覧ください。

[Djangoで家計簿サービスを開発してリリースするまで 【個人開発】](https://qiita.com/nisyuu/items/5473e22a5faee86fd5e5)
[2年半前に開発したアプリのUIを刷新しました](https://qiita.com/nisyuu/items/f50b47796998fe6a8a4b)

今回のリニューアルは、サイト名や機能自体を中心に刷新しています。運営をしている中で実際に使った人の要望や、スローガンとして掲げている**ただの家計簿で終わらせない、家計簿をもっと賢く美しく**を追求するべく、リニューアルを実施しました。

## 家計簿としてグレードアップ

### デザイン
DAIFUKUはUI/UXにこだわりを持っており、常にストレスフリーを重視しています。2021年にはこれまでのUI/UXを全面的に見直し、サイトデザインを大幅に変更してきました。この変更では[Semantic UI](https://semantic-ui.com/)から[Tailwind CSS](https://tailwindcss.jp/)へ移行し、より柔軟なUI設計ができるようになったのですが、完全には移行できていないままでした。
そのため、見た目の違和感を完全になくし、UIを最大限によくすることを目的にTailwind CSSへの完全移行を実施しました。

### 機能
機能は従来から豊富にあったのですが、まだまだ家計簿の枠を出ない家計簿でした。また、登録者からの要望を聞くことがあり、追加したい機能も増えてきました。例えば、会員登録時に収支のカテゴリーを自動で作ってほしいという要望を何度かいただくことがありました。たしかに、食費や水道光熱費、交通費などは一般的な家計簿でよく使われます。既存の機能も数年前からほとんど変わっていなかったのですが、構想だけはあったので開発することにしました。追加した機能はいくつかある構想の一部ですが、徐々に開発を進めていく予定です。


### サービス名
リニューアル前の**DAIFUKU**という名前は、江戸・明治の商人の使っていた帳簿が大福帳だったことと、大福という言葉自体が縁起の良い言葉であったためです。
最初は**daifuku**でドメインを取得しようと考えていたのですが、人気があるワードなのかほとんど使用されている状況でした。妥協して**daihuku.xyz**でドメインを取得したのですが、やはりサービス名とドメイン名が一致していないことに違和感をずっと感じていました。また、**ただの家計簿で終わらせない、家計簿をもっと賢く美しく**を広い視野でさらに追求していくという思いを込め、サービス名自体を変更することに舵を切りました。

# 新機能
今回のリニューアルでは、主にこちらの機能を追加しました。

- 買い物リスト
    - 支出同時登録機能付き
- 自動カテゴリー追加
- CSVインポート機能
- 自動ログイン
- 新LP

## 買い物リスト

買っておきたいものをTODOにできる機能を追加しました。買い物リストを作成しておくことで、購入が必要なものを記録しておくことができるため買い忘れ防止にもなります。

![スクリーンショット 2022-08-06 18.53.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243199/ab1c6717-c0d4-f336-6c2e-5745ced09827.png)

さらに、買い物をTODO化するだけでなく購入ステータスを完了にすると同時に支出へ自動登録することもできるため、支出登録の手間を省くことができます。

![スクリーンショット 2022-08-06 18.53.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243199/aac3f197-37f5-b9a0-5412-993c7c1b9c07.png)

上画像が買い物リストの編集画面なのですが、「更新時に支出へ同時登録する」にチェックを入れて更新すると支出へ登録されます。

## 自動カテゴリー追加
実際に利用しているユーザーからの要望で、会員登録後に収支のカテゴリーが既に追加されていてほしいという意見をいただきました。何人かのユーザーから同じ意見をいただいていたのと、他の家計簿でもデフォルトでカテゴリーが入っているアプリを知っていたので、入れるべきだなと思い追加しました。
今までは会員登録後にカテゴリーを手動で追加しなければ収支登録ができなかったのですが、今回の機能追加で登録直後から収支を登録することができ、さらにストレスフリーになっています。

## CSVインポート機能
DAIFUKUにはインポート機能とエクスポート機能もあったのですが、Tailwind CSSへの移行時にデザイン状の都合からエクスポート機能だけになっていました。インポート機能がなければ、他の家計簿からSUMUMAへの移行がしにくくなります。
ユーザーにはもっと選択肢があっていいという考えの元、CSVインポート機能を実装しました。

## 自動ログイン
多くのサイトでは、ログイン認証済みの場合、ログインページにアクセスすると自動でログイン後のページに遷移します。しかし、自動遷移がないとログインページ　→　ログイン認証　→　ログイン後のページといったようにワンアクション増えることになります。たまにこういったサイトを見かけますが、少々面倒に感じることが多いのではないでしょうか。面倒さはUXを損ねます。DAIFUKUは自動遷移機能がなかったためログインに関してUXが悪かったのですが、SUMUMAではログイン認証済みであればログインページにアクセスすると自動でダッシュボードへ遷移します。

## 新LP
SUMUMAの良さをもっと周知したく、新しくLPを作りました。本記事のトップでリンクを記載しておりますが、こちらにも記載しておきます:bow_tone2:
[SUMUMA](https://sumuma.com/lp/general)

サイトのトップページは元々あったのですが、メッセージや機能をもう少し伝わるようにしたいと思いLPを作成しました。実際にSUMUMAが目指しているところや、利用できる豊富な機能を盛り込んでいます。

# 使える機能
おさらいがてら、SUMUMAで利用できる機能を紹介します。

- 収支登録
- 収支検索
- 直近登録履歴
    - 謝った日付で収支を登録した場合でも、登録順に表示できるのですぐに見つけられます
- CSVインポート・エクスポート
- 買い物リスト
    - 支出同時登録
- 収支分析
    - 様々なグラフによる分析ができます
- 収支計画
    - 月々の支出をカテゴリーごとに計画できます
    - その月に使った支出の合計と計画した支出をグラフで視覚的に把握することができます
- お問い合わせ
    - ダッシュボード内にお問い合わせページを設けているので、お気軽にバグの報告や機能追加をご要望いただけます

# 今後の計画
家計簿サービスをリリースしてから、3年ほど経ちました。構想だけはしているものの開発しきれていない機能がたくさんあります。スマホアプリ化もしたいと考えているほか、OCR機能なんかもできたらなとも考えているので乞うご期待ください。

Twitterにてお知らせを随時告知しているので、ぜひフォローをよろしくお願いします！
[SUMUMA 公式Twitterアカウント](https://twitter.com/sumumacom)

後日、本記事の後編を投稿予定ですのでお楽しみに:star::sparkles::sparkles::sparkles:
後編は技術的なことを書いていこうと思います。