「みんなの銀行」のデザイン原則
ガジェット通信 / 2021年11月1日 16時0分
デジタルバンク「みんなの銀行」初のデザイナーとして入社した中村隆俊(デザイングループ グループリーダー)が、「デザイン原則」ができるまでのストーリーをお話します。
※この記事はオウンドメディア『みんなの銀行 公式note』からの転載です。
「みんなの銀行らしい」デザイン、って何だろう?
僕がみんなの銀行に一人目のデザイナーとしてジョインした時は、パートナーのアクセンチュアさんよりFjordのデザイナー4名が、プロジェクトのデザインまわりを進めていました。当初は、みんなの銀行のアプリケーションの画面を中心に「ミニマル」や「シンプル」といった体験ルールを設定し、それを起点としてUI設計にも取組みながら、世界観や商品・サービスのカタチを少しずつ作っているところでした。
アプリケーションの画面の数が増えていくに比例して、メンバー間で、方向性やデザインの良し悪しを決める議論も増えていきました。議論の中では「みんなの銀行らしいデザイン」という表現が度々出てきて、なんとなくはイメージを理解しているつもりでいましたが、ゼロから作っているサービスですし、またメンバーも増えていく中で、一人ひとりの頭の中にある「みんなの銀行らしいデザイン」には小さなズレも生じ始めていました。まだ初期の段階で、ズレをなくして一貫性のあるデザインを目指すため、「基準」の必要性を感じ始めた頃でした。
この頃、UIガイドラインやVIガイドラインのドラフト版はありましたが、みんなの銀行らしさをデザイン全体で包括する指針はまだなかったので、明確な判断基準を作り、プロジェクト全体に浸透させていくことにしました。
アラ・コルマトヴァの著書をヒントに考えてみた
その時に、アラ・コルマトヴァの著書『Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド』をヒントにしてメンバーに宿題を課したのですが、それが、みんなの銀行らしいデザインを表す5つのワードを考え、ワークショップに持ち込む、ということ。参考資料として、書籍の中に書かれているデザイン原則の特徴や他社のデザイン原則を共有し、イメージを持ってもらいました。
デザイン原則の特徴
・対比で比較できる本質的なワード
・実用的かつ実行可能なもの
・バランスを見極める視点があるもの
こうして、ワークショップ当日にメンバーが持ち寄ってきたものがこちら。
メンバーの間で大きな意識のズレはなく、向いている方向はほぼ同じ。それぞれに持ちこんだワードに込めたメッセージ、背景を説明してもらい、それからみんなで議論に。
まず、挙げられたワードの中から類似したワードに分けていき、4つにグルーピング(上の図の赤、青、黄、緑でカラーリングした語群)。次に各グループで最もしっくりくるワードを一つ選び、4つのワードを決定。最後に、この4つのワードで最も重要だと思うものを議論し、みんなの銀行らしさの優先順位を決めました。こうして完成したみんなのデザイン原則がこちら。
みんなの銀行らしさを見失わないための羅針盤的な存在
ストレート Straight
アプリケーションのUI設計に携わるメンバー全員が持ち寄っていた、真っ直ぐ、ストレート・ダイレクト、スパッとしているという表現がこのワードに込められています。余計な情報がなく、要点のみをユーザーに伝える。みんなの銀行らしさという意味でも最重要の項目です。
ミニマル Minimal
無駄がない、削ぎ落とす、シンプルといった意味が込められています。これまでのアプリケーションデザインの作業中にも、このワードは頻繁に使われていました。機能面でお客さまが迷うことなく、シンプルにタスクを完了できるようになっているかを確認する項目。
コントラスト Contrast
個性や大胆さ、情報の階層といったメリハリという意味。みんなの銀行には白と黒の配色という特徴がありますが、カラーだけではなく、情報やレイアウト面においても、お客さまが視覚的に理解しやすい工夫が施されているかを確認するための項目。また競合との比較の中でもしっかりと目立つという、ブランディング観点の意味も込められています。
プレイフル Playful
最後に「プレイフル」。デジタルネイティブ世代に響くように、ほんの少しだけ遊び心を加えて「自由さ」を表現し、みんなの銀行らしさが際立つデザインになっているかを確認する項目です。
そして最終形態がこちら(上の図)。このみんなの銀行のデザイン原則はバックボーンであり、みんなの銀行らしさを見失わないための羅針盤的な存在。このデザイン原則を軸に、今日もアプリケーションやブランディングの開発を進めています。
(執筆者: みんなの銀行)
この記事に関連するニュース
-
日本CTO協会、組織におけるWebフロントエンドエンジニアのための100項目
マイナビニュース / 2024年4月24日 16時28分
-
日本CTO協会による「プロダクトのユーザー体験と変化に適応するチームのためのガイドライン『Webフロントエンド版DX Criteria』」が公開
PR TIMES / 2024年4月24日 14時45分
-
インフラジスティックス・ジャパン ローコードデザインツール「App Builder」の製品サイトを公開
@Press / 2024年4月17日 11時0分
-
「『いいものをつくれば高額になるのは仕方がない』は言い訳」――元・味の素マーケティングマネージャーが教える「ヒット商品」「誰も買わない商品」の分岐点
THE GOLD ONLINE(ゴールドオンライン) / 2024年4月15日 7時30分
-
WCAG2.2対応のWebアクセシビリティ評価ツール「WAIV2」
マイナビニュース / 2024年4月9日 11時0分
ランキング
-
1GWのUターンラッシュでスマホを活用する技 道路の渋滞情報と、電車の混雑状況を確認しやすいアプリはどれ?
ITmedia Mobile / 2024年5月5日 19時25分
-
2「広告の女の子誰!?」「かわいいな」 ポカリの新CMに出演、ファッション誌で活躍する2人が注目集める
ねとらぼ / 2024年5月3日 8時15分
-
3『ポケモンGO』普段、日本じゃゲットできないポケモンに会える!48時間の“激レア色違い”が熱い「ライバルイベント」ポイントまとめ
インサイド / 2024年5月4日 0時0分
-
4「意味不明な満足度」「ビビリます」 サイゼリヤで1万円分食べてみたら……? コスパ良すぎてもはや恐怖
ねとらぼ / 2024年5月5日 17時0分
-
5「そっち使うの?!」「これは天才」 さびだらけの鉄くぎをぐつぐつ煮込むと……? DIYに役立つ“まさかの使い道”が200万再生
ねとらぼ / 2024年5月2日 12時15分
記事ミッション中・・・
記事にリアクションする
記事ミッション中・・・
記事にリアクションする
エラーが発生しました
ページを再読み込みして
ください