Slide 1
Slide 1 text
Introducing
Money Forward UI
Taiga Kiyokawa
2024.9.20
Slide 2
Slide 2 text
● Joined Money Forward in 2020
● Leader of Frontend Forward Group
● Develop MFUI & Improve accessibility
Taiga Kiyokawa
\ Follow me! /
@taigakiyokawa
Slide 3
Slide 3 text
Money Forward UI とは
What is Money Forward UI?
Content
What is MFUI?
Resources
Teamwork
Visions
Summary
Slide 4
Slide 4 text
MFUIとは、Webプロダクト向けの「UI開発基盤」
Money Forward UI (MFUI)
MFUI is a “UI Development Platform” for Web products
Slide 5
Slide 5 text
今のところは、マネーフォワード クラウド (MFC) のプロダクト用に開発中
Money Forward UI (MFUI)
For now, it is developed only for Money Forward Cloud (MFC) products
Slide 6
Slide 6 text
30を超えるプロダクトが、一貫性のあるUIを効率よく提供できるようにする
Money Forward UI (MFUI)
It helps over 30 products deliver consistent UIs efficiently
Users
Slide 7
Slide 7 text
So, you mean it’s a “design system”?
いわゆる「デザインシステム」？
Slide 8
Slide 8 text
まあ、そうです。
Well, yes.
Slide 9
Slide 9 text
プロダクトを一貫性のあるデザインで効率よく届けるための包括的な仕組み
デザインシステムとは
A comprehensive system to deliver a product efficiently with consistent designs
What is a design system?
Slide 10
Slide 10 text
What MFUI solves
MFUIが解決する課題
Slide 11
Slide 11 text
UI開発においてよくある課題について
考えてみましょう
Let’s think about common issues in UI development
Slide 12
Slide 12 text
UIデザインから実装までにかかる時間
Lead time from UI design to implementation
Slide 13
Slide 13 text
UIデザインから実装までにかかる時間
UIを1から仕上げるには、やることが多すぎる
Lead time from UI design to implementation
There are too many things to build UIs from the ground up
Slide 14
Slide 14 text
UIデザインから実装までにかかる時間
もっと速く、もっと効率よくしたい
Lead time from UI design to implementation
We want to do it faster, more efficiently
Faster
Slide 15
Slide 15 text
見た目や振る舞いの差異
Differences in appearance and behavior
Slide 16
Slide 16 text
見た目や振る舞いの差異
一貫した制約がないことで、微妙に異なるUIが生まれる
Differences in appearance and behavior
Slightly different UIs are produced without consistent conventions
Slide 17
Slide 17 text
見た目や振る舞いの差異
不要な議論や迷走することなく、UI開発を円滑に進めたい
Differences in appearance and behavior
We want to streamline UI development without unnecessary discussions or confusions
Slide 18
Slide 18 text
Additionally…
加えて、
Slide 19
Slide 19 text
プロダクト横断的な観点
From a cross-product perspective
Slide 20
Slide 20 text
マネーフォワード クラウドERP
プロダクト間の連携が
大きな魅力のひとつ
Money Forward Cloud ERP
Integration between products
is one of the most attractive
features
Slide 21
Slide 21 text
実際には、各UIの見た目や振る舞いに、大小さまざまな差異がある
マネーフォワード クラウドのUIの現状
Current situation of the UI in Money Forward Cloud
In reality, there are various differences in the appearance
and behavior of each UI
Slide 22
Slide 22 text
技術スタックもプロダクトごとにバラバラなことが多い
Also, the tech stacks often vary from product to product
マネーフォワード クラウドのUIの現状
Current situation of the UI in Money Forward Cloud
React Vue.js
mui etc.
Slide 23
Slide 23 text
マネーフォワード クラウド全体での使用感の差をなくし、
併用体験を向上させたい
We want to improve the experience for users using multiple products by
reducing inconsistencies of UI across all Money Forward Cloud products
見た目や振る舞いの差異
Differences in appearance and behavior
Slide 24
Slide 24 text
品質の向上
Quality improvement
Slide 25
Slide 25 text
品質の向上
アクセシビリティを向上させるための知見が足りない
Quality improvement
Lack of knowledge on how to improve accessibility
alt? Screen Reader?
WAI-ARIA? Keyboard?
Slide 26
Slide 26 text
品質の向上
フロントエンドの品質向上まで手が回らない
Quality improvement
Too busy to improve the frontend quality
etc.
Database
Security
Backend
New Features
Law Revised
Slide 27
Slide 27 text
MFUIを使う
Using MFUI
Slide 28
Slide 28 text
MFUIを使う
MFUIを使うことで、UI開発の無駄を減らして効率化します
Using MFUI
Using MFUI streamlines UI development and boosts efficiency
Review Review
UI Design Implemantation Test
Release
Slide 29
Slide 29 text
MFUIを使う
一貫性のあるアクセシブルなUIを素早く提供するのに役立ちます
Using MFUI
It helps to deliver consistent and accessible UI faster
Consistent Accessible
Slide 30
Slide 30 text
リソース
Resources
Content
What is MFUI?
Resources
Teamwork
Visions
Summary
Slide 31
Slide 31 text
MFUIは、マネーフォワード クラウドにおける
2つのスタンダードに基づいて開発
MFUI is based on 2 Standards of Money Forward Cloud
Slide 32
Slide 32 text
MFC UI Design Standard
Slide 33
Slide 33 text
MFC UI Design Standard (UIDS)
マネーフォワード クラウドのすべてのプロダクトの包括的なデザイン標準
A comprehensive design standard for all Money Forward Cloud products
Slide 34
Slide 34 text
MFC UI Design Standard (UIDS)
Figma Components, Specs, Guidelinesの3つの要素からなる
It consists of 3 elements: Figma Components, Specs, and Guidelines
Components
Design Data
Documents
Specs
Guidelines
Anatomy,
interactions, etc.
How to design
Slide 35
Slide 35 text
MFC Accessibility Guidelines
Slide 36
Slide 36 text
Web Content Accessibility Guidelines (WCAG) 2.2 Level Aの
達成基準を満たすためのガイドライン
MFC Accessibility Guidelines
Guidelines to meet the Success Criteria for
Web Content Accessibility Guidelines (WCAG) 2.2 Level A
Slide 37
Slide 37 text
デザイン、実装、チェックの観点でそれぞれ確認すべきポイントを記載
MFC Accessibility Guidelines
They describe what to confirm for design, implementation, and checking
Slide 38
Slide 38 text
MFUIのパッケージ
MFUI Packages
Slide 39
Slide 39 text
MFUI Packages
4つのnpmパッケージを、GitHub Packagesで社内に展開
We provide 4 npm packages internally via GitHub Packages
mfui-components
mfui-icons
mfui-design-tokens
SVG React
Slide 40
Slide 40 text
MFUI Packages
monorepoによる一元管理で、リソースを集約して開発を効率化
We manage all resources in a monorepo for development efficiency
mfui-components
mfui-icons
mfui-design-tokens
SVG React
Slide 41
Slide 41 text
MFUI Packages
mfui-components
mfui-icons
mfui-design-tokens
SVG React
Slide 42
Slide 42 text
mfui-components
React製のコンポーネントライブラリ
基本的なUI部品からアプリケーションのレイアウトを担うものまで
React components for basic UI parts and application layouts
Slide 43
Slide 43 text
mfui-components
スタイリングにはゼロランタイムCSS-in-JSライブラリのPanda CSSを採用
For styling, we decided to use Panda CSS
which is a zero-runtime CSS-in-JS library
Slide 44
Slide 44 text
mfui-components
ビルド時に1枚のCSSファイルを出力することで、
アプリケーション側での利用時にはPanda CSSに依存しない
By outputting a single CSS file at build time,
the application side will not depend on Panda CSS when using components
@import url('@moneyforward/mfui-components/styles.css');
Slide 45
Slide 45 text
mfui-components
Chromaticを使ってVisual Regression Test (VRT)を実施
PRごとにStorybookをpublishすることで、デザインレビューを行いやすく
Visual Regressions (VRT) are conducted using Chromatic.
Publishing Storybook by each PR makes design reviews easier.
Slide 46
Slide 46 text
MFUI Packages
mfui-components
mfui-icons
mfui-design-tokens
SVG React
Slide 47
Slide 47 text
mfui-icons
Icons are provided as React components & SVG files
ReactコンポーネントとSVGファイルで提供
Slide 48
Slide 48 text
MFUI Packages
mfui-components
mfui-icons
mfui-design-tokens
SVG React
Slide 49
Slide 49 text
What are design tokens?
デザイントークンとは
Slide 50
Slide 50 text
UIを構成する色やタイポグラフィ、余白などの変数
デザイントークンとは
What are design tokens?
Variables for colors, typography, spacing, etc. making up the UI
"color": {
"black": {
"$value": "#000",
"$type": "color"
},
}
Slide 51
Slide 51 text
他のトークンのエイリアスとして定義したりもする
デザイントークンとは
What are design tokens?
A token also can be defined as an alias of another token
"color": {
"black": {
"$value": "#000",
"$type": "color"
},
}
"text": {
"main": {
"$value": "{color.black}",
"$type": "color"
},
}
Slide 52
Slide 52 text
mfui-design-tokens
Figma Variablesからデザイントークン用のJSONファイルを出力
Generate JSON files for design tokens from Figma Variables
"color": {
"black": {
"$value": "#000",
"$type": "color"
},
}
Variables
Export
Slide 53
Slide 53 text
mfui-design-tokens
CSS変数、SCSS変数とES Modulesで提供
Tokens are provided as CSS variables, SCSS variables, & ES Modules
Style Dictionary
--mfui-color-black: #000;
$mfui-color-black: #000;
MfuiColorBlack = "#000";
"color": {
"black": {
"$value": "#000",
"$type": "color"
},
}
Slide 54
Slide 54 text
mfui-design-tokens
mfui-components用に、Panda CSSのプリセットも生成
Presets of Panda CSS are also generated for mfui-components
Style Dictionary
mfuiPandaCSSPresets =
definPreset({
// ...
"mfui.color.black": {
"value": "#000"
}
// ...
})
"color": {
"black": {
"$value": "#000",
"$type": "color"
},
}
Slide 55
Slide 55 text
About documentation
ドキュメンテーションについて
Slide 56
Slide 56 text
ADR
Architectural Decision Record
Slide 57
Slide 57 text
ADRとは
「Architectural Decision Record」の略称
意思決定に関する背景を簡潔に記したドキュメントのこと
What is an ADR?
It stands for “Architectural Decision Record”
It is a document that concisely describes the background of a decision
Slide 58
Slide 58 text
ADRを書く
MFUIは、長期的な保守性を特に高くすることを意識
いつでも変更しやすくするために、背景をコツコツと残しておく
Writing ADRs
For MFUI, we should keep the long-term maintainability extremely high
To make a change easier anytime, we stack the background steadily
Slide 59
Slide 59 text
JSDoc
Slide 60
Slide 60 text
JSDoc とは
JavaScript用のAPIドキュメントジェネレータ
ソースコードに直接記述し、アノテーションを追加する
What is JSDoc?
JSDoc is an API documentation generator for JavaScript
It adds annotations by being written in a source code directly
/**
* This function is for …
* @returns bar - a boolean whether …
*/
export foo = () => {
Slide 61
Slide 61 text
JSDoc を書く
MFUIを利用する開発者向けに書く
コンポーネントの用途や意図にアクセスできるようにする
Writing JSDoc
JSDoc are written for developers who use MFUI
It enables developers to access the purpose and intent of the component
Slide 62
Slide 62 text
JSDoc を書く
コンポーネントをはじめ、exportするモジュールには必ず書く
Writing JSDoc
Including components, JSDocs are always written for exported modules
/**
* This function is for …
* @returns bar - a boolean whether …
*/
export foo = () => {
Slide 63
Slide 63 text
JSDoc を書く
コンポーネントのpropsの型定義では、
プロパティごとに記述する
Writing JSDoc
In the type definition of the component’s
props, JSDoc is written for each property
export type ButtonProps = {
...
/**
* The size of the button.
* @default 'medium'
*/
size?:
'small' | 'medium' | 'large';
...
}
Slide 64
Slide 64 text
JSDoc からStorybookのDocsを生成する
Storybookがコンポーネントやそのpropsに記述されたJSDocを解析して
ドキュメントを自動で生成
Generate Storybook docs from JSDoc
Storybook auto-generate documents by interpreting JSDoc written in a
component and its props
JSDoc
Slide 65
Slide 65 text
JSDoc からStorybookのDocsを生成する
Generate Storybook docs from JSDoc
export type ButtonProps = {
...
/**
* The size of the button.
* @default 'medium'
*/
size?:
'small' | 'medium' | 'large';
...
}
JSDoc
Slide 66
Slide 66 text
JSDoc からStorybookのDocsを生成する
Storybookを見てもソースコードを見ても同じ情報にアクセスできる
Generate Storybook docs from JSDoc
Developers can access the same information from both
Storybook and source code
/**
* The size of the button.
* @default 'medium'
*/
size?:
'small' | 'medium' | 'large';
Slide 67
Slide 67 text
Recap
おさらい
Slide 68
Slide 68 text
MFUI Packages
4つのnpmパッケージを、GitHub Packagesで社内に展開
We provide 4 npm packages internally via GitHub Packages
mfui-components
mfui-icons
mfui-design-tokens
SVG React
Slide 69
Slide 69 text
MFUI Packages
monorepoによる一元管理で、リソースを集約して開発を効率化
We manage all resources in a monorepo for development efficiency
mfui-components
mfui-icons
mfui-design-tokens
SVG React
Slide 70
Slide 70 text
チームワーク
Teamwork
Content
What is MFUI?
Resources
Teamwork
Visions
Summary
Slide 71
Slide 71 text
3チームによるコラボレーション！
UI Design Standardを整備するデザイナーと、
Money Forward Vietnamのエンジニアとの協業
We collaborate with UIDS designers
and engineers in Money Forward Vietnam
A collaboration by 3 teams!
UIDS
Designers
Frontend
Forward
Money Forward
Vietnam
Slide 72
Slide 72 text
3チームによるコラボレーション！
デザインスタンダードを作る目線と、実際のプロダクト開発からの目線
Take into account the perspectives of
both standard creators and product creators
A collaboration by 3 teams!
Slide 73
Slide 73 text
MFUIを使ってもらって、フィードバックをもらう
各プロダクトチームとの関係構築
Relationships with each product team
Ask product teams to use MFUI and give feedback
Slide 74
Slide 74 text
For example,
例えば、
Slide 75
Slide 75 text
「マイページ」にMFUIを導入
マイページのヘッダーをMFUIのコンポーネントに移行
MFUI初の導入事例 🎉
Integrate MFUI to “My Page”
The header of My Page was migrated a MFUI component
First time MFUI was used 🎉
Slide 76
Slide 76 text
マイページチームからのフィードバック
「Tailwind CSSとPanda CSSのカスケードレイヤーがコンフリクト」
MFUI開発中には気がつくことができなかった
Feedback from My Page team
“Cascade layers of Tailwind CSS and Panda CSS are conflicting”
We were not able to realize this during the development of MFUI
Slide 77
Slide 77 text
マイページチームからのフィードバック
Panda CSSが生成するレイヤーを取り除いて解決
Tailwind CSSを使ったexampleアプリケーションをmonorepoに構築
Feedback from My Page team
Resolved by removing layers generated by Panda CSS
Built an example application using Tailwind CSS in our monorepo
Slide 78
Slide 78 text
一筋縄ではいかないけど、とてもエキサイティング！
MFUIを作る
Creating MFUI
It’s not simple nor easy, but exciting!
Slide 79
Slide 79 text
展望
Visions
Content
What is MFUI?
Resources
Teamwork
Visions
Summary
Slide 80
Slide 80 text
MFUIをプロダクトに適用していく
Integrate MFUI to products
Slide 81
Slide 81 text
MFUIをプロダクトに適用していく
まだまだ開発段階
既存プロダクトへもっと適用して、フィードバックサイクルを回したい
Still in development
We want to integrate MFUI to products more and build a feedback loop
Integrate MFUI to products
Slide 82
Slide 82 text
MFUIをプロダクトに適用していく
しかし、既存のUIを変えていくのはとても大変
それぞれのチームが抱える課題と向き合って、徐々に進めていく
However, it’s so tough to change existing UIs
We need to steadily make steps forward by embracing issues that each team has
Integrate MFUI to products
Slide 83
Slide 83 text
既存のUIとMFUIとの差分をはかる
各プロダクトの UIを分類する
Categorize the UI for each product
Estimate the difference between
existing UIs and MFUI
Slide 84
Slide 84 text
マネーフォワード クラウド
以外への展開
Expand MFUI to products other than Money Forward Cloud
Slide 85
Slide 85 text
テーマを切り替えることで、社内の多くのブランドに対応する
マネーフォワード クラウド以外への展開
Expand MFUI to products other than Money Forward Cloud
We will cover several brands in the company by switching themes
Slide 86
Slide 86 text
他ドメインにも展開していくため、
「Money Forward Cloud UI」ではなく「Money Forward UI」
マネーフォワード クラウド以外への展開
Expand MFUI to products other than Money Forward Cloud
Because we want to extend it into other domains,
we didn’t name it “Money Forward Cloud UI”, but “Money Forward UI”
Slide 87
Slide 87 text
オープンソースとして公開
Publish as open-source libraries
Slide 88
Slide 88 text
オープンソースとして公開
先人たちに続け！
もっと広く！もっとアクセスしやすく！
Publish as open-source libraries
Follow the footsteps of the forerunners!
Broaden the reach! Make it more accessible!
Slide 89
Slide 89 text
オープンソースとして公開
横断組織の成果は、外からだと見えにくい
色んな取り組みを積極的に発信していきたい
Publish as open-source libraries
Achievements of cross-functional teams are hard to see from the outside
We want to actively share our various efforts
Slide 90
Slide 90 text
And above all…
そして何より...
Slide 91
Slide 91 text
オープンソースは
カッコいい!!!
Open Source is so cool!!!
Slide 92
Slide 92 text
乞うご期待!
Stay tuned!
Slide 93
Slide 93 text
まとめ
Summary
Content
What is MFUI?
Resources
Teamwork
Visions
Summary
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content