iOSのデザインシステムとデザイナーと連携した取り組み

iOSのデザインシステムと デザイナーと連携した取り組み 2026.02.26 五反⽥.mobile Vol.2 - モバイルアプリデザイン最前線 深来 ⽇菜 1

1. デザインシステムの定義と構造 2. ウェルスナビのデザインシステム 3. デザイナーとエンジニア間で発⽣した課題 4. デザイナーと連携した課題解決の取り組み 5. まとめ 2

⾃⼰紹介 深来日菜 / ひなっこ ウェルスナビ株式会社 サービス機能開発 / iOSエンジニア ウェルスナビでは ● ウェルスナビのiOSアプリ開発・テックブログ運営をしています。 ひとこと ● 最近は個人開発のアプリでコーヒーアプリを作ったり、 Liquid Glassに合うデザイ ンを追求しています。 © WealthNavi Inc. All Rights Reserved. 3

プロダクト紹介 全⾃動の資産運⽤サービス ウェルスナビ 「⻑期‧積⽴‧分散」でリターンの最⼤化をめざす 1万円から運⽤できる 全⾃動でおまかせできる リスクを抑えて運⽤できる NISAも⾃動で活⽤できる ※画面はイメージです © WealthNavi Inc. All Rights Reserved. 4

これからのウェルスナビ 個⼈向け ⾦融プラットフォーム お客さまそれぞれのお⾦の悩みを総合的にサポート お客様のお⾦に関するデータを取得 様々なリスクを総合的に診断 中⽴的な⽴場から総合的にアドバイス 定期的にリスクと商品を⾒直し ※現時点では構想段階で未提供。将来的に提供する可能性があるサービス領域 © WealthNavi Inc. All Rights Reserved. 5

1 デザインシステムの定義と構造 © WealthNavi Inc. All Rights Reserved. 6

デザインシステムの定義 デザインシステムとは、任意のアプリケーションを組み⽴てるのに⽤いる再利⽤可能なコンポー ネントと標準規約の集まりのこと。 デザインシステムは、パターン、コンポーネントライブラリ、デザイン⾔語、スタイルガイド、 コード化されたコンポーネント、ブランド⾔語、ドキュメントなどが含まれる。 製品のデザインと構築に複数の⼈々が関与するような場合に、 まとまりのある設計や表現を保証することが可能 https://en.wikipedia.org/wiki/Design_system 7 @2026 WealthNavi Inc.

• https://en.wikipedia.org/wiki/Design_system

デザインシステムがないときの課題 Figmaとアプリで フォントのサイズが微 妙に違う 実装するエンジニアによってボ タンの大きさがバラバラ このボタンの青の 16進数カラーコードは？ 8 @2026 WealthNavi Inc.

デザインシステムのコンポーネントの例 TextStyle ButtonStyle Color 9 RadioGroup @2026 WealthNavi Inc.

2 1 ウェルスナビのデザインシステム © WealthNavi Inc. All Rights Reserved. 10

ウェルスナビのデザインシステム Design System 「Figma（設計）」と「iOSパッケージ（実装）」で同期 Design System Design System 11 @2026 WealthNavi Inc.

TextStyleのコンポーネント iOS実装 Figma public extension TextStyle { /// fontSize: 56pt, lineHeight: 68pt static var display: Self { .init(fontSize: 56, lineHeight: 68) } /// fontSize: 28pt, lineHeight: 44pt static var title1: Self { .init(fontSize: 28, lineHeight: 44) } /// fontSize: 22pt, lineHeight: 33pt static var title2: Self { .init(fontSize: 22, lineHeight: 33) } ………. } 12 @2026 WealthNavi Inc.

ColorとTextStyleを組み合わせたコンポーネント Figma iOS実装 extension Color { public enum wn { /// RGB: #282828 public static let bk1 = Color("bk1") /// RGB: #888888 public static let bk2 = Color("bk2") /// RGB: #DEDEDE public static let bk3 = Color("bk3") ………. } } #Preview { VStack(spacing: 0) { Text("Display") .style(.display, color: .wn.bk1) Text("Display2") .style(.display2, color: .wn.bk2) Text("Title1") .style(.title1, color: .wn.bk3) ……… } } 13 @2026 WealthNavi Inc.

Buttonのコンポーネント iOS実装 Figma #Preview { VStack(spacing: 8) { Button("line / bl1 / enable") { } .shortButton(.line(color: .wn.bl1)) Button("fill / bl1 / enable") { } .longButton(.fill(color: .wn.bl1)) Button("clear / enable") { } .shortButton(.clear) HStack(spacing: 24) { Button("left") { } .shortButton(.clear) Button("right") { } .shortButton(.clear) } .padding(.horizontal, 24) } } 14 @2026 WealthNavi Inc.

デザインシステムのメリット ● 開発スピードの向上（コンポーネントの再利用） ● デザイナーとの「共通言語」の確立 ● 保守・運用の効率化（仕様変更への柔軟な対応） ● アプリ全体での一貫したユーザー体験の提供 15 @2026 WealthNavi Inc.

3 1 デザイナーとエンジニア間で発⽣した課題 © WealthNavi Inc. All Rights Reserved. 16

エンジニアが感じていた最新のUI更新時の課題 ● 最新のUIがどのFigmaかがわかりづらい ○ ● QAが古いFigmaを⾒てテストしていることが多いので差分がわかるようにしたい 最新UIの更新に気がつかない ○ ⼤きいプロジェクトで⼀度仕様確定後に変更が⼊る時最新UIの実装漏れのリスクがある 17 @2026 WealthNavi Inc.

デザイナーとエンジニア間の課題の原因 UI更新連絡ミスによる ⼈的ミスが発⽣する可能性ある 18 @2026 WealthNavi Inc.

4 1 デザイナーと連携した課題解決の取り組み © WealthNavi Inc. All Rights Reserved. 19

デザイナーとエンジニア間の課題解決 Figmaの変更時にデザイナーとエンジニア間のコミュニケーション発⽣ Dev ModeのReady for devビュー × Slack通知の自動化 20 @2026 WealthNavi Inc.

Ready for devビューとは Ready for devビューでは、Ready for devとなったすべてのデザインが1カ所に表⽰される。 そのため開発者は、キャンバスをあちこち移動したり複数のページにわたって移動したりするこ となく、必要なものをすぐに⾒つけることが可能。 https://help.figma.com/hc/ja/articles/23918228264855-Dev-Mode 21 @2026 WealthNavi Inc.

• https://help.figma.com/hc/ja/articles/23918228264855-Dev-Mode

Dev Modeの通知 Dev ModeでReady for devにステータスが変更されたときにSlack通知を送信 仕組み ● ● ● デザイナーが作業完了後、対象セクションを 「Ready for dev（開発準備完了）」 に変更 FigmaのSlack統合機能により、Figmaの変更をSlackに通知 エンジニアはSlack通知から直接「フォーカスビュー（変更箇所）」へジャンプ https://help.figma.com/hc/ja/articles/23918228264855-Dev-Mode 22 @2026 WealthNavi Inc.

• https://help.figma.com/hc/ja/articles/23918228264855-Dev-Mode

Ready for devビュー × Slack通知の⾃動化のメリット ● エンジニアのメリット ○ ● Figmaの差分の明確化することで変更の見落としがなくなる デザイナーのメリット ○ 変更箇所を文字や枠で示す必要がなくなる コミュニケーションコストの削減 デザイナーとエンジニアの同期の高速化 23 @2026 WealthNavi Inc.

5 1 まとめ © WealthNavi Inc. All Rights Reserved. 24

まとめ ● ウェルスナビのデザインシステムは、 FigmaとiOS実装で同期 ○ ● デザインシステム導入により、開発スピード向上や共通言語の確立を実現 FigmaのDev ModeとSlack通知を導入 ○ デザイナーとエンジニアのコミュニケーションコストの削減 ○ UI更新時の実装漏れを防ぐ 25 @2026 WealthNavi Inc.

重要な注意事項 ● 本資料は、断定的判断を提供するものではなく、情報を提供することのみを⽬的としており、いかなる種類の商 品も勧誘するものではありません。最終的な決定は、お客様⾃⾝で判断するものとし、当社はこれに⼀切関与せ ず、また、⼀切の責任を負いません。 ● 本資料には将来の出来事に関する予想が含まれている場合がありますが、それらは予想であり、また、本資料の 内容の正確性、信頼性、完全性、適時性等を⼀切保証するものではありません。本資料に基づいて被ったいかな る損害についても、当社は⼀切の責任を負いません。また、当社は、新しい情報や将来の出来事その他の情報に ついて、更新⼜は訂正する義務を負いません。 ● 本資料を利⽤することによりお客様に⽣じた直接的損害、間接的損害、派⽣的損害その他いかなる損害について も、当社は⼀切の責任を負いません。 商号等：ウェルスナビ株式会社 金融商品取引業者 関東財務局長（金商） 第2884号 加入協会：日本証券業協会 一般社団法人日本投資顧問業協会 © WealthNavi Inc. All Rights Reserved.

会社概要 社名 ウェルスナビ株式会社 設⽴ 2015年4⽉28⽇ 資本⾦ 122億6,116万7,438円 ※2025年12⽉31⽇現在 従業員 271名 ※2025年12⽉31⽇現在∕正社員数 会社所在地 東京都品川区⻄五反⽥8-4-13 五反⽥JPビルディング9F 事業内容 ⾦融商品取引業 © WealthNavi Inc. All Rights Reserved. 27

We are hiring 採⽤強化中 安⼼して使える⾦融インフラを共につくる仲間募集 https://recruit.wealthnavi.com/ © WealthNavi Inc. All Rights Reserved. 28

• https://recruit.wealthnavi.com/

ご清聴ありがとうございました © WealthNavi Inc. All Rights Reserved.