ファビコンやアプリアイコンに縮めても分かるロゴの条件　太さ・形の数・切り出し

ロゴを作るとき、画面いっぱいに大きく表示して眺めがちです。ただ実際に目に入る場面は、ブラウザのタブのファビコン、スマートフォンのホーム画面のアイコン、SNS のプロフィール画像と、小さな正方形の枠が多くなっています。

小さくしても分かるロゴには、いくつか共通する作りがあります。事例を見ながら、縮めたときに何が残り、何が消えるかを整理します。

線ではなく面で作る

縮めると、細い線から先に消えます。残るのは面のかたまりです。

住友の井桁は、4本の帯をかなり太くとり、中央の菱形の穴を小さくしています。塗りの面に対して穴が小さいので、図形は線の組み合わせではなく面のかたまりとして見えます。面のかたまりは遠目でも小さな表示でもつぶれにくく、看板から印章のような小さな使い方まで同じ形で通せます。

文字でも同じです。TSUTAYA は太い大文字を、字間を広めにとって並べています。太い字どうしが押し合わず、1文字ずつがはっきり読めます。太さで面積を稼ぎ、すき間で字の輪郭を守る組み方です。

細い字を使う場合は、すき間の側で補います。日産の「NISSAN」は細い線で描かれていますが、字間を大きく空けています。字間が広いと、1文字ずつの形が隣に埋もれず、細さが頼りなさではなく軽さとして読まれます。

小さな枠では、部品の数がそのまま情報量になります。数えられる程度に少ない形は、縮めても崩れません。

三菱はひし形3つだけでできています。同じ形を120度ずつ回して並べただけなので、細部を覚えていなくても「ひし形が3つ」と言えます。角を丸めずに鋭く残しているので、小さな表示でも輪郭がにじみません。

ソフトバンクのマークも、同じ長さ・同じ太さの長方形2本です。形が単純なぶん、どんな大きさでも崩れず、手描きでも再現できます。形で区別がつかないところは、黄色という色が見分けの手がかりを担っています。

作ったマークを何個の形でできているか数えてみて、すぐに数えられないなら、小さな枠では多すぎる可能性があります。

細部を入れること自体が悪いわけではありません。縮めたときに消えても困らない場所に置けばよい、というだけです。

コインチェックのマークは、外形が単純なひし形で、内側を白い細い線で5つに分けています。小さくすると内側の線は見えにくくなりますが、ひし形の外形とグラデーションの色は残ります。遠目では外形、近くでは分割線、と見え方が2段になっています。

ENEOS のマークも同じ考え方です。正方形の中に赤とオレンジの弧を何重にも重ねていますが、遠目には暖色の四角として見えます。近くで見れば渦、遠くから見ればオレンジの面です。

判断の基準は、細部を全部消したときに外形と色だけで見分けがつくかどうかです。つくなら、細部は近くで見る人へのおまけとして残せます。

文字だけのロゴを小さく置くと、字の一つひとつは読めなくなります。そういうときに手がかりになるのが、1か所だけの特徴です。

メルカリは最後の I の点を、丸ではなく右上がりに傾けた短い棒にしています。文字を大きく置けない場面では、こうした1点の特徴が見分けの手がかりになります。

特徴は1か所に絞るのが大事です。いくつも仕掛けを入れると、小さな枠ではどれも読み取れなくなります。

横長のロゴは、正方形の枠に入れると縮むしかありません。そこで、ロゴの中から正方形に収まる部分を切り出して使えるようにしておきます。

サイバーエージェントは、C と A を重ねた2文字のマークを横に置いています。長い社名でも、アイコンのように小さな場所では2文字のマークだけで代わりが務まります。2文字を重ねて1つの塊にしてあるので、切り出してもばらけません。

日本郵政は、傾けた角丸の四角の中に J と P を白で抜いています。四角の外形はどこに置いても同じなので、アイコンや車体、看板のように大きさが変わる場面でもマークとして通用します。

頭文字を使うと、切り出したマークと名前の関係が説明なしで伝わります。面の中に文字を抜いておくと、正方形の枠との相性もよくなります。

作ったロゴは、実際に小さくして確かめるのがいちばん早い方法です。

残ったものが外形と色だけなら、それがこのロゴの小さなときの顔です。そこに見分けの手がかりがないなら、太さを足すか、形を減らすか、切り出すマークを作るかのどれかで補います。

切り出しに向く作りの実例は、マーク＋文字やシンボルマークの一覧で見比べられます。ロゴを作るアプリではマークだけの型も選べるので、アイコン用の形を別に試せます。