Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

| © 2024 Levtech Co., Ltd. 2 河村 勇樹 Yuki kawamura レバテック株式会社 CTO室 テックリード 2021年1月にレバレジーズへ中途入社し、 現在はテックリードとして会社の主力事業 「レバテック」のエンジニア組織を牽引してい る。 趣味は、お酒とゴルフ(ベスト91) SPEAKER

Slide 3

Slide 3 text

| © 2024 Levtech Co., Ltd. 3 レバテック株式会社 プロダクトデザイン責任者 2021年にレバレジーズに新卒入社し、 2022 年にレバテックへ異動。以降はプロダクトデ ザイン責任者として新規メディアの立ち上 げ、UI/UXの改善、デザインシステム管理な どデザイン組織を牽引している。 趣味はNBAを見ること。 山本 拓弥 Takuya Yamamoto SPEAKER

Slide 4

Slide 4 text

| © 2024 Levtech Co., Ltd. 4 アジェンダ AGENDA PART 1 ・はじめに ・レバテック デザインシステム『VoLT』について ・マルチフレームワークの対応 PART 2 ・デザインシステムの考え方、つくり方、進め方 ・さいごに

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

| © 2024 Levtech Co., Ltd. 6 INTRODUCTION VISIONとMISSION

Slide 7

Slide 7 text

| © 2024 Levtech Co., Ltd. 7 エージェント プログラミングス クール コンテンツ メディア プラット フォーム ダイレクト リクルーティング ITエンジニア・クリエイターの フリーランス・転職・就職・教育の すべてを備える採用プラットフォーム エージェントを中心に、求人媒体、 プログラミング教育まで IT専門職のキャリアを厚くサポート。 レバテックについて INTRODUCTION

Slide 8

Slide 8 text

| © 2024 Levtech Co., Ltd. 8 何をつくっているか INTRODUCTION コンテンツメディア Q&Aプラットフォーム 採用管理ツール 案件/求人サイト スマホアプリ LP/サービスサイト

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

| © 2024 Levtech Co., Ltd. 10 『VoLT』とは ABOUT 『VoLT』 レバテックのデザインシステムであり、 プロダクトをつくる上でのルールや利用できる ツールがまとまったシステムのこと。 命名理由 ・電気が通ると機械が動くように、  レバテックを前進させる力になる ・名前に「LT(LevTech)」が含まれている ・読みやすい覚えやすい

Slide 11

Slide 11 text

| © 2024 Levtech Co., Ltd. 11 『VoLT』構築の背景 ・一貫性 ・効率性 ・コミュニケーション の課題解決のため。 前々からこれらの問題は大きかったが、 デジタル庁のデザインシステムを参考に プロジェクトを推進。 ABOUT 『VoLT』 デジタル庁のデザインシステムより抜粋

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 ● 3つの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

| © 2024 Levtech Co., Ltd. 17 ・Turborepo を用いた Monorepo 構成 ・packages で共通部分を管理 スタイル(CSS)やプロパティ(Props) linter などの開発に必要な設定 ・Storybookもまとめて閲覧可能 ReactとVueでそれぞれ作成したもの ちょっとだけ中身を公開 モノレポ化によるマルチフレームワークの対応

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

| © 2024 Levtech Co., Ltd. 20 詳細はZennやnoteをご参照ください! ※ 平均15本/月の記事を公開中 ABOUT 『VoLT』 テックブログURL

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

| © 2024 Levtech Co., Ltd. 22 デザインシステムって、ライブラリやコンポーネントに目が行きがち ABOUT DESIGN SYSTEM 参照:デザインシステムとは何か つくり手とユーザーの体験価値を高め るデザインの仕組み | ひらくデザイン | 株式会社コンセント

Slide 23

Slide 23 text

| © 2024 Levtech Co., Ltd. 23 デザインシステムって、とても広義な言葉 ABOUT DESIGN SYSTEM デザインシステム DesignOps プロダクトデザイン コミュニケーション デザイン コンポーネント ライブラリ

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

| © 2024 Levtech Co., Ltd. 25 課題解決のために 整えるべきものを整える ライブラリがあっても、運用しやすいルール がなければ、 auto layoutなど、フロントエンジニアフレンド リーなデータがつくれなければ、 作るだけでも効果計測して、改善したかどう かがわかるようにしなければ 意味がない。 ABOUT DESIGN SYSTEM デジタル庁のデザインシステムより抜粋

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

| © 2024 Levtech Co., Ltd. 27 先述した通り、レバテックには複数のプロダ クトとチームが存在 関係者を巻き込んで当事者意識を持たせ、 浸透しやすく オンボーディングやキックオフの実 施 ABOUT DESIGN SYSTEM

Slide 28

Slide 28 text

| © 2024 Levtech Co., Ltd. 28 エンジニアと齟齬がないようなFigmaデータ をつくれるように デザインシステムを正しく使うことは、 つくることと同じくらい難しい。 Zenn:【便利tips】Figmaでデザインデータを作る時のイロ ハについてデザイナーに聞いてみた Figmaデータリテラシーの強化 ABOUT DESIGN SYSTEM

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