---
title: iOSのデザインシステムとデザイナーと連携した取り組み
tags:  #ios #デザイン #モバイルアプリ #wealthnavi  
author: [ウェルスナビ株式会社 技術広報チーム](https://convert.docswell.com/user/WN_Tech-PR)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YE9PY4M4J3.jpg?width=480
description: 2026年2月26日に開催された「五反田.mobile Vol.2 - モバイルアプリデザイン最前線」で使用した資料です
published: February 26, 26
canonical: https://convert.docswell.com/s/WN_Tech-PR/ZQXGD3-2026-02-26-202758
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YE9PY4M4J3.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GE8D6QLVED.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LELM9XLR7R.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4JMYZLMPJW.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/PJR96KVY79.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/PEXQMLZ4JX.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/3EK9GL8PED.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/L73WN32475.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/87DKW4Z5JG.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/VJPK9MDDE8.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/2EVVM91GEQ.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/57GLGZ8DEL.jpg)

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.


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4EQYXL9XJP.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/KJ4W6DX271.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LE1YVZNK7G.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GEWGL94PJ2.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/47ZLM926J3.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/YJ6WNKVLJV.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/GJ5M5PDMJ4.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/9E29N68R7R.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/D7Y4P965EM.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/VENY5LZ4J8.jpg)

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.


# Page. 23

![Page Image](https://bcdn.docswell.com/page/Y79PY4Z4E3.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/G78D6Q1V7D.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/L7LM9XQRJR.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/4EMYZL1PEW.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/PER96KLYJ9.jpg)

会社概要
社名
ウェルスナビ株式会社
設⽴
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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/P7XQMLW4EX.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/37K9GLVP7D.jpg)

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


