製品哲学をDesign Systemsに記そう

## おさらい
[製品哲学のない製品と「緩やかに死んでいくシステム」を考える - Qiita](https://qiita.com/e99h2121/items/f9e074823923747d8fc1)
[愛される製品の、製品哲学をまなぶ - Qiita](https://qiita.com/e99h2121/items/56d2f0b9a609ab09b319)
[製品哲学の言語化にいどむ。「カタログ」概論 - Qiita](https://qiita.com/e99h2121/items/2e992ba08be2ad324124)
[愛される製品は製品哲学に「カスタマーサクセス」が組み込まれているのでは説 - Qiita](https://qiita.com/e99h2121/items/ae24d4e02f3e3d18a8b3)

製品哲学は大事だ。そしてそれをデザインシステムに記すべきではという話。
参考: [日は沈む。考える事を放棄した日本産UIの日没 - Qiita](https://qiita.com/monsoonTropicalBird/items/c83a7b606931039b924a)
> デザインとは、外見の装飾の事ではなく、形や機能による問題解決の事である。

![](https://media.giphy.com/media/woqpfauZ6cqJFcu696/giphy.gif)
<iframe src="https://giphy.com/embed/woqpfauZ6cqJFcu696" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/wordpressdotcom-website-wordpress-plugin-woqpfauZ6cqJFcu696">via GIPHY</a></p>

## Design Systems

[デザインシステム、パターンライブラリ、スタイルガイドの違い - Qiita](https://qiita.com/uxpin_official/items/876b6d0ad7b4fe4e51f8)
[The Difference Between Design Systems, Pattern Libraries, Style Guides & Component Libraries](https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/?utm_source=Blog&utm_medium=qiita&utm_campaign=Japan&utm_content=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%80%81%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%80%81%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%AC%E3%82%A4%E3%83%89%E3%81%AE%E9%81%95%E3%81%84)

> デザインシステムとは、**チームが首尾一貫した製品を作るための共通の言語学、原則、ツール** を含む生きた実体です。
> 「デザインシステムはプロジェクトではなく、製品のための製品である」のです。

例: [Shopify Polaris](https://polaris.shopify.com/)

> **製品理念** - すべての製品の背後にある目的と魂は何か？
> コピーの内容 - 製品のインターフェイスのコピーはどのように見え、どのように感じるべきか？
> 視覚的特性 - 製品の「肌」はどのように見え、どのように感じるべきか？
> コンポーネント - デバイス間で一貫した製品を構築するために必要なUIパターンとコードコンポーネントは何か？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/cf171221-c48f-70a3-3710-4a23486f3a9a.png)

**Fresh visual style, Faster performance, Future-friendliness, Purposeful, Familiarity**
フレッシュなビジュアルスタイル、高速パフォーマンス、将来性、目的性、親しみやすさ

などというキーワードを表現し、記そうという話である。


## Design Systems集

https://github.com/alexpate/awesome-design-systems

https://github.com/klaufel/awesome-design-systems

### 例

マテリアルデザイン

https://material.io/

[Hello new logo | メルカリデザイン](https://design.mercari.com/jp/hello-new-logo/) ... メルカリ
[Design - Apple Developer](https://developer.apple.com/design/) ... Apple
[Carbon Design System](https://carbondesignsystem.com/) ... IBM 
[Redefining Progress](https://www.audi.com/ci/en/renewed-brand.html) ... Audi
[LINE Design System](https://designsystem.line.me/) ... LINE 
[SmartHR Design System](https://smarthr.design/) ... SmartHR
[Overview | Pajamas Design System](https://design.gitlab.com/brand/overview/) ... GitLab 


https://baigie.me/company/guideline/
https://classmethod.jp/company/culture/

## まとめ

> **デザインシステムは、すべてを結びつけるもの**

そのために... 

> UIインベントリーを作成する: まず、現在のインターフェースで使用されているデザインパターンをすべてリストアップして説明し、そこにある矛盾点を指摘します。

> 組織のサポートを得る: 調査結果を発表し、共通のデザイン言語の有用性を全員に説明します。Evangelizing Design Systemsのテンプレートで説明されているように、冗長な作業で無駄になっているデザインとエンジニアリングの時間数を見積もり、製品の一貫性がNPSスコアをどのように向上させるかを説明します。

> **デザインの原則を確立する: あなたのやり方を成文化します。**


製品哲学をDesign Systemsに記そう、という事例集でした。


![](https://media.giphy.com/media/fefXhtGG2NeynEUHtU/giphy.gif)
<iframe src="https://giphy.com/embed/fefXhtGG2NeynEUHtU" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/wistia-fefXhtGG2NeynEUHtU">via GIPHY</a></p>

## 補足

[Designとデザインと設計 - Qiita](https://qiita.com/e99h2121/items/7b352a6bf4acfac8b2fa)
[デザインシステムを育てていく](https://zenn.dev/sakito/articles/ddf3ccf85abc50)
[Figmaに公開されている日本のデザインシステム系ファイル](https://zenn.dev/kgsi/articles/52236aaae2db7b)

育てていくことを目標に
以上です～