こんにちは、まちゅです。

家庭の事情によりインプットと記事作成が間に合いません。
Xでは何かしら発信ができているのでよしとしましょう。

今回やること

スタイルガイド ←ここ
デザイン作成
スタイル出力
プロジェクトに投入

スタイルガイドについて

ご存じかもしれませんが、デザインガイドの一種に
スタイルガイドという概念が存在しています。

より上位の概念のデザインガイドについては
サービスデザインレベルの話を含んでいるので今回は割愛させていただきます。

スタイルガイドの目的は

より効率的にデザインをコードにするため。
デザインの一貫性を保ち、サイトの品質を向上させるため。

の2点です。
制作現場では実際にサイトデザインの作成前にデザイナーとエンジニア間で取り決めを行う場合が多いようです。

コード上でも一々、ここはpaddingは何pxで、marginはいくつだ・・など
考える手間がなくなるので楽になりますよね。

例えば!important を禁止する決まりを作るだけでもゴリ押しコードが減るので保守性が高まります。

それと
googleが良さそうな規約を公開しているので、今すぐどんなものか確認したい方は以下を見るといいです。

実際に規約を作る

前提として
規約を守るためのコストが、
規約によって節約されるコストを上回ってはいけません。

ですので、極力シンプルなものにします。

今回は

フォントの大きさ
要素間のサイズと感覚

の2つの項目を整理した規約を作ろうと思います。

フォントの大きさ

最初はなんとなく「4の倍数でいいか・・」と考えていたのですが、
メリハリがなんとなく機械的になってしまい、調べたところ良いサイトを見つけました。

このサイトは、
一般艇に美しいと呼ばれるフォントサイズのプリセットを提供してくれています。
黄金比や、完全五度(よくわからん。。)など。

幸いこのサイトはCSS書き出し機能があります。
試しにNoto Sansで書き出してみました。

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400');

html {font-size: 100%;} /*16px*/

body {
  background: white;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  line-height: 1.75;
  color: #000000;
}

p {margin-bottom: 1rem;}

h1, h2, h3, h4, h5 {
  margin: 3rem 0 1.38rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  line-height: 1.3;
}

h1 {
  margin-top: 0;
  font-size: 7.594rem;
}

h2 {font-size: 5.063rem;}

h3 {font-size: 3.375rem;}

h4 {font-size: 2.25rem;}

h5 {font-size: 1.5rem;}

small, .text_small {font-size: 0.667rem;}

これをベースに、8の倍数の最も近い整数に丸めての導入しようかなと思っています。

次は、要素の12グリッドレイアウトを考えます。

設定はfigma上で簡単にできます。
今回はお恥ずかしながら自分が製作途中のfigmaのものを載せておきます。

随分前の動画ですが、こちらを参考に、
画面幅を1920に設定した場合の奇麗に見える数値を調べました。

(figmaの詳しい使い方については他のサイトを見てください。。)

これをcssに落とし込む事はまだやっていませんし、SPのデザインもないです。
それはまたデザイン完成後から書こうと思いますので、その時に追記しますね。

最後に

今回はフォントサイズと構成に絞りましたが、
テーマカラーやブレークポイントなどまだ決めなければいけない部分は多い自覚ありです。

この記事が少しでも他の方の個人制作の参考になれば幸いです。