Blog

ブログ

CSS Gridとatomic Designで1年間サイトを作ってみたよ その2

  • Web制作
  • 記事公開日:
CSS Gridとatomic Designで1年間サイトを作ってみたよ その2

CSS GridとAtomic Designで1年間サイトを作ってみたので、感想や経験をまとめてみました。
第2弾も、Atomic Designの話です。今回は、色のお話から。

CSS Variableを使おう

最近は、CSS Variableを使うことがメインになりました。IEをサポートしなくても問題ない案件が増えたからです。
もしもIEをサポートしてください、と言われても別料金でCSS Variableを外して通常のスタイルシートコードにするか、Polyfillを使っていけば問題はあまりありません。

複雑なことをすると、管理が困難分からなくなります。ですのでどう使うか書いておきます。

カラーをCSS Variableで管理

CSS Variableを導入する場合、はじめは、カラー管理をCSS Variable化するのがすごく簡単です。
なぜならば、色の管理は、白・黒・グレー・ブランドカラー・セカンドカラーがメインでそれほど多くないからです。
しかも、白・黒・グレーはある程度色名で法則化が可能です。

ブランドカラーやセカンドカラーは、リンクに使うときの法則を決めておけば管理は煩雑ではありません。
他にもメリットがあります。意外ですが、一緒にお仕事をしたエンジニアにも「わかりやすい」と言われました。

エンジニア視点でも、CSS Variableを使うメリットはある

最近お仕事した案件は、同じコードで、色彩のみデザインを変える可能性がありました。そこで、CSS Variableで色のコードを指定して統一してみました。
他は、CSS Variableで決めた値を参照するだけです。
色に関してある程度いじる場所を決めたら、そこだけをいじればいいからです。

エンジニアさんから寄せられた感想が、「色についていじる場所が分かるのは助かる」と。なぜならば、コードを置換する場所が増えれば、増えるほどミスが発生する可能性が高くなります。

トレンドと色設計

現在のシンプルでコンテンツにフォーカスするサイトやアプリのデザイントレンドだと、多くの色を使うことが減りました。
白系統・グレー(ブルーグレー)系統・黒系統にして基本の色彩を用意し、後はブランドカラーと、サブカラーを用意すれば、色に関するCSSスタイルはそれほど多くありません。

システムが絡んだりする場合は、エラーや警告・完了の色を CSS Variableで用意すればいいのです。

まとめ

スタイルを再利用しやすくなるという面で、CSS Variableはぜひとも取得したいスキルです。しかし、一歩間違えるとカオスになる可能性が高くなります。

まずは、色(カラー)の管理から始めてみて、ノウハウを取得するといいでしょう。

このページを共有

関連記事

この記事を読んだ人はこの記事も読んでいます

  1. Faviconがあっというまに作成できるiconogenを使ってみたよ
    Faviconがあっというまに作成できるiconogenを使ってみたよ
  2. ポストPCの時代にWebデザイナーはどう備えるべきか
    ポストPCの時代にWebデザイナーはどう備えるべきか
  3. MAMP+VMWareの環境設定メモ(Mountain Lion篇)
    MAMP+VMWareの環境設定メモ(Mountain Lion篇)
ページの上部に戻る