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

# UX Design Conference 2024
UX Design Conferenceは、UXデザインをテーマとして開催するカンファレンス。
シリーズ第二弾となる今回は、ピクシブ、リクルート、レバテック、LINEヤフー、DMMの5社で、UXデザインを仕事に活かすための実践的なヒントやアイディアなどを発表します。

# 『VoLT:レバテックのデザインシステム』電光石火の構築プロセスと目指す未来
レバテックは、ITエンジニアと開発組織の挑戦と成長を加速させるための採用プラットフォームです。「日本を、IT先進国に。」というビジョンを掲げ、多角的に事業拡大を続けています。
レバテックでは、さまざまなプロダクトが存在する中で、様々な課題を抱えており、それらを解消するためにレバテックのデザインシステム『VoLT』を構築しました。
今回は、『VoLT』の構築プロセス全体について、準備段階、設計段階、実装段階、そして将来への展望と、構築の各フェーズを順を追って概説していきます。また、今後の拡張性向上やデザインオペレーションの効率化、デザイナーとエンジニアの協業強化など、プロジェクト発起から爆速で構築できた方法と今後も『VoLT』を発展させていくための取り組みについてもお話しさせていただきます。

Transcript

1. 2024/06/12 エンジニア 河村 勇樹 デザイナー 山本 拓弥 『VoLT』 レバテックの デザインシステム 電光石火の構築プロセスと目指す未来
2. |　© 2024 Levtech Co., Ltd. 2 河村 勇樹 Yuki kawamura レバテック株式会社 CTO室 テックリード 2021年1月にレバレジーズへ中途入社し、 現在はテックリードとして会社の主力事業 「レバテック」のエンジニア組織を牽引してい る。 趣味は、お酒とゴルフ（ベスト９１） SPEAKER
3. |　© 2024 Levtech Co., Ltd. 3 レバテック株式会社 プロダクトデザイン責任者 2021年にレバレジーズに新卒入社し、 2022 年にレバテックへ異動。以降はプロダクトデ ザイン責任者として新規メディアの立ち上 げ、UI/UXの改善、デザインシステム管理な どデザイン組織を牽引している。 趣味はNBAを見ること。 山本 拓弥 Takuya Yamamoto SPEAKER
4. |　© 2024 Levtech Co., Ltd. 4 アジェンダ AGENDA PART 1 ・はじめに ・レバテック デザインシステム『VoLT』について ・マルチフレームワークの対応 PART 2 ・デザインシステムの考え方、つくり方、進め方 ・さいごに
5. はじめに レバテックについて
6. |　© 2024 Levtech Co., Ltd. 6 INTRODUCTION VISIONとMISSION
7. |　© 2024 Levtech Co., Ltd. 7 エージェント プログラミングス クール コンテンツ メディア プラット フォーム ダイレクト リクルーティング ITエンジニア・クリエイターの フリーランス・転職・就職・教育の すべてを備える採用プラットフォーム エージェントを中心に、求人媒体、 プログラミング教育まで IT専門職のキャリアを厚くサポート。 レバテックについて INTRODUCTION
8. |　© 2024 Levtech Co., Ltd. 8 何をつくっているか INTRODUCTION コンテンツメディア Q&Aプラットフォーム 採用管理ツール 案件/求人サイト スマホアプリ LP/サービスサイト
9. レバテック デザインシステム『VoLT』
10. |　© 2024 Levtech Co., Ltd. 10 『VoLT』とは ABOUT 『VoLT』 レバテックのデザインシステムであり、 プロダクトをつくる上でのルールや利用できる ツールがまとまったシステムのこと。 命名理由 ・電気が通ると機械が動くように、 　レバテックを前進させる力になる ・名前に「LT（LevTech）」が含まれている ・読みやすい覚えやすい
11. |　© 2024 Levtech Co., Ltd. 11 『VoLT』構築の背景 ・一貫性 ・効率性 ・コミュニケーション の課題解決のため。 前々からこれらの問題は大きかったが、 デジタル庁のデザインシステムを参考に プロジェクトを推進。 ABOUT 『VoLT』 デジタル庁のデザインシステムより抜粋
12. |　© 2024 Levtech Co., Ltd. 12 デザイナー観点：『VoLT』の特長 • マルチカラープロダクトに対応 ◦ レバテックフリーランス、ダイレクト、 etc…などそれぞれのプロダクトに、　それぞれのカ ラーが存在 ◦ Figma上で複数のカラーファイル（ライブラリ）に分けた • マスターコンポーネントにインスタンスガイドラインを設定 ◦ 複数のプロダクトを横断してコンポーネントを使いまわせるように、インスタンスでのガイ ドラインを設定 ◦ 柔軟性を持ちつつ、各プロダクトのデザイナーが作業しやすいように ABOUT 『VoLT』
13. |　© 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』
14. モノレポ化による マルチフレームワークの対応
15. |　© 2024 Levtech Co., Ltd. 15 • レバテックはサービス・プロダクトごとにフレームワークが異なる ◦ Vue.js × Nuxt ◦ React × Next.js • どちらにも対応したデザインシステムを作る必要がある ◦ そこで『Vue.js × React × Monorepoの構成』を採用 • モノレポ化によりフレームワークに捉われない部分はできる限り共通化 ◦ Componentを作成するために必要なスタイル（ CSS）やプロパティ（Props） ◦ Linter などの開発サポートツール • ※ モノレポ化 ◦ 複数のプロジェクトやモジュールを一つのリポジトリにまとめて管理する手法 なぜマルチフレームワークに対応？なぜモノレポ化している？ モノレポ化によるマルチフレームワークの対応
16. |　© 2024 Levtech Co., Ltd. 16 • Q. スタイルを持たないUIコンポーネントを提供する手段は選ばなかったの？ ◦ A. ▪ Headless UI のようなスタイルを持たないUIコンポーネントも検討 ▪ デザインの一貫性を担保することを優先して不採用 • Q. Web Components や Lit も選択肢として選ばなかったの？ ◦ A. ▪ Web Components や Lit でもフレームワークへの依存を免れることは可能 ▪ UIコンポーネントの開発は慣れ親しんだ技術の方が生産性が高い と判断 なぜマルチフレームワークに対応する方針にしたのか？ モノレポ化によるマルチフレームワークの対応
17. |　© 2024 Levtech Co., Ltd. 17 ・Turborepo を用いた Monorepo 構成 ・packages で共通部分を管理 スタイル（CSS）やプロパティ（Props） linter などの開発に必要な設定 ・Storybookもまとめて閲覧可能 ReactとVueでそれぞれ作成したもの ちょっとだけ中身を公開 モノレポ化によるマルチフレームワークの対応
18. 1. 共通スタイル（CSS） 2. 共通型定義（Type） 3. React で 1, 2 を使用（Vueも同様）
19. フレームワーク別の Storybook を一覧できる Vite アプリケーションを作成（GIF画像）
20. |　© 2024 Levtech Co., Ltd. 20 詳細はZennやnoteをご参照ください！ ※ 平均15本/月の記事を公開中 ABOUT 『VoLT』 テックブログURL
21. デザインシステムの 考え方、つくり方、進め方
22. |　© 2024 Levtech Co., Ltd. 22 デザインシステムって、ライブラリやコンポーネントに目が行きがち ABOUT DESIGN SYSTEM 参照：デザインシステムとは何か　つくり手とユーザーの体験価値を高め るデザインの仕組み ｜ ひらくデザイン ｜ 株式会社コンセント
23. |　© 2024 Levtech Co., Ltd. 23 デザインシステムって、とても広義な言葉 ABOUT DESIGN SYSTEM デザインシステム DesignOps プロダクトデザイン コミュニケーション デザイン コンポーネント ライブラリ
24. |　© 2024 Levtech Co., Ltd. 24 デザインシステムのよくあるアンチパターン ABOUT DESIGN SYSTEM • 作る側と使う側が別れて、温度感が異なる ◦ 「いいものできた！」「使いづらいな ...」 • 課題の優先度を置いてけぼりにして、一貫性に力をいれて職種間で不和が起きる ◦ 「それ今やらなくて良くね？」 • Figma上のライブラリばかりに気を取られて、コミュニケーションがおざなりになる ◦ 「書いてあるから分かるじゃん」 • 当初は高いモチベがあったけど、結局使われなくなる ◦ レバテックでも過去に、こんなことがありました
25. |　© 2024 Levtech Co., Ltd. 25 課題解決のために 整えるべきものを整える ライブラリがあっても、運用しやすいルール がなければ、 auto layoutなど、フロントエンジニアフレンド リーなデータがつくれなければ、 作るだけでも効果計測して、改善したかどう かがわかるようにしなければ 意味がない。 ABOUT DESIGN SYSTEM デジタル庁のデザインシステムより抜粋
26. |　© 2024 Levtech Co., Ltd. 26 • オンボーディングやキックオフの実施 ◦ 関係者を巻き込んで当事者意識を持たせ、浸透しやすく ◦ 結果的に、現場から改善提案があがりやすく • ルールやフローのドキュメント化 ◦ Figmaでの施策ファイル管理方法 ◦ デザインスクラム開発体制 ◦ 改善指標策定 • Figmaデータリテラシーの強化 ◦ エンジニアと齟齬がないようなFigmaデータをつくれるように ◦ Zenn：【便利tips】Figmaでデザインデータを作る時のイロハについてデザイナーに聞いてみた レバテックでは、『VoLT』を使いやすくするための基盤構築から始めた ABOUT DESIGN SYSTEM
27. |　© 2024 Levtech Co., Ltd. 27 先述した通り、レバテックには複数のプロダ クトとチームが存在 関係者を巻き込んで当事者意識を持たせ、 浸透しやすく オンボーディングやキックオフの実 施 ABOUT DESIGN SYSTEM
28. |　© 2024 Levtech Co., Ltd. 28 エンジニアと齟齬がないようなFigmaデータ をつくれるように デザインシステムを正しく使うことは、 つくることと同じくらい難しい。 Zenn：【便利tips】Figmaでデザインデータを作る時のイロ ハについてデザイナーに聞いてみた Figmaデータリテラシーの強化 ABOUT DESIGN SYSTEM
29. |　© 2024 Levtech Co., Ltd. 29 守るべきことと、今やらなくてもいいことを決めた ABOUT DESIGN SYSTEM • 守るべきこと ◦ タスクの優先度を決めて、即効性のある簡単なものから着手する ◦ 改善したことがわかるような指標を作成する • 今やらなくてもいいこと ◦ 0からつくる ◦ 時間をかけてデザイン原則を策定する ◦ デザイントークン細部のスタイリング調整 ◦ コミュニケーションデザインの制約まで決める ◦ アクセシビリティへの過度な言及とテスト設計
30. |　© 2024 Levtech Co., Ltd. 30 EX（Employee eXperience） ユーザーに向き合うことはできても、組織やメンバーに向き合える人は少ない。 「いい組織が、いいプロダクトをつくる」のだから 全員がそこにも向き合わなければいけない。 決して、リーダーやマネージャーだけの仕事ではない。 UXはもちろんだけど、EXってどこまで考えているの？ ABOUT DESIGN SYSTEM
31. |　© 2024 Levtech Co., Ltd. 31 正直、デザインシステムに関するナレッジや文化は、世の中に十分存在していますが、 正しく浸透できていたり構築できている組織やプロダクトは多くないと思います。 組織に向き合ったり、今あるものを無くしたり変えることはとても大変です。 できることからコツコツと、 「一貫性」「効率性」「コミュニケーション」の課題解決 に向き合っていきましょう。 デザインシステムは銀の弾丸ではない。 ABOUT DESIGN SYSTEM
32. 本日のサマリ 気になることがあれば、SNS等でご質問ください
33. • レバテックはデザインシステムを進めています • 『VoLT』はマルチプロダクト、マルチフレームワークに対応でき るようにしています • デザインシステム構築では、Figmaやコードに向き合う前に組 織に目を向けるべし
34. さいごに
35. レバテック volt ともに『VoLT』をつくっていく仲間を、募集しています 検索