【当日用】Money Forward UIの紹介 / Introducing Money Forward UI

https://techday.moneyforward-dev.jp/2024/sessions/talk-04/

Webプロダクト向けの共通UIライブラリ「Money Forward UI (MFUI)」の取り組みや展望を紹介します。MFUIは、我々が主要な機能に集中し、UI の不整合を減らし、車輪の再発明を避けることを目的としています。また、MFUIの利用によって、リソースや知識を集約させることで、フロントエンド開発を効率化してユーザーにより早く価値を提供することができます。

Transcript

1. Introducing Money Forward UI Taiga Kiyokawa 2024.9.20
2. • Joined Money Forward in 2020 • Leader of Frontend Forward Group • Develop MFUI & Improve accessibility Taiga Kiyokawa \ Follow me! / @taigakiyokawa
3. By the way, ちなみに、
4. UIデザインと実装をやりました! このカンファレンスの Webサイト I designed the UI and implemented the website! Website for this conference
5. Money Forward UI とは What is Money Forward UI? Content What is MFUI? Resources Teamwork Visions Summary
6. MFUIとは、Webプロダクト向けの「UI開発基盤」 Money Forward UI (MFUI) MFUI is a “UI Development Platform” for Web products
7. 今のところは、マネーフォワード クラウド (MFC) のプロダクト用に開発中 Money Forward UI (MFUI) For now, it is developed only for Money Forward Cloud (MFC) products
8. 30を超えるプロダクトが、一貫性のあるUIを効率よく提供できるようにする Money Forward UI (MFUI) It helps over 30 products deliver consistent UIs efficiently 󰳖 Users
9. So, you mean it’s a “design system”? いわゆる「デザインシステム」？
10. まあ、そうです。 Well, yes.
11. プロダクトを一貫性のあるデザインで効率よく届けるための包括的な仕組み デザインシステムとは A comprehensive system to deliver a product efficiently with consistent designs What is a design system?
12. What MFUI solves MFUIが解決する課題
13. UI開発においてよくある課題について 考えてみましょう Let’s think about common issues in UI development
14. UIデザインから実装までにかかる時間 Lead time from UI design to implementation
15. UIデザインから実装までにかかる時間 UIを1から仕上げるには、やることが多すぎる Lead time from UI design to implementation There are too many things to build UIs from the ground up
16. UIデザインから実装までにかかる時間 もっと速く、もっと効率よくしたい Lead time from UI design to implementation We want to do it faster, more efficiently Faster
17. 見た目や振る舞いの差異 Differences in appearance and behavior
18. 見た目や振る舞いの差異 一貫した制約がないことで、微妙に異なるUIが生まれる Differences in appearance and behavior Slightly different UIs are produced without consistent conventions
19. 見た目や振る舞いの差異 不要な議論や迷走することなく、UI開発を円滑に進めたい Differences in appearance and behavior We want to streamline UI development without unnecessary discussions or confusions
20. Additionally… 加えて、
21. プロダクト横断的な観点 From a cross-product perspective
22. マネーフォワード クラウドERP プロダクト間の連携が 大きな魅力のひとつ Money Forward Cloud ERP Integration between products is one of the most attractive features
23. 実際には、各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
24. 技術スタックもプロダクトごとにバラバラなことが多い 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.
25. マネーフォワード クラウド全体での使用感の差をなくし、 併用体験を向上させたい 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
26. 品質の向上 Quality improvement
27. 品質の向上 アクセシビリティを向上させるための知見が足りない Quality improvement Lack of knowledge on how to improve accessibility alt? Screen Reader? WAI-ARIA? Keyboard?
28. 品質の向上 フロントエンドの品質向上まで手が回らない Quality improvement Too busy to improve the frontend quality etc. Database Security Backend New Features Law Revised
29. MFUIを使う Using MFUI
30. MFUIを使う MFUIを使うことで、UI開発の無駄を減らして効率化します Using MFUI Using MFUI streamlines UI development and boosts efficiency Review Review UI Design Implemantation Test Release
31. MFUIを使う 一貫性のあるアクセシブルなUIを素早く提供するのに役立ちます Using MFUI It helps to deliver consistent and accessible UI faster Consistent Accessible
32. リソース Resources Content What is MFUI? Resources Teamwork Visions Summary
33. MFUIは、マネーフォワード クラウドにおける 2つのスタンダードに基づいて開発 MFUI is based on 2 Standards of Money Forward Cloud
34. MFC UI Design Standard
35. MFC UI Design Standard (UIDS) マネーフォワード クラウドのすべてのプロダクトの包括的なデザイン標準 A comprehensive design standard for all Money Forward Cloud products
36. 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
37. MFC Accessibility Guidelines
38. 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
39. デザイン、実装、チェックの観点でそれぞれ確認すべきポイントを記載 MFC Accessibility Guidelines They describe what to confirm for design, implementation, and checking
40. MFUIのパッケージ MFUI Packages
41. MFUI Packages 4つのnpmパッケージを、GitHub Packagesで社内に展開 We provide 4 npm packages internally via GitHub Packages mfui-components mfui-icons mfui-design-tokens SVG React
42. MFUI Packages monorepoによる一元管理で、リソースを集約して開発を効率化 We manage all resources in a monorepo for development efficiency mfui-components mfui-icons mfui-design-tokens SVG React
43. MFUI Packages mfui-components mfui-icons mfui-design-tokens SVG React
44. MFUI Packages mfui-components mfui-icons mfui-design-tokens SVG React
45. mfui-components React製のコンポーネントライブラリ 基本的なUI部品からアプリケーションのレイアウトを担うものまで React components for basic UI parts and application layouts
46. mfui-components スタイリングにはゼロランタイムCSS-in-JSライブラリのPanda CSSを採用 For styling, we decided to use Panda CSS which is a zero-runtime CSS-in-JS library
47. 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');
48. 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.
49. MFUI Packages mfui-components mfui-icons mfui-design-tokens SVG React
50. MFUI Packages mfui-components mfui-icons mfui-design-tokens SVG React
51. mfui-icons Icons are provided as React components & SVG files ReactコンポーネントとSVGファイルで提供
52. MFUI Packages mfui-components mfui-icons mfui-design-tokens SVG React
53. MFUI Packages mfui-components mfui-icons mfui-design-tokens SVG React
54. What are design tokens? デザイントークンとは
55. UIを構成する色やタイポグラフィ、余白などの変数 デザイントークンとは What are design tokens? Variables for colors, typography, spacing, etc. making up the UI "color": { "black": { "$value": "#000", "$type": "color" }, }
56. 他のトークンのエイリアスとして定義したりもする デザイントークンとは 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" }, }
57. mfui-design-tokens Figma Variablesからデザイントークン用のJSONファイルを出力 Generate JSON files for design tokens from Figma Variables "color": { "black": { "$value": "#000", "$type": "color" }, } Variables Export
58. 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" }, }
59. 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" }, }
60. About documentation ドキュメンテーションについて
61. ADR Architectural Decision Record
62. 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
63. 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
64. JSDoc
65. 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 = () => {
66. JSDoc を書く MFUIを利用する開発者向けに書く コンポーネントの用途や意図にアクセスできるようにする Writing JSDoc JSDoc are written for developers who use MFUI It enables developers to access the purpose and intent of the component
67. JSDoc を書く コンポーネントをはじめ、exportするモジュールには必ず書く Writing JSDoc Including components, JSDocs are always written for exported modules /** * This function is for … * @returns bar - a boolean whether … */ export foo = () => {
68. 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'; ... }
69. 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
70. JSDoc からStorybookのDocsを生成する Generate Storybook docs from JSDoc export type ButtonProps = { ... /** * The size of the button. * @default 'medium' */ size?: 'small' | 'medium' | 'large'; ... } JSDoc
71. 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';
72. Recap おさらい
73. MFUI Packages 4つのnpmパッケージを、GitHub Packagesで社内に展開 We provide 4 npm packages internally via GitHub Packages mfui-components mfui-icons mfui-design-tokens SVG React
74. MFUI Packages monorepoによる一元管理で、リソースを集約して開発を効率化 We manage all resources in a monorepo for development efficiency mfui-components mfui-icons mfui-design-tokens SVG React
75. チームワーク Teamwork Content What is MFUI? Resources Teamwork Visions Summary
76. 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
77. 3チームによるコラボレーション！ デザインスタンダードを作る目線と、実際のプロダクト開発からの目線 Take into account the perspectives of both standard creators and product creators A collaboration by 3 teams!
78. MFUIを使ってもらって、フィードバックをもらう 各プロダクトチームとの関係構築 Relationships with each product team Ask product teams to use MFUI and give feedback
79. For example, 例えば、
80. 「マイページ」にMFUIを導入 マイページのヘッダーをMFUIのコンポーネントに移行 MFUI初の導入事例 🎉 Integrate MFUI to “My Page” The header of My Page was migrated a MFUI component First time MFUI was used 🎉
81. マイページチームからのフィードバック 「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 🌬💥🐼
82. マイページチームからのフィードバック 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 🌬💨💨 🐼 💦
83. 一筋縄ではいかないけど、とてもエキサイティング！ MFUIを作る Creating MFUI It’s not simple nor easy, but exciting! 💪🐼
84. 展望 Visions Content What is MFUI? Resources Teamwork Visions Summary
85. MFUIをプロダクトに適用していく Integrate MFUI to products
86. MFUIをプロダクトに適用していく まだまだ開発段階 既存プロダクトへもっと適用して、フィードバックサイクルを回したい Still in development We want to integrate MFUI to products more and build a feedback loop Integrate MFUI to products
87. 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
88. 既存のUIとMFUIとの差分をはかる 各プロダクトの UIを分類する Categorize the UI for each product Estimate the difference between existing UIs and MFUI
89. マネーフォワード クラウド 以外への展開 Expand MFUI to products other than Money Forward Cloud
90. テーマを切り替えることで、社内の多くのブランドに対応する マネーフォワード クラウド以外への展開 Expand MFUI to products other than Money Forward Cloud We will cover several brands in the company by switching themes
91. 他ドメインにも展開していくため、 「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”
92. オープンソースとして公開 Publish as open-source libraries
93. オープンソースとして公開 先人たちに続け！ もっと広く！もっとアクセスしやすく！ Publish as open-source libraries Follow the footsteps of the forerunners! Broaden the reach! Make it more accessible!
94. オープンソースとして公開 横断組織の成果は、外からだと見えにくい 色んな取り組みを積極的に発信していきたい 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
95. And above all… そして何より...
96. オープンソースは カッコいい!!! Open Source is so cool!!!
97. 乞うご期待! Stay tuned!
98. まとめ Summary Content What is MFUI? Resources Teamwork Visions Summary