デザインシステムのレガシーコンポーネントを刷新した話/Design System Legacy Renewal

Slide 1

Slide 1 text

Slide 2

Slide 2 text

前田雄佐まえだ　ゆうすけ株式会社カオナビプロダクトデベロップメント本部ソフトウェアエンジニア（フロントエンド）業務では新機能開発とデザインシステムの開発を担当好きなReactのフックはuseEffect 発表者紹介 © kaonavi, inc. 2

Slide 3

Slide 3 text

背景 © kaonavi, inc. 3

Slide 4

Slide 4 text

現在、プロダクトデベロップメント本部では、デザインシステムのコンポーネントで古いものを少しずつ刷新して行くべく鋭意活動中です。 kaonavi sugaoは、「カオナビ」のプロダクトデザインシステムです。ブランドの個性を鮮明にしつつ、ユーザーのみなさまにとって使いやすい体験を提供します。同時に、開発者・デザイナーにとっては、再利用しやすいコンポーネントの構築を目標としています。カオナビを利用する全ての人を支える柱として、そして、ユーザーと開発者を繋ぐつなぎ目として、重要な役割を果たしていきます。背景 © kaonavi, inc. 4

Slide 5

Slide 5 text

古いコンポーネントが抱えがちな課題

Slide 6

Slide 6 text

レガシーコンポーネントあるある © kaonavi, inc. 6 ● Webアクセシビリティへの対応が不十分 ● パッケージやライブラリをアップデートすると動かなくなる ● 最初に作成した人がいない etc…

Slide 7

Slide 7 text

Webアクセシビリティ（ a11y）とは

Slide 8

Slide 8 text

Webアクセシビリティ（ a11y）とは © kaonavi, inc. 8 Accessibility １１文字 ● Web Accessibility Initiative (WAI)、1997年設立 ● WCAGが1999年に標準化がスタート ○ Web Content Accessibility Guidelines ● 現在は、WCAG2.2（2023年勧告）

Slide 9

Slide 9 text

なぜ対応が必要になったか？ © kaonavi, inc. 9 ● 海外の規制強化 ○ アメリカではWebサイトのアクセシビリティ不足で訴訟も ○ EUにて、European Accessibility Act（EAA）が発効になり、企業のアクセシブルなデジタルサービス提供が義務化 ● GoogleのSEOにもa11yが影響 ○ Core Web Vital

Slide 10

Slide 10 text

企業の価値としての Webアクセシビリティ © kaonavi, inc. 10 ● ユーザー層の拡大 ○ 高齢化により、視覚・聴覚・認知機能の低下に対応したサービスが以前よりも求められるように ● 企業ブランドと社会的責任 ○ 企業のアクセシビリティ対応が「社会的責任（CSR/ESG）」の一環に。 ○ 投資家や消費者からの評価に繋がる

Slide 11

Slide 11 text

日本における取り組み © kaonavi, inc. 11 ● ウェブアクセシビリティ基盤委員会 ○ ウェブアクセシビリティ導入ガイドブック ● JIS規格もあります ○ JIS X 8341-3 出典: wikipedia/デジタル庁

Slide 12

Slide 12 text

カオナビが取り組んでいること © kaonavi, inc. 12 ● カオナビデザインシステムsugaoを通してサービス全体のアクセシビリティを向上すること

Slide 13

Slide 13 text

デザインシステムとしての課題と技術課題

Slide 14

Slide 14 text

実際に改修したコンポーネント © kaonavi, inc. 14 ● タブコンポーネント

Slide 15

Slide 15 text

実際に改修したコンポーネント © kaonavi, inc. 15 ● タブコンポーネント tab

Slide 16

Slide 16 text

実際に改修したコンポーネント © kaonavi, inc. 16 ● タブコンポーネント tablist

Slide 17

Slide 17 text

実際に改修したコンポーネント © kaonavi, inc. 17 ● タブコンポーネント tabpanel

Slide 18

Slide 18 text

a11y Treeをチェック © kaonavi, inc. 18 ● Google Chrome の開発者ツールで見ることができるアクセシビリティツリーここをクリック

Slide 19

Slide 19 text

デザインシステムとしての課題 © kaonavi, inc. 19 ● tablistとtabpanelのペアリングが実装側対応になっていた ● 色などのスタイルも実装側で自由に設定可能だったパッケージアップデートや修正対応がとてもツライ

Slide 20

Slide 20 text

デザインシステム課題への対応 © kaonavi, inc. 20 ● tablistとtabpanelのペアリングが実装側対応になっていた ○ tablist、tabpanelコンポーネントを実装 ● 色などのスタイルも実装側で自由に設定可能だった ○ デザイントークンを実装

Slide 21

Slide 21 text

技術課題 © kaonavi, inc. 21 ● ファイル１つに全部書かれていて可読性が低い ● 古い別のコンポーネントに依存していて、ライブラリアップデートの阻害要因に ● Webアクセシビリティ対応で不十分なところがある

Slide 22

Slide 22 text

Slide 23

Slide 23 text

自前で実装するという選択 © kaonavi, inc. 23 ● タブコンポーネントについては、react-ariaを利用しない ● 変化の早いフロントエンドの仕様に追従しやすい仕組みが必要だが、react-ariaはオーバースペックだった ● 求められていたものはシンプルな実装

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

その他、実装における工夫 © kaonavi, inc. 28 ● ロジックとスタイルの分離 ● 制御型/非制御型の両対応 ○ 制御型: 実装側でロジックを渡す（タブに URLを割り当てる、タブが切り替わるタイミングで特定の処理をする、など） ○ 非制御型: データを渡すだけで、タブとして利用可能 ● デザイントークンの型定義 ● テストの追加 ○ storybookのaddonを活用

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

ご清聴ありがとうございました！