Vue.jsのロゴ

何でできているか

緑の大きな「V」と、その内側に重ねた紺の小さな「V」でできています。文字列は持たず、2つの三角形の帯だけのシンボルマークです。

形

外側の緑の V は、下向きの三角形から内側を切り抜いた太い帯です。その切り抜いた部分に紺の V がはまり、紺の V の内側がさらに白く抜けています。2つの V は同じ角度で、上端の高さもそろっています。

線はすべて直線で、角は鋭いまま残されています。左右対称で、下の先端は1点に尖っています。

色

緑と紺の2色です。面積は外側の緑が大きく、紺はその内側の3分の1ほどを占めます。どちらもグラデーションは付いていません。

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

頭文字 V を、大きさの違う同じ形の入れ子にしています。入れ子にすると、太い帯1本の V よりも奥行きが出て、層が重なっているように見えます。形は同じまま、色だけを変えて重ねるので、要素が増えても複雑にはなりません。

直線と鋭い角だけでできているので、小さく縮めても輪郭がぼけません。ブラウザのタブやエディタのファイル一覧のアイコンのように、数ミリの大きさで並ぶ場面でも V として読めます。

明るい緑に暗い紺を合わせたことで、2色の明るさにはっきり差がつきます。似た明るさの2色で塗り分けると、小さいときに1色に溶けてしまいます。色を2つ使うなら、色みより先に明るさの差を確保するのが基本です。