Nuxt3 + ヘッドレスCMSのブログをサーバーレスで構築する話 ２-２（デザイン周り）

はじめに

この記事は次のような方向けの記事となります。
・Nuxt3 でブログを構築したい
・AWSを使ったサーバーレスでのサーバー構築を考えている
・nuxt/content じゃなくヘッドレス CMS を使ってブログ運用をしたい
今回はデザイン、周りの構成などをまとめています。(二つ目)

この記事のそもそもの経緯などは以下の記事を読んでください。
Nuxt3 + ヘッドレス CMS のブログをサーバーレスで構築する話 1

CSS(クラス名) 命名規則

RSCSS で運用します。
過去に参加したプロジェクトで BEM を用いた命名を行っていたのでそのまま使おうかと思っていました。
ですが、少しネットで調べたら RSCSS を見つけたので勉強も兼ねてこっちを使うことにしました。

id 属性

今回は nuxt で組むため id は原則禁止とします。
多分使わないだろうと思いあえて自分を縛ってみます。

Typography

基本的にマテリアルデザインガイドラインに沿って設定します。
フォントは Noto Sans JP または sans-serif を設定します。

引用元

ただ H1~H6 のサイズはでかすぎるので都度使う画面側で調整します。

配色

マテリアルデザインガイドラインに沿って設定します。
配色作成ツール
マテリアルデザインガイドラインのページで出している配色作成ツールがあったのでこれを利用して適用します。

コンポーネント設計

現在は「BCD Design」という方法で実装をしています。
以下参考記事
BCD Design によるコンポーネントの分類

ですが、他のプロジェクトなども増やした際の使いまわしづらさが気になったので今はAtmic Designにリファクタリングしています。
結局は広く知れ渡っている方法が良いのかなって感じました。

おわり

デザイン周りは以上です。

次はローカル開発環境の構築を行います。
AWS の環境構築と迷いましたが実物があったほうが良いかなと思ったので先に nuxt3 の開発環境を作成します。

次の記事（執筆中。。。）