「みんなの銀行」のデザイン原則

デジタルバンク「みんなの銀行」初のデザイナーとして入社した中村隆俊（デザイングループ　グループリーダー）が、「デザイン原則」ができるまでのストーリーをお話します。
※この記事はオウンドメディア『みんなの銀行 公式note』からの転載です。

「みんなの銀行らしい」デザイン、って何だろう？

僕がみんなの銀行に一人目のデザイナーとしてジョインした時は、パートナーのアクセンチュアさんよりFjordのデザイナー4名が、プロジェクトのデザインまわりを進めていました。当初は、みんなの銀行のアプリケーションの画面を中心に「ミニマル」や「シンプル」といった体験ルールを設定し、それを起点としてUI設計にも取組みながら、世界観や商品・サービスのカタチを少しずつ作っているところでした。

アプリケーションの画面の数が増えていくに比例して、メンバー間で、方向性やデザインの良し悪しを決める議論も増えていきました。議論の中では「みんなの銀行らしいデザイン」という表現が度々出てきて、なんとなくはイメージを理解しているつもりでいましたが、ゼロから作っているサービスですし、またメンバーも増えていく中で、一人ひとりの頭の中にある「みんなの銀行らしいデザイン」には小さなズレも生じ始めていました。まだ初期の段階で、ズレをなくして一貫性のあるデザインを目指すため、「基準」の必要性を感じ始めた頃でした。

この頃、UIガイドラインやVIガイドラインのドラフト版はありましたが、みんなの銀行らしさをデザイン全体で包括する指針はまだなかったので、明確な判断基準を作り、プロジェクト全体に浸透させていくことにしました。

アラ・コルマトヴァの著書をヒントに考えてみた

その時に、アラ・コルマトヴァの著書『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』をヒントにしてメンバーに宿題を課したのですが、それが、みんなの銀行らしいデザインを表す5つのワードを考え、ワークショップに持ち込む、ということ。参考資料として、書籍の中に書かれているデザイン原則の特徴や他社のデザイン原則を共有し、イメージを持ってもらいました。

デザイン原則の特徴
・対比で比較できる本質的なワード
・実用的かつ実行可能なもの
・バランスを見極める視点があるもの

こうして、ワークショップ当日にメンバーが持ち寄ってきたものがこちら。

メンバーの間で大きな意識のズレはなく、向いている方向はほぼ同じ。それぞれに持ちこんだワードに込めたメッセージ、背景を説明してもらい、それからみんなで議論に。

まず、挙げられたワードの中から類似したワードに分けていき、4つにグルーピング（上の図の赤、青、黄、緑でカラーリングした語群）。次に各グループで最もしっくりくるワードを一つ選び、4つのワードを決定。最後に、この4つのワードで最も重要だと思うものを議論し、みんなの銀行らしさの優先順位を決めました。こうして完成したみんなのデザイン原則がこちら。

みんなの銀行らしさを見失わないための羅針盤的な存在

ストレート Straight
アプリケーションのUI設計に携わるメンバー全員が持ち寄っていた、真っ直ぐ、ストレート・ダイレクト、スパッとしているという表現がこのワードに込められています。余計な情報がなく、要点のみをユーザーに伝える。みんなの銀行らしさという意味でも最重要の項目です。

ミニマル Minimal
無駄がない、削ぎ落とす、シンプルといった意味が込められています。これまでのアプリケーションデザインの作業中にも、このワードは頻繁に使われていました。機能面でお客さまが迷うことなく、シンプルにタスクを完了できるようになっているかを確認する項目。

コントラスト Contrast
個性や大胆さ、情報の階層といったメリハリという意味。みんなの銀行には白と黒の配色という特徴がありますが、カラーだけではなく、情報やレイアウト面においても、お客さまが視覚的に理解しやすい工夫が施されているかを確認するための項目。また競合との比較の中でもしっかりと目立つという、ブランディング観点の意味も込められています。

プレイフル Playful
最後に「プレイフル」。デジタルネイティブ世代に響くように、ほんの少しだけ遊び心を加えて「自由さ」を表現し、みんなの銀行らしさが際立つデザインになっているかを確認する項目です。

そして最終形態がこちら（上の図）。このみんなの銀行のデザイン原則はバックボーンであり、みんなの銀行らしさを見失わないための羅針盤的な存在。このデザイン原則を軸に、今日もアプリケーションやブランディングの開発を進めています。

(執筆者: みんなの銀行)