Tweet
Tweet

Slide 1

Slide 1 text

© 2022 RAKSUL, inc. All rights reserved. Build Story - 印刷ECデザインシステムのこれ までとこれから - Design Enginner 糸数 昌史 Design Engineer 中島 晃 Design System Build #01 2022/8/23 1

Slide 2

Slide 2 text

© 2022 RAKSUL, inc. All rights reserved. @Itokazumasafumi 糸数 昌史 デザイナーとエンジニアをそれぞれ10年ほど経験。 ラクスルで両方のキャリアを活かしデザインエンジ ニアとして、デザインシステム開発に携わっていま す。 中島 晃 @nksm 大学卒業後は各種デザインを中心に制作していた が、ここ近年はスタートアップでフロントエンドの 実装がメイン。ラクスルではデザインエンジニアと して、主に実装面を担当しています。 2

Slide 3

Slide 3 text

© 2022 RAKSUL, inc. All rights reserved. 01. デザインシステムに取り組み始めた事業背景 02. 長く使ってもらうためのブランド設計。 03. 実際の開発 04. 今後のアクション Agenda 3

Slide 4

Slide 4 text

01. デザインシステムに取り組み始めた事業背景

Slide 5

Slide 5 text

© 2022 RAKSUL, inc. All rights reserved. 2013年3月開始 2015年12月開始 2020年4月開始 2021年9月開始 印刷・集客支援の プラットフォーム 物流の プラットフォーム 広告の プラットフォーム コーポレートITの プラットフォーム 5 仕組みを変えれば、世界はもっと良くなる ココのデザインシス テムの話

Slide 6

Slide 6 text

© 2022 RAKSUL, inc. All rights reserved. 6 6 ネット印刷を起点に様々な領域にプロダクト展開を進めている

Slide 7

Slide 7 text

© 2022 RAKSUL, inc. All rights reserved. ● 日本＋ベトナムでの開発 ● チームの増加 ● デザイン組織の拡大 ○ 副業デザイナー 20人+ 7 日本 ベトナム 元々 Vue.jsベースのUIライブラリは社内に存在した が、プロダクトの増加、開発チームの増加により、プ ロダクト間、職種間、言語間において、 より共通言語が必要になってきた。 開発体制の変化

Slide 8

Slide 8 text

© 2022 RAKSUL, inc. All rights reserved. パーソナリティ、デザイン原則の策定 ● 2021年、Takramさんとともに共通言語としてまず は、プロダクトのパーソナリティ、デザイン原則、を 策定 ● 2022年、 更にそれらを元に、Figmaでのコンポネン トデザインが始まりました。 8

Slide 9

Slide 9 text

02. 長く使ってもらうためのブランド設計 02. 長く使ってもらうためのブランド設計

Slide 10

Slide 10 text

© 2022 RAKSUL, inc. All rights reserved. 課題感 ● 一般的にデザインシステムは、作っても使われずに終わりがち。 ● 継続的なアップデートはもちろんのこと、認知してもらい長く使ってもらいたい ● 他社には名前があるものが多い（認知や親しみやすさ） 10

Slide 11

Slide 11 text

© 2022 RAKSUL, inc. All rights reserved. 一度聞いたら記憶に残るような、親しみやすい コンセプチュアルなネーミングを作りたい。 11

Slide 12

Slide 12 text

© 2022 RAKSUL, inc. All rights reserved. 数十案で議論の結果、 12

Slide 13

Slide 13 text

© 2022 RAKSUL, inc. All rights reserved. ＼カミーに決定／ 13

Slide 14

Slide 14 text

© 2022 RAKSUL, inc. All rights reserved. 14 バリエーション展開しても、一貫性が保て、認知力を失わないようにデザイン。 ロゴの設計について

Slide 15

Slide 15 text

© 2022 RAKSUL, inc. All rights reserved. ドキュメントサイトの立ち上げ designsystem.raksul.com/ 15

Slide 16

Slide 16 text

© 2022 RAKSUL, inc. All rights reserved. 16 kamiiの構成

Slide 17

Slide 17 text

03. 実際の開発 03. 実際の開発

Slide 18

Slide 18 text

© 2022 RAKSUL, inc. All rights reserved. 実際の開発 1. リポジトリ構成 2. 構成の理由 3. 責務を分けた構成の結果 4. 各リポジトリの特徴 4.1. kamii-icon 4.2. kamii-css 4.3. kamii-vue 18

Slide 19

Slide 19 text

© 2022 RAKSUL, inc. All rights reserved. リポジトリの構成 19 Vue コンポーネントライブラリ コンポーネントの CSS を管理 アイコンを管理 kamii は 3 つのリポジトリにて開発されています。

Slide 20

Slide 20 text

© 2022 RAKSUL, inc. All rights reserved. 構成の背景 20 Vue を利用しているプロジェクトは多いが rails で view を出力するようなレガシーな環境も存在 体験を（少しでも）統一できるようにするた め、様々な環境で利用できるものが必要に

Slide 21

Slide 21 text

© 2022 RAKSUL, inc. All rights reserved. 責務を分けた構成の結果 21 icon のみ・CSS のみ・コンポーネントと環境によって柔軟に選択できるように アイコンのみ スタイルのみ コンポーネント全体

Slide 22

Slide 22 text

© 2022 RAKSUL, inc. All rights reserved. kamii-icon ● 新たに作り直されたアイコンセット ● アイコンのみをウェブフォントで提供し、 Font Awesome と同じような記述で各種ア イコンを利用することが可能 ● 利用するためには npm 等でインストール する他、レガシーな環境でも利用できるよ うに CDN でも配信予定 22

Slide 23

Slide 23 text

© 2022 RAKSUL, inc. All rights reserved. kamii-css ● tailwindcss のプラグインとして開発 ● コンポーネントの CSS のみを提供 ● naming メソッドは SuitCSS を採用 23 ${label}

Slide 24

Slide 24 text

© 2022 RAKSUL, inc. All rights reserved. kamii-vue ● kamii-css を tailwindcss プラグインと して利用する Vue コンポーネントライブ ラリ ● スタイルは kamii-css で管理することで インタラクションに集中する 24 +

Slide 25

Slide 25 text

04. 今後のアクション 04. 今後のアクション

Slide 26

Slide 26 text

© 2022 RAKSUL, inc. All rights reserved. 今後 1. Figma との連携を進め省力化 26 各事業の成長に合わせて柔軟に最適化し、広く使われるものへ 2.コンポーネントライブラリの拡充

Slide 27

Slide 27 text

© 2022 RAKSUL, inc. All rights reserved. Thank you ! 27

Slide 28

Slide 28 text

© 2022 RAKSUL, inc. All rights reserved. 興味をもっていただけましたら、まずはカジュアルにお話してみませんか？ kamii を一緒につくるメンバーを募集しています。 ✔ デザインエンジニア副業 ✔ デザイナー採用情報 ✔ フロントエンドエンジニア ✔Meety 28