logo-studio

ロゴデザインスタジオ

業界標準の3つの手法、Randの「還元的合理主義」、Pentagramの「戦略からクラフトへ」、Neumeierの「ブランドギャップ」を組み合わせ、クリーンな手書きSVGで、独自性があり記憶に残るブランドマークを制作するプロフェッショナルなロゴデザインスタジオです。

機能

• 構造化されたヒアリングを通じてブランドの本質を抽出します
• ユングのアーキタイプにブランドを当てはめ、心理学に基づいたビジュアルの方向性を定めます
• 3つの戦略的な方向性で、9種類以上の異なるSVGロゴコンセプトを生成します
• 実際のタイポグラフィ（Google Fonts）または幾何学的な構成を使用して、クリーンで互換性の高いSVGマークアップを作成します
• 明るい背景と暗い背景、ズーム、バリエーション一覧を備えた自己完結型のHTMLギャラリーで、すべてのコンセプトを提示します
• ユーザーの選択とフィードバックに基づく反復的な改良サイクルに対応します
• 最終ロゴからアプリ用アセット一式（iOS、Android、macOS、Windows、ファビコン、PWA、ソーシャル）を作成します
• セッションの最後に複数ページ構成のブランドガイドライン文書（ロゴのルール、カラーパレット、文字サイズ体系、レイアウト、UIコンポーネント、モーション、ブランドの声、アセット管理）を作成し、Essentials／Standard／Fullの詳細度から選べるようにします

ワークフロー

フェーズ	名称	参照先
1	ブランドの発見	methodologies.md
2	戦略的ポジショニング	brand-psychology.md
3	コンセプトの生成	methodologies.md
4	SVGの構築	svg-techniques.md + typography.md
5	スタジオプレゼンテーション	gallery-template.html
6	反復と評価	evaluation-criteria.md
7	アプリ用アセットの制作	app-assets.md + build-assets.mjs
8	ブランドガイドライン文書	brand-guidelines.md + brand-guidelines-template.html

フェーズ1：ブランドの発見

発見フェーズでは、戦略的なロゴデザインに必要な情報を抽出します。

ヒアリング

項目	目的
ブランド／会社名	ワードマークの基盤
業界／カテゴリ	カテゴリの慣習と差別化の機会
ターゲット層	人口統計学的特性、心理的特性、願望
ブランド価値（上位3つ）	視覚的に表現する中核的な個性
競合他社（3～5社）	競争上の差別化に向けたビジュアル環境
「唯一の存在」を示す宣言	「当ブランドは、[差別化要因]を備えた唯一の[カテゴリ]です」
トーン／個性	パーソナリティの各尺度におけるブランドの位置
既存アセット	すでに使用している色、フォント、視覚要素
使用状況	ロゴが表示される場所（アプリアイコン、看板、印刷物、ウェブ）

パーソナリティの尺度

次の軸上でブランドの位置を定めます（1～10）。

Traditional ←————→ Modern
Playful     ←————→ Serious
Luxurious   ←————→ Accessible
Bold        ←————→ Subtle
Organic     ←————→ Geometric

各手法が発見プロセスにどう取り組むかについては、methodologies.mdを参照してください。

フェーズ2：戦略的ポジショニング

アーキタイプのマッピング

各ブランドを12種類のユングのアーキタイプのいずれかに当てはめます。アーキタイプによって、形、色、タイポグラフィ、構成スタイルといったビジュアル表現の語彙が決まります。

アーキタイプとビジュアルの対応、色彩心理学、形状心理学、タイポグラフィ心理学の全容については、brand-psychology.mdを参照してください。

競争環境

競合ロゴを2つの軸でマッピングし、ビジュアル上の空白地帯を特定します。

Axis 1: Traditional ←→ Modern
Axis 2: Playful ←→ Serious

ロゴのコンセプトは、まだ占有されていないビジュアル領域である空白の象限を狙います。

3つの戦略的な方向性

方向性	特徴
方向性A	中心となるアーキタイプに沿います。市場の慣習に従う、安全な方向性です。
方向性B	中心となるアーキタイプと隣接するアーキタイプを組み合わせます。親しみやすさを保ちながら、独自性を生み出します。
方向性C	カテゴリの慣習に対比します。差別化の度合いが最も高く、リスクも最も高い方向性です。

フェーズ3：コンセプトの生成

コンセプトマトリクス

各方向から3種類のロゴを作成するため、最低9つのコンセプトが生まれます。

	方向A	方向B	方向C
コンビネーションマーク	A1	B1	C1
ワードマーク	A2	B2	C2
シンボル／アイコン	A3	B3	C3

追加タイプとして、レターマーク、抽象マーク、エンブレムに拡張できます。

コンセプトの開発

各コンセプトは、Reductive Rationalism のプロセスに沿って進めます。

1. Only Statement の中核となるアイデアから始めます
2. 視覚的なメタファーを生み出します — ブランドを表す名詞と、意外な連想を強制的に結び付けます
3. サムネイルを作成します：質より量を重視します
4. 要素を削ぎ落とし、不可欠なものだけにします
5. 頭の中でテストします：記憶だけを頼りに描けますか？

各方法論に基づく全プロセスについては、methodologies.md を参照してください。

フェーズ4：SVG の構築

技術標準

標準	値
拡大縮小	viewBox ベース（固定の width/height は使用しません）
名前空間	すべての <svg> に xmlns="http://www.w3.org/2000/svg" を指定します
形状	幾何学的な基本図形：circle、rect、polygon、path
タイポグラフィ	デフォルトでは実フォントを使った <text> を使用し、カスタム文字にはパスを使用します
再利用可能な要素	グラデーション、clipPaths、マスクは <defs> 内に配置します
ネガティブスペース	内側の形状には fill-rule="evenodd" を使用します
ファイルサイズ	ロゴ1つあたり5KB未満
ViewBox	シンボルには200×200、コンビネーションマーク／ワードマークには400×120

タイポグラフィ戦略

ロゴのワードマークでは、デフォルトで実際のタイポグラフィを使用します。HTML ギャラリーでは Google Fonts を読み込むため、プレビューや反復作業中に <text> 要素が意図した書体で表示されます。

方法	使用場面
<text> + font-family	セットされた書体を使うワードマーク（現代的なテックブランドの多く）。反復作業時のデフォルトです。
埋め込み @font-face	ポータブルな SVG の配布（メール、PDF、サードパーティ製ビューア）。使用するグリフにフォントをサブセット化します。
アウトライン化された <path>	カスタム文字（Coca-Cola、Disney のようなスタイル）、グリフの変更、または印刷物／グッズ向けの最終納品に使用します。

すべての font-family にはシステムフォールバックを指定します — 例：'Inter', -apple-system, sans-serif — ロゴが Times New Roman で表示されることはありません。

厳選されたフォントカタログ（Inter、Work Sans、Fraunces、Playfair Display、Space Grotesk、Manrope、Archivo など）、定番の組み合わせ、ライセンス、テキストとパスの選択フローチャートについては、typography.md を参照してください。

SVG のひな形

シンボル／アイコン：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    
  </defs>
  
</svg>

実際のタイポグラフィを使ったワードマーク：

<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <text x="200" y="65" text-anchor="middle"
        font-family="Inter, -apple-system, system-ui, sans-serif"
        font-size="48" font-weight="800" letter-spacing="-1"
        fill="#0A0A0A">Acme</text>
</svg>

コンビネーションマーク（シンボル＋タイポグラフィによるワードマーク）：

<svg viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(20, 30)">
    
    <circle cx="30" cy="30" r="28" fill="#0071e3"/>
  </g>
  <text x="90" y="72"
        font-family="Inter, system-ui, sans-serif"
        font-size="42" font-weight="700"
        fill="#0A0A0A">Acme</text>
</svg>

カラーバリエーション

各ロゴは次の3つのバリエーションで作成します。

バリエーション	説明
フルカラー	ブランドのアーキタイプと心理学を踏まえたブランドカラー
モノクロ	明るい背景に単色のダークカラー（#1d1d1f）
反転	暗い背景に白（#ffffff）

幾何学的な構築方法、ベジェ曲線、対称性、黄金比、互換性ルールについては、svg-techniques.md を参照してください。

フェーズ5：スタジオでのプレゼンテーション

ギャラリーの出力

すべてのコンセプトを、ギャラリーテンプレートに基づく自己完結型の HTML ファイルで提示します。

出力先： 作業ディレクトリ内の ./logo-studio-{brandname}.html。

ファイルを書き込んだ後、macOS では open、Linux では xdg-open、Windows では start で開きます。

ギャラリーカードの構成

┌─────────────────────────────┐
│  [Light BG]  │  [Dark BG]   │  ← Side-by-side display
├─────────┬─────────┬─────────┤
│ Color   │  Mono   │ Reversed│  ← Variant strip
├─────────┴─────────┴─────────┤
│ [ID] Concept Name           │
│ Description + rationale     │
│ #tag #tag #tag              │
└─────────────────────────────┘

ギャラリーのセクション

カードは戦略的な方向ごとにグループ化します。

• セクション：方向A — 「保守的／アーキタイプに沿った方向」
• セクション：方向B — 「独自性／ハイブリッド」
• セクション：方向C — 「破壊的／カテゴリーの枠を超える方向」

フェーズ6：反復

フィードバックプロトコル

ユーザーは ID でコンセプトを参照します（例：「A1」、「C2」）。

反復の種類	トリガー	アクション
改良	「A1は気に入っていますが……」	選択したコンセプトのバリエーションを3～5案作成します
組み合わせ	「A1のアイコンとB2の書体を組み合わせる」	複数のコンセプトの要素を統合します
方向転換	「どれもしっくりきません」	より深く掘り下げるため、フェーズ1に戻ります
拡張	「C列のような案をもっと」	その方向性でコンセプトを追加します

品質ゲート

最終候補は、次の6つのテストで評価されます。

テスト	基準
ナプキンテスト	5秒間見たあと、記憶を頼りに描けること
サムネイルテスト	16×16ピクセル（ファビコンサイズ）で見分けられること
シルエットテスト	輪郭だけで識別できること
白黒テスト	色がなくても機能すること
差し替えテスト	競合製品に載せると違和感があること
コンテキストテスト	実寸で競合ロゴの隣に並べても存在感があること

詳しい評価フレームワークについては、evaluation-criteria.mdを参照してください。

反復ギャラリー

反復ごとに、更新されたHTMLファイル logo-studio-{brandname}-r{N}.html が生成されます。

更新されたギャラリーには、改良または新規作成したコンセプトが含まれ、ヘッダーにラウンド番号が表示されます。

最終ロゴの納品物

最終的に選択されたロゴは、次の形式でエクスポートされます。

ファイル	内容
logo-{name}.svg	フルカラーSVG（<text>要素を含む編集用ファイル）
logo-{name}-mono.svg	モノクロSVG
logo-{name}-reversed.svg	リバース／ノックアウトSVG
logo-{name}-icon.svg	シンボルのみのバリエーション（コンビネーションマークの場合）
logo-{name}-outlined.svg	テキストをパスに変換した納品用バージョン（フォントに依存しません）

編集用ファイル（logo-{name}.svg）は引き続き編集できます。アウトライン化されたバージョンは、印刷物、グッズ、フォントが読み込まれない可能性がある環境向けの納品用アセットです。

フェーズ7：アプリ用アセットの制作

最終ロゴを選択した後、フェーズ7では、基準となるアイコンマスターから、主要な各プラットフォーム向けのアプリ用アセット一式を生成します。

アイコンマスター

アイコンマスターは、最終ロゴを基にした（ただし、最終ロゴとは別の）正方形形式のSVGです。

プロパティ	値
キャンバス	1024×1024、正方形
背景	意図的に選んだブランドカラー（透明でも白でもありません）
コンテンツ	通常はシンボルのみ。ワードマークのみのブランドではモノグラム
タイポグラフィ	テキストをパスに変換します（ヘッドレスラスタライザーではフォントのレンダリングが不安定なため）
角丸	なし — プラットフォーム側で独自のマスクが適用されます
セーフゾーン	中央の約61%（Androidで最も制限が厳しい66/108に相当）

アイコンマスターはビルドパイプラインへの入力です。アイコンとロゴでは役割が異なるため、ロゴとは別の成果物です。設計上の根拠について詳しくは、app-assets.mdを参照してください。

プラットフォーム別の出力

プラットフォーム	アセット
iOS	ライト／ダーク／ティントの1024 PNGとContents.jsonを含むAppIcon.appiconset/（iOS 18形式）
Android	アダプティブアイコン（ic_launcher.xmlと前景／背景／モノクロのレイヤー）＋従来の各解像度（mdpi-xxxhdpi）＋Play ストア用512
macOS	10サイズの.iconset（16～1024@2x）からiconutilで作成するAppIcon.icns
Windows	マルチ解像度.ico（16/32/48/256）＋UWPタイル用PNG（44、71、150、310、ワイド）
Web／ファビコン	favicon.ico、favicon.svg、apple-touch-icon.png（180）、PWAマニフェスト用アイコン（192、512、マスカブル）、safari-pinned-tab.svg（モノクロ）
PWA	site.webmanifest、スプラッシュ画面、セーフゾーンの余白を設けたマスカブルアイコン
ソーシャル	Open Graph（1200×630）、Twitterカード（1200×628）、LinkedIn、プロフィール画像（400、512）

ツールスタック

目的	ツール	インストール
プログラムによるラスタライズ	sharp（Node、libvips）	npm i sharp
ファビコン＋iOS＋Android＋Windows パッケージ	favicons（npm）	npm i favicons
PWA スプラッシュ＋マスカブルアイコン	pwa-asset-generator（npm）	npm i pwa-asset-generator
CLI ラスタライズのフォールバック	resvg または rsvg-convert	brew install resvg librsvg
macOS .icns ビルダー	iconutil	macOS に標準搭載
SVG の最適化	svgo	npm i svgo
PNG の最適化	pngquant＋oxipng	brew install pngquant oxipng

ツールの詳しい比較、プラットフォームの仕様、注意事項（特にヘッドレス SVG ラスタライズ時のフォント処理）については、app-assets.md を参照してください。

ビルドパイプライン

パイプライン全体は build-assets.mjs にスクリプト化されています。

# Install prerequisites (one time)
npm i -D sharp favicons pwa-asset-generator svgo png-to-ico

# Run the build
node build-assets.mjs

パイプラインの各ステージ：

1. svgo でソース SVG を最適化する
2. favicons でファビコン／iOS／Android／Windows パッケージを生成する
3. sharp で macOS .iconset を作成し、iconutil で .icns に変換する
4. iOS AppIcon.appiconset（ライト＋ダーク＋色付きの 1024 PNG）を作成する
5. ソーシャル／Open Graph 画像を生成する
6. pngquant＋oxipng ですべての PNG を最適化する

出力構成

dist/assets/
├── logo.svg                         # Optimized source logo
├── icon-master.svg                  # 1024×1024 square icon master
├── AppIcon.appiconset/              # iOS asset catalog
├── AppIcon.icns                     # macOS compiled icon
├── android/                         # Adaptive + legacy densities
├── windows/                         # .ico + UWP tiles
├── web/                             # favicons, PWA manifest, safari-pinned-tab
└── social/                          # OG, Twitter, profile images

重要なタイポグラフィに関する注意

SVG ラスタライザー（sharp、librsvg、resvg）は、<text> 要素をシステムにインストールされたフォントで描画します。CI 環境やブランドフォントがないマシンでは、出力でフォールバックフォントに黙って置き換えられます。アイコンのマスターはアウトライン化したパスを使用してこの問題を回避しています。作業用 SVG は編集可能なテキストを保持し、アイコンマスターはアウトライン化したデータを使用します。

2 種類の出力を使うワークフローについては、typography.md を参照してください。

フェーズ 8：ブランドガイドライン文書

最終ロゴの選定後、フェーズ 8 では、あらゆるタッチポイントでアイデンティティをどのように適用するかを定める、唯一の正式な基準となる複数ページのブランドガイドライン文書の作成を提案します。提案は明示的に行われ、文書が自動生成されることはありません。

提案のタイミング

提案はフェーズ 6（ロゴの最終決定）後に提示され、フェーズ 7（アプリ用アセット）とは独立しています。どちらのフェーズの後に行うこともできます。アプリ用アセットを希望しないユーザーもガイドラインをリクエストできます。アプリ用アセットを利用するユーザーには、次にガイドラインを提案します。

詳細度モード

モード	ページ数	範囲
Essentials	4–6	表紙、概要、ロゴ、カラー、タイポグラフィ、アセット管理
Standard	8–10	Essentials ＋ レイアウトとグリッド、UI コンポーネント、ボイスとトーン
Full	12–14	Standard ＋ モーションとアニメーション、承認

ブランドブリーフでデジタル製品、アプリ、Web、またはデッキの文脈に言及がある場合、Standard がデフォルトです。アイデンティティのみの案件では Essentials がデフォルトです。Full はオプションです。

入力ソース

文書の大部分は、フェーズ 1〜6 のコンテキストから再度質問することなく埋められます。ブランド名、対象者、トーン、主要カラー、シグネチャー要素、ロゴのバリエーション、タイポグラフィはすでに確定しています。短い追加インタビューでは、残りの入力項目（バージョン、クリアスペースのルール、最小サイズ、命名規則、ボイス属性、Full モードの場合はモーションのタイミング）を確認し、各項目にデフォルト案を提示します。

セクションの完全な順序、セクションごとの入力仕様、追加インタビューのチェックリスト、デフォルトコンテンツライブラリについては、brand-guidelines.md を参照してください。

ガイドラインテンプレート

文書は brand-guidelines-template.html から組み立てられます。これは、ブランドカラー用の CSS カスタムプロパティ、PDF 変換用の @page ルール、すべてのフィールド（ロゴ SVG、カラースウォッチ、文字サイズのスケール、コンポーネント項目、ボイス／モーションの行、フッター行）用の {{TOKEN}} プレースホルダーを備えた、自己完結型の HTML 骨組みです。選択した詳細度モードで省略されるセクションは、レンダリング時に <section> ブロック全体が削除されます。

文書には、記載対象のブランドの見出しフォント、主要アクセントカラー、シグネチャー要素のカラーを適用し、成果物自体で、その中に記載されたガイドラインを示します。

出力

ファイル	内容
brand-guidelines-{brandname}.html	印刷可能な自己完結型の HTML
brand-guidelines-{brandname}.pdf	オプション — ヘッドレス Chrome または Cmd+P の「PDF として保存」で生成します

HTML の書き込み後、open／xdg-open／start で開きます。PDF への変換は別途明示的に行う手順です。コマンド例は brand-guidelines.md にあります。