スマホアプリの「動きのデザイン」に大切なこと―― 自動貯金アプリ「しらたま」に学ぶ

※本記事は、マネーフォワードのおつり貯金アプリ『しらたま』デザイナーの大橋瑞生さんよりご寄稿いただきました。大橋さんによるnote「“お金”のインタラクションデザインの作り方」をもとに、改めて寄稿用に構成・執筆いただいた内容となります。

目次
・はじめに｜なぜ、インタラクションデザインが大切？
・しらたまとは？
・しらたまに実装した３つのインタラクション
　　液体｜貯金の「進み具合」がわかる
　　貯金箱｜貯金の「だいたいの総量」がわかる
　　小銭｜貯金の「具体的な金額」がわかる
・最後に｜「物理忘れないごっこ」のススメ

はじめに｜なぜ、インタラクションデザインが大切？

こんにちはマネーフォワードの大橋瑞生と申します。おつり貯金アプリ「しらたま」のプロダクトオーナー兼デザイナーを担当しています。

今回は「しらたま」における「動きのデザイン」つまり「インタラクションデザイン」をどのような考え方、ポイントをもとに実装していったか、解説させていただきたいと思います。

まずその前に、インタラクションデザインとは何か？簡単に見ていきましょう。

インタラクションデザインとは「人間」についてのことがらであり、人が製品やサービスを通じて、どのようにして互いとつながり合うかを扱うものである。
(引用)マイナビ出版「インタラクションデザインの教科書」Dan Saffer 著より

いわずもがなスマホアプリのデザインは、グラフィックだけでは完結しません。傾きや、画面のタップ、スワイプなどの情報を得ていく。それらの情報とグラフィック、テキスト、動きをうまく組み合わせて作りこんでいく。そうすることによってユーザーの使い心地や体験をより豊かなものにできます。

とくに私が担当した「しらたま」は「動きのデザイン」にこだわってつくったアプリです。そのデザインプロセスを紹介したいと思います。

しらたまとは？

まず「なぜ動きのデザイン」が重要だったのかをお話しする前に、まずは「しらたま」の概要からご説明します。

「しらたま」の由来は、“（しら）ずにお金が（たま）る”で、「日々の生活をもっと楽しく、ちょっとだけ贅沢に」をコンセプトに「貯金を楽しもう、人生を楽しもう」というのが実現したい世界観です。

この世界観を実現するためには、単に「貯金ができるツール」ではダメなんです。例えば、ちょっと高いけど、おいしいお寿司を食べにいくなど、「日常のなかのちょっとした贅沢のための貯金を始めませんか？」という日々を楽しくする要素が必要です。

自動貯金アプリ「しらたま」 ーー日々の生活をもっと楽しく、 ちょっと贅沢に。 しらたまは、人生を楽しむ貯金アプリ。 日々の生活をもっと楽しむために、 ちょっとした贅沢のための貯金をコンセプトにしている。は「つみたて貯金」「おつり貯金」「値引き貯金」の３つのパターンで貯金ができる。

そして、このアプリが生まれた背景には、自動家計簿・資産管理サービス『マネーフォワード』でカバーできていないお金の課題を解決することがありました。マネーフォワードでは家計・資産情報は見える化はできるものの、結局「どうお金を貯めるのか」「どうお金を増やすのか」という課題解決をするところまではできていません。まずは「お金を貯める」という課題を解決をしたいと考えました。

ただ、サービス検討をしていくなかで大きな壁がありました。それは、想像していた以上に「しらたま」がどんなサービスか、何を価値として感じてもらえるか、伝えづらいということです。

そもそも「おつり貯金（投資）」や「自動貯金」は、すでに海外で浸透し始めていて、Digitやacornsというサービスがあります。ただこれを単純にローカライズしたとことで、日本で受け入れられる概念なのかは不明確でした。

そのため、貯金の本質的な価値はなんなのか、本当に自動貯金アプリというかたちで提供するのがベストなのか、どうすれば価値を分かりやすく伝えられるか、チームで調査や検証を繰り返し、UIに反映していく事にしました。

人それぞれ異なるお金に対する価値観を、まずはセグメントを切らずに広く調査しました。その結果、出てきたワードは「大雑把」、「お得は好きだけどゆるく」、「どう家計改善をしたらいいか分からない」などでした。ターゲットは資産管理や投資に馴染みがないことがわかり、その壁を取っ払うために、お金をもっと身近にするデザインを心がけました。詳細はこちらのブログにて。

特徴的なのは、クレジットカードの支払い明細から、日々その”おつり分”を自動算出して貯金できる機能。使い方は「100円」「500円」「1000円」で払ったつもりというルールを選択。たとえば350円のものを買うと、100円ルールなら50円、500円なら、150円、1000円なら650円が、指定の口座に貯まっていくというもの。

まず私たちが大切にしたのが、最初のチュートリアル。ここで概念をわかりやすく伝えることで、理解してもらう。「貯金」という機能ではなく、「楽しさ」や「手軽さ」といった体験から入ってもらえるような工夫を施しています。

そのときに大切だと考えたのが「本当の貯金箱と同じような体験でわくわくできるかどうか」です。例えば、スマホを揺らすと、アプリ内のお金のアニメーションが揺れる。幼い頃に貯金箱を振った経験がある人も多いと思うのですが、それを疑似体験できるようになっています。

この体験をつくるために、「動きのデザイン」は欠かせないものでした。

具体的に、私がエンジニアと一緒になってやったのは「物理的にモノを動かしてみて、質感や表現を研究してみる」ということ。例えば、こういったやり取りがありました。

　Q「実際の貯金箱が貯まった時はどうする？」
　A「貯金箱振ってみて、音を聞く」

　Q「貯まってきたらどうする？」
　A「貯金箱ひっくり返していくら貯まったか確かめる」

こうして「貯金箱の中身が見える」「お金を積み重ねる」という着想を得ていきました。次項で詳しく見ていきましょう。

しらたまに実装した３つのインタラクション

ゴールは、しらずにお金が貯まるワクワク感を生み出すこと。アプリを開いたときに、こんなに貯まっていたのか！を体感してもらいたい。

これらを作りこんでいくうえでテキストやグラフィックだけでは物足りない。そこで注目したのが「アニメーション」やスマホの動きと連動する「インタラクション」です。

しらたまでは、「液体」「貯金箱」「小銭」を実装することに決まりました。

ここでは、3つのインタラクションデザインについてご紹介していきます。

液体｜貯金の「進み具合」がわかる

この画面では、目標金額に対して今どのくらい貯まっているかを表現しています。

スマホならではのインタラクション。「なめらかで心地いい」「無機質にしない」などがキーワード。モチーフとして考えたのが、お金という無機質さとは対極の「液体」でなめらかさを表現できないか？と考えていきました。

ただ、液体って具体的な表現がすごくむずかしい。どうすればその質感が掴めるのか。理想の形をネットで調べまくりましたが、なかなか見つかりませんでした。

……でも、アイデアは思わぬところに。

会社の帰り道で「お腹空いたな〜」とぼんやり考えているとき、はちみちを食べてるくまのプーさんを思い出したんですよね…「あ！プーさんの“はちみつ”だ！」と思いついて、くまのプーさんの動画をエンジニアに伝え、懸念点やコストのすり合わせをし、ベターを見つけていく事に。

さらにもっとイメージが伝わるように、家にある液体のものを傾けたり、振ったりしました。

ちなみに、私が振ったものはこちら。

・ボディーオイル
・香水
・謎のお酒
・ウスターソース

最終的にはお風呂のお湯を揺らしてみるっていう事までしています（笑）

時間があれば、この後、AEでアニメーション作ってエンジニアさんに渡すのがよいのですが、今回は開発期間の都合上割愛。

デザイナーエンジニア間のイメージがほぼほぼ共有できていたので、イメージ動画の共有だけで、ベターな折衷案を作る事ができました。

貯金箱｜貯金の「だいたいの総量」がわかる

この画面では、「どのくらいお金が入っている？」を貯金箱を振って重みや音を確認する際のアクションを表現しています。

貯金箱のイメージをエンジニアさんと共有するため、一緒にリアルなお金に触れまくりました。お菓子の箱に、小銭を入れて振ってお金の音や重み、小銭の動きなどを確認していきました。

小銭｜貯金額がわかる

この画面では、貯金箱にお金が貯まってきて「今いくら貯まったかな？」と途中経過を確認する際のアクションを表現しています。

この表現を探求するために、チームメンバーそれぞれで、物理的に小銭を何度も積み上げています。

たまたま私の旦那さんが24時間テレビの募金の映像を見て「ちょっといくら貯まったか計算してみる」と、いきなり自分でためている小銭貯金の貯金箱をひっくり返しはじめたので、その様子も動画におさめて、何度も確認しました（笑）

最後に｜「物理忘れないごっこ」のすすめ

私たちは、こうして自分たちの「手」で実際に触ってみる、動かしてみることを、「物理を忘れないごっこ」と呼び、エンジニアと一緒に遊びながらやるようにしています。

じつはすごく身近なことから「動き方」「動かし方」は研究ができるもの。みなさんも”動き” をデザインするときに参考にしていただけると嬉しく思います。

このほかにも、マネーフォワードのnoteではデザインに関することを発信しています。こちらも是非ご覧ください。

文 ＝ 寄稿