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

Transcript

1. らしさを織り込む ハーネスエンジニアリング note デザイン品質を支える足場の作り方
2. 自己紹介
3. 自己紹介 臼井優斗 UX Engineer ・デザイン基盤チーム Conde Nast → note（2021） デザインシステム / アクセシビリティ Frontend @uto_ao
4. 第1章 技術的負債の中に、 デザインの負債がある
5. note の 開発の現場
6. note の開発の現場 だれもが創作をはじめ、 続けられるようにする。 10 年以上 1日1万行 の歴史 フロントエンドの リポジトリ note.com そこに AI が乗って、さらに増えていく 1
7. 技術的負債の中の デザインの負債
8. 技術的負債の中の、デザインの負債 ルールが 機能しない → 一貫性が 崩れる → 実装が 複雑化する
9. 最終成果物は フロントエンドのコード
10. 最終成果物は、フロントエンドのコード デザインデータ 中間成果物 フロントエンドのコード 最終成果物 だから、手綱はフロントエンドに。
11. 意図を汲みとる よしなに力
12. 少ないデータから、 意図を汲みとる ・デザインされていないインタラクションを付ける ・他のデバイスでの見え方を想像する ・フォントサイズ・色・余白の揺れを吸収する ・その場で決めたり、フィードバックしたり できていないと、データ通りに作っても負債が生まれる
13. 意図を仕組みにする デザインシステム
14. 意図を仕組みにするデザインシステム 1 2 意図やルールを組み込ん 得意不得意があっても、 だ仕組みに 同じクオリティ ツール ルール ドキュメント 3 具体と抽象
15. 第2章 ルールをツールに、 ツールをルールに デザインシステムでやってきたこと
16. ルールは、本番環境と 雰囲気 の中にだけ
17. 立ち上がった ときの状態 ・「CTA は緑、ここはグレー」という感覚 ・スクリーンショットを切って貼って、真似る ・デザインツールは人によってバラバラ ・色の定数は、使われたり使われなかったり
18. カラーパレットと トークン設計
19. 補助テキストのグレーだけで 20 種類以上 フォントサイズは 1px 刻み パレットを作る 意図と意味づけをして、トークンにする リンターで縛って、置き換える Figma に統一して、トークンを同期する 定義していない色を使うと、その場で警告が出る。コミッ トフックや PR でリントを回すのも、ハーネスの一つ。
20. 実装とデザインを繋ぐ 共通言語
21. 実装とデザインを繋ぐ共通言語 Figma ↔ React トークンとコンポーネントを 1 対 1 にして、どちらからも参照できる状態にする。 作らなくていい。考えなくていい。 ルールだからではなく、メリットの側から、新しく作るものに入れていった
22. ドキュメントと コンポーネントカタログ
23. ドキュメントとコンポーネントカタログ Storybook プレイグラウンドで試せる。ア クセシビリティとインタラクシ ョンのテストも回す。 MDX 、 一つ一 つ、色に込めた制約と意味まで 書く。 Good and Bad props 同じ場所に 実装とルールが同じ場所にある から、探し出さなくていい。あ とで AI にも読ませられる。
24. アクセシビリティ
25. アクセシビリティ エンジニアが品質を保証する、いちばん大きな領域。 有志 → プロジェクト化 → 全社で取り組む → 定期チェック会
26. 第3章 AI とデザインハーネス ルールとツールを、AI に渡す
27. のための デザインシステム AI
28. AI のためのデザインシステム MCP カタログとドキュメントを、 LLM が読める形にして呼び出 せるようにする。 スキル そのやり方を渡す。どう使うか を決めておく。 DESIGN.md MCP が使えない環境でのフォ ールバック。 人にツールで渡していたものを、AI にツールで渡す。
29. Claude Design デザインシステム
30. Claude Design 1 2 3 デザインシステム のリポジトリを繋ぎ込む モックアップを起こす場所になる 完璧さは求めない。期待値がそろう Storybook
31. メールシステム
32. メールシステムの構築 のテンプレート Rails バックエンドが動く環境が無いとレビュー できない。トークン化もできない。 React Email トークンとコンポーネントで組んだテンプ レートを、Rails が読み込む。 200 本近くの移行は、 が まで。人はレビューだけ。 AI PR 副産物として、メールのデザインシステムができた
33. デザインレビュースキル
34. デザインレビュースキル レビュースキル 要件段階の壁打ちから、形になった状態へ の多角的な目線まで。 リントスキル トークンやコンポーネントの決まりごと を、足切りで指摘する。 デザイナーだけのものではなく、誰でもアイデアをデザインの形にできる。
35. デザインリリースレポート
36. デザインリリースレポート マージ済みの PR から、UI の変更を集める レビュースキルで評価して、方向を示す デザイナーが定期的にチェックして、方針を決める その方針を AI に渡して、カイゼンする
37. 時代の モチベーション AI
38. AI 時代のモチベーション 仕組みがあっても、動かす人が要る。越境には、モチ ベーションが要る。 パソコン教室 デザイナーが Git と Web の基礎を、AI を使って 手を動かして覚える。 小さな改善の経験が、自己効力感になる。 デザインパトロール 改善したい課題を持ち寄って、Slack から PR を 作るところまでやる。
39. エンジニアのいない 開発
40. 事例 質問箱 フロントエンドは、基本的にデザイナーが作った Figma はほとんど使わず、実装ベースで進めた PM もコミットして、要件からそのまま実装へ デザインシステムと AI を繋いで、素早く、品質を担保しながら
41. 第4章 プロダクト外の デザインの品質 コミュニケーションデザイナー / ビジネス職へ
42. note らしいデザインの 蒸溜
43. note-vibes らしさとは何か、note のデザインと は何かを詰め込んだ、AI が読めるドキュ メントの集まり。全社員の Claude で使 用できる。 note 使いどころ 施策が note の方向性と合っているか デザインのレビュー ライティングの壁打ち
44. コミュニケーション デザイン
45. コミュニケーションデザイン バナー 外注でコミュニケーションロス → 知識が無くても、一定 のクオリティで自分たちで 作る LP 外注先とやり取りしないと更新 できない → 社内の基盤に置き換え て、担当者が直接更新する 今日のスライドも、これで作っています。 資料 営業資料・登壇資料 → 原稿があれば、note の デザインで AI が作る
46. デザインハーネス とは
47. デザインハーネスとは ルールをツールに に渡す トークン リンター Storybook skills DESIGN.md Claude Design 仕組みで見る レビュースキル リントスキル リリースレポート プロダクトの外へ note-vibes AI MCP コンポーネント
48. まとめ
49. まとめ 技術的負債は、避けて通れない 2 デザインの負債は、実装の面で吸収できる 3 よしなに力を、体系化してデザインシステムに 4 AI に渡せる形にして、デザインハーネスに 5 品質が、プロダクトの外へ波及していく 1
50. ありがとうございました 株式会社 UX Engineer 臼井優斗 @uto_ao note