エンジニア主導で_デザインシステムを導入してみた

Transcript

1. 0 エンジニア主導で デザインシステムを導入してみた 株式会社一休 RESZAIKO予約開発チーム 矢澤 明佳
2. 1 矢澤 明佳 / Yazawa Haruka 自己紹介 株式会社一休 一休レストラン事業本部 プロダクト開発部 RESZAIKO 予約開発チーム 2021年9月 入社 一休.com レストランの開発を経て、 飲食店支援サービス RESZAIKO のフロントエンドの開発を 担当。
3. 2 目次 1. 一休.com と RESZAIKO 2. デザインシステム導入の動機 3. エンジニア主導でデザインシステムを導入してみた 4. 導入後の変化 5. 課題と今後の展望 6. まとめ
4. 3 目次 1. 一休.com と RESZAIKO 2. デザインシステム導入の動機 3. エンジニア主導でデザインシステムを導入してみた 4. 導入後の変化 5. 課題と今後の展望 6. まとめ
5. 4 一休.com と RESZAIKO （サイトコントローラー） 飲食店の予約管理をDXする SaaS
6. 5 複数の媒体の在庫を一括で管理できる飲食店用サイトコントローラー （サイトコントローラー）
7. 6 飲食店の予約や顧客情報を管理するデジタル台帳
8. 7 飲食店の店舗公式予約ページを作成
9. 8 RESZAIKO の開発体制 エンジニア 5人 エンジニア 6人 エンジニア 4人 ディレクター 2人 デザイナー (外部) 1人
10. 9 目次 1. 一休.com と RESZAIKO 2. デザインシステム導入の動機 3. エンジニア主導でデザインシステムを導入してみた 4. 導入後の変化 5. 課題と今後の展望 6. まとめ
11. 10 デザインシステム導入の動機 3プロダクトを開発していく中で直面した課題 • スピード感をもってデザインできない • プロダクト間で UI/UX が統一できない • デザインのクオリティの担保ができない 開発が進むにつれてボトルネックになっていき、開発効率が悪くなってきた → デザインのルールを策定するためにデザインシステムを導入してみることに
12. 11 目次 1. 一休.com と RESZAIKO 2. デザインシステム導入の動機 3. エンジニア主導でデザインシステムを導入してみた 4. 導入後の変化 5. 課題と今後の展望 6. まとめ
13. 12 エンジニア主導でデザインシステムを導入してみた エンジニアが集まって作ることにしたが... 何から始めれば良いか わからない 知見が何もない
14. 13 最初に始めたこと • SmartHRさん の「ちいさくはじめるデザインシステム」を読んでみる https://bnn.co.jp/products/9784802512480
15. 14 デザインシステム構築の進め方 1. コンセプトの設定 2. 構成（アウトライン）決め 3. 社内レビュー 4. 作成
16. 15 デザインシステムを「システム」として確立させるためにコンセプトを明確にした コンセプトの設定 • デザインと開発を効率化し、課題解決に集中できる環境を作り、リリースや改善サイクルを早くする • デザインに一貫性をもたせ、ユーザービリティとアクセシビリティを向上させる（サービス単体） • 3つのプロダクトを違和感のないユーザー体験を提供する • 非デザイナーとデザイナーとのコミュニケーションとして使用し、共通認識を作る手段とする • 非デザイナーが自走して簡易的なデザインを行えるようにする（デザインのよりどころにする）
17. 16 構成（アウトライン）決め 他社のデザインシステムを基にカスタマイズした • 利用の手引き • デザインフィロソフィー • デザイントークン • コンポーネント • デザインルール • ライティングルール • インタラクションルール • チェックリスト
18. 17 構成（アウトライン）決め 主要部分となる3つの項目の策定を 初回リリースの目標とした • 利用の手引き • デザインフィロソフィー • デザイントークン • コンポーネント • デザインルール • ライティングルール • インタラクションルール • チェックリスト
19. 18 作成 コンポーネント洗い出し コンポーネント作成 デザイナーレビュー トークン定義 デザインルール定義
20. 19 作成 苦労したこと • 3プロダクト間でバラバラなコンポーネントを1つに定義すること • Figma の操作に慣れていない 工夫したこと • デザイントークンの定義規則の仕方を Tailwind CSS に合わせて行った ◦ トークンをデザイナーとエンジニアの共通言語にできた • まずは真似した（最初からオリジナリティを出そうとしない） • 見た目の綺麗さは二の次（まずは全部定義するということを目指した）
21. 20 β版リリース 🚀
22. 21 β版リリース 🚀
23. 22 β版リリース 🚀
24. 23 β版リリース 🚀
25. 24 目次 1. 一休.com と RESZAIKO 2. デザインシステム導入の動機 3. エンジニアがデザインシステムを導入してみた 4. 導入後の変化 5. 課題と今後の展望 6. まとめ
26. 25 導入後の変化 👍 改善されたこと • デザイナーと開発者のコミュニケーション • デザインのレビュー • 自分の担当プロダクト以外への興味関心 🤔 悪かったこと？ • 1つのプロダクト内でデザインを完結させられなくなったので、少しの変更を加え るだけでも手間がかかる（Figma の変更 → 3プロダクトそれぞれの実装変更）
27. 26 目次 1. 一休.com と RESZAIKO 2. デザインシステム導入の動機 3. エンジニアがデザインシステムを導入してみた 4. 導入後の変化 5. 課題と今後の展望 6. まとめ
28. 27 課題と今後の展望 現状：各プロダクトでデザインシステムに沿ったコンポーネントを個別に実装 目標：コンポーネントをパッケージ化し、社内 UI ライブラリとして統一化 　　　各プロダクトで再利用可能にする（現在実装中） （サイトコントローラー） （サイトコントロー ラー）
29. 28 目次 1. 一休.com と RESZAIKO 2. デザインシステム導入の動機 3. エンジニアがデザインシステムを導入してみた 4. 導入後の変化 5. 課題と今後の展望 6. まとめ
30. 29 まとめ 実際にデザインシステムを構築してみて感じたこと • オープンに運用している企業が多いので参考になるものが豊富 • 目的を先に定義したのでデザインシステムを実際に作成開始してからあまり迷い は生じなかった • エンジニア主導で構築すると、自分たちが実装時に必要としているものをダイレ クトに反映できるので実装する時の手戻りが少ない
31. 30 エンジニア募集中！ https://hrmos.co/pages/ikyu/jobs 一休ではフロントエンドにとどまらず、よりよいサービスを届ける仲間を募集しています💪 カジュアル面談からでもどうぞ！