Design System Build #01 | RAKSUL

23 Aug 2022
下記イベントで発表したラクスルのスライド「Build Story - 印刷ECデザインシステム のこれまでとこれから -」
---
「Design System Build #01 -デザインシステム構築の様々なアプローチ-」
https://raksul.connpass.com/event/255844/

Transcript

1. © 2022 RAKSUL, inc. All rights reserved. Build Story - 印刷ECデザインシステムのこれ までとこれから - Design Enginner 糸数 昌史 Design Engineer 中島 晃 Design System Build #01 2022/8/23 1
2. © 2022 RAKSUL, inc. All rights reserved. @Itokazumasafumi 糸数 昌史 デザイナーとエンジニアをそれぞれ10年ほど経験。 ラクスルで両方のキャリアを活かしデザインエンジ ニアとして、デザインシステム開発に携わっていま す。 中島 晃 @nksm 大学卒業後は各種デザインを中心に制作していた が、ここ近年はスタートアップでフロントエンドの 実装がメイン。ラクスルではデザインエンジニアと して、主に実装面を担当しています。 2
3. © 2022 RAKSUL, inc. All rights reserved. 01. デザインシステムに取り組み始めた事業背景 02. 長く使ってもらうためのブランド設計。 03. 実際の開発 04. 今後のアクション Agenda 3
4. 01. デザインシステムに取り組み始めた事業背景
5. © 2022 RAKSUL, inc. All rights reserved. 2013年3月開始 2015年12月開始 2020年4月開始 2021年9月開始 印刷・集客支援の プラットフォーム 物流の プラットフォーム 広告の プラットフォーム コーポレートITの プラットフォーム 5 仕組みを変えれば、世界はもっと良くなる ココのデザインシス テムの話
6. © 2022 RAKSUL, inc. All rights reserved. 6 6 ネット印刷を起点に様々な領域にプロダクト展開を進めている
7. © 2022 RAKSUL, inc. All rights reserved. • 日本＋ベトナムでの開発 • チームの増加 • デザイン組織の拡大 ◦ 副業デザイナー 20人+ 7 日本 ベトナム 元々 Vue.jsベースのUIライブラリは社内に存在した が、プロダクトの増加、開発チームの増加により、プ ロダクト間、職種間、言語間において、 より共通言語が必要になってきた。 開発体制の変化
8. © 2022 RAKSUL, inc. All rights reserved. パーソナリティ、デザイン原則の策定 • 2021年、Takramさんとともに共通言語としてまず は、プロダクトのパーソナリティ、デザイン原則、を 策定 • 2022年、 更にそれらを元に、Figmaでのコンポネン トデザインが始まりました。 8
9. 02. 長く使ってもらうためのブランド設計 02. 長く使ってもらうためのブランド設計
10. © 2022 RAKSUL, inc. All rights reserved. 課題感 • 一般的にデザインシステムは、作っても使われずに終わりがち。 • 継続的なアップデートはもちろんのこと、認知してもらい長く使ってもらいたい • 他社には名前があるものが多い（認知や親しみやすさ） 10
11. © 2022 RAKSUL, inc. All rights reserved. 一度聞いたら記憶に残るような、親しみやすい コンセプチュアルなネーミングを作りたい。 11
12. © 2022 RAKSUL, inc. All rights reserved. 数十案で議論の結果、 12
13. © 2022 RAKSUL, inc. All rights reserved. ＼カミーに決定／ 13
14. © 2022 RAKSUL, inc. All rights reserved. 14 バリエーション展開しても、一貫性が保て、認知力を失わないようにデザイン。 ロゴの設計について
15. © 2022 RAKSUL, inc. All rights reserved. ドキュメントサイトの立ち上げ designsystem.raksul.com/ 15
16. © 2022 RAKSUL, inc. All rights reserved. 16 kamiiの構成
17. 03. 実際の開発 03. 実際の開発
18. © 2022 RAKSUL, inc. All rights reserved. 実際の開発 1. リポジトリ構成 2. 構成の理由 3. 責務を分けた構成の結果 4. 各リポジトリの特徴 4.1. kamii-icon 4.2. kamii-css 4.3. kamii-vue 18
19. © 2022 RAKSUL, inc. All rights reserved. リポジトリの構成 19 Vue コンポーネントライブラリ コンポーネントの CSS を管理 アイコンを管理 kamii は 3 つのリポジトリにて開発されています。
20. © 2022 RAKSUL, inc. All rights reserved. 構成の背景 20 Vue を利用しているプロジェクトは多いが rails で view を出力するようなレガシーな環境も存在 体験を（少しでも）統一できるようにするた め、様々な環境で利用できるものが必要に
21. © 2022 RAKSUL, inc. All rights reserved. 責務を分けた構成の結果 21 icon のみ・CSS のみ・コンポーネントと環境によって柔軟に選択できるように アイコンのみ スタイルのみ コンポーネント全体
22. © 2022 RAKSUL, inc. All rights reserved. kamii-icon • 新たに作り直されたアイコンセット • アイコンのみをウェブフォントで提供し、 Font Awesome と同じような記述で各種ア イコンを利用することが可能 • 利用するためには npm 等でインストール する他、レガシーな環境でも利用できるよ うに CDN でも配信予定 22
23. © 2022 RAKSUL, inc. All rights reserved. kamii-css • tailwindcss のプラグインとして開発 • コンポーネントの CSS のみを提供 • naming メソッドは SuitCSS を採用 23 <button class="Button Button--filled Button--medium Button--primary"> <span class="Button-icon"> <i class="ka ka-cart"></i> </span> <span class="Button-label">${label}</span> </button>
24. © 2022 RAKSUL, inc. All rights reserved. kamii-vue • kamii-css を tailwindcss プラグインと して利用する Vue コンポーネントライブ ラリ • スタイルは kamii-css で管理することで インタラクションに集中する 24 +
25. 04. 今後のアクション 04. 今後のアクション
26. © 2022 RAKSUL, inc. All rights reserved. 今後 1. Figma との連携を進め省力化 26 各事業の成長に合わせて柔軟に最適化し、広く使われるものへ 2.コンポーネントライブラリの拡充
27. © 2022 RAKSUL, inc. All rights reserved. Thank you ! 27
28. © 2022 RAKSUL, inc. All rights reserved. 興味をもっていただけましたら、まずはカジュアルにお話してみませんか？ kamii を一緒につくるメンバーを募集しています。 ✔ デザインエンジニア副業 ✔ デザイナー採用情報 ✔ フロントエンドエンジニア ✔Meety 28