こんにちは。みんなの銀行デザイングループの中村です。「みんなの銀行 × Fjord Tokyo」連載シリーズ第2回の中編では、みんなの銀行を象徴する「白と黒の配色」が生まれた背景についてお届けしました。後編では、アプリ画面の操作におけるフリクションを取り除き、操作感の気持ち良さを追求していく過程についてお話しします。

Fjord Tokyo

みんなの銀行

「フリクションレス」を追求し、気持ちの良い操作感へ

中村　みんなの銀行のキーワードのひとつに「フリクションレス」がありますが、これは、みんなの銀行プロジェクトがスタートした初期の頃にはもうありましたよね。

会田（Fjord Tokyo）　フリクションレスは「サービスやデザインのあり方を評価するものさし」のようなもので、プロジェクトメンバーでは常々「フリクションレスをデザインでどう具体化できるだろうか」「これはお客さまにとってフリクションレスな体験だろうか」といったことをよく考えていました。

佐々木（Fjord Tokyo）　銀行サービスは「銀行として表示しなければならない」という観点から情報量が多いので、フリクションも多くなりがちですから。情報設計から操作感に至るまで、このキーワードは重要でした。

中村　フリクションレスの体現では、情報量はさることながらインタラクションも大きなポイント。例えばナビゲーション設計などは、みんなでアイデアを出し合い、時間をかけて検討していましたよね。

佐々木（Fjord Tokyo）　そうですね。例えばホーム画面のアイデアとして「アクションフォーカス（ジェスチャー）型」と「ダッシュボード型」という2案の検討についても。アクションフォーカス型では、1画面に1つの機能、または情報を基本とし、ホーム画面を起点にジェスチャーで画面遷移させたり、情報やサービスを呼び出したりすることが可能なのに対して、ダッシュボード型では、ホーム画面に多種多様な機能や情報を網羅し、そこから詳細へアクセスできる。みんなの銀行アプリでは、インタラクションのナビゲーション設計の観点から、前者のアクションフォーカス型を採用することになりました。

会田（Fjord Tokyo）　ダッシュボード型のように決まった位置にあるボタンを、わざわざ指を伸ばして押さなくてはいけない、というのはお客さまにとってフリクションとなるのではないか……ボタン操作も必要ですが、ここではアクションフォーカス型のジェスチャーを用いた体験の方が、お客さまにとってより気持ちの良い操作感になると考えて。

中村　そしてナビゲーション設計は水平方向と奥行きを意識した立体的な構造となりましたね。お客さまが２アクション以内で、やりたい事ができて見たい情報へ辿り着ける、という。

河田　この操作感は気持ち良いですよね。初めてモックを触った時も、新鮮な印象を受けたのを覚えています。

会田（Fjord Tokyo）　この他に、ジェスチャーの方法として長押しについても検討しましたよね。

河田　ProtoPieで作ったプロトタイプで、Box（貯蓄預金）のユーザビリティテストも行っていましたよね。

中村　ええ。４パターンのレイアウトを用意して、東京オフィスと福岡オフィスに勤務するデジタルネイティブな若手スタッフを対象にテストを実施しました。

会田（Fjord Tokyo）　Box操作で長押しをし続けることはお客さまにとってストレス、フリクションにつながるので、理想の体験に近付けるために調整を繰り返し、今の自然で無理のないジェスチャーに辿り着きました。ここは「8つの体験ルール」の「サクサク」感を感じとれる箇所の1つです。

アニメーションにこだわったプロトタイプ検証

会田（Fjord Tokyo）　プロトタイプを作ってはプロジェクトメンバーに触ってもらい、触り心地をチェックしてもらって……おかげでProtoPieスキルもかなり身に付きました（笑）。

佐々木（Fjord Tokyo）　プロトタイプ検証では、アニメーションにもこだわりましたよね。数字という無機質なものを遊び心のあるものにするために、金額カウントに入れたアニメーションの検証を繰り返して。特にタイミングや長さについては、実装時にフロント開発チームと一緒にチューニングを重ねました。

河田　アニメーションは「8つの体験ルール」の「ワクワクする」「フィードバック」が表現できる重要なポイント。僕もこのあたりは強く意識して、新しい画面を作っていましたね。

中村　ビジュアルデザインのカラーを白と黒のアタリで進めていた頃から、すでにプロトタイプ検証をし、動的なアニメーションやジェスチャーの細部にこだわって取組んでいました。だからこそ、その後に完全に白と黒の配色に振り切ることになっても、クオリティを維持できたのだと思います。

会田（Fjord Tokyo）　それもきっとプロジェクト初期の頃から、このフリクションレスというキーワードを、プロジェクトメンバー間で共有できていたからなのでしょうね。

デザインアプローチを振り返って

中村　デザインのはじまりや白と黒の配色、フリクションなどのこれまでのデザインアプローチを振り返ってみると、のちに作るみんなの銀行「デザイン原則」が定まる前の頃から、核となるユーザー体験のコンセプトがあったことが分かります。それがあったから方向性を見失わなかった。最初のコンセプト定義は、重要な起点だったと改めて感じました。

河田　特に普遍的な強さをまとう白と黒の配色で、ブランドとして独自の存在感を示せていると思うので、これを守り続けていきたいですね。また金融サービスでは、情報量のコントロールも大きなポイント。多い情報量をフリクションレスに表現するデザインアプローチはもちろんですが、その多い情報量をそのまま掲載するのが果たしてお客さまにとって本当に良いのかどうか、その検討を社内の関連部門と連携することも含めて。お客さまに必要な情報を分かりやすいデザインで提供していくため、今後も妥協せず、取り組んでいきたいと思います。

中村　佐々木さん、会田さんは、振り返ってみてどうですか？

佐々木（Fjord Tokyo）　何よりメンバーに恵まれたことに感謝しています。ここまでやって来られたのは「良いものを作りたい」という強い気持ちを、みんなで持ち続けることができたからですね。

会田（Fjord Tokyo）　みんなの銀行の経営陣の方々から理解をいただけたことも大きかったですよね。厳しい言葉と一緒に強い期待をかけてくださり……それがプロジェクトメンバーみんなの背中を押してくれました。

さいごに

みんなの銀行には、プロジェクト立ち上げから今に至るまでの間、新しいデザインメンバーが続々とジョインしています。そんな中でも、言語化されたUXコンセプトやデザイン原則があるおかげで、チームが一つとなり、共通した世界観を持つことができています。みんなの銀行はまだスタートラインに立ったばかり。デザイン、商品・サービスに磨きをかけて唯一無二な銀行づくりに励みたいと思います！

みんなの銀行ではプロダクトデザイナーを募集しています。これからの「みんなの銀行」づくりに参画したい方、ぜひご応募ください！