ロゴデザイン
プロフェッショナルなアイデンティティデザイナーのようにロゴをデザインします。最初にブランドを理解し、本当に異なるコンセプトを探求し、その後、選択された1つを本番環境で使用可能でスケーラブルなマークへと洗練させます。出力は手書きのSVGであり、正確で編集可能、かつ解像度に依存しません。
基本ルール
- オリジナリティ。 たとえ「Xのように見せて」と依頼されても、実際の企業のロゴ、マスコット、商標を複製、トレース、または密接に模倣しないでください。「モダンテックブランドのようなフラットジオメトリック」といった一般的なスタイルを借用することは可能ですが、マーク自体は新しいものでなければなりません。ユーザーが既存のロゴを提供した場合は、それを洗練または描き直すことができます。
- ベクター優先。 すべてのマークは、単純なジオメトリ(
rect、circle、path、polygon)から構築されたSVGです。コアマークにラスター画像の埋め込み、フィルターやぼかし、最終成果物に外部フォントを使用してはいけません（タイポグラフィを参照）。 - 1色で機能すること。 グラデーションでのみ機能するロゴは完成していません。必ず単色バージョンを確認してください。
- 小さくても機能すること。 16pxおよび32pxでマークを確認してください。潰れてしまう場合は、簡略化してください。
ワークフロー
1. ブリーフィング（推測できないことだけ質問する）
会話から、または短い質問セットで以下を収集します。
| 項目 | 重要な理由 |
|---|---|
| 名前（正確なスペル、大文字小文字）およびタグライン（ある場合） | ワードマークとロックアップを決定する |
| ビジネスの内容、対象顧客 | コンセプトの源泉 |
| 3つの性格を表す形容詞（例: 温かみのある、職人技の、信頼できる） | 形状言語、タイプ、色を決定する |
| 好み/禁止の色 | 制約条件 |
| 使用場所（看板、アプリアイコン、パッケージ、SNSアバター、刺繍） | ディテールのレベルを決定する |
| ロゴタイプの希望（ある場合）（下記参照） | 探索範囲を絞る |
| 好き/嫌いなロゴとその理由 | 好みのキャリブレーション（コピーはしない） |
ユーザーからの情報が少ない場合は、合理的な仮定を1～2行で述べ、先に進んでください。アンケートで止まらないでください。
2. コンセプト探索（3～4コンセプト）
単なる色の変更ではなく、意味のある違いがある3～4のコンセプトを生成します。以下の軸に沿って変化させます。
- ロゴタイプ: ワードマーク、レターマーク/モノグラム、絵表示マーク、抽象マーク、エンブレム/バッジ、組み合わせマーク（シンボル＋ワードマーク）。
- アイデア: 文字通りのもの（彼らが作るもの）、比喩的なもの（彼らが象徴するもの）、タイポグラフィック（文字形状の遊び）、ネガティブスペースのトリック。
- 形状言語: 幾何学的 vs 有機的、丸み vs 鋭利、太い vs 細い。
各コンセプトについて、1文の根拠を書きます：アイデアと、それがブリーフに合う理由。アイデア生成テクニックについては references/concepts.md を参照してください。
コンセプトを並べて表示し（HTMLページまたは単一の合成SVG）、ユーザーが比較できるようにしてから、どの方向に展開するか尋ねます。ユーザーが単一の完成ロゴを希望し、オプションを求めていない場合は、自分で最も強いコンセプトを選び、その理由を述べます。
3. リファインメント
選択されたコンセプトに対して：
- グリッド上に構築する。 シンボルには
0 0 512 512のようなviewBoxを使用します。キーポイントは整数または一貫したモジュール（8または16の倍数など）に合わせます。 - 光学補正。 円や点は、同じ大きさに見えるように、フラットなエッジよりわずかに（約1～3%）はみ出させます。水平方向のストロークは、同じ幅の垂直方向のストロークよりも太く見えるため、少し細くします。
- 簡略化。 32pxで耐えられない要素や、アイデアを伝えない要素はすべて削除します。
- ロックアップのバランス。 水平ロックアップの場合、シンボルの高さは通常、キャップ高さの約1.5～2.5倍です。シンボルとワードマークの間のギャップは、キーレターのストローククラスターの幅の約0.5～1倍にします。数学的にではなく、光学的に中央揃えにします。
- 色。 最初は黒から始めます。フォームが機能してから色を追加します。
references/color-and-type.mdを参照してください。
4. 検証
プレビュースクリプトを実行し、PNGを確認（画像に対してReadツールを使用）し、見つけた問題を修正します。
node <skill-dir>/scripts/preview.mjs path/to/logo.svg [more.svg ...] --out previews/
これにより、各SVGが白、黒、中間トーンの背景上で16、32、64、128、512ピクセルでレンダリングされ、連絡票 previews/<name>-sheet.png も生成されます。以下を確認します。
- 16pxおよび32pxで判読可能で認識可能
- 明るい背景と暗い背景の両方で機能する（必要に応じて反転バージョンを提供）
- 単色バージョンが十分に機能する
- 不意の形状や意図しない読み取りがない（回転させてみる、目を細めて見る）
- よく知られた既存のロゴに類似していない
- テキストのスペルが指定された通りである
5. 納品
小さく適切に名前が付けられたキットを生成します（依頼内容に応じて調整）。
<brand>-logo/
<brand>-primary.svg # フルカラー組み合わせマーク / メインロックアップ
<brand>-horizontal.svg # シンボル左、ワードマーク右
<brand>-stacked.svg # シンボル上、ワードマーク下
<brand>-symbol.svg # シンボルのみ（アバター、アプリアイコン用）
<brand>-wordmark.svg # 名前のみ
<brand>-mono-black.svg
<brand>-mono-white.svg
<brand>-favicon.svg # 簡略化されたシンボル、正方形のviewBox
png/ # preview.mjsからのエクスポート（例: 512, 1024）
brand-sheet.html # 1ページ: マーク、クリアスペース、色（hex/RGB/CMYK近似）、タイプ
scripts/export.mjs は任意のSVGを指定サイズのPNGにレンダリングします。
node <skill-dir>/scripts/export.mjs logo.svg --sizes 512,1024 --out png/
最後に短いメモを添えます：コンセプトの根拠、16進数値を含むパレット、使用した書体、推奨されるクリアスペースと最小サイズ。
SVG作成ルール
- ルート要素:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="…">であり、マスターファイルには固定のwidth/heightを付けない（必要なエクスポートにのみ追加する）。 - アクセシビリティのため、ブランド名を記した
<title>を含める。 - シェイプには
fillを使用し、最終ファイルでは可能な限りストロークを避ける（ストロークは一部のツールで予測不能に拡大縮小されるため、アウトラインパスを描くことで精神的にストロークを塗りつぶしアウトラインに変換する）。探索中はストロークでも問題ない。 - IDは一意に保ち、プレフィックスを付ける（
acme-grad-1など）。これにより、複数のロゴを1つのページにインライン化できる。 - 色は一度定義する：ブランドカラーを
<style>にクラスで定義するか、正確な16進数値を繰り返し使用する。プライマリファイルではcurrentColorを使用しない。ユーザーがテーマ対応アイコンを望む場合は、別のアイコンバリアントでcurrentColorを使用してもよい。 - 座標は最大で小数点以下2桁に丸める。
<image>、<foreignObject>、スクリプトは使用しない。
タイポグラフィ
SVG内のテキストは、ビューアがフォントを持っているかどうかに依存します。そのため：
- 探索時: 堅牢なフォントスタックを持つ
<text>で問題ありません（font-family="Inter, Helvetica, Arial, sans-serif"）。また、HTML比較ページにGoogle Fontsをロードしても構いません。 - 最終ワードマーク: 文字をパスとして描くか（カスタムレタリングはロゴに適しています）、ツールが利用可能な場合はテキストをアウトラインに変換することを推奨します（例:
fonttools/opentype.js—scripts/text-to-path.mjsを参照）。どちらも不可能な場合は<text>を維持しますが、納品メモに正確なフォント名とライセンスを記載し、オープンライセンスフォント（Google FontsのSIL OFLフォントは安全なデフォルトです）と一緒に提供してください。 - 文字間隔（トラッキング）は目で調整します。すべて大文字のワードマークは通常+2%～+10%のトラッキング、小文字は通常0%～-2%が必要です。問題のあるカーニングペア（AV, To, LT, ry）を調整します。
避けるべき一般的な失敗パターン
- 同じアイデアを4色に変えただけのコンセプト。
- ひねりのないクリップアート的な文字通り表現（カフェにコーヒーカップ、不動産業者に家）。文字通りに行く場合は、意外な角度や巧妙なネガティブスペースを見つけてください。
- 細かいディテール、グラデーション、ドロップシャドウ、極細のヘアラインが多すぎる。
- 実際のサイズで読めないほどエンブレム内のテキストが小さい。
- トレンドのエフェクト（ユーザーが要求しない限り、すぐに時代遅れになる）。
- 不均衡：重いシンボルと細いワードマーク（またはその逆）。ストロークの太さを一致させてください。
参考文献
references/concepts.md— アイデア生成テクニックとロゴタイプガイドreferences/color-and-type.md— 色彩心理学、パレット構築、コントラスト、タイプの組み合わせexamples/— 構造と規約を示すサンプルSVG（架空のブランド）