ロゴグリッド構築:4つのグリッドシステムと使い分け

ロゴグリッドとは、マークの比率、角度、間隔を規定する幾何学的ガイドのシステムだ。それは単一のものではない。4つの異なるロゴグリッドが4つの異なる役割を果たし、それぞれ4つの異なるタイミングで登場する。描く前、描いた後、マークとタイプをペアリングするとき、そしてロゴが完成してブランドガイドラインに載るときだ。

ほとんど誰もこれらに名前をつけない。ここで使う命名はAkrivi Studioによる4つのロゴグリッドシステムの解説から来ている。これは最も明快に文章化されたバージョンだ。ベース、コンストラクション、ロックアップ、クリアスペース。この4つの名前さえ手に入れれば、グリッドが本物のクラフトなのか演出にすぎないのかという論争の大半は解消する。なぜならそれは大抵、2人が2つの異なるグリッドについて話しているだけだからだ。

ロゴグリッドとは実際何か

ロゴグリッドとは、マークの下に薄い青やコーラル色の線で描かれた構築ガイドのセットで、マークが収まる幾何学を規定する。正方形、円、比率長方形、角度線。ガイドは3つの役割を果たす。

• 一貫性を強制する。 単一の半径で構築された円形バッジは1つの形として読める。フリーハンドでスケッチすると、3つのわずかに異なる曲線ができ、2ピクセルの差でも不均一に見える。
• 比率を強制する。 グリッドは要素間の比率、線幅と文字の高さ、内側の形と外側の形、余白と生きたエリアの比率をエンコードするので、マークはドリフトなしにスケールする。
• 次のデザイナーにとってマークを判読可能にする。 公開されたグリッドを持つロゴは再現可能だ。持たないロゴは元のファイルと元の判断に依存し、締め切りに誰かがファイルを開くたびに劣化していく。

グリッドがしないことは、ロゴをあなたの代わりにデザインすることだ。 それは制約であって発明ではない。退屈な形を面白くすることはない。強い形を一貫させることだけができる。

4つのロゴグリッドシステム、それぞれの発生タイミング

この4つは互いのバリエーションではなく、交換可能でもない。ベースグリッドはその上に構築するスキャフォールドだ。コンストラクショングリッドは後から実行する検査だ。ロックアップグリッドは2つのオブジェクト間の関係についてのものだ。クリアスペースグリッドは次にロゴを使う人に手渡すルールだ。

ロゴグリッドに関する雑音の大半は、これらを混同することから来ている。誰かが完成したマークを円で囲んで投稿し、それを厳密さの証拠だと言うとき、それはコンストラクショングリッドであり、後から作られたものだ。誰かがグリッドは個性を殺すと言うとき、大抵はベースグリッドのことを指している。どちらも同時に正しくありうる。なぜなら彼らは異なる対象について論じているからだ。

1. ベースグリッド:その上に描くスキャフォールド

デザインする前に使う。目的:構造、一貫性、比率を目分量で決めずに済むこと。ベースグリッドはマークが存在する前に敷かれる繰り返しのフィールドで、一般的な4つの形がある。

8ポイントグリッドは現代のUIデザインでのデフォルトだ。 Material、iOS、Tailwindのスペーシングスケールはすべて8ポイントか4ポイントの基本単位を前提としているので、それに基づいて構築されたロゴは、サブピクセルの不一致なく8ポイントUIに収まる。IBMのレターマークは、スラブの間隔と8本の水平ストライプを制御する密なモジュラーグリッド上に配置されている。

黄金比、そして「円形グリッド」が存在しない理由

「円形グリッド」は名前のついたグリッドシステムではない。誰かがそう言うとき、彼らが意味しているのは2つの本物のうちのどちらかだ。黄金比のベースグリッド、あるいはコンストラクショングリッド。後者は通常、完成したマークの上に円として描かれる。この2つを混同するところから、ロゴグリッドに関する混乱の大半が始まる。

黄金比グリッドは1つのアンカー円から始まり、その半径が最初の円と固定比率で関係する円を追加していく。1:1.618(黄金)、1:1.414(白銀)、あるいは1:2だ。それぞれの新しい円は最初の円の内側にネストするか、既知の角度で交差するか、既知のオフセットで外に延びる。そしてマークは弧と交点に沿って描かれる。

• Twitter(2012年の鳥): 3種類の半径を持つ14個の重なり合う円から構築されている。頭、翼、胸、くちばし、すべての曲線がそのいずれかの弧に従っている。
• Mastercard: 既知の距離だけオフセットされた等半径の2つの円。重なりがカラーブロックを規定する。
• NBCピーコック: 放射状、11枚の花弁。それぞれが固定された角度増分で配置された涙型の弧から構築されている。

正直な但し書きを1つ:黄金比は生成装置というより整合性チェックとして役に立つ。 「黄金比でロゴをデザインした」と言うデザイナーは大抵、先にマークを描いて後からその比率に気づいている。φを検証に使うのは妥当なクラフトだ。それをすべての測定値の文字通りの生成装置として使うのはオーバーエンジニアリングであり、流出した2008年のペプシのブリーフ、重力や地球の磁場を持ち出したあれは、その結果がどうなるかの記念碑だ。

ほとんどの実在のマークは1つの形状に固執せず、複数を混ぜている。Appleはデザイン学校で語り継がれる分解解説だ。ボディ、噛み跡、葉は重なり合う円で構築されているが、葉とボディの整列、幅と高さの関係、噛み跡の配置はモジュラーグリッド上にある。円を取り除くとリンゴは形を失う。モジュラーの間隔を取り除くとバランスを失う。BMWも同じ話で、円形バッジとモジュラーのリムタイポグラフィだ。間違いは、マークの幾何学ではなく美的な好みでベースグリッドを選ぶことだ。

2. コンストラクショングリッド:誰もが投稿するあれ

デザインした後に使う。目的:検査、クライアントに「なぜこんなに正確なのか」と言わせる仕上げ。コンストラクショングリッドは完成したマーク内のアンカー、ハンドル、アウトライン、格子線を明らかにし、クライアントに見つかる前にミスを見つけられるようにする。不均一な線、2度ずれた曲線のハンドル、隣の形と1単位分揃っていない形などだ。手作業では1ロゴあたり30分から60分かかる。

これはほぼすべてのリブランドのデッキに出てくるグリッドだ。完成したマーク、その上に重ねられた円の格子、それを厳密さの証拠として読む会議室いっぱいの人々。このスライドについて人々が言う2つのことは、両方とも同時に正しい。それは本物のクラフトツールであり、そしてマークが完成した後に描かれたものだ。そのスライドが出てきたときに問うべき質問は「グリッドを使ったか」ではない。この中のどの部分を意図的に破ったか、そしてなぜかだ。

3. ロックアップグリッド:マークとタイプ

ロゴマークとロゴタイプをペアリングするときに使う。目的:調和と階層。マークとワードマークを目分量でスタックし、整列させ、ペアリングすることは、それ以外は強力なアイデンティティが崩れる場所だ。なぜなら「少し中心からずれている」という指摘は3週間後にクライアントから届き、その後は目に付いて仕方がなくなるからだ。

ロックアップグリッドは形状ではなく関係性を固定する。三分割法のような手法を使い、マークとタイプの間の一貫した間隔を保ち、水平・垂直配置の両方で光学的関係を安定させ、レイアウトを即興ではなく決定されたものに見せる。ロゴが単一のオブジェクトとして出荷されることはほぼない。 ほとんどはマーク、ワードマーク、水平ロックアップ、スタックロックアップとして出荷され、ロックアップグリッドはこの4つを互いに一貫させるものだ。

4. クリアスペースグリッド:引き渡すルール

ロゴが最終形になったときに使う。目的:次にそれを使うすべての人からロゴを守ること。クリアスペースグリッドは除外ゾーンを定義する。ロゴの周りで他の何も許可されないバッファだ。通常はマーク自体から導かれる単位で表現され、一般的にXと表記される。これによりルールはロゴとともにスケールし、大型看板のサイズで意味をなさなくなる固定ピクセル数ではなくなる。

これは4つの中で最も地味だが、最も頻繁に現実との接触を生き延びるものだ。なぜならこれはブランドガイドラインに最終的に印刷されるグリッドだからだ。ポスターの隅にロゴが窮屈に押し込まれ、見出しに突き当たっているとき、それはクリアスペースのルールが存在しなかったか、一度も引き渡されなかったということだ。

有名なロゴグリッド分解解説

7つのロゴと、それぞれでどのグリッドが仕事をしているか。

FedExは取り上げる価値がある。 EとxのあいだにあるあのFedExの隠れ矢印は、幸運な偶然ではない。2文字間のネガティブスペースが使える形になることを要求するグリッドの、目に見える結果だ。フリーハンドのカーニングではそうならないし、比率円だけでもそうはならない。7つすべてに共通するパターン:すべてのグリッドは幾何学を扱うが、どれもコンセプトを生成しない。コンセプトはポジショニング、命名、カテゴリー洞察から来る。グリッドはそれを再現可能にするために後から来る。

意図的にグリッドを破る光学補正

グリッド化された優れたロゴはすべて、少なくとも3か所でそのグリッドをごまかしている。なぜなら目と数学は一致せず、そして買う側の目のほうが優先されるからだ。光学補正とは、グリッドが生み出す知覚上の問題を修正するために、わずかで意図的な量だけグリッドを破る手法のことだ。

これらの補正を許さないロゴグリッドは硬直しすぎていて出荷できない。 グリッドは契約ではなく出発点だ。規律とは、すべての補正を追跡し、それをコンストラクショングリッドに記録し、なぜそうしたのかを文書化することだ。なぜなら次にそのファイルを開くデザイナーは、オフセットをグリッドに「戻す」ことでバランスを台無しにしたくなる誘惑にかられるからだ。

本物のコンストラクショングリッド、光学補正、モジュラーシステム、あらゆる表面で通用するルールで構築されたロゴが必要か?Brainyを雇う。私たちはLogoBrainyを通じてロゴシステムを提供し、戦略、構築、タイポグラフィをワンストップで求めるチームに向けて完全なブランドアイデンティティを提供する。

グリッドが役立つとき、オーバーエンジニアリングになるとき

ベースグリッドは、マークが幾何学的でモジュラーなとき役に立つ。グリッドでは供給できない個性、ジェスチャー、温かみをマークが必要とするとき、それは害になる。他の3つはそれほど議論の余地がない。コンストラクション、ロックアップ、クリアスペースグリッドは、ジェスチャル的なものを含め、ほぼどんなロゴにも有用だ。なぜならそれらはマークを生成するのではなく、検査し保護するものだからだ。

• ベースグリッドが役立つのは: 幾何学的なモノグラムとレターマーク(IBM、NASA、HBO、GE)、構築された絵柄マーク(Apple、Twitter、Mastercard、BMW、Toyota)、円・六角形・正方形の内部幾何学に基づくモジュラーバッジ、幾何学的サンセリフのワードマーク(FedEx、Visa、2015年以降のGoogle)。
• ベースグリッドがオーバーエンジニアリングになるのは: カスタムスクリプトのワードマーク(Coca-Cola、Disney、Tiffany)、ジェスチャーこそが資産である場合、手描きやイラスト風のマーク、キャラクターが不完全さの中に宿る書道的・歴史的スタイルのマーク、戦略が温かみや親しみやすさであるブランド。厳密なコンストラクショングリッドは精密さとエンジニアリングを示唆し、それは戦略と衝突するからだ。

判断ルール: マークが幾何学的、モジュラー、または再現可能な形状から構築されているなら、ベースグリッドを構築する。ジェスチャル、イラスト風、キャラクター主導なら、先にスケッチして、比率の一貫性のためだけに軽いベースグリッドを使う。いずれにせよ、提示する前にコンストラクショングリッドを実行し、ロックアップグリッドを構築し、クリアスペースのルールを出荷する。

ロゴグリッドをゼロから設定する方法

空のFigmaファイルを機能するベースグリッドに変える5つのステップ、そして仕事を仕上げる3つのステップ。

1. マスターキャンバスサイズを選ぶ。 デジタル優先のマークなら1024×1024ピクセル、エディトリアルや印刷寄りのマークなら1200×1200。この数値は基本単位で割り切れなければならない。
2. 基本単位を選ぶ。 ほとんどの場合8ピクセル、細かいタイポグラフィ作業なら4ピクセル、大規模またはシンプルなマークなら16ピクセル。その単位でFigmaのレイアウトグリッドを設定する。
3. 生きたエリアを定義する。 マークが収まる内側のゾーン。妥当なデフォルトはキャンバスの中央75パーセントで、各辺に12.5パーセントの余白を残す。この余白は基本単位のきれいな倍数でなければならない。
4. ベースグリッドの形状を選ぶ。 モジュラーやタイポグラフィックなマークには正方形、奥行きの暗示にはアイソメトリック、放射状・セル状の幾何学には六角形、曲線主体のマークには黄金比の円。ほとんどのマークは正方形フィールドの上に比率円を重ねて混ぜている。
5. ガイドに沿ってマークを構築する。 測定可能な寸法はすべてグリッドにスナップする。光学補正が必要な場合は、意図的にグリッドを破り、その破りに注釈をつける。
6. 完成したマークにコンストラクショングリッドを実行し、それが明らかにするものを修正する。
7. 出荷するすべての配置(水平、スタック、マーク単体)についてロックアップグリッドを構築する。
8. マークから導かれた単位でクリアスペースを定義し、それをガイドラインに記載する。

ステップ1から5は初回は30分、その後は10分かかる。成果物は、他のどんなデザイナーでも比率を推測せずに開いて作業を続けられるFigmaファイルだ。Figmaは現代のロゴ作業のほとんどでデフォルトだが、Illustratorは最終的なベクタークリーンアップにおいて依然としてよりシャープなベジェ制御を持つ。ロゴをまとめている同じモジュラー基本単位は、アイコンシステムデザインや、より広範なブランドアイデンティティデザインの価格設定の成果物のタイポグラフィックなリズムも支えている。

よくある質問

ロゴグリッドの4つの種類とは何か?

ベース、コンストラクション、ロックアップ、クリアスペースで、4つの異なるタイミングで発生する。ベースグリッドは描画前に敷かれるスキャフォールドで、正方形、アイソメトリック、六角形、黄金比のいずれかになりうる。コンストラクショングリッドは完成したマークにアンカー、ハンドル、整列エラーを明らかにするための検査パスだ。ロックアップグリッドはロゴマークとロゴタイプの間の間隔を統制し、クリアスペースグリッドはブランドガイドラインに最終的に載る除外ゾーンを定義する。

円形のロゴグリッドというものは存在するのか?

名前のついたグリッドシステムとしては存在しない。人々が通常意味しているのは、1.618の比率で関係する半径を持つ円から構築される黄金比のベースグリッドだ。Twitterの鳥やMastercardのようなスタイルの構築だ。あるいはコンストラクショングリッドを指している場合もある。これらは完成したマークの上に円として描かれることが一般的だからだ。「円形グリッド」と呼ぶことは、ベースグリッドの形状とグリッドの種類を混同させることであり、そこから混乱の大半が始まる。

ロゴデザインにおける8ポイントグリッドとは何か?

ロゴ内の測定可能なすべての寸法、線幅、角丸、余白、キャップハイト、間隔が8ピクセルの倍数になる正方形のベースグリッドだ。iOS、Android、ほとんどのウェブデザインシステムときれいに揃うため、現代のUIおよびロゴデザインにおける支配的なベースグリッドだ。4ポイントグリッドはより高い解像度での同じ考え方だ。幾何学的なモノグラム、レターマーク、モジュラーバッジに適している。

ロゴデザインで黄金比をどう使うのか?

比率の生成装置としてではなく、整合性チェックとして使う。デザイナーは通常先にマークを描き、その後でマーク幅と高さ、内側の形と外側の形、Appleのようなマークにおける葉とボディなど、主要な関係がφに近いかを検証する。比率が自然にほぼ1.618に落ち着くと、マークはバランスが取れているように感じられる傾向がある。すべての測定値をそれに従わせるのはオーバーエンジニアリングであり、大抵は硬い結果を生む。

すべてのロゴにグリッドが必要か?

すべてのロゴはクリアスペースのルールを必要とし、マークとワードマークの両方があるならロックアップグリッドも必要だ。すべてのロゴが厳密なベースグリッドを必要とするわけではない。構築されたマーク、幾何学的なモノグラム、バッジ、Apple、Twitter、Mastercardのようなモジュラーの絵柄マークは、幾何学が一貫していなければならないので必要とする。ジェスチャル的なマーク、Coca-ColaやDisneyのようなカスタムスクリプト、手描きのイラスト、キャラクターマスコットは、しばしばそれを強制されると損なわれる。

グリッドはツールであり、美徳ではない

グリッドはロゴにおける幾何学的な問題を解決するツールだ。解決する価値のあるロゴを持つことの代替にはならない。Apple、Twitterの鳥、Mastercardのディスク、NBCピーコック、FedExの矢印。これらのマークはすべて出荷される頃にはグリッドの中に収まっていたが、そのどれもグリッドとして始まったわけではない。それらはコンセプト、ポジショニングの洞察、ブランドが目指すものについてのカテゴリーを打ち破る決定として始まった。グリッドはそのコンセプトを再現可能にするために後から来た。

構築されたマークの初期段階のデザイナーは、時にこの順序を逆にしてしまう。Figmaを開き、精巧なベースグリッドを設定し、その上にロゴを構築し、6時間後に顔を上げて、なぜ結果が凡庸なのか不思議に思う。グリッドが生み出したのは一貫性であって、コンセプトではない。 コンセプトは別のところから来なければならない。ワードマーク対レターマークの決定、ブランド戦略、カテゴリーポジショニングからだ。

逆の間違いも同じくらいコストがかかる。グリッドを完全に飛ばし、フリーハンドでスケッチし、実際のシステムを一度も設定しないと、再構築されるたびに結果は比率がドリフトし、小さいサイズでは崩壊する。修正策は、すべての落書きをベースグリッドに無理やり当てはめることではない。特定のマークが実際に4つのうちどのグリッドを、いつ必要としているかを知ることだ。ブランドが構築された幾何学的なマークを求めるなら、ベースグリッドを構築し、光学補正を実行し、破りを文書化する。ジェスチャル的なマークを求めるなら、先にスケッチし、軽くグリッド化する。いずれにせよ、コンストラクショングリッドで検査し、配置をロックアップし、クリアスペースのルールを出荷する。

ブランドがどちらを必要としているか確信が持てないなら、それはロゴの問題ではなく戦略の問題であり、どれだけコンストラクショングリッドの作業をしてもそれは解決しない。本物のコンストラクションクラフトに基づいて構築されたロゴシステム、ベースグリッド、光学補正、比率、ロックアップ、そして今後10年にわたってマークをまとめ続けるドキュメンテーションが欲しいなら、Brainyを雇う。私たちはLogoBrainyを通じてロゴシステムを提供し、戦略、構築、ルールをワンストップで求めるチームに向けて完全なブランドアイデンティティを提供する。