“お金”のインタラクションデザインの作り方
こんにちは。マネーフォワードで自動貯金サービス『しらたま』のPO/デザイナーをしているohsです。
少し前ですが、【Fintechデザイナー反省会】というイベントに登壇させてもらいました。
その時にお話した実物の貯金箱感覚をアプリ内で表現した部分について、質問など頂いたので、アプリ内のインタラクションについて紹介しようかと思います。（今更感ですんません😅）
他の登壇者の坪田さん、神崎さん、広野さんの話も同じお金を扱うサービスでも全く違う視点での話で面白かったのでオススメです。
これはどんなnote？📒
しらたま内で使っているインタラクションについて、どうやってこの動きが生まれたのかのプロセスと、なぜそこにこだわったかの紹介します。
そもそもしらたまって何？
しらたまは、「しらずに、たまる」人生を楽しむ貯金アプリです。
貯金をする・出来るようになるだけではなく、「貯まったお金をどう使うか体験するまで」をサービス体験として定義しています。
しらたまの3つのインタラクション
1. 貯まったお金の嵩を表す波
2. 小銭じゃらじゃら
3. 小銭の積み重ね
なぜそのインタラクションにこだわったか？
1. スマホでお金の重みを感じる
お金のサービスを作っていく中で、テクノロジーの進化やキャッシュレス化が進む中で、お金の重み（物理的な重みも心理的な重みも）ってなかなか表現できなくて、その感覚ってちょっと薄れているのではないかと思っていました。
特にお金を支払った時って、財布から現金を出すと物理的になくなるし、1000円札が小銭になって減ったことを体感しやすいですよね。
なので、そういったお金が減ったり増えたりする感覚をプロダクトの中でも表現できれば、数字で見るだけよりも貯まっている感を体感できるのではないかと考えました。
2. 便利な貯金ツールというより、しらない間にお金がたまった事を楽しむ
コンセプトの「しらずに、たまる」のイメージは、例えば、立替えしていたお金をとりあえず封筒にいれて引出しに入れておいたんだけど、ずっと忘れていて、他の物を探してたらそのお金が出て、やったーみたいな感覚。
忘れてたお金って、実質的な収支は変わらないんだけどなぜか嬉しい。気付いたら貯まってたお金って、何もしていないのに貯まってて嬉しい。
このような感覚を表したく、あえて今いくら貯まってるか数字的には、すぐ分からないように体感的に貯まってる事を感じられるようにしました。
どんなプロセスでこのインタラクションのイメージを作っていった？
お金が増えてく貯まっていく感覚って、楽しいし嬉しいので、その感覚をスマホを触りながら体感できる方法を探りました。
1. みんなで物理的な貯金箱について考える
実際に小銭貯金ができている人のインタビュー結果や仮説から議論。
👨💼：実際の貯金箱が貯まった時ってどうするっけ🤔？！
👩💼：貯金箱振ってみて、じゃらじゃら音を確かめる！！
👨💼：結構貯まってきたらどうするっけ🤔？！
👩💼：貯金箱ひっくり返していくら貯まったか確かめる！！
2. じゃあ、それってどうやって表現する？
貯金箱を振るのは加速度センサーで、水かさで表現しようと実際に動くプロトタイプをエンジニアさんに作ってもらい調整していくことに。
詳細画面のお金じゃらじゃらは、貯金箱の中身を見る感覚だよねって事で貯金箱に小銭が入ってる部分を表現。
ひっくり返していくら貯まったか確かめるは、お金を積み重ねるんじゃない？！
3. インタラクションの精度をあげていく
波のインタラクション
まずは、理想の形を探るべくネットで調べまくりました。
なかなか見つからなかったんですが、帰り道に「お腹空いたな〜」「喉いたいし、はちみつ食べたいな〜」みたいなノリからプーさんのはちみつだ！！！と思いついて、プーさんがはちみつに流される動画にたどり着きました。
はちみつのちょっとドロっとした感触が、イメージにマッチしていたので0:44~と1:49~の感じと伝え、懸念点やコストのすり合わせをしてベターを見つけていく事に。
次にもっとイメージが伝わるように、家にあるものを振りまくりました。
ボディーオイル→香水→謎のお酒→ウスターソース→最終的にはお風呂のお湯を揺らしてみるっていう事してますねｗ
時間があれば、この後AEでアニメーション作ってエンジニアさんに渡すのが
よいのですが、今回は開発期間の都合上割愛しました。
デザイナーエンジニア間のイメージがほぼほぼ共有できていたので、イメージ動画の共有だけで、ベターな折衷案を作る事ができました。
小銭じゃらじゃら
これはエンジニアさんがこのお菓子の箱に、小銭を入れて振ってお金の音や重み、小銭の動きなどを検証してくれました。
小銭の積み上げ
たまたま私の旦那が小銭貯金していて、24時間テレビの募金の映像を見て「ちょっといくら貯まったか計算してみる」と、いきなり貯金箱をひっくり返しはじめたので、その様子も参考に（ヤラセではありませんｗ
という日常生活にあるものから『しらたま』ができました。
今でもたまにエンジニアさんが「物理を忘れないごっこ」してます👇
以上です！
しらたま職人募集中
ユーザの課題解決をするために、やるべき事はいっぱいあるし、まだまだ未完成だし、分かりづらいところ改善していきたく絶賛整理中です。
まだよちよち歩きで、これから進化していくフェーズなので、1→100を一緒に作っていく人、絶賛募集中です。
サポート頂いたお金は、個人開発しているピルリマインダー「Pilll」の開発費に使わせてもらいます。サポートお待ちしています。