ロゴ
ロゴの条件は2つです。小さくしても読めること、1色にしても形が保つこと。これを満たさない案は、早く落とすほど得です。
図の中身を文字で読む
- ロゴは、小さくしても白黒でも読めることが条件。飾りではなく識別の記号。
- ロゴタイプ
- KOMOREBI
- 文字だけで作る。名前がそのまま覚えられる
- クリアスペース
- KOMOREBI
- 周囲に空ける最小の余白。
- ロゴの一部（文字の高さなど）を単位にして決める。
- この中に、他の文字も図版も罫線も入れない。
- シンボルマーク
- 図形だけ。単独で成立するには時間が要る
- 最小サイズ
- KOMOREBI
- KOMOREBI
- KOMOREBI
- どこで読めなくなるかを実物で確かめ、その手前を最小サイズとして決める。
- ファビコンは16pxまで縮む。
- 組み合わせ
- KOMOREBI
- 最初はこれ。図形と名前を一緒に覚えてもらう
- 白黒とベタ塗り
- KOMO KOMO
- 1色に落として形が崩れないか。
- 濃い地・淡い地の両方を用意する。
- グラデーションと細い線に頼った形は、刺繍・刻印・小サイズで消える。
- ロゴをそのまま縮めず、専用の図案を作る。
ひと目で#
条件は2つ。小さくしても読めること、1色にしても形が保つこと。
- ロゴ
- 識別のための記号の総称
- ロゴタイプ
- 文字だけで作る。名前がそのまま覚えられる
- シンボルマーク
- 図形だけ。単独で通じるまでには反復が要る
- クリアスペース
- 周りに空ける最小の余白。ロゴの一部を単位にして決める
- ファビコン
- 16px まで縮む。ロゴを縮めるのではなく、専用の図案を作る
使い分け#
| こういうとき | 選ぶもの |
|---|---|
| 新しく始める | ロゴタイプ、または組み合わせ |
| 名前が長い。読み方が難しい | ロゴタイプで読み方を固定する |
| 世界中で使う。言語を選びたくない | シンボルマーク |
| 狭い場所に置く（アプリ、SNS） | シンボルマーク単独の版を用意する |
| 帯や背景の上に置く | 白1色の版を用意する |
用意しておく版#
| 版 | 用途 |
|---|---|
| 基本（横組み） | サイトのヘッダー、名刺 |
| 縦組み、正方形 | SNS のアイコン、狭い場所 |
| 白1色 | 濃い地、写真の上 |
| 黒1色 | 単色印刷、刻印、FAX |
| ファビコン | 16〜48px 用の簡略形 |
画面での持ち方は、ロゴの実装に分けました。1色版の持ち方、明暗の切り替え、ファビコン一式の書き方です。
間違えやすいところ#
図の中身を文字で読む
- 灯火焙煎所
- ○ 決めた版のまま使う
- 版の切り替えはよい。形は変えない
- 灯火焙煎所
- ✕ 縦横比を変えて伸ばす ✕ 場面ごとに色を変える
- 灯火焙煎所 → 別の記号になる → 識別の手がかりが減る
- 白1色・黒1色・正方形などの
- 版は先に用意しておく 灯火焙煎所 灯火焙煎所 灯火焙煎所
- ✕ 影や縁取りを足す ✕ 線を細くする
- → 小さくすると潰れる → 縮小と刻印で消える
- グラデーションと細い線に頼る刺繍、刻印、小さなサイズで消える
- 最小サイズを決めない名刺やアプリで潰れる。実物で読めなくなる手前を測る
- クリアスペースを守らない隣の要素とくっついて、1つの図形に見える
- 縦横比を変えて伸ばす別の記号になる
- ロゴの色を場面ごとに変える色は識別の手がかりの一部
- ファビコンにロゴをそのまま縮小する16px では何も読めない
- ロゴに
altを付け忘れる。「ロゴ」と書くトップへのリンクなら組織名を書く
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
例として、鍼灸院のヘッダーに、名刺の入稿データがそのまま置かれていました。飾り罫の細い線がヘッダーの高さで潰れ、灰色のにじみに見えます。画面用には1色の SVG を書き出し直し、読めなくなる手前を実物で測って、最小サイズを規定に書きます。下の見本では横組み 22px が境目でした。境目を下回る場所（ファビコン、SNS のアイコン）には、ロゴの縮小ではなくシンボル単独の版を充てます。
確認する#
- 375px 幅のヘッダーで、ロゴの文字が読める
- 黒1色に落としても、どのロゴか見分けられる
- ファビコンがロゴの縮小ではなく、専用の図案になっている
使えるパターン#
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
細い線とグラデーションに頼っている。1色に落として形が保つか確かめ、最小サイズを決める。
1色版で最小サイズを確かめる
ロゴをそのまま縮めている。16px用の簡略形を別に作る。
16px用の簡略形を別途作る
クリアスペースを決める。ロゴの一部（文字の高さなど）を単位にし、その中には何も入れない。
このコードで動いている見本です
この場面のほかの困り事と、そのまま貼れる部品は写真とアイコンにまとめてある。逆引きには全188件。
余白と大きさを確かめる#
見本のロゴで、余白の取り方と、縮めて読めなくなる境目を確かめます。数値は見本の規定例です。自分のロゴでは、実物で読めなくなる手前を測って決めます。
クリアスペースの単位は、ロゴ自身の寸法から取ります。破線の内側に、ほかの要素を入れません。
16px では文字が潰れます。ファビコンにはロゴの縮小ではなく、シンボルだけの専用図案を使います。
クリアスペースを守った配置。ロゴが独立して見える。詰めた配置。ロゴと項目がひとつの塊に見える。
| 項目 | この見本での規定 |
|---|---|
| クリアスペース | 四辺に x/2（x＝シンボルの高さ） |
| 画面の最小（横組み） | 高さ 22px。下回るならシンボル単独の版 |
| 画面の最小（シンボル単独） | 16px。ファビコンは専用の図案 |
| 印刷の最小（横組み） | 幅 18mm |
値は見本の規定例です。自分のロゴでは、実物で読めなくなる手前を測って、その少し上に線を引きます。
出典#
- Google Search Central「ファビコンの定義」
- Alina Wheeler『Designing Brand Identity』