デザイナーのためのコンポーネント命名チェックリスト

Описание: 【デザイナーのためのコンポーネント設計論 〜「絵を描く」から「建築する」マインドシフト〜】
UIデザインにおけるコンポーネント設計は、単に「きれいな画面を描く」こととは質の異なる思考が求められます。本動画では、プロダクトを長期的に成長させ、エンジニアとの円滑な連携を実現するための「コンポーネント設計の勘所」を体系的に解説します。
「ボタンのサイズは何段階必要？」「プロパティの名前をどう決める？」「Figmaでの変更がコード側にどう影響する？」といった、実務で直面する無数の問いに対する判断基準（地図）を手に入れましょう。

--------------------------------------------------------------------------------
📌 この動画で学べること
「建築」としてのデザイン思想：一枚のキャンバスに絵を描くマインドから、規格化された部材を設計する思考への転換
エンジニアとの共通言語：プロパティの型（Boolean, Enumなど）や命名規則を揃え、設計レビューの質を劇的に上げる方法
壊れにくいシステムの原則：間接化、カプセル化、制約など、変更に強いライブラリを支える6つの原則
不確実性への対処：将来の変更コストを抑える「器」の設計と、意図的な妥協のしかた

--------------------------------------------------------------------------------
⏱ タイムスタンプ
00:00 はじめに：なぜコンポーネント設計を学ぶのか
01:30 コンポーネントライブラリがめざす6つの原則
05:45 原則の実践：経路依存性と一貫性の価値
10:20 構築戦略：MUI、Headless UI、フルスクラッチの選び方
15:10 コンポーネント分割：汎用とドメインをどう分けるか
20:00 命名の極意：業界の語彙を借り、意味を符号化する
24:30 変数の設計(1)：基本の型（Boolean, Enum, Stringなど）
29:00 変数の設計(2)：データのまとまり（Object）と差し替え（Element/Slot）
34:10 プロパティの直交性とFigma・コード間のギャップ
38:50 現実的な問題：安全な変更と破壊的変更の境界線
43:20 状態（UIスタック）：理想・空・読み込み・不完全・エラー
47:50 レイアウト：中身（Padding）と配置（Margin）の分離
52:10 アセット管理：SVGアイコンの色制御と一貫性
56:00 おわりに：デザインシステムは「文化の伝達媒体」

--------------------------------------------------------------------------------
🛠 対象となる方
コードは書かないが、エンジニアと対等に設計を議論したいデザイナー
デザインシステムの構築・運用に携わっているチーム
デザインシステムへの投資対効果を理解したいプロダクトマネージャー（PdM）
デザイナーの意図を汲み取った実装を目指すエンジニア

--------------------------------------------------------------------------------
📚 参考リソース
動画内で紹介したデザインシステム事例やツール：
Design Systems: Shopify Polaris, Atlassian Design System, Material Design, Radix UI
Tools: Storybook, Style Dictionary, Chromatic
Resources: Atomic Design (Brad Frost), WAI-ARIA (APG)

--------------------------------------------------------------------------------
執筆・監修： Yasuhiro Yokota（株式会社タイミー プロダクトデザインマネージャー）
#デザインシステム #UIデザイン #Figma #プロダクト開発 #コンポーネント設計 #DesignSystem