---
title: 人間中心設計を土台に、Figma・Notion・Webサイト実装まで
tags:  #人間中心設計  
author: [Yukiko](https://www.docswell.com/user/yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/57GL281DEL.jpg?width=480
description: 人間中心設計を土台に、Figma・Notion・Webサイト実装まで by Yukiko
published: October 13, 26
canonical: https://www.docswell.com/s/yukiko_it/KMQ81E-2026-10-13-222635
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/57GL281DEL.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4EQYP9DXJP.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/KJ4WYXZ271.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LE1Y6NRK7G.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/GEWGW41PJ2.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/47ZL52P6J3.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/YJ6W9VMLJV.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/GJ5MNDZMJ4.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LE3W2M99E5.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/8EDKZ6G87G.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/V7PKDY3WJ8.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/2JVV1G49JQ.jpg)

まとめ
デザインシステムは、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