Published by 松原幸行,
デザインワークを行うにあたり抜け漏れが無いかどうかをチェックする便利なツールとして、オランダ在住の三氏（Arda Karacizmeli氏、Dmitry Belyaev氏とSteven Baguley氏）が作成した、オープンソースの「デザイン・システム・チャックリスト」がある[1]。
デザインコンポーネントとして何が必要なのか、プロジェクトマネジメントはどうやるのか、などの疑問に答える項目を網羅している。デザインワークのあらましを知るには良い参考資料である。
なお用語については、普段使用している言葉が多いので問題ないと思うが、一部分かりにくい言葉についてはカッコ付きで補足する。
＜Design language＞
Brand
Vision
Design principles（デザインの原則）
Tone of voice（論調・語り口）
Terminology（定型文・標準メッセージなど）
Writing guidelines（掲載する文章の記述スタイル・文法など）
Logo
Monochrome version
Small use guidance
Placement and clearance guidance
Usage guidance（使用例、展開方法など）
Different file formats
Guidelines
Accessibility
User onboarding（ユーザー登録をしてもらう方法）
Notifications and permissions（デザインコンポーネントに関するスタイルや技術的要件など）
Microcopy guidelines（ガイドラインの書き方、テンプレートなど）
＜Design tokens＞（デザイン要素）
Colour
Accessibility
Functional colours
Dark mode
Guidelines
Layout
Units
Grid
Breakpoints（プログラムを一時停止する箇所）
Spacing
Typography
Responsiveness（応答性）
Grid relation
Readability
Performance
Guidelines
Iconography
Accessibility
Style
Naming
Relation with grid
Sizes
Keywords
Reserved icons
Guidelines
＜Core components＞
Avatar（＊主な対象がウェブサービスなのでアバターを上げていると思われる）
Image
Image fallback
Accessibility
Sizes
Icon
Background colours
Badge
Appearance
Dismissible action
Banner
Appearance
Area for icons or images
Actions
Dismissible action
Accessibility
Responsiveness
Button
Hover state
Active state
Focused state
Icon support
Disabled
Loading
Full-width
Variants
Sizes
Card（グループメンバーの情報など）
Supports any type of content
Information structure
Supports media sections
Supplementary actions
Responsiveness
Carousel（水平方向のスクロール）
Navigation controls
Supports any content
Items width customisation
Touch events support
Keyboard navigation
Responsiveness
Dropdown
Supports any type of content
Action menu
Focus trapping
Close action
Keyboard navigation
Dynamic positioning
Responsiveness
Icon
Sizes
Colours
Input checkbox
Checked state
Disabled state
Indeterminate state
Label
Error state
Keyboard support
Checkbox group
Input radio（いわゆるラジオボタン）
Checked state
Disabled state
Label
Error state
Keyboard support
Radio group
Input text
Disabled state
Placeholder
Label
Error state
Icon support
Input switch
Checked state
Disabled state
Label
Keyboard support
List
Supports any type of content
Horizontal stacking
Divided variant
Supports actionable content
Loading indicator
Linear and non-linear variants
Determinate or indeterminate wait time
Light variant
Reduced motion
Modal（主要なコンテンツの前に表示される、重要な情報またはアクション可能なコンテンツなど）
Supports any type of content
Supplementary actions（モーダル画面からアクションする場合のエレメントの配置場所など）
Close action
Information structure
Keyboard navigation support（モーダル画面ではキーボードアクセスを許容する範囲など）
Focus trapping（最初にフォーカスする箇所など）
Tabs
Active button state
Button icon support
Equally-sized tab buttons
Keyboard navigation
Responsiveness
Toast（アクション後にフィードバックするメッセージ）
Dismissed automatically
Action support
Handles multiple instances
Accessibility
Responsiveness
Tooltip
Keyboard hover support
Dynamic positioning
Hover timeout
Light variant
Instant transition for element groups
＜Tooling＞（デザインや開発の支援ツール）
Design（デザインサイド）
Design Editor
Plugins
Version control
Contribution guidelines
Development（開発サイド）
Component catalog
Documentation
Code style
Unit testing
Accessibility testing
Semantic versioning
Release strategy
Commit message guidelines and changelog
MR templates
Contribution guidelines
＜Project management＞
Task management
Roadmap
Milestones
Ticketing（日々の業務指示を行う方法）
Communications
Community meetings
Communication channel
Open hours
FAQ
Analytics（デザインシステムの活用度合いを把握する）
Component analytics
Error logging
Tooling analytics
Service and health metrics
チェックリストなので内容は記述しておらず、検討すべき項目が列記してある感じである。
システムに依存する部分や特殊なコンポーネントを用いる場合などについてはこのリストに当てはまらないこともあるだろう。その場合は、ユニークな項目として追加していくことになる。サイトでも「Share your progress」と訴えている。
参考にされたし。
参考情報
