プログラミング言語・フレームワークのロゴデザイン参考12選

個人で作ったライブラリや CLI ツールにも、ロゴがあると README の印象が変わります。ただ、開発系のロゴが大きく表示される場面はあまりありません。README のバッジ、エディタのタブ、ファイル一覧、技術構成を並べたスライド。どれも小さな正方形の枠で、ほかのロゴと横に並びます。

図鑑には、プログラミング言語・フレームワーク・開発ツールのロゴが26件あります。企業のロゴに比べて、文字を持たない形や、名前の頭の1〜2文字だけで作った形が目立ちます。

ここから12件を選び、1件につき1つずつ、真似できる作りを抜き出しました。

頭文字だけで作る

名前が長くても、正方形に入れるのは1〜2文字で足ります。文字を書くか、形の余白で読ませるかで作り方が分かれます。

頭文字を正方形の隅に寄せる

TypeScriptMicrosoft・エンブレムこのロゴの分析を読む →

青い角丸の正方形に、白で「TS」の2文字を抜いています。文字は中央ではなく右下に寄せてあり、左上は青い面のまま大きく空いています。

隅に寄せると、残った余白が色の面として効きます。タブに小さく並んで文字が読めなくても、青い正方形で見分けがつきます。ファイルの種類を示すアイコンと同じ形式なので、エディタの中でロゴとアイコンの区別もいりません。

面を切り分けて頭文字を浮かび上がらせる

KotlinJetBrains・シンボルマークこのロゴの分析を読む →

正方形を斜めの直線で3つの面に分け、右辺から白い三角の切れ込みを入れています。K の線はどこにも引かれていませんが、左の辺と切れ込みが合わさって K に読めます。

文字として読めることと、図形として見えることを両立させる手です。直線だけで作れば、縮めても輪郭がぼけません。頭文字に斜めの画がある名前なら試しやすい作りです。

太い帯の内側の余白で文字を見せる

SvelteSvelte プロジェクト・シンボルマークこのロゴの分析を読む →

角を大きく丸めたリングを2つ、上下にずらして重ねた形です。オレンジの帯の内側に残った白が、S の形になっています。

先にオレンジの面が目に入り、その後で S が読める順番です。色は1色でも、頭文字と色の印象を1つの形に持たせられます。角をすべて丸めておくと、小さくしても形がにじみません。

図形に収める

外枠を決めておくと、中身を少し崩しても全体がまとまります。枠の形そのものが目印にもなります。

1文字を歯車の輪で囲む

RustRust Foundation・エンブレムこのロゴの分析を読む →

歯車の形をした黒い輪の中に、セリフの付いた大文字の R を1つ置いています。外周には三角の歯が細かく並んでいます。

歯は細かくても、輪郭としては円です。小さく表示すると歯はギザギザに溶け、円の中の R として読めます。黒1色の面だけなので、ステッカーや刻印のように色を使えない場面でもそのまま使えます。

略称を楕円に入れて札にする

PHPThe PHP Group・エンブレムこのロゴの分析を読む →

横長の楕円の中に、小文字の「php」を右に傾けて太く組んでいます。楕円は紫で、文字は黒です。

楕円は円よりも横長の文字列を収めやすい枠です。読みにくい3文字の略称でも、1枚の札としてまとまります。暗い色の上に暗い文字を重ねるなら、この例のように文字へ白い縁取りを1本入れてください。小さくしても輪郭が埋もれません。

見慣れない外枠を選ぶ

KubernetesCloud Native Computing Foundation・シンボルマークこのロゴの分析を読む →

青い七角形の中に、白で舵輪を抜いています。舵輪の輻も7本で、枠の角の数とそろえています。

四角や円の枠は、アイコンが並ぶ中では埋もれがちです。七角形のような少し珍しい外形なら、小さく並んでも輪郭で見分けられます。枠と中身の数をそろえると、2つの図形がひとつのまとまりに見えます。

動物・自然をモチーフにする

名前が物や生き物を指しているなら、それを描くだけで名前とマークがつながります。描くものは1つに絞ります。

動物の顔だけを描いて二重に縁取る

PostgreSQLPostgreSQL Global Development Group・シンボルマークこのロゴの分析を読む →

正面を向いたゾウの顔だけのマークです。部品は耳・頭・鼻・牙に絞り、青い面を内側は白、外側は黒の線で縁取っています。

動物を描くと「ゾウの」という呼び方が生まれ、読みにくい名前でも覚えてもらえます。二重の縁取りは背景を選ばないための作りです。白地のドキュメントでも、ダークテーマのエディタでも輪郭が立ちます。置き場所が決まっていない OSS のマークに向いています。

角丸の正方形に動物を白で抜く

SwiftApple・マーク＋文字このロゴの分析を読む →

オレンジの角丸の正方形に、飛ぶ鳥を白で抜いています。右には黒で「Swift」の文字を添えています。

外形がアプリのアイコンと同じなので、マークだけを切り出してバッジにしても形がそろいます。色はマークにだけ使い、文字は黒に抑えています。並べたときに、目がまずマークへ向かいます。

名前が指す自然の形を1つだけ描く

HonoHono プロジェクト・シンボルマークこのロゴの分析を読む →

炎の形1つだけのマークです。外側を濃いオレンジ、内側のしずく形を淡いオレンジで塗り分けています。左の肩には小さな炎の舌が1つ跳ねています。

同じ色相の濃淡2色なら、色数を増やさずに奥行きが出ます。左肩の小さな舌は、左右対称のしずく形と見分けるための崩しです。ファビコンの大きさでも、水滴ではなく炎として読めます。自然の形を描くときは、似た形と取り違えられないかを縮めて確かめてください。

動きを線で表す

速さや流れは、形の向きと繰り返しで伝えられます。どれも止まった図形のまま、動いて見える作りです。

文字を傾けて後ろに線を引く

GoGoogle（Go プロジェクト）・ロゴタイプこのロゴの分析を読む →

太い大文字の「GO」を右に傾け、左に長さの違う横線を3本置いています。線の端は文字と同じ角度で切ってあります。

漫画で走る人物の後ろに描く線と同じ表現です。足した線の角度と色を本体にそろえると、ばらばらの部品に見えません。名前が2〜3文字なら、太くしても幅をとらないので、文字のままバッジに収まります。

意味が通じる記号を1つ重ねる

ViteVite プロジェクト・シンボルマークこのロゴの分析を読む →

下向きの三角形に稲妻を1つ重ねたマークです。三角形は水色から紫、稲妻は黄色からオレンジへのグラデーションです。

稲妻は、説明がなくても「速さ」と読まれる記号です。寒色の面に暖色の記号を重ねると、影を足さなくても記号が手前に浮きます。タブがたくさん並んでいても、黄色い稲妻で見つけられます。

同じ形を2つずらして並べる

Tailwind CSSTailwind Labs・シンボルマークこのロゴの分析を読む →

水色の波形を2つ、右上と左下にずらして置いています。波は両端が細く尖り、中央がいちばん太くなっています。

同じ形を2つにすると、目が1つ目から2つ目へ流れ、形の向きに沿った動きが生まれます。形は1種類、色も1色なので、README のバッジやエディタの拡張機能一覧に並んでも崩れません。

自分のロゴで試す

開発系のロゴは、最初から正方形で考えるのが近道です。名前が物を指すならそれを1つ描き、指さないなら頭文字を1〜2文字、面に置いてください。色は1〜2色に絞り、明るさの差をはっきり付けます。

作ったら16ピクセルほどに縮めて、バッジやタブの並びに置いてみてください。細部が消えても、外形と色で見分けられれば十分です。

ロゴを作るアプリでは、ツールの名前を入れてマークだけの型を選ぶと、候補を並べて比べられます。ほかの実例はプログラミング言語、フレームワーク・ライブラリ、開発ツール・インフラの一覧で見られます。