Tailwind CSSのロゴ

何でできているか

文字を持たず、水色の波形2つだけでできたシンボルマークです。

形

2つの波は同じ形で、1つは右上、もう1つは左下にずらして置かれています。ずれの量は横にも縦にもおよそ波1つの半分ほどで、2つは重なっていません。

それぞれの波は、左端が細く尖って始まり、ふくらみながら1度盛り上がって沈み、右端でまた細く尖って跳ね上がります。上の縁と下の縁はどちらも滑らかな曲線で、直線や角はありません。中央がいちばん太く、両端へ向かって細くなります。

色

明るい水色の1色です。グラデーションや影は無く、平らな面だけで描かれています。

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

同じ形を2つずらして並べると、1つだけのときには無かったリズムが生まれます。見る人の目は1つ目から2つ目へ流れ、形の向きに沿った動きを感じ取ります。波や風のような、本来は形の定まらないものを表すときに、繰り返しは「流れ」を伝えるいちばん簡単な方法です。

両端を尖らせて中央を太くした形は、筆で払った線に似て、止まった図形でも速さや軽さが出ます。名前の「追い風」とも重なる印象です。

色を1色、形を1種類に絞っているので、情報量が少なく、アイコンとして小さく置いても崩れません。README のバッジやエディタの拡張機能一覧のように、ほかのロゴと並ぶ場面でも、2本の波という輪郭だけで見分けがつきます。