画像の色を決めた手順

• 毎回選ぶと、揃わない
• 先に決めて、以後は選ばない
• 分野ごとに1色を割り当てる

画像の色を毎回選んでいたら、全体が揃わなくなった。決め方を固定した記録を書く。

毎回選んで困った点

その場で決めていた時期は、こうなった。

• 作った時期で、色の方向が違う
• 並べると、浮くものが出る
• どれが正しいか、分からなくなる

3つ目が困る。基準が無いので、直す方向も決まらない。

先に決める

やり方を変えて、先に決めた。

• 使う色を一覧にする
• それ以外は使わない
• 以後、作るときに選ばない

3つ目が目的だ。選ばなければ、揃う。

決めた色の数

いくつ使うかも決めた。

• 背景 — 1色
• 文字 — 1色
• 分野ごとの色 — 分野の数だけ

背景と文字を固定したのが効いた。共通部分が同じだと、並べて揃う。

分野ごとに割り当てる

分野の色は、1つずつ決めた。

• 分野ごとに違う色にする
• 一覧で並べて、見分けがつくか確認する
• 近い色を2つ使わない

3つ目が条件だ。近いと、分野の違いが伝わらない。

見分けの確認

決める前に、並べて確認した。

• 全部並べて、見比べる
• 縮小して見る
• 色が分からない状態でも見る

3つ目が必要だ。色だけで区別すると、分からない人がいる。

色以外でも区別する

色だけに頼らない形にした。

• 分野の名前を文字で入れる
• 図形の形も変える
• 色が分からなくても、区別できる

1つ目が確実だ。文字が入っていれば、色に関係なく分かる。

背景を暗くした

背景の色は、途中で変えた。

• 最初は白にしていた
• 一覧の背景も白なので、境目が分からなかった
• 暗い色に変えて、はっきりした

2つ目が失敗だった。置く場所の色と、同じにしてはいけない。

文字の色

文字は、読めることを優先した。

• 背景との差を大きくする
• 薄い色は使わない
• 縮小して読めるか確認する

3つ目が基準だ。一覧では縮んで表示される。

強調の色

目立たせる色も1つ決めた。

• 1枚に1箇所だけ使う
• 2箇所以上使わない
• 使う場所も決めておく

2つ目を守る。強調が複数あると、どれも目立たない。

色の値を記録する

決めた色は、値で記録している。

• 目で合わせない
• 値を書いておき、それを使う
• 仕組みに書き込んでおく

3つ目が確実だ。仕組みから出せば、毎回同じ色になる。

サイトの色と合わせる

画像の色は、サイトの色から取った。

• サイトで使っている色を確認する
• 同じ値を使う
• 画像だけ別の色にしない

3つ目が理由だ。画像とページの色が違うと、別物に見える。

変えるときは全部変える

後から変える場合の決めもある。

• 一部だけ変えない
• 変えるなら、全部作り直す
• 仕組みがあるので、作り直せる

1つ目が原則だ。一部だけ新しくすると、かえって揃わない。

作り直した経験

実際に一度、全部作り直した。

• 背景を白から暗い色に変えた
• 仕組みの値を1箇所変えた
• 全枚数が差し替わった

3つ目が仕組みの利点だ。手作業なら、同じ変更に何日もかかる。

古い画像が残る問題

作り直したとき、別の問題が出た。

• 同じ名前のまま中身を変えた
• 古い画像が、手元に残り続けた
• 名前に版を入れて解決した

3つ目が対処だ。名前が変われば、新しい画像が読まれる。

決めた後の運用

いまは、作るときに色を考えない。

• 分野を指定すれば、色が決まる
• 迷う時間が無い
• 揃った状態が維持される

2つ目が効果だ。決めておくと、判断が要らなくなる。

決めるまでにかかった時間

色を決める作業自体は、短時間だった。

• 候補を並べて、見比べる — 1時間ほど
• 一覧で確認する — 30分ほど
• 仕組みに書き込む — すぐ

合わせて半日もかからない。この時間を先に取っていれば、作り直しは要らなかった。

まとめ

• 毎回選ぶと揃わない。先に決めて、以後は選ばない
• 背景と文字を固定すると、並べたときに揃う
• 分野の色は、近いものを2つ使わない
• 色以外に文字でも区別する
• 変えるときは一部だけでなく、全部作り直す