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

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

はじめまして。みんなの銀行 中村です。
デザインディレクターとして、デザインチームの責任者をしています。

こちらのマガジンではみんなの銀行の「デザイン」をテーマに、チーム全員で定期的に記事を投稿していきます。

デザイナーによる初投稿ということで、みんなの銀行1人目のデザイナーとして入社した僕からスタートしたいと思います。

今日は、制作に関わるデザインチーム全員で「みんなの銀行らしいデザイン」を定義した「デザイン原則」ができるまでのストーリーをお話します。

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

僕が最初にみんなの銀行にジョインした時は、パートナーのアクセンチュアさんから参画していたFjordのデザイナー4名がプロジェクトのデザインまわりを進めていました。 
当初はアプリ画面を中心に「ミニマル」や「シンプル」といった体験ルールを設定。それを起点に、モノクロや、シンプルなUIの操作感など、少しずつサービスの世界観やカタチを作り上げました。

アプリの画面が増えていく中、方向性やデザインの良し悪しを決めるうえで議論することも比例して増えました。その時「みんなの銀行らしい」デザインと会話の中で出てきては、なんとなくイメージを理解していたつもりでした。でもゼロから作っているサービスなので、UIなど細かい部分をつめていくと、デザイナーひとりひとりの頭の中にある「みんなの銀行らしさ」には微小ながらズレも生まれます。新しいものを作っていく状態の中、初期段階でチームとして方向性のズレをなくし、同じ方向に向かって一貫性のあるデザインを目指す「基準」が必要でした。

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

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

みんなの銀行の「デザイン原則」を作るうえで参考にしたのがアラ・コルマトヴァ著の『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイドのChapter 2にある「デザイン原則」です。

このデザイン原則を策定するワークショップを行ったのは2020年の5月頃。それまでは東京と福岡の拠点で膝を突き合わせてデザインしていましたが、この頃はまさにコロナ禍の影響でチーム全員が在宅リモートワークをしている状況。
それでもリモート会議システムを介してデザイナー全員が参加し、アイデアを出し合いながら方向性をすり合わせました。
まず初めに、各自にみんなの銀行らしいデザインをキーワード5つに絞って、ワークショップに持ち込んでもらう宿題を渡しました。
参考として、他社のデザイン原則を共有し、デザイン原則の完成図をイメージしてもらいました。
その時に、『Design Systems―デジタルプロダクトのためのデザインシステム実践ガイド』にも書かれている、デザイン原則の特徴も共有しました。

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

これらを加味してもらいつつ、ワークショップ当日にデザイナーに持ち寄ってもらったものがこちら。

画像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/