$30 off During Our Annual Pro Sale. View Details »

Design System Build #01 | RAKSUL

itoz
August 24, 2022

Design System Build #01 | RAKSUL

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

itoz

August 24, 2022
Tweet

Other Decks in Design

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