プロジェクト概要

• 顧客概要：大手金融機関様
  
• 課題：
  
  • デザインと実装の乖離の解消
  • 外部ベンダー依存からの脱却
  • AI駆動開発を見据えたフロントエンド基盤の構築
• 業種：金融業
  
• 提供したサービス：
  
  • UI/UXデザイン
  • デザインシステム構築
  • AI駆動開発PoC支援

大手金融機関様では、グループ共通のデザインガイドラインに準拠しながら、金融サービス特有の高い情報密度と使いやすさを両立するため、独自のUIガイドラインを策定し、それに基づいて画面設計や開発を進めていました。

一方で、デザインデータと実装コードの管理が十分に連携できておらず、デザインと実装にずれが生じやすい状況がありました。また、運用ルールの一部が属人化していたことで、社内外の関係者が同じ基準で開発を進めにくいという課題もありました。運用ルールの属人化といった課題が顕在化していました。

本プロジェクトでは、AIを活用してフロントエンド開発を効率化する「AI駆動開発」を見据え、Figmaを活用したデザイントークンの再設計、コンポーネントの構築、主要画面への適用を通じたUI/UXの刷新を支援しました。

プロジェクトの背景・課題

デザインと実装のずれ、運用ルールの属人化

UIガイドラインは整備されていたものの、デザインデータ（Figma）と実装コードを同じ基準で管理する仕組みが十分ではありませんでした。そのため、プロジェクトにかかわる関係者が「どこまで実装に反映されているのか」を把握しづらい状況にありました。

また、デバイスごとのフォントの扱いや、マージン・レイアウトなど、細かなルールの一部が明文化されていないことも課題でした。担当者ごとの判断に委ねられる部分があると、外部ベンダーと認識を揃えにくく、同じ品質基準で制作・実装を進めることが難しくなります。

こうした状況を改善するため、特定の担当者やベンダーの知見に依存しすぎず、社内外の関係者が共通のルールに基づいて開発を進められる基盤づくりが求められていました。

グループ共通ガイドラインと金融サービス独自要件の両立

本プロジェクトでは、グループ全体で定められた共通ガイドラインに準拠しながら、金融サービスの画面に求められる独自の要件にも対応する必要がありました。

金融取引サイトでは、限られた画面内で多くの情報を扱います。また、ユーザーが長時間利用することも想定されるため、情報量を保ちながら、視覚的な負荷を抑え、見やすく操作しやすい画面にすることが求められます。

たとえば、グレーと白を基調としたカラートーン、重要度に応じたプライマリーカラー、リンクテキストなどに用いるサービス独自のUIカラーなど細かなルールを整理する必要がありました。

共通ガイドラインに沿った一貫性と、金融サービスとしての使いやすさを両立できるデザインシステムを構築することが、プロジェクトの大きなテーマとなりました。

ご提案・実施内容

Figmaバリアブルとデザイントークンによる一元管理

デザインと実装の整合性を高めるため、色、文字サイズ（タイポグラフィ）、余白（スペーシング）、ブレイクポイントなど、画面設計の基盤となる値を「デザイントークン」として定義しました。

また、Figmaのバリアブル機能を活用し、基本となる値と、実際の画面で使う値を分けて管理できるようにしました。これにより、サービスや画面ごとにルールがばらつきにくくなり、デザイン側と実装側が同じ基準を参照しやすい状態を整えています。

将来的な画面追加や改修にも対応しやすく、継続的に運用できるデザインシステムの基盤づくりを進めました。

AI駆動開発に向けたPoCの実施

次世代の開発フローとして、生成AIを活用したフロントエンド実装、いわゆるAI駆動開発のPoCを実施しました。

検証は、ボタンのような小さなコンポーネントから開始しました。その後、ヘッダー、フッター、ナビゲーション、可変テンプレートへと対象を広げ、AIがデザインの意図をどこまで読み取り、解釈し、コード生成に活かせるかを確認しました。

あわせて、FigmaCodeConnectを用いて、デザインデータと実装コードを対応づける検証も行いました。これにより、AIを活用した開発に向けて、デザインとコードをつなぐための基盤づくりを進めています。

主要画面へのコンポーネント適用とUI/UXのモダナイゼーション

構築した新しいデザインシステムは、先行して外国株式取引のプロジェクトへ適用しました。

トップページや注文画面、銘柄詳細などの主要画面にコンポーネントを適用し、UI/UXを刷新しています。金融取引サイトでは、限られた画面内に多くの情報を表示する必要があるため、12カラムのグリッドシステムや、8ポイントシステムをベースとした余白設計を取り入れました。

画面ごとに個別最適化するのではなく、共通のルールに基づいて設計することで、サービス全体で一貫した見やすさと使いやすさを実現しやすい状態を目指しました。

アクセシビリティ基準の定義

多くのユーザーが利用しやすいサービスを提供するため、アクセシビリティの観点もコンポーネントの定義段階から組み込みました。

WCAG2.0やVoiceOverなどのスクリーンリーダーを利用することも考慮し、色の使い方、情報の構造、操作時のわかりやすさなどを整理しています。

コンポーネントの根幹にアクセシビリティ基準を組み込むことで、個別画面の開発時に都度確認する負荷を抑えながら、品質と標準化を担保しやすいプロセスを構築しました。

成果：デザインシステム基盤の構築とUI/UXの向上

デザインと実装をつなぐ基盤の確立

デザイントークンによる一元管理とFigmaバリアブルの活用により、デザインデータと実装コードの橋渡しがしやすい基盤を整備しました。

これにより、デザインと実装のずれを抑え、外部ベンダーに依存しすぎない開発体制づくりにつなげています。今後の開発スピードや品質の向上を支える、次世代のデザインシステム基盤が構築されました。

AI駆動開発を見据えた開発フロー効率化の道筋

PoCを通じて、AIがデザインの意図を解釈し、コード生成に活かすための基盤づくりを検証しました。

ボタンなどの小さなコンポーネントから段階的に検証範囲を広げたことで、AI駆動開発に向けた実現可能性や、今後整理すべき課題が見えてきました。将来的なフロントエンド開発の効率化に向けた道筋を示す取り組みとなっています。

一貫性とコンプライアンスを担保したUI/UXの実現

主要画面の刷新において、デザインシステムを活用した一貫性のあるUI/UXを実現しました。

また、アクセシビリティ基準をコンポーネント定義の段階から組み込んだことで、開発時の確認工数を抑えながら、品質とコンプライアンスを担保しやすい状態を整えています。

プロジェクト期間とプロセス、チーム編成

プロジェクト期間

2025年8月〜
次世代開発を見据え、継続的に支援しています。

プロセス

• Phase1（3か月）：基盤設計とスタイル定義
  主要プロジェクトのデザインワイヤーフレームをもとに、デザインシステム化を見据えたスタイル定義を実施。ブレイクポイントやグリッド設計など、画面構築の基盤となるルールを整理しました。
• Phase2（6か月）：UIコンポーネント設計とPoCの実施
  Phase1で定義した基盤をもとに、UIコンポーネントを設計し、Figmaライブラリとして順次公開・適用しました。あわせて、AI駆動開発を見据えたPoCや、デザイントークンと実装コードをつなぐ検証を段階的に進めました。
• Phase3（継続運用）：運用ガバナンスの確立と継続的改善
  構築したデザインシステムを継続的に活用できるよう、ガイドラインのドキュメント化、レビュープロセスの整備、Figmaとソースコードの差異を確認・修正する仕組みづくりを進めています。

プロジェクトメンバー

• UI/UXディレクター
• リードUI/UXデザイナー
• デザインシステムエンジニア
• フロントエンドエンジニア（AI駆動開発パートナー連携）

まとめ：今後の展望と運用ガバナンスの確立

本プロジェクトにより、デザインデータと実装コードをつなぎやすい基盤が整い、今後の開発スピードと品質の向上が期待できる次世代のデザインシステムが構築されました。

一方で、デザインシステムは構築して終わりではありません。今後は、構築したシステムを継続的に活用し、拡張していくための「運用ガバナンス」の整備が鍵となります。

今後は、ワイヤーフレーム段階でデザインシステムとの適合性を判断するレビュープロセスの設置や、Figmaとソースコードの差異を検知・修正する仕組みづくりなどに取り組んでいきます。

「小さく作り、小さく改善する」スクラム開発の体制へと移行しながら、継続的なユーザー体験の向上を支援してまいります。