DesignSystems デジタルプロダクトのためのデザインシステム実践ガイド
----
読み始める前に
デザインシステムを作る、作り方のプラクティスを知りたい
何をきっかけに生まれるものなのか
どういった粒度、プロセスで作っていくことができるのか
デザインシステムの要素が知りたい
成熟させる、浸透させる、使われていく方法が知りたい
読んでる
--
章立て
基本編
Chapter1-5
パターンライブラリの作成、保存、共有、使用する方法について
応用編
Chapter6-10
デザインシステムを確立、維持するための手段
--
参考事例
Airbnbのデザインシステム
design language system(DLS)
厳格さが特徴
> スタイルのカスタマイズをpropによって行うようにしたのだ。自由にカスタマイズ可能なstyleやclassNameなどのpropではなく、isAlpacaというpropを用意するようにした。
Atlassian
パターンを管理する専門チームと、誰もが関与できるオープンソースモデルもある
gatsbyでつくってる
Eurostar
パターンライブラリ Eurostar GLU | Eurostar GLU
専任チームをがんばって作った
Sipgate
2015年にパターンライブラリはあったけど、コミュニケーション不足からくるパターン増えすぎ問題にぶちあたったらしい。
複数の商品サイトでデザインランゲージを統一することを目標に、新しいパターンライブラリが構築された
TED
少数精鋭でデザインシステムの取り決めをしている
パターンについて深く共有できてシンプルに明文化されている
包括的なパターンライブラリを確立する必要性を感じてない
--
基本編の章立てを確認する
1-デザインシステム
気になるトピック
パターンライブラリとその限界
効果的なデザインシステムを構築するには
2-デザイン原則
気になるトピック
効果的なデザイン原則の特徴
原則を定義する
原則からパターンへ
3-機能パターン
気になるトピック
機能パターンを定義する
4-認知パターン
気になるトピック
認知パターンがシステムをつなぐ
5-共有言語
気になるトピック
命名規則のパターン
--
パターン: 再利用可能なインターフェース
機能パターンと認知パターンの2種類が登場する
機能パターン(モジュール): 行動に関連する。インターフェースの具体的な構成要素
認知パターン: ブランドや外観に関連する
類似の言葉
デザインシステム、パターンライブラリ、スタイルガイド
--
Chapter1 デザインシステム
一貫性を維持しつつ、標準にならっている
覚えていなくても見て分かるようにする
シンプルで美しいデザインにする
ユーザーがエラーを認識、診断、および回復できるようにする
> デザインシステムの主な目標の一つは「クリエイティブ面の方向性を拡張する」
デザインシステムとは、単にデザインガイドラインを作ることではなく、むしろ組織論や運用論
読了後