スタイルガイドを効率良く作成する方法

デザインシステムを作るにあたりどんな手順で進んだらいいのか模索していたところ、偶然見つけた記事がとても良かったので簡単にまとめてみました。

スタイルガイドとは？
設計者が製品または製品のコンポーネントを設計するときに従う必要のある一連のガイドライン。

【 step 1 】スペーシングを決める

空きのルールを担保する事で一貫性が保たれます。基本的には8px倍数ですが、場合によっては4pxの倍数もありではないかと思ってます。

【 step 2 】グリッドを定義

(1) ブレイクポイントを決める
(2)グリッドの分割数・数値を決める

- モバイル
列の数を4に設定し、ガターを16pxに、マージンを24pxに設定
- タブレット
列の数を8に設定し、後はモバイルと同じ設定
- デスクトップ（1280pxの場合）
デスクトップ用に設計する場合は、固定グリッドに切り替えるのが最適です。列幅を80px、ガターを16px（再度）に設定し、列数を12に増やします。12列は、6、4、または3分割ができるため、柔軟性があり様々なレイアウトが可能になります。

【 step 3 】タイポグラフィ

(1) ブランドに合った書体を決める
(2)テキストバリエーションのスタイル設定
　フォントサイズ、太さ、文字間・行間
　H1、H2、H3、本文、小見出し、ボタンテキストetc

【 step 4 】色の設定

(1) プライマリーカラーを決める
(2)アクセントカラーを決める
(3)ニュートラルカラーを決める（モノクロカラーの濃淡）
(4)システムカラーを決める
エラーの赤 / 警告用の黄色 / 成功のための緑 / インフォは青

デザインを行う前の大前提となる定義ができました！
最低限のルールをきめるとデザインもしやすくなり、他の人へも共有しやすくなります。また、デザインシステムへスケールする前段階としても最初にとりかかりやすいスタイルガイド。

参考にしたサイトはこちら