tailwindのカラーをそのまま使ってませんか？
開発環境
- tailwindcss 3.3.3
- next 13.4.10
前提
個人開発でおすすめの設定です。
本題
tailwindを利用するとき、カラーをそのまま使っていませんか？
良いサービスを作る上ではカラーをカスタムすることをおすすめします。
なぜカラーをカスタムする？
理由は2つです。
- ソースコードの保守性が上がる
- 色の持つ印象をユーザーに伝えやすい
1について、仮に各コンポーネントでデフォルトの色を利用している場合を想定してみます。
実装の方針が変わり、背景色をbg-blue-500で設定しているところをbg-indigo-500に変更することになったとします。
この場合、bg-blue-500を利用している全てのコンポーネントを変更することになり、修正コストが高いです。
また、実装ミスがあり、bg-blue-600を利用してしまっていたコンポーネントがあると、修正漏れが発生するケースもあるかもしれません。
カスタムカラーを定義している場合、変更は1ファイルで完了します。
2について、まずは、みなさんがよく利用されるサービスを思い浮かべてください。
そのサービスは何色ぐらい利用してそうですか？
おそらく、ほとんどのサービスでは2~3色ぐらいが思い浮かぶと思います。
詳しくはデザイナーの方などが書いている記事などを参考にしていただきたいですが、色数を絞って、伝えたい色（ブランドカラー）を押し出すことで色の持つ印象をユーザーに伝えやすくなります。
サービスのジャンルによってよく使われる色などがあるので、この辺り調べると結構面白いです。
この色数を絞っていく上でも、各コンポーネントで色を自由に利用できるようにするのではなく、カスタムして使える色を制限することが大事です。
tailwind.config.js で色をカスタマイズするおすすめの構成
先にソースコードを紹介します。
※カラーコードはあくまでサンプルです。
/** @type {import('tailwindcss').Config} */
module.exports = {
...(省略)...,
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
white: '#FFFFFF',
basic: {
dark: '#CCDAE4',
DEFAULT: '#E2EAF0',
light: '#F8FAFC',
},
main: {
dark: '#1D3B64',
DEFAULT: '#254A7E',
light: '#2D5998',
},
accent: {
dark: '#D47200',
DEFAULT: '#F68400',
light: '#FF9419',
},
font: {
dark: '#0F172A',
DEFAULT: '#334155',
light: '#CBD5E1',
link: '#2563EB',
},
system: {
success: '#35C27B',
warning: '#CC9400',
error: '#FF2020',
},
},
},
...(省略)...,
};このように設定することで拡張ではなく、置き換えます。
これで利用できる色は設定した色のみになります。
それぞれの色について説明します。
- basic
背景やボーターなどに利用する色です。
サービスの中で一番大きな面積になるところで、白、グレイ、黒などの色を設定するイメージです。
- main
主役の色です。印象付けたい色として利用します。
basicよりも割合が少ないですが、ヘッダー、フッターなど、いろいろなところで積極的に利用するイメージです。
- accent
補助的な役割を持つ色です。mainとの相性を考えて設定するイメージです。
上記のサンプルではmainが紺色に対して、accentはオレンジ色にしています。
目立つ色にすると全体が引き締まった印象が出やすいです。
basic、mainと比較して利用面積は少なくすると良いです。
- font
フォントの色を設定します。
linkの青色もついでに設定します。
- system
トーストやエラー系の処理などで利用する色を設定します。
サンプルでは緑色、黄色、赤色を設定しています。
それぞれでdark, DEFAULT, lightと設定している理由として、DEFAULTで設定した色を基準に濃淡の色を設定することで、サービス全体の色のイメージをそのままにバリエーションを増やす意図があります。
例えば、ボタンコンポーネントで背景色、ホバー時、アクティブ時の色を3色で表現するとユーザーの操作に分かりやすくリアクションすることができます。
<button className='bg-accent hover:bg-accent-dark active:bg-accent-light text-white rounded px-4 py-2'>
ボタン
</button>色の濃淡を設定するのは難しいですが、以下のサイトでは手軽に算出できるのでおすすめです。
さいごに
どんな色を組み合わせるかで色々と構成も変わってくると思いますが、構成の思想のところはぜひ参考にしていただけると嬉しいです。
余談ですが、当初basicのところをbaseにしていましたが、tailwindのtext-baseと衝突することに気づきbasicに変えました。。