シンボルマークのデザイン参考13選

シンボルマークは、文字を持たず、形だけで名前の代わりをするロゴです。アプリのアイコン、ブラウザのタブに出るファビコン、SNS のプロフィール画像のように、正方形の小さな枠に入れる場面で力を発揮します。名前を入れる余地のない場所で、形だけで見分けてもらう必要があるからです。

図鑑には文字を持たないシンボルマークが19件あります。ここではそれに加えて、文字と組み合わせたロゴのうち、マークの部分だけでも成り立つものも選びました。1件につき1つずつ、真似できる作りを抜き出しました。

頭文字を図形にする

名前の最初の1文字を、図形として組み直す手です。文字として読めるので名前と結びつきやすく、形としても1つにまとまります。

正方形を斜めに切って頭文字を作る

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

Kotlin は、正方形を斜めの直線で3つの面に分け、右辺に白い三角の切れ込みを入れて K にしています。線はすべて直線で、曲線や丸めた角はありません。3つの面はそれぞれ別のグラデーションで塗られています。

外形が最初から正方形なので、アプリアイコンの枠にそのまま収まります。頭文字を線で描くのではなく、正方形を切り分けた残りの形で読ませると、小さくしても字が細らずに済みます。

同じ頭文字を2重に重ねる

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

Vue.js は、緑の大きな V の内側に紺の小さな V をはめ込んでいます。2つの V は同じ角度で、上端の高さもそろっています。線はすべて直線で、左右対称です。

同じ形を大小2つ重ねると、1文字だけでも奥行きのあるマークになります。色を2色に分けておけば、ファビコンの大きさでも2重であることが分かります。V や A のように三角形に近い字は、この重ね方がしやすい字です。

色の面から頭文字を白く抜く

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

Svelte は、角を大きく丸めた細長いリング2つを上下にずらして重ね、その内側に残った白い部分で S を作っています。色はオレンジの1色で、白は塗りではなく余白です。

字を描くのではなく、色の面の中に抜きとして字を残す作り方です。抜きの形は面の外形に引っぱられるので、自然と太く丸い字になります。1色で作れるので、白黒の反転や刺繍、ステッカーにもそのまま使えます。

同じ形を繰り返す・回転させる

1つの部品を決めて、並べたり回したりしてマークにする手です。部品が1種類なので、どれだけ小さくしても形の決まりが崩れません。

3つの形を中心から回して並べる

三菱三菱グループ・シンボルマークこのロゴの分析を読む →

三菱は、同じ大きさのひし形3つを、中心から120度ずつ回して並べています。3つの先端は中心の1点で接し、全体は正三角形に収まります。赤の1色で、塗りの面だけでできています。

部品を1種類に決め、回転の角度を等しくすると、それだけで整ったマークになります。中間の色も影もないので、白地にも黒地にも置けます。アイコンの背景色が場面ごとに変わる場合でも形が残ります。

線の輪を重ねて中心に点を置く

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

React は、同じ細長い楕円を3つ、60度ずつ回して重ね、中心に塗りつぶした円を置いています。楕円は一定の太さの線で描かれ、どの向きから見ても同じ形になります。色は明るい水色の1色です。

線だけで描いたマークは、小さくすると線が細って見えにくくなりがちです。中心に塗りの点を1つ置くと、目の置き場ができ、全体の形がぼやけません。明るい色は暗い背景で光って見えるので、エディタや開発ツールの暗い画面にも合います。

帯を積んで正方形に近づける

多摩美術大学学校法人多摩美術大学・シンボルマークこのロゴの分析を読む →

多摩美術大学のマークは、黒い横棒を6段に積んだだけの形です。いちばん上と下の段は内側へ弓なりに反り、あいだの4段のうち上の3段は中央の隙間で左右に分かれています。棒の太さと段の間隔はすべて同じです。

同じ太さの帯を同じ間隔で積むと、外形は自然と四角にまとまります。そこから中央に切れ目を入れたり、端を反らせたりして、1か所ずつ変化を足していく作り方です。正方形に近い外形は、アイコンの枠にも無駄なく収まります。

点の並びから記号を浮かび上がらせる

はてな株式会社はてな・マーク＋文字このロゴの分析を読む →

はてなのマークは、同じ大きさの丸を13個並べ、そのうちの一部だけを青にしています。青い点をたどると疑問符の形が浮かびます。残りの点は薄いグレーで、背景の格子として控えています。

部品を点に決めると、マークは格子の上で色を置く作業になります。全部の点を同じ強さにせず、形を作る点だけを濃くすると、並び全体の輪郭と中の記号の両方が読めます。文字を外しても、左のマークだけでアイコンとして使えます。

短い線を並べて輪にする

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

Signal は、青い正方形の中に白い吹き出しを置き、その外側を短い線を並べた破線の輪で囲んでいます。破線の1つ1つは同じ長さと太さで、吹き出しのしっぽに沿って曲がっています。

アプリアイコンの形をそのままロゴにした例です。背景の正方形まで含めて1つのマークにしておくと、ホーム画面に並んだときの見え方をそのまま設計できます。輪を実線ではなく破線にするだけで、ほかの吹き出しのマークと見分けがつきます。

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

名前に関係のある動物や自然のものを、形にする手です。形の意味が伝わりやすく、話のきっかけにもなります。

動物の顔を正面から描く

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

PostgreSQL は、正面を向いたゾウの顔だけでできています。耳・頭・鼻・牙・目のほかに細部は描かれていません。青い面を内側の白い線と外側の黒い線で縁取り、線の端や角はどこも丸くしています。

全身ではなく顔だけを正面から描くと、左右対称になり、正方形の枠の中心に置きやすくなります。部品を減らし、白い線で区切っておけば、小さくしても耳と鼻の形は残ります。外側の縁取りは、どんな背景色の上でも輪郭を保ちます。

動物に役割を背負わせる

DockerDocker, Inc.・マーク＋文字このロゴの分析を読む →

Docker は、左のマーク部分に、背中にコンテナを積んだクジラを描いています。コンテナは3段に積まれ、どれにも波板の縦線が描き込まれています。クジラとコンテナは濃淡の違う青で塗られています。

動物を描くだけでなく、その動物に名前やサービスの中身に関わるものを持たせると、形に意味が加わります。文字を外したクジラだけでも、何のロゴかが分かります。

自然の形を2つずらして重ねる

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

Tailwind CSS は、同じ形の波を2つ、右上と左下にずらして置いています。波は中央が太く両端へ細くなり、直線や角はありません。色は水色の1色です。

波や炎のような自然の形は、1つだけでは輪郭がぼやけがちです。同じ形を2つずらして並べると、ずれそのものがリズムになり、1色でもマークとしてまとまります。

立体とグラデーションを使う

平面の図形に、明るさの差で奥行きを与える手です。アプリアイコンのように色面の大きな場所で使うと、手に取れそうな印象になります。

帯を折り返して重なりに影を入れる

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

Visual Studio Code は、右の太い縦の帯と、そこから左へ伸びる斜めの帯でできています。帯の重なる部分に濃い影が入り、1枚のリボンを折り返したように見えます。色は青の1色で、奥に回り込む帯ほど暗くしています。

立体に見せるのに、色を増やす必要はありません。1色の明るさを変え、手前を明るく、奥を暗くするだけで重なりの順番が伝わります。影の部分を省いても形は残るので、1色で刷る場面にも対応できます。

面を分けて明るさを変える

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

Ruby は、名前と同じルビーの石を描いています。大きな楕円の面のまわりを三角形の面が囲み、面ごとに明るい赤から暗い赤までを塗り分けています。境目には白い光のすじが入ります。

宝石や結晶のように、もともと面でできたものは、面ごとの明るさの違いだけで立体に見えます。赤の系統だけで塗り分けると、色数が増えても1つの色のマークとして覚えてもらえます。

自分のロゴで試す

シンボルマークを作るときは、まず 16px 四方ほどに縮めて見てください。ファビコンやタブの大きさで形が読めれば、アプリアイコンやプロフィール画像に広げても崩れません。部品を1種類に絞る、頭文字の形を借りる、1色でも成り立たせる、のどれかを入れておくと、小さな枠で強くなります。

作例はシンボルマークの一覧と、マークと文字を組み合わせたマーク＋文字の一覧で見比べられます。開発者向けのプロジェクトならオープンソースのロゴも参考になります。名前を入れて型を選べば、ロゴを作るアプリで候補を並べて試せます。