話題のフィンテックN26のUI/UXデザインとその秘訣を紹介するよ

こんにちは！cokeです。
Follow @color1one

この記事に辿り着いた方はN26のことを知らないはずがないと思います。もし知らない人はこちらの記事をどうぞ

ワーホリや留学におすすめ！ドイツに住むならN26っていうオンラインバンクが圧倒的に使いやすい！

日本での知名度高すぎるって

自分自身テックの方面に身を置いていて気づいたことがあってですね、今回の記事を書いています。それは、、、

「N26、日本への進出はまだ全くないのに、一部の日本テック業界の人間においてN26の認知度がすごい」ということです。

去年の9月日本でチームラボでインターンをしていて、りそな銀行のアプリリニューアルの案件を担当していた人に「あ、僕N26持ってますよ、」って言ったら目を輝かせてアプリの中身を見せてと言われたり、日本でN26のアカウントは開設できないけどヨーロッパ旅行中にサクッと作って日本語版モックアップを作ってしてしまう人がいたり、、、そこまでさせてしまうN26の魅力驚きました。（という僕自身は現在ほぼN26で銀行を完結させてしまっている大ファンです 笑）

そのような日本の方達と話していて分かったことは、N26はとにかくUI/UXが従来の銀行ではありえないくらい良くて、色々見てみたいけど日本に対応していないので口座開設できずに中身が良く見れないというということでした。

このブログ経由でもN26関連の問い合わせがちょくちょくくるので、色々調べてみたら、UI/UXへの考え方みたいな資料とか色々出てきてですね、前から宣伝用に使って良いと言われている画像集リンクを知っていたので、今回公開してしまいます。

じゃあとりあえずUIデザイン画面をペタペタします

これからUIデザイン（ログイン後の画面も）紹介しながらペタペタしていきます。N26はメディア・プレスリリース向けにブランドアセットと言うものを一応公開してですね（多分検索かけただけだと見つからない）、画面を紹介しながら画像貼っていきますね。

ログイン画面はアプリダウンロードすれば誰でもみられると思うので、省いておきます。

まずはログインを終えるとこの画面（左）が表示されます。

ロゴの下に表示されているのが口座残高でその下に入出金履歴が表示されます。表示方法も最近LINEも採用し始めたと話題のラインを極力減らしたUIです。履歴一覧の項目をタップすると右画面のような詳細情報が出てきます。

N26では引き落とし先の端末情報やIBAN,BICデータから、使用用途を自動予測してカテゴライズしており、その予測を特定のカテゴリに変更したい場合や見覚えのない引き落としを報告したり、レシートなどの写真を追加するなどはここで編集が可能です。

右のトップページ(はじめに表示される画面)からは合計で6つのページに飛ぶことが可能です。

アンダーバーにアイコンが合計5つと画面上部、N26のロゴ両脇にある2つのアイコンです。

それぞれ紹介してきます。

左１のボタン

現在選択中で表示されている画面です。口座残高、直近の使用履歴を一覧で見られます。各項目をクリックすることができて、詳細を確認することも可能です。詳細の画面は先ほどの写真右上になります。

左２のボタン

こちらをタップすると「スペース機能」という画面に飛びます。画面UIはこんな感じ

スペース機能とは、銀行口座の中に別口座をもつみたいな機能です。通常の銀行だと全てのお金が統一されて管理されてると思いますが、このスペースという機能を使えば自分のもつお金を用途や目的別に分けて同じアプリ上で管理することができます。（金銭が動いてるといるというより、アプリ上で数字だけ変更してる感じです）最近N26で働くバックエンドエンジニアの友達に聞いたところ、この機能を搭載してから結構使っている人も多いとのこと。無料プランであれば最大3つのスペースをもつことができて、「貯金」とか「新しいパソコン買う資金」とかに分けてお金を管理することができます。

各スペースごとに目標金額を設定することができて、パーセンテージでパッとわかるようになっています。また画像右の画面で、スペースからスペースへスワイプすることで、お金の移動が簡単にできます。

中央ボタン

「+」をタップするとCASH26・送金リクエスト・マネービーム・振込というN26がもつ4つの機能へ飛べるアイコンが出てきて、それぞれの画面に飛べます。

CASH26 とは単純にいうとお金を入出金できる場所を紹介してくれるサービスです。ここ開くと地図が出てきて、N26が提携しているお店・ATMの場所がズラーーと地図上に表示されます。Reweとうのスーパーでもお金を引き出すことができて、その場合は引き出したい金額をこの画面で入力して取引用のバーコードを出すことができます。

マネービームはN26ユーザ同士で超簡単にそして早くお金を送金できるシステムです。ここを開くとN26ユーザーかつ自分が相手の電話番号を知っている人一覧が出てきて、人と金額を指定すればメッセージを送る感覚でお金を送ることができます。レストランとかで割り勘できない時など、誰かが払ってそれぞれがこの機能を使って払ってくれた人にサクッとその場で送金するなんてことをよくやっています。IBANとかの入力がないのでかなり便利です。

右１

「プレゼント型のアイコン」をタップすると、友達紹介のページに飛びます。ここに紹介したいメールアドレスを入力して無事にその人が口座を開設すると、15€くらいもらえます。時期によってもらえる金額が変わってきていて、30€くらいもらえるときもありました。

右２

「人のアイコン」をタップすると、登録情報やアプリ設定・セキュリティ設定に飛びます。ここでIBANなどのアカウント情報や、盗難にあった時のカードのロック処理などを簡単にすることが可能です。

こんな感じのシンプルな画面でPINを変更したり、カードをロック・再発行してもらったりすることができます。

上部右

上部右のアイコンをクリックすると、統計情報が確認できます。

こんな感じで、使用用途と使用金額の割合がカテゴリー別に出てきて、どこにどれくらいお金を使ってしまったかを簡単に知ることができます。直近4ヶ月の平均収支金額も表示されているので、基準も明確です。

上部左

これはアイコン通り、検索です。使用用途ワードで簡単に該当するお金のやり取りを見つけることができます。

こんな機能もあります

オーバードラフト機能

オーバードラフト機能（口座残高がマイナスになってもお金を借りることができる制度）も標準搭載されていて、その人の口座使用状況を見て上限額が決まるそうです。僕のをチェックしてみると500€はオーバードラフトできるようでした。しかし金利が8.9パーセントなのでするつもりはありません。

画面UIはこんな感じ。単純にいうとお金を借りるという昨日ですが、あたかも投資をするような気持ちにさせてくれるデザインです。こういう機能まで全て一貫してデザインされてることが伺えます。

海外送金(Transferwise)

海外送金（振込先が海外である場合）も比較的簡単に操作が可能です。またTransferwiseと提携しているので、（少なくとも日本の銀行と比較すると）送金にかかる手数料は無茶苦茶安く、そして透明性があります。しかし現在のところ日本円には対応していません。。。笑　UI画面はこんな感じ

Transferwiseについてはこちらの記事に書いてあります。

海外送金するなら「安い」・「簡単」これ一択、Transferwiseのすすめ

カードのデザインはこれよ

N26、アプリのデザインももちろん優れていますが、カードのデザインも優れています。

N26の中の人曰く、口座の開設理由として、N26のカッコ良いカードを持ちたいからっていう理由も少なくないそうです。

今の所、3つのプラン（カードの種類）ノーマルバージョン・ブラックバージョン・メタルバージョンがあります。

少しづつ使える機能・特典とカードの種類が変わってきます。僕が持っているのはノーマルプランの透明なカードです。これだけでもカッコイイですが、メタルカードはさらに重厚感があって無茶苦茶カッコ良いです。

マスターカードとかはカードのデザインに求める規約が厳しいらしいですが、そこをどうにかかいくぐってこのデザインが生まれたと言っていました。

さいごに

こんな感じですかね、あくまでも公式で出ているデザイン画像なので、エフェクトなんかを知りたい人、見せられなくて申し訳ございません。（ページの読み込みを軽くするためにあえて画像のクオリティも下げているので、細かいところまで見たい方がいたらぜひご連絡を！）

もしこれ関連で協力できることがあればいつでもさせていただくので、こちらからお問い合わせお願いします。

それでは！