フリーランスのWebデザイナーはWeb制作を一気通貫に行うためにデザインのみならず、コーディングもすべきだと私は思います。小規模なWebサイトであれば問題ないですが、ちょっと大きめの案件になると、単純にHTMLとCSSでコーディングすればいいでは済ませなくなります。
この記事では、私が爆速コーディングするためにどうしているかを共有します。
#結論
結論からいいますと、次の３点をこなしていくと爆速になります。
1.FLOCSSとBEM記法の組み合わせ
2.いかに自分が使いやすいmixinを作れるかを考える
3.エディターの使いこなし
#FLOCSSとBEM記法の組み合わせ
今更感やベタ感を否めませんが、フロントエンドエンジニアのみならず、デザイナーにとっても最強だと感じています。
FLOCSSについて：https://github.com/hiloki/flocss
BEM記法について：https://zenn.dev/knts0/articles/quick-understanding-bem
これらは考え方であり、個々のプロジェクトは絶対にそのルールに100%守らなければならないわけではありません。１ページものであればわざわざprojectフォルダを作る必要はないし、html要素がシンプルな構造であればいちいち入れ子にしたりする必要もないかもしれません。
FLOCSSとBEMが解決してくれるのは以下だと考えています：
##FLOCSS
- HTMLの要素を階層化して考えることができる。
- partialsは程よい粒度で作成するので、CSSファイルの構造が複雑になりにくい。
##BEM
- BlockやElement単位でHTML要素を見ることができるため、マークアップが楽。
- SCSSとの組み合わせで、アンパサンドでどんどん子要素に繋がって書けます。
#いかに自分が使いやすいmixinを作れるかを考える
ここは結構重要です。主流なCSSフレームワークを使ってもいいですが、デザイナーがコーディングする場合、ビジュアルとの兼ね合いで自身で細かいところの調整とかしたいことが出ると、フレームワークのカスタマイズより、自分が作ったmixinをカスタマイズしたほうがよほど早いです。
一例ではありますが、例えば「縦横」や「前景色と後景色」、「flexboxの中央配置」などよく使われてるものや、テキスト二行表示、Webフォントなど、コーディング時よく使ってるものを作れば非常に楽となります。
ここで重要なのは、ある程度変数も入れてpartialsをテンプレート化することです。目標は、新規コーディング時、partialsの中の変数をいじるだけでコーディングをスタートできることです。例えばmainColorやpadding、breakpointあたりです。
ひとつ難しいのはmixinの名前です。主流のcssフレームワークや大きめのプロジェクトでは結構わかりやすさ重視で名前が長くなりがちです、個人の場合は、ある程度名前をシンプルにしてもいいのではないかと思います。例えばwh(width,height)とかcolorSet(color,background-color)とかです。この辺りの判断はメンテナンス性やチームメンバーとの相談が必要だと思います。
#エディターの使いこなし
これも結構コーディングのスピードを左右します。特にemmetは必須です。
emmetについて：https://b-risk.jp/blog/2021/06/emmet/
私はvscodeを使っていて、emmetはデフォルトで使えるので非常に楽です。デザイナーのコーディングは基本的にvscodeを使えば間違えなしかなと思っています。gitあたりのハイライトもデフォルトで使えるし、使いたい機能のプラグインもわりと見つけやすいです。
エディターによってショートカットが違うのでこの辺り慣れが必要ですが、そこまで学習時間は必要ではありません。要するに、「これをしたいけどなんかショートカットはないか？プラグインはないか？」を考えることが大事です。
私がHTML/CSSコーディング時はprettierとauto rename tagのプラグインがあれば事足りるかなという印象です。
#最後に
フリーランスだからなのか、最近は「デザインしかできません！」では済ませなくなりつつあると感じています。最後に私が普段コーディングで作っているテンプレートを公開しますので、よろしければご参考になっていただければ幸いです。