『VoLT』レバテックのデザインシステム ~電光石火の構築プロセスと目指す未来~

by Tech Leverages

Slide 1

Slide 1 text

2024/06/12 エンジニア河村勇樹デザイナー山本拓弥『VoLT』レバテックのデザインシステム電光石火の構築プロセスと目指す未来

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

はじめにレバテックについて

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

レバテックデザインシステム『VoLT』

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

|　© 2024 Levtech Co., Ltd. 12 デザイナー観点：『VoLT』の特長 ● マルチカラープロダクトに対応 ○ レバテックフリーランス、ダイレクト、 etc…などそれぞれのプロダクトに、　それぞれのカラーが存在 ○ Figma上で複数のカラーファイル（ライブラリ）に分けた ● マスターコンポーネントにインスタンスガイドラインを設定 ○ 複数のプロダクトを横断してコンポーネントを使いまわせるように、インスタンスでのガイドラインを設定 ○ 柔軟性を持ちつつ、各プロダクトのデザイナーが作業しやすいように ABOUT 『VoLT』

Slide 13

Slide 13 text

|　© 2024 Levtech Co., Ltd. 13 ● ３つのNPMパッケージを開発 ○ @lv-levtech/volt-tokens：デザイントークンライブラリ ○ @lv-levtech/volt-react：React用共通UIライブラリ ○ @lv-levtech/volt-vue：Vue用共通UIライブラリ ● パッケージ部分で工夫しているところ ○ デザイントークンの変換・パッケージ反映を自動化 ○ デザイントークンの変換を拡張して利便性を向上 ○ デザイントークンとして使いづらいものはコンポーネント化 ○ モノレポ化によるマルチフレームワークの対応 ○ アクセシビリティの担保エンジニア観点：『VoLT』の特長 ABOUT 『VoLT』

Slide 14

Slide 14 text

モノレポ化によるマルチフレームワークの対応

Slide 15

Slide 15 text

|　© 2024 Levtech Co., Ltd. 15 ● レバテックはサービス・プロダクトごとにフレームワークが異なる ○ Vue.js × Nuxt ○ React × Next.js ● どちらにも対応したデザインシステムを作る必要がある ○ そこで『Vue.js × React × Monorepoの構成』を採用 ● モノレポ化によりフレームワークに捉われない部分はできる限り共通化 ○ Componentを作成するために必要なスタイル（ CSS）やプロパティ（Props） ○ Linter などの開発サポートツール ● ※ モノレポ化 ○ 複数のプロジェクトやモジュールを一つのリポジトリにまとめて管理する手法なぜマルチフレームワークに対応？なぜモノレポ化している？モノレポ化によるマルチフレームワークの対応

Slide 16

Slide 16 text

|　© 2024 Levtech Co., Ltd. 16 ● Q. スタイルを持たないUIコンポーネントを提供する手段は選ばなかったの？ ○ A. ■ Headless UI のようなスタイルを持たないUIコンポーネントも検討 ■ デザインの一貫性を担保することを優先して不採用 ● Q. Web Components や Lit も選択肢として選ばなかったの？ ○ A. ■ Web Components や Lit でもフレームワークへの依存を免れることは可能 ■ UIコンポーネントの開発は慣れ親しんだ技術の方が生産性が高いと判断なぜマルチフレームワークに対応する方針にしたのか？モノレポ化によるマルチフレームワークの対応

Slide 17

Slide 17 text

Slide 18

Slide 18 text

1. 共通スタイル（CSS） 2. 共通型定義（Type） 3. React で 1, 2 を使用（Vueも同様）

Slide 19

Slide 19 text

フレームワーク別の Storybook を一覧できる Vite アプリケーションを作成（GIF画像）

Slide 20

Slide 20 text

Slide 21

Slide 21 text

デザインシステムの考え方、つくり方、進め方

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

|　© 2024 Levtech Co., Ltd. 24 デザインシステムのよくあるアンチパターン ABOUT DESIGN SYSTEM ● 作る側と使う側が別れて、温度感が異なる ○ 「いいものできた！」「使いづらいな ...」 ● 課題の優先度を置いてけぼりにして、一貫性に力をいれて職種間で不和が起きる ○ 「それ今やらなくて良くね？」 ● Figma上のライブラリばかりに気を取られて、コミュニケーションがおざなりになる ○ 「書いてあるから分かるじゃん」 ● 当初は高いモチベがあったけど、結局使われなくなる ○ レバテックでも過去に、こんなことがありました

Slide 25

Slide 25 text

Slide 26

Slide 26 text

|　© 2024 Levtech Co., Ltd. 26 ● オンボーディングやキックオフの実施 ○ 関係者を巻き込んで当事者意識を持たせ、浸透しやすく ○ 結果的に、現場から改善提案があがりやすく ● ルールやフローのドキュメント化 ○ Figmaでの施策ファイル管理方法 ○ デザインスクラム開発体制 ○ 改善指標策定 ● Figmaデータリテラシーの強化 ○ エンジニアと齟齬がないようなFigmaデータをつくれるように ○ Zenn：【便利tips】Figmaでデザインデータを作る時のイロハについてデザイナーに聞いてみたレバテックでは、『VoLT』を使いやすくするための基盤構築から始めた ABOUT DESIGN SYSTEM

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

|　© 2024 Levtech Co., Ltd. 29 守るべきことと、今やらなくてもいいことを決めた ABOUT DESIGN SYSTEM ● 守るべきこと ○ タスクの優先度を決めて、即効性のある簡単なものから着手する ○ 改善したことがわかるような指標を作成する ● 今やらなくてもいいこと ○ 0からつくる ○ 時間をかけてデザイン原則を策定する ○ デザイントークン細部のスタイリング調整 ○ コミュニケーションデザインの制約まで決める ○ アクセシビリティへの過度な言及とテスト設計

Slide 30

Slide 30 text

|　© 2024 Levtech Co., Ltd. 30 EX（Employee eXperience）ユーザーに向き合うことはできても、組織やメンバーに向き合える人は少ない。「いい組織が、いいプロダクトをつくる」のだから全員がそこにも向き合わなければいけない。決して、リーダーやマネージャーだけの仕事ではない。 UXはもちろんだけど、EXってどこまで考えているの？ ABOUT DESIGN SYSTEM

Slide 31

Slide 31 text

|　© 2024 Levtech Co., Ltd. 31 正直、デザインシステムに関するナレッジや文化は、世の中に十分存在していますが、正しく浸透できていたり構築できている組織やプロダクトは多くないと思います。組織に向き合ったり、今あるものを無くしたり変えることはとても大変です。できることからコツコツと、「一貫性」「効率性」「コミュニケーション」の課題解決に向き合っていきましょう。デザインシステムは銀の弾丸ではない。 ABOUT DESIGN SYSTEM

Slide 32

Slide 32 text

本日のサマリ気になることがあれば、SNS等でご質問ください

Slide 33

Slide 33 text

● レバテックはデザインシステムを進めています ● 『VoLT』はマルチプロダクト、マルチフレームワークに対応できるようにしています ● デザインシステム構築では、Figmaやコードに向き合う前に組織に目を向けるべし

Slide 34

Slide 34 text

さいごに

Slide 35

Slide 35 text

レバテック volt ともに『VoLT』をつくっていく仲間を、募集しています検索

Slide 36

Slide 36 text

No content