advent calendar

ドキュメント | 1人design system advent calender 12日目

12日目はドキュメントについて。 When creating a design system it’s important to be mindful that you won’t be the only designer (or developer) who works with it. Plasma design system – Andrew Couldwell – Medium デザインシステムを作る上で、デ…

voice & tone | 1人design system advent calender 11日目

11日目はvoice & tone。 voice & tone は、UI上でのユーザとのコミュニケーションについてのあり方を示すことと、その状況による使い分け方に関してのガイドラインのことを指しているもの。例えば、何かしらエラーが発生したときにエラーメッセージをどのよ…

a11y | 1人design system advent calender 10日目

10日目はアクセシビリティ(A11y)について。 アクセシビリティは、どのようなユーザに対しても十分な利便性が保たれてるかどうかを計るもので、デザインシステムにおいて重要な要素の1つ。多くのデザインシステムでは、アクセシビリティに関してガイドライ…

モーション | 1人design system advent calender 9日目

9日目はモーションについて。 デザインシステムにおいてモーションをどのように管理するか。 モーションの分類 カラーパレットなどと同様に、モーションもプロダクト内でどのようなパターンを持っているのか、全て洗い出す必要がある。全てのモーションが同…

スペース | 1人design system advent calender 7日目

7日目はスペースについて。 デザインシステムにおいてスペースをどのように管理するか。 構成要素 UI上の空間を作り出すものをスペースの構成要素と考えると、CSSにおいてはmargin、paddingやtop、leftなども含めてスペースに該当すると考えられる。flexbox…

タイポグラフィ | 1人design system advent calender 6日目

6日目はタイポグラフィについて。 デザインシステムにおいてタイポグラフィをどのように管理していくか。 構成要素 まずタイポグラフィはどのような要素で構成されるか。代表的なものをあげると大体以下のようなものになる。 font-family font-size font-wei…

カラーパレット | 1人design system advent calender 5日目

1日目から4日目まで、デザインシステムの構成要素やInterface Inventoryなどを対象にして、デザインシステムの全体像の把握や必要性について書いた。 5日目からはデザインシステムの構成要素それぞれについて見ていく。5日目は、カラーパレットについて。 デ…

デザイントークン | 1人design system advent calender 4日目

4日目はデザイントークンについて見ていく。 Design Tokens(デザイントークン)とは Design Tokens are an abstraction for everything impacting the visual design of an app/platform.— Sönke Rohde (@soenkerohde) 2016年6月24日 デザイントークンとは…

Interface Inventory | 1人design system advent calender 3日目

3日目はInterface Inventoryについて見ていく。 An interface inventory is a comprehensive collection of the bits and pieces that make up your interface. Interface Inventory | Brad Frost Interface Inventoryとは、プロダクトのUIを作り上げている…

デザインシステムの構成 | 1人design system advent calender 2日目

1日目に、デザインシステムとはプロダクトであり、他の全てのプロダクトで利用可能なUIのエコシステムを提供するものであること等について学んだ。 じゃあ、実際にデザインシステムを作ろうとなったとして、どういうもので構成するべきなのか。 medium.com …

デザインシステムとは何か | 1人design system advent calender 1日目

1日目は、まずデザインシステムとは何かを整理。 デザインシステムとは何か。いくつかの資料に目を通した上で、主要要素と考えるのは以下の点。 プロダクトにおけるデザインのSingle Source of Truth 従来のスタイルガイドがプロダクトのコードベースの中で…

1人design system advent calender 0日目

デザインシステムについて学ぶ1人advent calendarを以下の予定で進める。 日付 内容 12/01 デザインシステムとは何か 12/02 デザインシステムの構成 12/03 Interface Inventory 12/04 Design Tokens 12/05 カラーパレット 12/06 タイポグラフィ 12/07 スペー…