去年辺りから多くの案件で、デザインシステムとコンポーネントを作ってから横展開していく形の制作案件が増えてきたように思います。
もともと、100pを超えるような中〜大規模サイトでは、トップや下層はデザイン通り1からのcssで通常コーディングをして、横展開できるページではコンポーネントページも用意しつつ適宜流し込んでいくタイプの案件はありました（デザイナさんがコンポーネント化できるかどうかにかかっていた）。
それが、去年はより進んで、デザインシステムを作った上でそれに合わせて最初からcss設計されたコンポーネントを作ってから下層ページもコンポーネントを使ってつくっていくパターンになってきてる感触。
bootstrapとかがやっていた「最初っから部品集つくって部品でサイトつくろうぜ」の世界にデザイン側もいってる感触です。
最近では、トップ + コンポーネントだけ作ってくれませんか？のような打診もちょくちょくもらうようになってきました。デザインシステムとそれに対応したコンポーネントコーディングだけあればあとはお客さんのほうで続きを作るというスタイルになっていくかもしれないです。
デザインシステム
ワイヤーからページごとにデザイン作り始めちゃうのではなくて、まず最初に全部のデザインルールを決めて設計してから個別のページを作り始めようという考え方です。
なのでデザインシステムをやってるデザイナーさんからお仕事がくると部品だけがいっぱい並んでるXDとかが渡されたりします。
例えば以下のような感じで。
・使う色はこの10種類
・ボタンは4種類の色があり、3つのサイズ展開がある
・余白は段落と段落は○px
・テキストのフォントサイズは本文エリアは3種類
・テーブルは2種類で1つはspになったときにdisplay:block化する
・他にもパンくず、テキストリンク、gridの種類、タブ、アコーディオン、など
みたいなのがずらっとならんでるやつ。
部品が共通化されているのでコーディング側は.btnとか.title-sectionとか共通系の名前をつくっていくことができますね（それを求められてるし）
アトミックデザイン
デザインシステムやろうっていう潮流と同時に流行ってきてる気がするのがアトミックデザインという概念。
最小単位のデザイン部品（アトミック=原子）を組み合わせて分子となるデザインをつくり、分子を組み合わせてコンポーネントを作り、のように積み上げてデザインしていく考え方です。
デザイナー側の話なのでコーダーはざっくりの理解でいいですが、こういう思想でデザイナが作り始めているし、ディレクターもこのやりかたでやろうという話が周りでは増えている。
これも僕の体感ではありますが「アトミックデザインでいきましょう」という案件があって、デザイナーにデザインシステムいりのXDを渡されたとき、css側でアトミックに合わせることができるとすると
・分子=最小コンポーネント（コンポーネントの中でも出てくる最小の部品。ボタンとかタイトルとか）
・生態=複合コンポーネント（class=”topics”あどのblock要素全体のひとまとまり）
の2つを念頭に置きながらcssを書いていくスタイルになるのがバランス良いかなと思います。
イノグリテンプレートの再稿
まだ出来てないのですが、上記のような流れを踏まえて、イノグリのHTMLテンプレートは、コンポーネント集の1pを作っておいてそこから案件スタートするのが良さそうです。
これまでもform系やgnav系はすでに入っている状態のテンプレから作業開始してましたが、もっと最初から部品をつくっておいて、btn3種、title4種とか出来ているテンプレから案件開始して、デザインにあわせて色味やサイズなどを調整するだけでコンポーネントページができちゃうようなイメージ。
（シンプルなコーポレート案件で不要な部品が出てきちゃったらそれはcssから削除して納品する）
このあたり2021のテンプレート作ってみます！（時間みつけて問題）
