濃い配色に変えたとき、画像の作り方も変える必要があった

• 地の色が変わると、画像の見え方も変わる
• 白地の画像は、濃い背景では浮く
• 画像の地を、サイトに合わせる

記事一覧のカードで、画像とカードの地が同じ白だった。境目が消えて、画像として認識されていなかった。

起きていたこと

一覧を見ると、こうなっていた。

• 画像の背景が白。カードの地も白
• 境目が見えず、画像の範囲が分からない
• 記事とその上の画像が、別のものに見える

3つ目が致命的だ。1枚のカードとして認識されていなかった。

気づいたきっかけ

自分では気づかず、指摘されて分かった。

• 作っている側は、どこからどこまでが画像か知っている
• 初めて見る人には、区別がつかない
• 一覧をスクロールすると、特に分かりにくい

1つ目が盲点だった。知っていると、見えていなくても見えてしまう。

対処

画像の地の色を反転させた。

• 白地から、濃い地に変える
• 文字と図版を、明るい色にする
• カードの白い地と、はっきり分かれる

3つ目が目的だ。地の色が違えば、境目は線が無くても見える。

濃い地で変わること

反転すると、色の見え方が変わった。

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

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

明度の目安

濃い地の上で使う色は、明度の下限を決めた。

• 地の色より、十分に明るいこと
• 並べたときに、色として判別できること
• 縮小表示でも、差が分かること

3つ目が実用の基準になった。一覧の小さい表示で見分けられなければ、使う意味が無い。原寸で確認せず、実際に表示される大きさで判断する。原寸では違って見える色が、縮小すると同じに見えることがあった。

差し色を選び直す

カテゴリごとの色を、全部選び直した。

• 濃い地の上で、沈まない明度にする
• 隣り合うカテゴリで、見分けがつく
• 彩度も上げる。くすむと区別できない

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

既存の画像

既に作った画像は、全部作り直した。

• 仕組みで作っていたので、一斉に作り直せた
• 生成していたら、1枚ずつ作り直すことになった
• 仕組みで作っておいてよかった場面

3つ目が実感だ。意匠を変える可能性があるなら、仕組みで作るほうがよい。

ファイル名を変える

中身だけ差し替えると、古い画像が残る。

• 同じ名前のままだと、端末に残った古い画像が表示される
• 名前に版数を入れる
• 名前が変われば、必ず取り直される

2つ目を知らず、新旧が混ざって表示される状態になった。

段階的に変える

一度に全部変えようとして、混乱した。

• 画像だけ先に変えると、周囲と合わない期間ができる
• 配色だけ変えると、画像が浮く
• 関連する要素は、まとめて変える

3つ目に落ち着いた。途中の状態を公開すると、不自然な期間が生まれる。手元で全部揃えてから、一度に差し替えるほうが、見ている人にとっては自然だった。作業は分けてよいが、公開は一度にする。

確認の仕方

作り直した後、こう確認した。

• 一覧で並べて見る。単体では判断できない
• 縮小表示でも見る。色の差だけが残る
• 別の端末でも見る。古い画像が残っていないか

3つ目で問題が見つかった。自分の端末では新しいのに、他では古いままだった。

他の要素も見直す

画像を変えたら、周囲の要素も合わなくなった。

• カードの枠線の太さ。地が濃いと、細い線が目立たない
• 影の付け方。濃い地では見えない
• 文字の色。コントラストを取り直す

2つ目は完全に消えていた。白地では効いていた薄い影が、濃い地では何も見えない。1つの要素だけ変えると、他との関係が崩れる。配色を変えるときは、周囲もまとめて見直す必要があった。

学んだこと

この件で、設計として考えるようになった。

• 画像は、置かれる場所の地の色とセットで設計する
• 単体で良くても、置いた場所で成立しなければ意味がない
• 判断は必ず、実際に置いた状態で行う

3つ目を習慣にした。作った直後に単体で見ても、分からない。

まとめ

• 画像の地とカードの地が同じだと、境目が消える
• 作っている側は、見えていなくても見えてしまう
• 濃い地の上では、明度と彩度を上げないと沈む
• 中身だけ差し替えると、古い画像が残る。名前に版数を入れる
• 判断は、実際に置いた状態で行う