「似ているけれど少し違う色」を減らす取り組み

こんにちは、松久です。

UI を作るときに、色は定義されている中から選ぶのを基本にしています。色の定義が Figma で行われ、実装に反映され、違う場合は Stylelint で指摘される運用がされています。

色の運用が進んできたので、過去に定義した色や、デザイナー間で色が共有されていなかったために起きた「似ているけれど少し違う色」を減らす対応をすすめています。

似ている少し違う色がある問題

「似ているけれど少し違う色」がある状態は、使っている人に「なんとなく、まとまりに欠ける」印象を与えます。ブランドイメージを下げたり、いい買い物した、という印象を下げることもあります。

デザイナーや実装者にとっては、色の違いの意味がわからず実装のコストが増える原因の 1 つになります。

この問題を解消するために、少し違う色が実装されているのかを確認します。 CSS に設定されている色の確認方法は、Chrome の CSS Overview 機能を使います。

確認してみると、似ているが少し違う色が見つかります。これを、1 つずつ減らしていきます。

見つけた「似ているけれど少し違う色」を、減らしていく取り組みを今しています。取り組みは、4 つに分けて取り組むことにしました。

直接色コードが記述されている箇所を SCSS の変数を使えるところは、置き換えをします。今後、色の調整をするとしても、変数を変えれば調整ができるからです。

過去の色の定義の SCSS を新しいものに置き換えていきます。新しく使われないように、Stylelint でも指摘がされるようにしています。最後に、利用がなければ過去の SCSS の定義を消して終わりです。

まだこれは実施をしていません。少し違う色なので、対応箇所が 100 箇所ぐらいの色もあります。そのため、少し違う色の方が標準になっている色もあるためです。

色に関する Utility Class がいくつかあります。設定されている色を新しく定義された色にしていく取り組みをしています。

難しいのは同じ Utility Class が複数あることです。同じクラス名だけれど、色の定義が違うこともあります。

.text-gray {
  color: #555;
}

// 同じクラス名だが、別の色が使われている
.text-gray {
  color: #b8b8b8;
}

バラバラになっていますが、定義に近い色がある場合は、一気に統一をします。

問題なのは、バラバラだけれど似ていない色が出てくる場合もあります。この問題については、一気に統一をするのを避けています。

.text-red {
  color: #ff7355 !important;
}

.text-red {
  color: #d0555a;
  font-weight: 600;
}

.text-red {
  font-size: 1.3rem;
}

新しく使われるのを防ぎ、使われている箇所を置き換えるしかなさそうです。上記の例にある .text-red では 100 数箇所あるので、一旦統一するか、置き換えるかを検討しているところです。

似ているけれど、少し違う色は、サービスを提供するのであれば、サービスが動かなくなるような存在ではありません。提供するサービスの質や、サービスを運用するための手間が増えてしまう存在です。

時間はかかりそうですが、少しつづ減らしてくことで、「食べチョク」の改善を進めます。