スマホで簡単家計簿サービス「Receibo(レシーボ)」リリースのおしらせ & 制作裏話 #receibo

先日、P4Dハッカソンというプログラマとデザイナーがペアを組んで1日でWebサービスを作ってしまおう!という企画にて、@shu_0115さんが開発担当、私@ken_c_loがデザイン担当で、「Receibo(レシーボ)」というサービスを作りました。
Receibo
スマホで簡単家計簿サービス Receibo(レシーボ)

ちなみにP4Dハッカソンというイベントについての詳細と感想は別途こちらに書きましたので、よかったらこちらも合わせてご覧ください。
デザイナーとプログラマが組んで1日でWebサービスを作る、P4Dハッカソンに参加してきました - 納豆には卵を入れる派です。

Receibo(レシーボ)とは?

レシートを溜めずにつけられる家計簿 = レシーボ

…という名の通り、お買い物をしたその場でスマートフォンを取り出して、Twitterのつぶやき感覚で買ったものと金額を記録すると、毎日、毎月の出費の合計を出してくれるというシンプル設計のWebサービスです。収支計算や科目分けもないので、家計簿というよりは、お買い物ログといった方が近いイメージかもしれません。
receiboreceibo

収支計算や科目わけのあるきちんとした家計簿をつけたい人は、他にもよい家計簿サービスがたくさんあるのでそちらを使った方がよいと思うのですが、我々ズボラ人間にとっては、その家計簿自体がかなり荷が重い…というのを常々感じておりました。
財布に貯めたレシートを、毎日整理して科目わけして記録する…科目わけでカテゴライズに悩んだりとか、レシートを紛失したりとか、収支計算が合わなかった時点でやる気をなくしたりとか、あのレシートが財布にたまるのも嫌ですよねえ。財布が太るし何より紙を浪費し地球に優しくないではないですか!(まあ、我々がレシートをもらおうがもらうまいが、レシートは出て紙は消費されるのですが)
そういった、「家計簿が続かない」「レシートの管理が煩わしい!」というズボラさん達の悩みを解決するために、作ってみたのが、この「Receibo」です。

そんなわけで、ズボラな人でも本当に続くのか?実際につかってみた。

テスト公開の期間中に、実際にズボラな人代表として自分自身で毎日使ってみたので、その時のスクリーンショットを一部公開します。何買ったのかモロバレなんで割と恥ずかしいですが…ラーメンばっかり食ってるよね。うん。









いやー、割と負担なく使い続けられそうな感じがしました。レジ終わったあとの金額を記憶しておいて、iPhone出して打ち込む感じですね。5分以内くらいで記録しとけば、短期記憶の弱い鳥頭の私でも忘れないで記録できました。
今日いくらつかったのかの合計がリアルタイムでわかるので、今日は使いすぎたのでもう使わないでおこ…とかの指標にもなり、結構便利です。
「レシート結構です」っていうのは意外と言えないですねw言うタイミングをのがして、一応もらうものの、記録したら早めにゴミ箱に捨てる…という感じが多いですw

Receibo制作過程の裏話

前述のように、P4Dハッカソンというイベントで、@shu_0115さんとペアで作ったのですが、その制作時の裏話を書いてみます。主にデザイン側からみた視点です。

ネタ決定は前日の土曜日、Skypeで。10分で決定w

ハッカソンの一週間前くらいからペアがくじびきで決まってたのですが、あまり時間がなかったので、前日の土曜日お昼からSkypeで@shu_0115さんと打合せしました。
あまり考える時間が取れず、実は自分はノーアイデアで臨んだんですが(すいません。。)、@shu_0115さんが、「じゃあ、簡単な家計簿っぽいものはどうですか?」というアイデアを下さって、おおいいね!何より1日で作れそうだし、私、実用的なアプリが好き!と一瞬でそれに決定。
「簡単な家計簿」と聞いた時に、レジでその場でスマートフォンを出して買ったものと買った金額だけを記録するイメージを思いつきました。それを伝えると、じゃあスマートフォン専用サービスにしてしまおう(楽だし)ということで…これ決まるまでだいたい10分くらいでしょうか。恐るべき早さの意思決定スピードでしたw

Railsインストールしてる間にラフを描いて送る

Ruby on Railsを使うということで、私は初Railsだったので、こちらのフィヨルドさんのエントリを参考にRubyとRailsをインストール。その間の待ち時間に自分のイメージしてる画面のラフをざざっと描いて送りました。
IMG_5809IMG_5810

このままいけるかも」というお答えをもらい、ここで、大体のイメージが共有できました。

サービス名考えるのとデザインの下準備をしておく

サービス名が結構キモなので、これはお互い今日いっぱいで案を考えておいて、ハッカソン当日に決めようということになりました。
レシートをためない!」みたいなのがコンセプトワードとして頭の中にあったので、レシートを貯めない家計簿で、「レシーボ」という名前は割とすぐ思いついて、それ思いついた時点で考えるのやめてデザインの準備へ。
IMG_5961IMG_5960

名前を考えてた時のメモ。自分でもなんだかよくわからない…そしてきたない(ΦωΦ )俺レジって何w


レシートをためない家計簿ということで、「リアルなレシートの替わりにバーチャルなレシートがWeb上に記録される」というイメージで、デザインのモチーフにレシートを使おうと思いつき、少し下準備をしておきました。間に合うか、そして朝起きれるのかドキドキで当日を迎える…。
IMG_5818
IMG_5822

当日前の下準備をPhotoshopでしておいた。レシーボロゴ案はカタカナバージョンもあった。
@shu_0115さんの方では、前日に、Twitter認証を含むだいたいの設計をRailsで組んでherokuとGitHubに上げておくところまでやってくださってたようです。

ハッカソン当日、サービス名決定

一番の懸念事項だった朝ちゃんと起きれたので、もう半分くらいミッションコンプリート出来たような気持ちで恵比寿のハッカソン会場に赴き、@shu_0115さんと初顔合わせ。昨日考えた名前案を提案してみる。「レシートの要らない家計簿なんで…レシーボとかどうでしょうw」「じゃ、それでw」と40秒くらいで決まったので、コーディングに。

コーディングしてGitHub経由でhtmlを渡す

前日にRailsをインストールしたものの、デザインやコーディングだけでほぼ手一杯になってしまい、結局htmlを渡して組み込みをやっていただくことに…とほほすみません、、(ΦωΦ)そもそもあんまりコーディング速くないんですが、中途半端にRetinaディスプレイ対応したり、途中でめんどくさくなって中途半端に諦めたりして、なんか変なところに非効率に時間を使ってしまった感があります…。
作ったデザインはGitHub経由でPull Requestして渡しました。メインの入力画面や、月ごとの一覧の画面が仕上がったところで、ハッカソンはタイムアップ。続きは後日ブラッシュアップして正式リリースしよう、という流れに。

ハッカソン当日後からのブラッシュアップはGitHubのIssue経由で話し合いながら

当日終わってからちょこちょことブラッシュアップ。Railsのテンプレートを直接いじって修正などをしました。CakePHPと仕組みがよく似ているので、どこに何があるかなどはわかりやすかったです。
タスクはGitHubにIssueを立てて、そこで色々話し合いながら決めたり分担したりして、スムーズに進みました。人とこういう使い方をしたのは初めてなのですが、@shu_0115さんが率先してやってくださったので、色々勉強になりました。GitHubは複数人でのコラボにはホント便利ですね。この時実感。

デザインやコンセプト面でこだわった部分

(制作時間が無いことを逆手に取った)徹底したシンプルさと単機能

ハッカソン用のプロダクトなのでとにかく1日で完結できそうなもの、というところから出発した「シンプルな家計簿」という発想ですが、この「時間がない」という制限が、今回よい方向に作用したかもしれないと思っています。
もし普通に、時間をかけてきちんと家計簿サービスを作ろうというところからスタートしていたら、おそらく普通の「家計簿」のあるべき姿を想定し、色々機能を盛り込みたくなったと思います。
スマホだけじゃ勿体無いと思ったでしょうし、収支計算や科目も入れ、ソーシャル機能やレシートOCR機能…考えられる色んなアイデアを入れたくなったと思います。
その結果出来上がるのは、使いやすくはあるかもしれないけど、根本は割と従来の家計簿とかわらなく、私達ズボラな人には続かないような機能盛りだくさんのものだったかもしれない。
今回、ハッカソンで時間がないという縛りがあったことで、「家計簿をつけるために最低限必要なこと」というところに自然と焦点がゆき、その結果、機能を絞り込みシンプルにすることで新しいニーズを発見することができたように思います。
一見、有りがちと思えるアイデアや用途でも、何か特殊な縛りや制限がある中で発想すると、何か新しい発見ができるのかもしれないと思いました。ハッカソンでなくても、こういう思考実験を習慣的にやってみるのもおもしろいかもしれないですね。

毎日愛着を持って使ってもらえるように、現実のアイテムをモチーフに「Webサイト」っぽくないデザインに。

紙の部分は前述のようにレシート、金額追加の場面は計算機をイメージして、いずれも現実のアイテムをモチーフとして活用しました。もろWebサイトっぽいデザインだと、どうしても何かめんどくさい「作業」をイメージしてしまいがちです。毎日のように習慣的に使うものなので、何かお気に入りのグッズやアイテムを使ってるような感覚で、楽しんで使ってもらえるように、リアルなアイテム感を出すことに重点を置きました。

説明的な文言をなるべく入れずに、配置やメタファーだけで直感的に操作できるように工夫。

前述の「Webサイト」っぽくなさ、にも関連しますが、例えば金額の表示でも、合計:◯◯円の「合計:」を書かずに、送信ボタンでも「追加する」や「送信する」などの説明的な文言をなるべく書かずに、配置やメタファーだけで直感的に意味や使い方をわかってもらえるように工夫をし、文字が少なくシンプルな画面デザインを心がけました。
ただでさえスマートフォンは画面が小さいので、そこに説明的な文字がぎゅうぎゅうつまってると、それだけで重苦しく、使う気が萎えてしまう…画面の中から一文字でも減らせるようにというところには結構こだわりました。

これからやってみたいこと

細かいことは色々まだ調整せねばならん部分があるのですが、大きなところで。

Ajaxにする

ホーム画面にアイコン保存したあと、アイコンをタップして立ち上げると、アドレスバーを消して全画面表示になるように、アプリっぽい見た目になるように作っているのですが、画面遷移するとSafariのウィンドウが新たに立ち上がってしまって、ユーザーさん側から見るとちょっとバグっぽく見えてイケてない(ΦωΦ) Safariがそういう仕様のようで、解決するには画面遷移させずAjaxにするしかないようです。おそらく@shu_0115さんがやってくれるかと…。ぬう、iPhoneめ。

jQueryなどで動きをつける

レシートがみよーんと伸びたりとか、アプリっぽい楽しい動きをつけて、より使ってて気持ち良いものにしてみたいなあと思います。jQuery Mobile使ってみたいなあと当初は思ってたのですが、Ajaxになるなら、横スライドよりもレシートが伸びたりした方が合ってるかも。挙動が重くなってしまうのが一番いかんかなと思うで、そこと調整しつつ。

ネイティブアプリ化

さきほどから「アプリっぽく」とか何度も出てきてしまいましたが、そもそもiPhoneやAndroidのネイティブアプリとして作ったほうが相性がよいのですよね…w
データもネットに上げる必然性が今のままだとそんなにないですしwお金関係なので心理的にもローカルで解決した方がよさそう。ネイティブアプリならネットが届かないところでも使えますし、さらにデバイス間の同期なら今時はiCloudとかもある…(ΦωΦ )

横展開

この、「スマホを片手にTwitter感覚で気軽にログをとりつつ合算するとともに記録していく」というソリューションですが、割と色んな用途で横展開を思いつくので、そのうち@shu_0115さんのコードを参考に、Rails勉強がてら自分で作ってみるのに挑戦してみるのもいいかもとか。。(RailsはCakeに近いそうなので、きっといける…はず…)
また、誰かGitHubからforkして作ってくださっても多分いいと思いますw

  • 毎日のカロリー計算
  • 英語などの勉強時間の記録
  • 冷蔵庫の中身と賞味期限のカウントダウン計算

などなど。


そんなこんなで、これからも地道に改良してゆきたいと思います。
長文になってしまいましたが、お読みいただきありがとうございました。
Receibo、使ってみていただけるとうれしいです。よろしくおねがいいたしますm(_ _)m
Receibo
スマホで簡単家計簿サービス Receibo(レシーボ)
GitHubでソースコード公開しています。
shu0115/receibo - GitHub