はじめまして。みんなの銀行 中村です。 デザインディレクターとして、デザインチームの責任者をしています。 こちらのマガジンではみんなの銀行の「デザイン」をテーマに、チーム全員で定期的に記事を投稿していきます。デザイナーによる初投稿ということで、みんなの銀行1人目のデザイナーとして入社した僕からスタートしたいと思います。今日は、制作に関わるデザインチーム全員で「みんなの銀行らしいデザイン」を定義した「デザイン原則」ができるまでのストーリーをお話します。

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

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

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

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

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

このデザイン原則を策定するワークショップを行ったのは、2020年の5月頃。それまでは東京と福岡のそれぞれの拠点で、膝を突き合わせて進めていましたが、この頃はまさにコロナ禍で、チーム全員が在宅リモートワークをしている状況。リモート会議でアイデアを出し合いながら、方向性をすり合わせていました。 

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

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

こうやって、ワークショップ当日にデザイナーが持ち寄ってきたものがこちら。

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

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

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

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

ミニマル Minimal
無駄がない、削ぎ落とし、シンプルといったワードを込めたのがこの「ミニマル」です。アプリケーションデザインをする中でも、このワードは頻繁に出てきており、みんなの銀行らしさから外せないワードでもあります。ミニマルにすることで、機能的にユーザーが迷うことなくシンプルにタスクを完了できるようになっているかを確認する項目です。 

コントラスト Contrast
個性や大胆さ、情報の階層などメリハリという意味で決めたのが「コントラスト」。みんなの銀行のモノクロ基調もそうですが、カラーだけでなく情報やレイアウトにもしっかりメリハリをつけて、視覚的にユーザーが理解しやすい工夫ができているかを確認するための項目です。ブランディング観点で、競合との比較の中でもしっかりと目立つという意味も込められています。

プレイフル Playful
最後にみんなの銀行らしさを添えるのが「プレイフル」。ほんの少しだけ遊び心を加え、ミレニアル世代に響くような「自由さ」を表現することで、みんなの銀行らしさが際立つデザインを目指します。最後に、ガイドラインに追記するために思いを込めたコピーを添えてできた最終案がこちらです。

最後に

リモートワークの状況下、１時間ほどのワークショップで完成した、みんなの銀行のデザイン原則。デザインチームはとにかく全員主張が強く、自分の考えを曲げずにたまに意見もぶつけ合います（笑）。でも、論理や筋が通った相手の考えも理解し、尊重しつつ、ユーザーにとって何がベストかを問いながらデザインしています。このみんなの銀行のデザイン原則はバックボーン的な存在であり、みんなの銀行らしさを見失わない羅針盤でもあります。
みんなの銀行のデザインチームは、このデザイン原則を軸に今日もアプリケーションやブランディングの開発を進めています。今後、みんなの銀行デザインチームのメンバーがこのマガジン内で様々な情報をお届けする予定です。ぜひご登録をお願いします。

みんなの銀行では、デザイナーの仲間を募集しています。

筆者紹介

中村 隆俊
株式会社みんなの銀行 デザイングループ リーダー。デザインマネージメントおよびディレクションを担当。デジタル領域のプロダクトデザイン（UI/UX）を中心に株式会社エムスリー、株式会社ラクスルを経て、2019年に東京から福岡へ移住。ふくおかフィナンシャルグループ みんなの銀行プロジェクトに参画し現在に至る。HCD-Net認定 人間中心設計専門家。趣味はクラフトビール探索。