Visual Studio Codeのロゴ

何でできているか

文字を持たず、青い帯を折り曲げたような形だけでできたシンボルマークです。

形

右側に、上下に長い太い縦の帯が1本立っています。その上端と下端から、細い帯が左へ斜めに伸び、左端で交差しています。交差した2本の先は短く飛び出し、端は丸められています。

全体を見ると、左に開いた「<」のような形と、右の縦の帯が組み合わさった構成です。縦の帯と斜めの帯のあいだには、白い三角形の抜けができています。

帯が重なる部分には濃い影が入り、どの帯が手前にあるかが分かるようになっています。平面の図形ですが、1枚のリボンを折り返したような奥行きがあります。

色

青の1色を、明るい水色から濃い青まで明度を変えて使っています。右の縦の帯がいちばん明るく、奥に回り込む斜めの帯ほど暗くなります。

この作りが効いている理由

「<」のような形は、コードの山かっこを思わせます。開発ツールであることを、文字を使わずに形で伝えられる選び方です。

色を1色に絞り、明るさの差だけで前後を描くと、立体感を出しながら色数は増えません。エディタのタブやタスクバー、Dock のように小さく並ぶ場面でも、青い塊としてまとまって見えます。

帯の端を丸め、角の数を少なくしているので、縮めても輪郭がにじみにくい形です。白い三角形の抜けも、小さい表示で形を見分ける手がかりになります。