デザインシステムを導入する際に役立つサイト・テンプレートまとめ

現在担当中のプロジェクトにデザインシステムを導入したので、
「とりあえずここを抑えておけば初めてでもなんとかなった！」という記事やテンプレートをまとめました。
善は急げ、行動あるのみ！な人にぴったり。

1. Adobe - Semantic UI Kit: Speeding Up Design from Ideation to Production

とりあえずこれをDLすれば始まる。XDでUIキットを作るなら一通り網羅されているので便利です。

2. UX MILK - デザインシステム、パターンライブラリ、スタイルガイドそれぞれの定義と違い

まずは抑えておきたい基本。でもあまり頭でっかちにならず、取りあえずやってみるのも手だと思っています。

3. Design Systems + Sketch — How to start preparing UI Components Library

Sketchを使ったDesign system導入のTipsですが、Sketchを使って居なくてもデザインシステムの基礎が書かれているので勉強になります。

4. shopify - Polaris, design system 

shopifyのデザインシステムのページ。ガイドラインなどはノンデザイナーにも分かりやすくまとめられています。こちらを参考に「やってよいこと＆ダメなこと」を書き進めました。

5. 色のコントラストチェッカー

以外と気にしてないデザイナーが多いコントラスト比。
しかしカラーパレットを作成する際や、色の組み合わせのガイドラインを作成する際にきちんと確認しておきたいですね。こちらを使えば簡単に確認できます。

6. UX movement - The Myths of Color Contrast Accessibility

上記5番で紹介した文字のコントラスト比ですが、必ずしもコントラスト比を数値通り守れば良いかというとそうではないようです。白いテキストはコントラスト比が低くてもボタンの場合は読みやすいというお話が載っています。他にもいくつかの例外についての説明がされています。

---

現在新プロジェクトのデザインシステム作成中ですので、運用フェーズに移行した際にはまた移行に関する事をまとめたいと思います。

(Photo by Kaboompics .com from Pexels)