noteらしさを織り込むハーネスエンジニアリング

by uto usui

Embed

Start on current slide

Slide 1

Slide 1 text

らしさを織り込むハーネスエンジニアリング note デザイン品質を支える足場の作り方

Slide 2

Slide 2 text

自己紹介

Slide 3

Slide 3 text

自己紹介臼井優斗 UX Engineer ・デザイン基盤チーム Conde Nast → note（2021）デザインシステム / アクセシビリティ Frontend @uto_ao

Slide 4

Slide 4 text

第1章技術的負債の中に、デザインの負債がある

Slide 5

Slide 5 text

note の開発の現場

Slide 6

Slide 6 text

note の開発の現場だれもが創作をはじめ、続けられるようにする。 10 年以上 1日1万行の歴史フロントエンドのリポジトリ note.com そこに AI が乗って、さらに増えていく 1

Slide 7

Slide 7 text

技術的負債の中のデザインの負債

Slide 8

Slide 8 text

技術的負債の中の、デザインの負債ルールが機能しない → 一貫性が崩れる → 実装が複雑化する

Slide 9

Slide 9 text

最終成果物はフロントエンドのコード

Slide 10

Slide 10 text

最終成果物は、フロントエンドのコードデザインデータ中間成果物フロントエンドのコード最終成果物だから、手綱はフロントエンドに。

Slide 11

Slide 11 text

意図を汲みとるよしなに力

Slide 12

Slide 12 text

少ないデータから、意図を汲みとる・デザインされていないインタラクションを付ける・他のデバイスでの見え方を想像する・フォントサイズ・色・余白の揺れを吸収する・その場で決めたり、フィードバックしたりできていないと、データ通りに作っても負債が生まれる

Slide 13

Slide 13 text

意図を仕組みにするデザインシステム

Slide 14

Slide 14 text

意図を仕組みにするデザインシステム 1 2 意図やルールを組み込ん得意不得意があっても、だ仕組みに同じクオリティツールルールドキュメント 3 具体と抽象

Slide 15

Slide 15 text

第2章ルールをツールに、ツールをルールにデザインシステムでやってきたこと

Slide 16

Slide 16 text

ルールは、本番環境と雰囲気の中にだけ

Slide 17

Slide 17 text

立ち上がったときの状態・「CTA は緑、ここはグレー」という感覚・スクリーンショットを切って貼って、真似る・デザインツールは人によってバラバラ・色の定数は、使われたり使われなかったり

Slide 18

Slide 18 text

カラーパレットとトークン設計

Slide 19

Slide 19 text

補助テキストのグレーだけで 20 種類以上フォントサイズは 1px 刻みパレットを作る意図と意味づけをして、トークンにするリンターで縛って、置き換える Figma に統一して、トークンを同期する定義していない色を使うと、その場で警告が出る。コミットフックや PR でリントを回すのも、ハーネスの一つ。

Slide 20

Slide 20 text

実装とデザインを繋ぐ共通言語

Slide 21

Slide 21 text

実装とデザインを繋ぐ共通言語 Figma ↔ React トークンとコンポーネントを 1 対 1 にして、どちらからも参照できる状態にする。作らなくていい。考えなくていい。ルールだからではなく、メリットの側から、新しく作るものに入れていった

Slide 22

Slide 22 text

ドキュメントとコンポーネントカタログ

Slide 23

Slide 23 text

ドキュメントとコンポーネントカタログ Storybook プレイグラウンドで試せる。アクセシビリティとインタラクションのテストも回す。 MDX 、一つ一つ、色に込めた制約と意味まで書く。 Good and Bad props 同じ場所に実装とルールが同じ場所にあるから、探し出さなくていい。あとで AI にも読ませられる。

Slide 24

Slide 24 text

アクセシビリティ

Slide 25

Slide 25 text

アクセシビリティエンジニアが品質を保証する、いちばん大きな領域。有志 → プロジェクト化 → 全社で取り組む → 定期チェック会

Slide 26

Slide 26 text

第3章 AI とデザインハーネスルールとツールを、AI に渡す

Slide 27

Slide 27 text

のためのデザインシステム AI

Slide 28

Slide 28 text

AI のためのデザインシステム MCP カタログとドキュメントを、 LLM が読める形にして呼び出せるようにする。スキルそのやり方を渡す。どう使うかを決めておく。 DESIGN.md MCP が使えない環境でのフォールバック。人にツールで渡していたものを、AI にツールで渡す。

Slide 29

Slide 29 text

Claude Design デザインシステム

Slide 30

Slide 30 text

Claude Design 1 2 3 デザインシステムのリポジトリを繋ぎ込むモックアップを起こす場所になる完璧さは求めない。期待値がそろう Storybook

Slide 31

Slide 31 text

メールシステム

Slide 32

Slide 32 text

メールシステムの構築のテンプレート Rails バックエンドが動く環境が無いとレビューできない。トークン化もできない。 React Email トークンとコンポーネントで組んだテンプレートを、Rails が読み込む。 200 本近くの移行は、がまで。人はレビューだけ。 AI PR 副産物として、メールのデザインシステムができた

Slide 33

Slide 33 text

デザインレビュースキル

Slide 34

Slide 34 text

デザインレビュースキルレビュースキル要件段階の壁打ちから、形になった状態への多角的な目線まで。リントスキルトークンやコンポーネントの決まりごとを、足切りで指摘する。デザイナーだけのものではなく、誰でもアイデアをデザインの形にできる。

Slide 35

Slide 35 text

デザインリリースレポート

Slide 36

Slide 36 text

デザインリリースレポートマージ済みの PR から、UI の変更を集めるレビュースキルで評価して、方向を示すデザイナーが定期的にチェックして、方針を決めるその方針を AI に渡して、カイゼンする

Slide 37

Slide 37 text

時代のモチベーション AI

Slide 38

Slide 38 text

AI 時代のモチベーション仕組みがあっても、動かす人が要る。越境には、モチベーションが要る。パソコン教室デザイナーが Git と Web の基礎を、AI を使って手を動かして覚える。小さな改善の経験が、自己効力感になる。デザインパトロール改善したい課題を持ち寄って、Slack から PR を作るところまでやる。

Slide 39

Slide 39 text

エンジニアのいない開発

Slide 40

Slide 40 text

事例質問箱フロントエンドは、基本的にデザイナーが作った Figma はほとんど使わず、実装ベースで進めた PM もコミットして、要件からそのまま実装へデザインシステムと AI を繋いで、素早く、品質を担保しながら

Slide 41

Slide 41 text

第4章プロダクト外のデザインの品質コミュニケーションデザイナー / ビジネス職へ

Slide 42

Slide 42 text

note らしいデザインの蒸溜

Slide 43

Slide 43 text

note-vibes らしさとは何か、note のデザインとは何かを詰め込んだ、AI が読めるドキュメントの集まり。全社員の Claude で使用できる。 note 使いどころ施策が note の方向性と合っているかデザインのレビューライティングの壁打ち

Slide 44

Slide 44 text

コミュニケーションデザイン

Slide 45

Slide 45 text

コミュニケーションデザインバナー外注でコミュニケーションロス → 知識が無くても、一定のクオリティで自分たちで作る LP 外注先とやり取りしないと更新できない → 社内の基盤に置き換えて、担当者が直接更新する今日のスライドも、これで作っています。資料営業資料・登壇資料 → 原稿があれば、note のデザインで AI が作る

Slide 46

Slide 46 text

デザインハーネスとは

Slide 47

Slide 47 text

デザインハーネスとはルールをツールにに渡すトークンリンター Storybook skills DESIGN.md Claude Design 仕組みで見るレビュースキルリントスキルリリースレポートプロダクトの外へ note-vibes AI MCP コンポーネント

Slide 48

Slide 48 text

まとめ

Slide 49

Slide 49 text

まとめ技術的負債は、避けて通れない 2 デザインの負債は、実装の面で吸収できる 3 よしなに力を、体系化してデザインシステムに 4 AI に渡せる形にして、デザインハーネスに 5 品質が、プロダクトの外へ波及していく 1

Slide 50

Slide 50 text

ありがとうございました株式会社 UX Engineer 臼井優斗 @uto_ao note