デザインシステムが導く品質の「拡張」

note inc. ⾃⼰紹介⾅井優⽃ / UX エンジニアデザインスタジオでキャリアをスタートし、Condé NastにてWIREDやGQなどのウェブメディアのフロントエンド開発およびクリエイティブディレクションに従事。2021年5⽉にnoteにフロントエンドエンジニアとして⼊社。⼀
貫したブランド体験の実現と、開発⽣産性向上を⽬指すため、UXエンジニアに転⾝。デザイナーとエンジニアの協業を促進し課題を解決する橋渡し役として、デザインシステム構築やアクセシビリティ向上を中⼼に、プロダクト全体の品質向上のため活動中。最近、⽣成AIの⾳楽で遊んでいます。 2

note inc. 3

⽬次 note inc. ‧ UXエンジニアのしごと ‧ デザインシステム ‧ デザイントークン ‧ コンポーネントライブラリ ‧ まとめ 4

note inc. UX エンジニアってなに？ 5

note inc. UXエンジニアとは.. “UXエンジニアは、デザインと開発を組み合わせることで、ユーザーフレンドリーなデジタル製品を設計‧開発します。” 6

note inc. UXエンジニアとは.. “UXエンジニアは、デザインと開発を組み合わせることで、ユーザーフレンドリーなデジタル製品を設計‧開発します。” デザインと開発の橋渡し役として協業を促進、開発⽣産性の向上とブランド体験の⼀貫性を確保し、プロダクトの体験（品質）を向上（拡張）させる。 7

note inc. （noteの）UXエンジニア 8

note inc. 4年前くらいのnote 9 • コンポーネントがない • デザインツールが定まっていない • マスターデータがない
• スクショでのやり取り • ⾊がたくさんある • 表記ゆれ • Nuxt v2 → 3 無理ぽ • デザイナーがマークアップしたりしなかったり素早く実装するために、仕組み化は先送り実装コスト重い...⼀貫性のない体験...

note inc. つまり、ルールがない 10

note inc. ルールをつくろう！ 11

note inc. （noteの）UXエンジニア 12 デザインがどうあるべきか？を実装する‧みんなが実装できる環境を作るルール（UI原則‧らしさ）を適⽤したツールを作る

note inc. プロダクトの品質を「拡張」 13

note inc. UXエンジニアのしごと 14 • デザインシステム ◦ デザイントークン ◦ コンポーネント
◦ ドキュメント • アクセシビリティ向上 • ﬁgma連携‧アセットエクスポート • プラグイン開発（イラストシステム • 本番環境のスナップショット • テキスト校正ツール • コミュニケーション ◦ プロダクトキャッチアップ ◦ UI雑談カフェ ◦ ワークショップ • いろいろ負債解消 • ……

note inc. 15 デザインシステム

note inc. 16 https://uxdesign.cc/everything-you-need-to-know-about-design -systems-54b109851969 デザインシステムは成果物ではなく、成果物の集合

note inc. デザイントークンコンポーネントライブラリ 17

note inc. デザイントークン 18

note inc. デザイントークン _構成プリミティブなトークンで、コンテキストに依存しない、値そのものを表す命名。 UIからこの値は参照しない。 red-500, blue-700 19
コンテキストや役割や機能をもち、デザインの意図や目的を反映した命名。Global Tokenから参照する。 UIから参照され、テーマ機能を包含する。 **-primary **-success 特定コンポーネントのローカルトークン。コンポーネントに依存し、global、alias どちらも参照する。 article-**, header-** Global Token Alias Token Component Token

note inc. デザイントークン _導⼊過程 1. カラーパレット（global token）定義 2. alias token定義 3.
コントラスト（アクセシビリティ）検討 4. json 定義 5. 各プラットフォームに変換（Style Dictionary） 6. 段階的実装 7. linter開発 8. 移⾏完了 9. Tailwind CSSの推奨 20

note inc. デザイントークン _成果 21 • デザインと実装で同じ⾊が参照できる • あらゆる環境で同じカラーパレット ◦ web,
app, コムデ • コントラスト確保 • 機能が明確だからまよわない • Tailwind CSS の価値が⾼まる • ちゃんとした英語表現

note inc. デザイントークン _まとめ記事 22

note inc. コンポーネントライブラリ 23

note inc. コンポーネント _構成（React）構造（JSX）とビジュアルスタイル（Tailwind CSS）を定義したコンポーネントの本体。 storybookでpropsを
閲覧できる。 24 アクセシビリティを中心としたコンポーネントの振る舞いを定義した hooks。キーボード操作の処理、フォーカス管理、適切なARIA属性などを適切にコントロールする。状態を管理するためのuseState, useContextをふくむhooks。 Presentation Behavior State

note inc. コンポーネント _開発 hygen 25 hygenで雛形（ejs）からコンポーネントを⽣成するしくみ対話形式で開発に必要なファイルを⼀括して作ってくれるこれをもとにAIにFigmaのスクショを⾒せたり
https://github.com/jondot/hygen

note inc. コンポーネント _テスト固有のpropsをすべてStoryとして書いてカタログ化する。静的なアクセシビリティテスト、インタラクションテスト、対
応するFigmaコンポーネントへのリンク。 i18n切り替え。 26 Storybookの資産を流用（render）する。 Storybookでは見た目の期待値、単体テストでは取りうる値が期待通りかチェック。デザインの変更履歴をアーカイブする。意図しないビジュアルリグレッションを検出。 PRごとにStorybook環境をホストする。コミュニケーションのハブ・Figmaとの連携にも。 Storybook 単体テスト Chromatic

note inc. コンポーネント _AI Story, test（a11y）の⽣成 27 IDE上でStoryとStoryを利⽤したtestを⽣成 gpt-4oでいい感じの出⼒追加で動的なアクセシビリティテストも依頼

note inc. コンポーネント _ドキュメント MDXでStorybookに書き込む • コンポーネントの使い⽅ • アクセシビリティ対応 • UIの基本的な考え⽅
• Good/bad集 • サンプルコード

note inc. コンポーネント _成果 29 • デザインをコードにおこさなくていい • メンテされてるStorybookいいね◎ • Tailwind
セットアップすると新しいアプリ作れる • デザインと開発の共通⾔語に • めっちゃアクセシブル • 新規事業への貢献

note inc. まとめ 30

note inc. （noteの）UXエンジニア 31 デザインがどうあるべきか？を実装する‧みんなが実装できる環境を作るルール（UI原則‧らしさ）を適⽤したツールを作る

note inc. 溶ける品質‧説く品質 32

note inc. 意識せず品質を実装できる 33

note inc. 意識せず品質を実装できる + 品質も意識 34

note inc. みんながよい品質を実践‧理解 35

note inc. プロダクトの品質を「拡張」 36

デザインシステムが導く品質の「拡張」

Thank you   !

デザインシステムが導く 品質の「拡張」

デザインシステムが導く 品質の「拡張」

Other Decks in Design

Featured

Transcript

デザインシステムが導く品質の「拡張」

デザインシステムが導く品質の「拡張」