たった1日で3億円超の現金化が話題に！﹃CASH﹄に秘められたデザインの仕掛け。デザイナー河原香奈子

あまりの反響に公開後わずか16時間でサービス一時停止となった買取アプリ﹃CASH﹄。デザイナー河原香奈子さんが語ったのはお金を扱うサービスに大切な﹁佇まい﹂について。お金をポジティブなものに変えるデザイン理論とは？

0 0 250 2

一夜で3.6億円超が利用された『CASH』デザイン秘話

﹁買取してほしいアイテムをスマホで撮影＆登録すると、瞬時にお金に変わる﹂まるで魔法のような体験を提供してくれるのが、買取アプリ﹃CASH﹄だ。2017年6月、サービス公開初日に3.6億円超が現金化され、その反響の大きさに、公開後わずか16時間で一時休止へ。その後、2ヶ月間の休止を経て、サービスを再開。再開後もわずか2時間で1000万円が現金化され、現在、サービスの安定稼働を推し進めている。
ランディングページ

﹃CASH﹄の一時停止と再開について、インフォグラフィックや動画を載せたランディングページも話題となった。反響の大きさを物語ると同時に、一つひとつの商品を実際に受け取っている様子が見て取れる。
そんな﹃CASH﹄を運営するバンクのデザイナー河原香奈子さんが語ったのは、﹁ポジティブなお金の表現﹂について。お金を気軽に手に入れることに対し、不信感をいだく人も多い。安心してお金を手にしてもらうために﹁サービスの佇まい﹂を大切にしているという。河原さん本人が解き明かす、﹃CASH﹄のUIに仕掛けたポイントとは？
※2017年9月に開催された﹁UI Crunch #11 金融業界に革命を起こす、FinTechスタートアップのUIデザイン﹂よりレポート記事をお届けします。

﹃CASH﹄が目指す世界をどのように体現するか

まず河原さんによって語られたのが﹃CASH﹄が実現したい世界観について。あらゆるものの価値をお金に変換できるようにし、少額資金の需要を瞬間的に解決する。そのために彼女たちが考え抜いたこととは？
﹁このサービスを作るにあたって、﹁お金って何なんだろうか﹂と本当にたくさん考えました。私自身の考えとしては﹁お金とは、人生の可能性を広げるためのリソースの一つ﹂だと思っています。今、必要なお金が手元にあるということによって、目の前の選択肢が確実に増えるのではないでしょうか﹂
実現したい世界を明確にしていく。同時に﹁お金﹂を扱うサービスに対して、ユーザーが抱くのは﹁あやしい﹂﹁こわい﹂﹁ずるい﹂﹁いやらしい﹂などの不信感。安心して使ってもらえるように﹁ポジティブなお金の表現﹂を大事にしたい。こうしてデザインへと落とし込むとっかかりが生まれたという。また、それが一番のミッションでもあったと河原さんは語る。
お金のネガティブなイメージ

﹁なぜなら、お金に関する話は“汚い”っていうイメージがとっても根強いんです。すぐにお金がもらえますとか、いきなり言われても、おそらくほとんどの方はあやしいとか、怖いと思いますよね。もしくは、そんな簡単にお金を手に入れるなんてなんかズルいとか。そもそもカネカネと言うこと自体がいやらしいみたいな。そういった意見も当然あると思っています﹂
こういった課題を河原さんは、どのように解決していこうとしているのだろう。ポイントは﹁サービスの佇まい﹂だという。

﹃CASH﹄が﹁黄色﹂を基調としている理由

﹃CASH﹄のデザインは黄色を基調とする。﹃CASH﹄のという名が示すようにお金＝ゴールド︵黄色︶という﹁直球﹂。ここには多くの人が直感的に親しめるようにしたいといった思いが込められているようだ。
﹁お金をそのまま象徴的に表すカラー、“直球”で考えるなら黄色だと思っています。たとえば、10色のクレヨンでお金を描こうとしたら、ちょっとあたたかみがある黄色になるんじゃないかな、と。これはストレートでとても分かりやすいので、黄色を採用しています﹂
CASHが黄色いワケ

こぼれ話として﹁黄色﹂に決まる前には、Fintechらしい﹁青﹂などを基調にした定番の表現でも作ってみたという。しかし、機械的な印象が強くなってしまい﹁ワクワク感が足りない﹂ということで、お蔵入りとなったそうだ。
青いパターンも作成

﹁抜け感﹂がもたらす効果とは？

続いては、演出について。河原さんはUIに使用する色の配分で、﹁抜け感﹂をつくっているのだという。
﹁﹃CASH﹄は、黄色に対して青みのある黒を合わせているんですけれど、この割合が結構重要で、こだわっているところです﹂
黄色と黒の組み合わせはとてもインパクトがある。このようにバチッと合わせてしまうと、﹁危険！﹂のようなニュアンスになってしまう。
CASH キツイ配分

しかし、どうだろう。グレーやベージュなどの明るい色をはさむことで、かなり優しい印象に変わっていく。このようなに調整することを河原さんは﹁抜け感﹂と呼ぶ。
CASH やさしい配分

また、この﹁抜け感﹂は﹃CASH﹄のロゴにも使われている。
﹁ロゴは即金のスピード感を表現しています。線が途切れていたりですとか、文字の感覚をちょっと”ゆったりめ”にしてあげることで、抜け感を出しています﹂
CASH ロゴ

サービス全体に張り巡らされた﹁トーン﹂に対する配慮。河原さんはトーンを﹁サービスの人当たり﹂と捉えているという。
﹁本当にちょっとしたバランスで、印象は大きく変わるもの。ビジュアルの方向性やつくり込みは常々重要だと思っています﹂

細かいアニメーションの狙い。﹁お金を得る﹂実感

﹃CASH﹄のアプリを触ってみると、気づくことがある。それが至るところに実装された細かなアニメーションだ。その主な目的として﹁お金の動きを、よりリアルに実感してもらうため﹂だという。加えて、アプリを触る際の﹁心地よさ﹂という部分について。具体例を﹃CASH﹄の査定の画面を用いて、説明してくれた。まず、査定したいアイテムのブランドやカテゴリを選択し、アイテムを撮影する。そして、撮影の後すぐに査定金額が表示されるというような流れになっている。
CASH サービスの流れ

査定して欲しいモノの写真を撮ったらすぐに、査定中のローディングアニメーションが表示される。
CASH 査定GIF

﹁実は、撮影後にローディングをはさまず、すぐにパッと査定結果を表示させることも可能なんです。でも、あえて数秒のローディングを表示しています。なぜかと言うと、これはモノがお金に変わってもらっている最中だよということを実感してもらうために入れているんです﹂
お金とモノが交互に変わっていく。ここをアニメーションにしているのも、より実感を得やすくするための工夫。査定中のローディングが終われば、査定金額が表示される。ここでも数字がカウントアップするアニメーション表現が施されている。
CASH カウントアップGIF

﹁これも一瞬でパッと表示させることができるんですけれど、あえてアニメーションにすることで、リアルタイムに査定金額がはじき出されるというワクワク感を表現しています﹂
またこのカウントアップのアニメーションと連動し、スマホ本体の振動によるフィードバックがある。これも﹁お金が手元にやってきた感﹂を演出するためのものだ。

GIFアニメも河原さんが作っていた！

ここまで紹介した、査定中ローディングのアニメーションは、河原さんが作成した﹁GIFアニメ﹂が使われている。
﹁GIFアニメだと割とサクッと作れますし、エンジニアの実装工数もかからないのでオススメです。書き出したら、htmlとかにペタッと貼り付けてブラウザで表示する。そこでだいたいの印象を確認するようにしています﹂
CASH プロトタイプGIF

河原さんが作成したアニメーションプロトタイプ
﹁カウントアップのアニメーションとなると、少しコードを書く必要がでてきます。その場合は、イメージが伝わる程度のプロトタイプを自分で作って、エンジニアに実装してもらうようにしています﹂
サービスの紹介動画は、唯一、プロの動画制作会社に依頼しているのだとか。しかしその際も例外なく、河原さんがGIFアニメを作成し、それを元にブラッシュアップしたカタチで動画が完成した。
CASH プロと比較

﹁こうして見比べると、だいたい同じ秒数の動画のはずなんですけれど、印象が違いますよね。なので、動きの切れとか精度は大事だなと改めて思いました﹂
ここまでが河原さんが詳細に語ってくれた﹃CASH﹄におけるデザインが誕生するまでのプロセスだ。そこにあったのはユーザーの感じ方やインサイトによりそっていくという考え方。さらに﹁サービスの佇まい﹂を具現化していくということ。最後に河原さんはこのように締めくくってくれた。
﹁お金にまつわるサービスが、生活の中で自然に利用してもらえるようにしたい。そのために﹃サービスの佇まい﹄を追求し続ける。これがデザイナーである私の一番大切な役目だと考えています﹂