Figmaへの移行で変わるデザインの未来

デジタルネイティブ世代に向けた、新しい銀行体験をリデザイン

ふくおかフィナンシャルグループ傘下の新しい銀行として、2021年に営業を開始した「みんなの銀行」。リアルな店舗を持たない、日本初のデジタルバンクです。24時間・365日、スマートフォンでいつでもすぐに口座開設でき、他の銀行口座・証券口座やクレジットカード・電子マネーなどと連携させ一元的に確認できる機能や、好きな名前で最大20個の貯金箱を作成できる機能など、ユニークなサービスを提供しています。また、みんなの銀行の金融機能やサービスを、ビジネスパートナー向けにAPIを通じて提供するBaaS（Banking as a Service）事業も展開しています。

特筆すべきは、その「銀行らしくない」UIデザイン。モノトーンを基調とし、イラストを用いたミニマルなデザインが目を引きます。世界三大デザイン賞のひとつである『iF DESIGN AWARD』をはじめ、『Red Dot Design Award 』『グッドデザイン賞』など、国内外の権威のあるデザイン賞を数多く受賞。洗練されたデザインとシンプルで直感的に操作できるフリクションレスな体験は、利用者の約7割を占めるというデジタルネイティブ世代から強く支持されています。同行のサービスにおけるデザインの重要性について、デザイングループ プロダクトデザインチーム所属 シニアマネージャーの中野 岳氏にお聞きしました。

中野氏「みんなの銀行では、プロダクトデザインだけでなく、サービスデザイン、コミュニケーションデザインが連携し、プロダクト開発やコミュニケーション施策の川上から川下までデザイナーが一気通貫で関わっているのが特徴です。Straight（ストレート）／Minimal（ミニマル）／Contrast（コントラスト）／Playful（プレイフル）という４つのデザイン原則を軸に、クリエイティブの方向性を統一しています。デザイングループには、深いユーザー理解から生まれるクリエイティビティ・可視化する力を武器にして、よりよいユーザー体験を提供し、ビジネス目標を達成することが求められます。プロダクトのUI以外でも、SNS広告やノベルティグッズ、キャッチコピーまですべて内製化。みんなの銀行『らしさ』を感覚的に理解するデザイナーがブランドの一貫性にこだわることで、ユーザーから選ばれ、より身近な存在になることを目指しています」

時代の変化に合わせ、デザインツールをFigmaに全面移行

みんなの銀行では、2022年頃から新しいデザインツールへの移行を検討し、翌年からFigmaの導入をスタートしました。ツールの移行前には、次のような課題があったそうです。

中野氏「まず、デザインの共有・連携にかかる工数が大きかったですね。以前は週に1回、全社にデザインを共有するために『クラウド上のデザインデータをローカル化したファイル』『ブラウザ確認用のURL』『全画面の書き出し画像』『更新差分のエクセル』を準備して配布する必要がありました。 当時使っていたデザインツールは、編集権限と閲覧権限の切り分けができなかったため、クラウド上のファイルにメンバーを直接招待した場合に予期せぬ編集をされてしまうリスクがあるうえ、ユーザーごとにコストもかかっていました。 また、プロダクトが成長していく中で、アプリの画面数もデザイナーの人数も増えていき、複数の似たようなファイルが量産され、ファイル管理が属人化してしまうという問題も起こっていました」

「デザインの共有」「権限管理」「ファイルの一元化」という主に３つの問題点を解消するべく、Figmaへの移行を決断。稟議やPOCを経てコンポーネントの移行、既存UIの移行と段階的に進めていきました。

中野氏「デザイナーの中にはFigmaに慣れていないメンバーもいたので、Figma移行合宿を行いました。合宿後も毎朝1時間ほど作業を行い、移行が完了するまでに約2か月かかりましたね。しかし手間を惜しまず全画面のデザインデータを移行したことで、コンポーネントが適用されていない古い画面のリファクタも行うことができ、結果的にその後の変更やメンテナンスが楽になりました。オートレイアウトなどの機能は慣れるまで少し時間がかかりますが、身に付いてしまえば手放せなくなります。メンバーも、乗り換え後のストレスは特に感じていないようです」

コラボレーションのしやすさは、クオリティの向上にも寄与

Figmaを導入してから約1年。デザイングループと他部門との連携に、大きな変化があったといいます。アプリ開発を担当している、ゼロバンクデザインファクトリー Development Division Engineering Group IIIシニアマネージャーの木原 大輝氏にお話を伺いました。

木原氏「コラボレーション型のツールはバージョン管理が弱い印象でしたが、Figmaは最新ファイルがわかりやすいので助かります。どうしてもエンジニアとデザイナーでファイル・フォルダ群の分け方や名前の付け方のクセが違うので、今まではどれを見ればいいのか判断しづらいことがありました。Figmaはファイルを階層化しやすいので、最新データが一目でわかり、探す手間がなくなりました。

編集権限がなくても、ブラウザ上で気軽に閲覧できる点もいいですよね。開発初期の段階にちょっとデザインを見にいくことができ、エンジニアもデザインへの関心が高まっていると感じます。また、要件不足な点を見つけやすくなりました。今までは抜け落ちていた要件を開発の後半でバタバタと修正していましたが、初期から関わることで早めに解消することができています。途中の変更も、デザインの修正とコーディングを並行して進められるのでスピーディに対応できます。コミュニケーションが促進されたことで、結果的にプロダクトのクオリティ向上につながっているのではないでしょうか」

中野氏「意見交換が活発になりましたよね。ビジネスサイドやマーケティング、カスタマーサポートなど他部署のメンバーと会話をする際も、URLひとつで同じ画面を共有しながら会話が進んでいくので、意思決定のスピードが上がりました。デザインや開発だけでなく、プロジェクト全体でのスピードアップができていると感じます」

新しいアイデアを生み出す源「FigJam」

木原氏「個人的には、FigJamがとても便利で使いやすいと感じています。今まではアプリの遷移図をグラフ作成ツールでつくっていたのですが、FigJamで簡単に作成できます。一部のミーティングではFigJam AIも活用しており、アイデアの整理整頓に一役買っています」

中野氏「毎週末にデザイングループ内でミーティングをしているのですが、フランクにコミュニケーションできるのが楽しいですね。福岡と東京にメンバーがいるのですが、音声チャットも活用し、距離を感じずにやり取りができています。カーソルを変更したり、音楽をかけたり、肩の力を抜いてコミュニケーションし、ときにはちょっとしたFigmaのtipsをチャットで共有したりして、みんなでFigma愛を高めています（笑）」

柔軟な管理機能でマネジメントをサポート

中野氏「Figmaではコンポーネントプロパティ機能を使うことで、デフォルトの状態からの変化をON/OFFで定義できます。コンポーネント管理・配信が容易になり、アプリ横断的に統一感のあるスタイルを維持したまま、スピード感を持ってデザインできます。

またFigJamで要件整理を行い、そのままFigmaで制作していくため、一気通貫してプロダクトを具現化することが可能です。以前はエクセルやパワポからデザインツールへの展開が必要でしたが、同じアプリケーション内で完結できるため、ブレのない、お客様視点に立ったデザインを実現できていると感じます。

そしてネットワークによるテナント制限ができるようになったのも大きなポイントです。SaaSではIP制限がかけられないものや、社内ネットワークから個人契約のテナントへのアクセス制限をかけにくいものも多いのですが、Figmaはこの懸念を解消できました。そのため情報漏洩リスクを環境的に低減できています。以前まで行っていたアクセスログの確認やアップロードのモニタリングも必要なくなっています。エンタープライズプラン限定の機能ですが、その他ゲストアクセスの制限、外部共有の制限などの設定もできるため、わたしたちのような銀行をはじめ、高いセキュリティが求められる企業ユーザーに適しているのではないでしょうか」

Dev Modeを活用し、コーディングスピードアップにつなげる

木原氏「まだ本格的な活用には至っていませんが、Dev Mode（開発モード）にも注目しています。ショートカットを使わずに、マウスホバーするだけで余白が確認できる点は便利ですね。プロパティでCSSコードとして余白の情報を取得できるため、コーディングのスピードが上がるのではと感じています。実際、周囲のエンジニアにも使ってみたいというメンバーが何人もいますよ。わたしたちのプロダクトはデザインをとても重視していますから、数ピクセルのズレであっても最適化することを心掛けています。また、Dev Modeの目玉機能であるAPIと、VS Code連携には特に期待しています。今後少しずつ取り入れ、さらに開発を効率化していきたいです」

中野氏「コンポーネントのプロパティ設定について、システムとデザインの目線の違いからすり合わせが難しいことがよくあります。デザインと実装をよりスムーズにコネクトできる機能が出てくると嬉しいですね。これからのデジタルプロダクト制作には、デザイナー同士のみならず、ノンデザイナーとのコラボレーションが要になることを実感しています。コラボレーションの力によって、デザインを生き物のように発展させられるダイナミズムを、ぜひ皆さんにも体感していただきたいです」