サイト全体で使う色を決めたら、画像を作るのが速くなった

• 毎回色を考えると、時間がかかり統一感も出ない
• 5色決めておけば、迷いが消える
• カテゴリごとの差し色が、見分けの手がかりになる

画像を作るたびに色を考えていた。先に決めてから、作る時間が短くなり、並べたときの統一感も出た。

決める前の問題

毎回考えていると、こうなった。

• 作るたびに配色を試し、時間を使う
• 並べたとき、ばらばらに見える
• どの色が良かったか、記録していない

3つ目が繰り返しの原因だった。前回と同じ検討を毎回している。

決めた色

最低限、この5つを決めた。

• 地の色。白か濃色か
• 文字の色
• 強調の色。1色だけ
• 補助の色。線や薄い面
• カテゴリごとの差し色

3つ目を1色に絞るのが要点だ。強調が2色あると、どちらが重要か分からない。

差し色の決め方

カテゴリごとの色は、条件を付けて選んだ。

• 地の色の上で、沈まない明るさ
• 隣り合うカテゴリ同士で、見分けがつく
• 強調の色と混同しない

2つ目で何度か調整した。青系が2つあると、一覧で見分けられない。

濃い地の上での注意

濃い背景にすると、色の見え方が変わる。

• 暗い色は沈んで、灰色に見える
• 明るさを上げないと、差が出ない
• 白い地で選んだ色は、そのまま使えない

3つ目に気づかず、最初は全部くすんで見えた。地の色を決めてから、その上で色を選ぶ。

指示文に入れる

決めた色は、生成の指示にそのまま書いている。

• 色の値を直接指定する
• 「落ち着いた色で」のような言葉を使わない
• どの要素に何色を使うか指定する

2つ目を避けると、ばらつきが減る。言葉で色を指定すると、解釈の幅が広い。

仕組みで作る場合

プログラムで画像を作るなら、色は変数にしておく。

• 色の値を1か所にまとめる
• 変えたいときは、そこだけ直す
• 全画像を作り直せば、一斉に変わる

3つ目ができるのが利点だ。生成した画像は、後から色だけ変えられない。

サイトの配色と揃える

画像とサイトの色を、同じ値にしている。

• カテゴリの札と、画像の差し色を同じにする
• 一覧で並んだとき、対応が見える
• 別々に決めると、微妙にずれて落ち着かない

3つ目は実際に起きた。近いが違う色が並ぶと、揃えようとして失敗したように見える。

色以外も決めておく

色を決めたついでに、他の要素も揃えた。

• 画像の比率。使う場所に合わせて1つに固定
• 文字を入れる位置。中央寄りの決まった範囲
• 余白の取り方。外周に一定の空きを残す

どれも毎回考えていたものだ。決めてしまうと、作るときに判断する項目が減る。判断の数が減るほど、1枚あたりの時間が短くなる。色と比率と余白が決まっていれば、あとは図版の中身を考えるだけで済む。結果として、作る時間が3分の1ほどになった。

記録しておく

決めた色は、1か所に書いてある。

• 色の値と、何に使うか
• なぜその色にしたか
• 変更したら、日付と理由

2つ目を書いておくと、後で変えるときの判断材料になる。

色の名前を決めておく

値だけでなく、呼び名も付けている。

• 「地の色」「強調」「補助」のように役割で呼ぶ
• 「青」「黄色」のような色の名前では呼ばない
• 役割で呼べば、色を変えても名前が変わらない

3つ目が後で効いた。強調を青から別の色に変えたとき、呼び名が「青」だと、名前と実物が食い違う。役割で名付けておけば、中身を変えても仕組みを直さなくて済む。指示文に書くときも、役割で書いて値を添える形にしている。

やりすぎない

色を増やしたくなるが、抑えている。

• 基本は5色。カテゴリの差し色を入れても十数色
• 新しい色を足すときは、既存で代替できないか考える
• 色が多いほど、統一感は失われる

3つ目が原則だ。揃って見えるのは、色が少ないから。

まとめ

• 毎回色を考えると、時間がかかり統一感も出ない
• 地・文字・強調・補助・差し色の5つを決める
• 強調は1色だけ。2色あると優先が分からない
• 濃い地の上では、明るさを上げないと沈む
• サイトと画像で、同じ値を使う