自作Vimカラースキーム「Iceberg」の配色戦略

2016-02-26

itchynyさんのブログ記事を読んで、人のカラースキームの配色戦略を見るのはとても楽しい!と思ったので、自分も書いてみることにしました。

自作カラースキーム「Iceberg」

今回解説するのは、自作のカラースキーム「Iceberg」です。

暗青系の落ち着いた配色でまとめています。

全体のコントラストを控えめにする

感じ方は人によって様々ですが、真っ黒の背景に真っ白の文字では、個人的には目がチカチカして疲れてしまいます。

このため、Icebergではコントラストを落として、チカチカを防いでいます。背景は真っ黒ではなく、やや明るくした色を使用。前景は真っ白ではなく、やや暗くした色を使用しています。

背景には、うるさくならない程度に彩度を落とした色を敷いて、カラースキーム全体の雰囲気を出しています。

色数を絞る

カラースキームを作る際にやってしまいがちなのが、色を使いすぎてしまうこと。

Vimでは、色を設定できる対象(=ハイライトグループ)がたくさん用意されています。

これだけ充実していると、「使いきらなきゃ!」と思ってしまうのが人間というもの。でも、色をたくさん使ってしまうと…。結果的にはちぐはぐで、うるさくて、視認性も悪いカラースキームができあがってしまいます。

ここは、色を散りばめたくなる衝動をぐっと押さえます。青を基調に、遠くから見ても統一感のある配色を目指しました。

色数が爆発しないように、あらかじめカラーパレットを定めておくとよいでしょう。Icebergのパレットはこんな感じです。

色の持つ意味・効果を考える

警告色

色によっては、特別な意味を持つものがあります。例えば赤色は「警告色」として、標識や赤信号など、危険や注意を知らせるものに多用されています。

Icebergではこのルールに従い、エラー表示系に限定して赤系を使用しています。

低いコントラスト

コメントや特殊文字は付加情報であり、その性質を踏まえると、あまり目立たせるべきものではありません。背景と同系色(同じ色相)でコントラストを落とすことで視認性を下げ、他の重要な部分の視認性を相対的に上げています。

カラーユニバーサルデザインを考慮する

広く普及しているカラースキームでも、とても見づらい配色が含まれていることがあります。

個人差はあれど、上記のような黒背景 + 赤系の文字の組み合わせは、とても読みづらい。色覚のタイプによっては、多くの人が知覚しているよりもさらに読みづらくなってしまうことがあります。

例えばこの絵は、著名なカラースキーム「Solarized」におけるP型色覚のシミュレーション例。赤文字と背景のコントラストがさらに落ちて背景に溶け込んでしまっています。

見やすい文字色というのは、色相の差に頼らず、明るさの差のみではっきりと視認できるものです。

悩んだときに拠りどころとなる「コンセプト」を持つ

どんな風に色を配分しよう?カラースキームを自作する楽しみのひとつですが、同時に悩むポイントでもあります。「コンセプト」をあらかじめ持っておくと、悩んだときに決断する拠りどころとなってくれます。

例えばHTMLファイル。デフォルトの状態では、こんな感じの配色になっていました。

Icebergのコンセプトは「南極」。ちょっとこれはオレンジすぎやしないだろうか?いちどコンセプトに立ち返って、もっと寒く、もっと青く…。方向性を調整しました。

コダワリを持たせる

せっかくカラースキームを自作するなら、他にはないコダワリを加えたいものです。Icebergでは、2つほど特徴を持たせています。

キラッと光るカーソル行の行番号

南極の深海。隙間から差し込んだ光を受けて、氷がキラっと反射する…。そんなイメージです(適当)。カーソル行の行番号の背景色まで変えているカラースキーム、珍しいんじゃないかな?

クレバスのように暗いウィンドウ区切り

色々なカラースキームを試してみて、ウィンドウ区切りが必要以上に目立っているなぁと思っていました。

どのカラースキームも、区切り線が明るいのです。明るい色は「膨張色」といって、手前に出ている印象を与えます。ということは…イメージ的には、高い壁のようなものでウィンドウが仕切られていることになります。この常識に抗ってみたかったのです。

Icebergでは、ウィンドウの区切りを背景色より暗くしてみました。氷の割れ目、クレバスのようなイメージです。

おしまい

という感じで、自作カラースキームの配色戦略を語ってみました。ビビッと来たかたはぜひ使ってみてください。GitHubからどうぞ:

他の人のコダワリも知りたいぞ…!

Share: