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