人間中心設計を土台に、Figma・Notion・Webサイト実装まで

うさうさ研修工房 エンジニアのための デザインシステム資料 人間中心設計を土台に、 Figma・Notion・Webサイト実装まで 査読論文・公式ドキュメント準拠 ｜ 講師：うさうさ先生 うさうさ研修工房｜エンジニア向けデザインシステム資料 1

WHY なぜ、デザインシステムも人間中心設計から始めるのか Figmaのコンポーネントやカラーパレットの話から入ると、「なぜこの一貫性が必要か」が置き去りになり、数年後には誰も更新しない古いルール集にな りがちです。 ツール先行のよくある失敗 人間中心設計を土台にする デザインシステムも反復の対象 Figmaの使い方から始めると「作って終わり」に 「誰のための一貫性か」「どんな利用体験を揃 作って終わりではなく、ISO 9241-210の理解→ なり、運用されないまま形骸化しやすい えたいか」を先に言語化する 設計→評価→改善サイクルに乗せる うさうさ研修工房｜エンジニア向けデザインシステム資料 2

FOUNDATION 人間中心設計の原点： 3原則から 5原則へ 1985年 Gould & Lewis 使いやすさ設計の 3原則 1 2 3 2019年 ISO 9241-210 人間中心設計の 5原則 1 ユーザーと利用状況の理解 2 ユーザーを設計に巻き込む 3 ユーザー中心の評価で磨く 4 反復的なプロセス 5 利用体験全体を設計する ユーザーへの早期の着目 経験的な測定（実際に使わせて確かめる） 反復的設計 Communications of the ACM, 28(3), 300–311. うさうさ研修工房｜エンジニア向けデザインシステム資料 3

EVIDENCE デザインシステム実務の実証研究 Lamine, Y., & Cheng, J. (2022). Understanding and supporting the design systems practice. Empirical Software Engineering, 27(6), Article 146. 著名デザインシステム 9件のリーダーへのインタビュー Shopify Polaris、Dropbox Scooter等、実務の最前線にいる責任者が対象 OSS 41件・4,714件のIssue分析 GitHub上の公開デザインシステムのIssueを内容分析し、コミュニティの関心を定量化 デザインシステムの構成要素を特定 「コンポーネントライブラリ」「デザインガイドライン」「スタイルガイド」の3要素として整 理 最大の課題を特定 標準化とカスタマイズ性のバランスが、調査対象リーダーに共通する最大の悩みだっ た うさうさ研修工房｜エンジニア向けデザインシステム資料 4

STRUCTURE デザインシステムの 3要素 コンポーネント ライブラリ 再利用可能なUI部品（ボタン、カード、フォーム等） DRY原則・モジュール化 デザイン ガイドライン 色・タイポグラフィ・余白等のルールと「なぜそうする か」 コーディング規約・設計方針書 スタイルガイド ガイドラインの具体的な適用例・パターン集 実装例・サンプルコード 各カード下部の帯のように、ソフトウェアの設計原則に対応づけると、エンジニアには「 UIにおけるDRY原則の実践」として説明しやすい。 うさうさ研修工房｜エンジニア向けデザインシステム資料 5

CHALLENGE 最大の課題：標準化とカスタマイズ性のバランス 全部を固定ルールにすると … 全部を自由にすると … 個別プロダクトのニーズに対応できなくなる 一貫性が崩れ、ブランド・利用体験が揃わなくなる うさうさ研修工房｜エンジニア向けデザインシステム資料 6

STRATEGY バランスを取るための 3つの実務知見 ボトムアップでの構築 最初から理想形を設計せず、実際のプロダクトで使われているUI要素を拾い上げ、正式なコン ポーネントへ「昇格」させていく 専任チームの設置 デザインシステムの保守・コミュニケーションを担当するチームの存在が、継続的な運用を左右す る ドキュメント品質への投資 調査協力者の証言：「十分なドキュメントがなければ、最初の1年で失敗していただろう」 うさうさ研修工房｜エンジニア向けデザインシステム資料 7

PRACTICE① FIGMA コンポーネントライブラリの実装先として コンポーネント・バリアント・デザイントークンの機能を使い、「コンポーネントライブラリ」を実装する場所として扱う。機能詳細は Figma公式ヘルプセンター で都度確認する。 1 コンポーネント ボタンやカード等、再利用するUI部品をマスターとして定義する 2 バリアント 状態違い（サイズ・色・ホバー等）を1つのコンポーネントセットにまとめる 3 デザイントークン 色・余白・フォントサイズ等の値に名前を付け、変更を一元管理できるようにする うさうさ研修工房｜エンジニア向けデザインシステム資料 8

PRACTICE② NOTION ガイドライン・スタイルガイドの管理ハブとして デザインガイドライン・スタイルガイドのドキュメントを一元管理し、チーム内で検索・参照しやすくするハブとして扱う。機能詳細は Notion公式ヘルプセン ターで都度確認する。 1 ガイドラインページ 色・タイポグラフィ・余白のルールと「なぜそうするか」の理由を記録する 2 スタイルガイドのデータベース コンポーネントごとの使用例・NG例をカード形式で蓄積する 3 更新履歴の可視化 誰が・いつ・なぜ変更したかを残し、ルールの形骸化を防ぐ うさうさ研修工房｜エンジニア向けデザインシステム資料 9

PRACTICE③ WEB実装 アクセシビリティ基準との統合 実装段階で、WCAG 2.1のアクセシビリティ基準をデザインシステムのガイドラインに組み込む。 1 コントラスト比 本文テキストはコントラスト比4.5:1以上（AA基準）を目安にする 2 コンポーネントのアクセシビリティ フォーカス順序・代替テキスト・キーボード操作をコンポーネント単位で担保する 3 デザイントークンと CSSの連携 Figmaのトークンを実装側の変数（CSS Custom Properties等）に対応させ、乖離を防ぐ うさうさ研修工房｜エンジニア向けデザインシステム資料 10

EVALUATE 評価と反復：人間中心設計のループに戻る デザインシステムは一度作って終わりのドキュメントではなく、ISO 9241-210の反復プロセスの対象そのものです。 実際に使う開発者・デザイナーから、使いにくい点を集める仕組みがあ 理解 るか 新しいコンポーネント要望を個別対応するか正式採用するかの判断基 準があるか 改善 設計 ガイドラインが実態と乖離していないか（使われなくなった古いルールが 残っていないか） 評価 うさうさ研修工房｜エンジニア向けデザインシステム資料 11

まとめ デザインシステムは、Figmaの機能の前に人間中心設計（Gould & Lewis 1985、ISO 9241-210）が土台にある 構成要素は「コンポーネントライブラリ／デザインガイドライン／スタイルガイド」の3つ（Lamine & Cheng 2022） 最大の課題は標準化と柔軟性のバランス。ボトムアップ構築・専任チーム・ドキュメント品質が解決の鍵 Figma/Notion/Webは、この考え方を実装するための手段として位置づける 参考文献 • Gould, J. D., & Lewis, C. (1985). Designing for usability: Key principles and what designers think. Communications of the ACM, 28(3), 300–311. • ISO 9241-210:2019. Ergonomics of human-system interaction — Human-centred design for interactive systems. • Lamine, Y., & Cheng, J. (2022). Understanding and supporting the design systems practice. Empirical Software Engineering, 27(6), Article 146. • Fessenden, T. (2021). Design Systems 101. Nielsen Norman Group.（実務者向け整理記事） • W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.1. • Figma公式ヘルプセンター／Notion公式ヘルプセンター（機能詳細は都度最新情報を確認） うさうさ研修工房｜エンジニア向けデザインシステム資料 12