Hatena::ブログ(Diary)

納豆には卵を入れる派です。 このページをアンテナに追加 RSSフィード Twitter

2011-12-18

スマホで簡単家計簿サービス「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だったので、こちらのフィヨルドさんのエントリを参考にRubyRailsインストール。その間の待ち時間に自分のイメージしてる画面のラフをざざっと描いて送りました。

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になるなら、横スライドよりもレシートが伸びたりした方が合ってるかも。挙動が重くなってしまうのが一番いかんかなと思うで、そこと調整しつつ。

ネイティブアプリ

さきほどから「アプリっぽく」とか何度も出てきてしまいましたが、そもそもiPhoneAndroidネイティブアプリとして作ったほうが相性がよいのですよね…w

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

横展開

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

また、誰かGitHubからforkして作ってくださっても多分いいと思いますw

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

などなど。


そんなこんなで、これからも地道に改良してゆきたいと思います。

長文になってしまいましたが、お読みいただきありがとうございました。

Receibo、使ってみていただけるとうれしいです。よろしくおねがいいたしますm(_ _)m

Receibo

スマホで簡単家計簿サービス Receibo(レシーボ)

GitHubソースコード公開しています。

shu0115/receibo - GitHub

hiruhiru 2011/12/24 02:07 シンプルというのは決して手抜きではなく、
洗練された機能なんですよねぇ。
ASPサービスを作る時とか、色々なお客様の要望を
実装すると、汎用性が低くて低い、
使いにくいものが出来上がったりw

ホーム画面にアイコンを保存した後の挙動、
僕も以前に悩んだ事があるので、簡単なサンプルを
下記に記載しますね。
http://www.diginnovation.com/test/
(眠さと酔いで手抜きな内容でゴメンナサイ)
上記URLにiPhoneなどからアクセスして頂いて、
ホーム画面に登録して頂くと、indexとtestを
アプリの様に移動できると思います。
肝はソース内に記述しているJS
 http://www.diginnovation.com/test/js/web_app.js
と、アンカータグに記述している
 <a onclick="link('/test/test.php');">
です。Android端末での挙動は試していませんが、
よかったら試してみてくださーい。

ken_c_loken_c_lo 2011/12/24 16:15 おおおーありがとう!サンプルまで作ってもらってありがたや!!ヾ(*'ω'*)ノ゛
まさしくここ悩んでたんですよー。
なるほど、jsでブラウザをだまくらかす感じですね(ΦωΦ)これは手軽でいいなあ。
試してみまする!これでアドレスバー非表示にできるかもーやたーヾ(*'ω'*)ノ゛

ken_c_loken_c_lo 2011/12/24 16:24 > シンプルというのは決して手抜きではなく、
> 洗練された機能なんですよねぇ。

そそーまさに(ΦωΦ)
機能としての洗練と作業の簡略化を両立させられると、最高ですよね。
でもってそれは両立できることが不思議と多くて、結局は表裏一体なんやなあと思う(ΦωΦ)
シンプルを目指す事は色んな意味で良いことなのかもねえ。
…とはいえ仕事だとなかなかこうもいかないことも多いけどもねえ(ΦωΦ)

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証