「みんなの銀行」のデザイン原則
新型コロナウイルスに関係する内容の可能性がある記事です。
新型コロナウイルス感染症については、必ず1次情報として厚生労働省首相官邸のウェブサイトなど公的機関で発表されている発生状況やQ&A、相談窓口の情報もご確認ください。またコロナワクチンに関する情報は首相官邸のウェブサイトをご確認ください。※非常時のため、すべての関連記事に本注意書きを一時的に出しています。
見出し画像

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

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

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

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

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

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

 チームで作り上げたみんなの銀行の「デザイン原則」

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

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

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

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

画像1

これまで綿密に連携し、チーム全員でコンセプトから画面デザインまでを作っていたこともあり、ワークショップの中でも大きな意識のズレはありませんでした。向いている方向は、ほぼほぼ同じ。
各デザイナーから持ちこんでもらったワードひとつひとつの考えや想いを伝えてもらいました。それぞれ深みのあるメッセージが込められていて、ワードの意味付けのタネがたくさん共有されました。共有後、その次にワードチョイスについて議論しました。

まず、挙げられたワードの中から類似したワードをグルーピングし、大きく4つのグループに分けました。(上の図の赤、青、黄、緑でカラーリングした語群)
まとまった4つのグループで最もしっくりくるワードをそれぞれで選び、4つのワードが決定しました。
さらに、4つのワードで最も重要だと思うものをみんなで議論し、みんなの銀行らしさの優先順位も決めました。そうしてできた、みんなのデザイン原則がこちら。
参加したデザイナー全員が「しっくり」するものができました。

画像2

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

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

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

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

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

画像3

さいごに

リモートワークの状況下、1時間ほどのワークショップで完成した、みんなの銀行のデザイン原則。デザインチームはとにかく全員主張が強く、自分の考えを曲げずにたまに意見もぶつけ合いますw。でも、論理や筋が通った相手の考えも理解し、尊重しつつ、ユーザーにとって何がベストかを問いながらデザインしています。このみんなの銀行のデザイン原則はバックボーン的な存在であり、みんなの銀行らしさを見失わない羅針盤でもあります。
みんなの銀行のデザインチームは、このデザイン原則を軸に今日もアプリケーションやブランディングの開発を進めています。
2021年5月下旬にサービス提供開始予定ですが、ティザーサイトを公開中です。ここでもデザイン原則を垣間見ることができますのでぜひご覧ください。

今後、みんなの銀行デザインチームのメンバーがこのマガジン内で様々な情報をお届けする予定です。ぜひご登録をお願いします。


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

筆者紹介

画像4

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

更新情報は Twitter でおつたえします☺

スキありがとうございます!
国内初のデジタルバンク「みんなの銀行」の公式アカウントです。みんなの銀行公式アプリのDLはこちら → https://www.minna-no-ginko.com/open-account/