Please enable JavaScript.

Coggle requires JavaScript to display documents.

DesignSystems : (共有言語 (チームに浸透させる (パターンが目に入るようにする, オブジェクトをそれぞれの名称で呼ぶ,…

- - - - タイポグラフィ
      - 機能パターン
      - デザイン原則
      - 色
    - - 新しいパターンを追加するプロセス
      - 新しいパターンの追加基準
      - メンバーと責任
      - システムの各側面を同期する
  - - - メタファーに基づく
      - 個性を持つ
      - パターンの目的を表す
    - - 専用チャンネルを用意する
      - ユーザーを交えて名称を検証する
- - - - デザインとエンジニアリングを完全に同期する
      - 新しいパターンを導入するための厳格なプロセス
      - 包括的な詳細ドキュメント
    - - 詳細な仕様よりシンプルなドキュメント
      - 一貫性より実用性を重視
  - - - 利点
        
        再利用可能であるため、コスト効率に優れている
        
        モジュール間の依存が低いため、保守しやすい
        
        様々なニーズに合わせて組み立てが可能
        
        複数のチームで並行してデザインできる
      - プロジェクトニーズ
        
        拡張・縮小・展開の必要性がある
        
        大量の繰り返しが必要になる
        
        複数のチームが独立して作業を進める必要がある
    - - 利点
        
        再利用を考慮せずに素早く作成できる
        
        単一の目的にチームで集中できる
        
        特定のコンテンツ、コンテキストに最適化できる
      - プロジェクトニーズ
        
        特定の目的のためにデザインされる
        
        拡張や縮小、変更の必要がない
        
        1回限りの使用で繰り返しの必要がない
        
        一貫性よりブランディング効果を重視したい
  - - - パターンとルールを定義する人が決まっている
      - この人がシステムの拒否権をもっている
      - この人がパターンライブラリ、その他のリソースを管理する
      - 一部の人に権限が集中するため、一貫性を保ちやすい
      - 管理側のリソースが不足している場合にボトルネックになる
    - - システムを使用するすべての人が保守と発展に関わる
      - 各チームに裁量があるため、アジャイルかつ柔軟に運用できる
      - 共通のカルチャーが浸透していないと分断化が起きやすい
- - - - 名詞 or 動詞
      - HTML
      - 実態がある
    - - インターフェースの具体的な構成要素
        
        パターンは進化、振る舞いは不動
      - 　機能パターンを定義する
        
        パターンマップを作成する
        
        インターフェースインベントリを作成する
        
        パターンを行為でとらえる
        
        パターンのコンテンツ構造を描く
        
        パターンをスケールで比較する
        
        コンテンツを仮説として扱う
      - システム化する方法
        
        目的指向のインベントリー
        
        準備
        
        タイミング：情報アーキテクチャ、デザイン方針を決めた後
        
        参加者：デザイナー、フロントエンド、バックエンド、PM
        
        印刷したインターフェース２部
        
        進め方
        
        主要な行動を特定する
        
        言葉遣いを合わせる
        
        行動から具体的な行動を書き出す
        
        既存の要素を目的別にグルーピングする
        
        パターンを定義する
        
        特異度を考える
        
        コンテンツ構造を考える
        
        命名する
        
        同じような目的を持つ場合にどうするか
        
        行為の一貫性で区別する
        
        視覚的なヒエラルキーで区別する
        
        特殊ケースとして存在させる
  - - - 形容詞
      - CSS
      - 実態がない
    - - ブランドイメージの表現を補助する
        
        トーン
        
        タイポグラフィ
        
        カラーパレット
        
        レイアウト
        
        イラスト
        
        アイコンスタイル
        
        形状
        
        テクスチャ
        
        間隔
        
        画像
        
        インタラクション
        
        アニメーション
      - 認知パターンの探求
        
        ムードボード
        
        スタイルタイル
        
        要素コラージュ
      - イテレーションとリファイン
        
        ブランドと一貫性のバランスをとる
        
        象徴的な瞬間をつくる
        
        小規模に改善の実験をはじめる
        
        ブランドとビジネス要件のバランスを意識する
      - システム化する方法
        
        デザイン原則からプロダクトの雰囲気を考える
        
        象徴的パターン
        
        プロダクトについて考えたときに最初に頭に浮かぶ外観やトーン
        
        ユーザーはその外観をどのように表現するか
        
        ユーザーの言葉の中で頻繁に使われる要素やタイミングがあるか
        
        外観のリストを作成する
        
        どの外観に重点を置くか決める
        
        目的から始める
        
        その外観は具体的にどのような目的・ケースで使われるのか
        
        既存の要素を集めてグルーピングする
        
        パターンと基本原則を定義する
        
        基本原則を承認する
- - - - ガイドとなるデザイン原則を定義する
      - 再利用可能なデザインパターンを定義し、標準化する
      - パターンライブラリを作成する
      - 最新のパターンを含むマスターデザインファイルをセットアップする
      - モジュール型アプローチを支援するよう、コードをリファクタリングする
    - - 会話、共同作業、プログラミングやペアデザインの形式、トレーニングを通じた知識共有プロセスをセットアップする
      - パターンライブラリを推奨し、部門を超えて会社全体での使用を推進する
      - チームおよび部門全体でデザインランゲージを共有する
      - デザインシステムの紹介を新メンバーへの研修に取り入れる
    - - 専用のSlackチャンネルを用意して、デザインパターンの定義や命名を共同で行う
      - パターンウォールを作成して、社内の他の人たちにプロセスが見えるようにオープンにして参加をうながす
      - 定期的に情報交換する場を設けて、全員が共通認識を持てるようにする
      - チームおよび部門間の共同作業を推進する
    - - 終わりのタスクリストを淡々とこなすのではなく、ある程度の量を一気に終わらせる
      - 最小の労力で最大のメリットが得られるようにタスクを計画する