<aside>
◻️ L I F E
<aside>
📝 2022/12/25 知識系はツェッテルカステンベースで再整理中（✅ 再整理完了 ‣ ）
</aside>
<aside>
💡 目次
</aside>
<aside>
📆 2021/01/25 作った
2021/01/31 本を読んで得た学びを だいぶ加筆
</aside>
デザインシステム概要
- デザインシステムは、3つの要素から構成される（詳細は後述）
- デザイン原則
- 機能パターン（実体のあるインターフェースの部品モジュール）
- 認知パターン（プロダクトの個性を視覚的に表現するエモーショナルな外観）
- デザインパターンのルーツは建築
- デザインパターンとは？（P18）
- パターン：デザインの問題を解決するために使用される、再利用可能な解決策のこと。
- ユーザーの関心をひく
- 行動をうながす
- タスクを容易にする
- 達成感やコントロール感を得られる（溶けるデザイン読み直したい・帰属感がテーマだった気がする、深掘ったら追記）
- デザインシステムの目的は？
- （開発観点）デザインを通した開発プロセスにおけるコスト効率が優れているとき
- （UX 観点）プロダクトの目的に関して効率的かつ満足度の高い UX が実現されているとき
デザイン原則
- デザイン原則とは
- プロダクトの目的を実現するには基盤となる原則と価値が必要
- 非公式に話し合うこともあればマニフェストとして明文化することもある
- 必ずしも明文化する必要はないが、メンバー間で優先順位が違わないよう、全員が原則を認めて理解することは必須
- デザイン原則の良い例
- 原則は、耳に心地よいものではなく、実行可能なアドバイスを提供するもの（P44）
- 「明快にする」 → 補足として 「最優先事項は1つに絞る」みたいなのを付け加えると良い
- 有名企業の例
- Salesforce「明快」「効率化」「一貫性」「美しさ」
- Airbnb「統一」「普遍的」「象徴的」「対話」
機能パターン
- Atomic Design と密接な関係がある
- ボタン・ヘッダー・フォーム要素・メニューなど
- フロントエンドの観点で言うと HTML
- デザインシステムの下位概念であり、企業内で一貫して使われるデザインパターンのセットのこと（コンポーネント集とほぼ同義）
- Atomic Design の粒度でコンポーネントを設計するのが今はベストプラクティス
- Molecules は Organisms との区別が曖昧になることが多いので、自分の設計では使用しないこととしている
- Atom: これ以上分割できないコンポーネント。アプリケーションの知識を持たない
- Organisms: Atom 以外
- Figma の機能の活用
- 変数機能
- パターンがあるものは、Variables 機能を使用 コンポーネントを複数選択後、一括変数グループ化できる
- スクリーンショット
認知パターン
- トーン・タイポグラフィ・色・レイアウト・イラスト・アイコン・形状・アニメーション・間隔
- 認知パターンの共通認識をもたせるための成果物
- ムードボードの制作
- Pinterest や Notion のギャラリービューを使用すると良さそう
- フロントエンドの観点で言うと CSS
- 厳格 VS ゆるい
- TED はスウォッチと呼ばれるコンポーネントのコレクションが Web と Sketch で表現されているのみ
- スウォッチの写真
- 既存のスウォッチ + ラフ・スケッチのみでデザインが完結する
- 一方 Airbnb の DLS（Design Language System）Design はけっこう厳格
- 一貫性 VS ブランディング
- タイポグラフィ
- 色
- Figma の機能の活用
これからの UI デザイナーとフロントエンドエンジニア
- セットのスキル
- Figma のコンポーネント作成は HTML / CSS の知識がないとムリで、
デザインシステムとパターンライブラリのおかげで、デザインとエンジニアリングのワークフローは互いに近づきつつあります。（P247）
DESIGN SYSTEM 関連の記事の収集
関連