Community画像github.com

ロゴ

ロゴやブランドマークをデザインします:ブリーフ、マークタイプ別のコンセプト、クリーンな幾何学SVG、光学的調整、色とタイポグラフィ、テスト(16px、単色、反転)、納品(SVG、PNG、ファビコン、アプリアイコン)およびミニガイド。ロゴ、ワードマーク、モノグラム、シンボル、アプリアイコン、ファビコンの依頼や、ロゴの批評・リフレッシュの際に使用します。ブランドカラー/フォント/トークン(lll:design-system)や画面(lll:ui)には使用しません。

ロゴ とは?

このスキルは、開発者向けエージェント(Claude Code、Cursor、Codexなど)が、ロゴ、ワードマーク、モノグラム、シンボル、アプリアイコン、ファビコンを一からデザインしたり、既存のロゴを批評・リフレッシュしたりするための包括的なガイドです。ブリーフ作成からコンセプト立案、クリーンな幾何学SVGでの構築、光学的調整、16px・単色・反転などのテスト、SVG/PNG/ファビコン/アプリアイコン形式での納品、ミニガイドの提供までをカバーします。スキルは「ガイダンス」モード(チャット上でのコンセプト提案と批評)と「フル」モード(プロジェクトへの最終ファイル書き出しとキット生成)の2つを持ち、常にブラックファーストでの構築、SVGのレンダリングと目視確認、テスト結果の報告を厳守します。ブランド戦略(lll:business)やUIスクリーン(lll:ui)には対応せず、あくまで識別子としてのロゴデザインに特化しています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/lilly-logic-labs/lll-skills/tree/HEAD/skills/logo

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ロゴ は何をしますか?

説明するのではなく識別するロゴをデザインします。1つの明確なアイデア、クリーンなSVGで構築、16pxと単色で実証済み、開発者と印刷業者が使えるファイルとして納品します。出力は推奨マークと、それが機能するという証拠です。

使用するタイミング

  • 企業、製品、プロジェクト向けの新しいロゴ、ワードマーク、レターマーク、モノグラム、シンボル、エンブレム。
  • アプリアイコン、ファビコン、ソーシャルアバター(新規、または既存マークからの派生)。
  • 既存ロゴの批評、比較、リフレッシュ(「小さくしたら見にくい」「古く感じる」など)。
  • 既存マークのバリエーション納品と簡易使用ガイド。

使用しないタイミング

  • ブランドカラー、フォント、トークン、ボイス、DESIGN.md、「サイトの見た目を見せて」:lll:design-system
  • 製品UI内の画面、コンポーネント、イラスト:lll:ui
  • 事業命名、ポジショニング、商標アドバイス:lll:business。商標調査は専門家に依頼。
  • ソーシャル投稿、キャンペーン、広告クリエイティブ:lll:marketing
  • 写真、動画、3Dブランドアセット:範囲外と明記。

モード

ガイダンス(デフォルト)。 チャット上でブリーフ、コンセプト、批評、アドバイスを行います。コンセプトSVGはリポジトリ外のスクラッチフォルダで描画、レンダリング、確認、表示(SVG貼り付けまたは画像)します。プロジェクトには書き込みません。サブエージェントは使用しません。コンセプトチェックポイントで停止します。

フル。 オーナーが方向性を選び、キットを要求した場合(またはエンドツーエンドの実行を依頼した場合)のみ。プロジェクトのブランドフォルダ(brand/logo/、またはプロジェクトが既に使用しているフォルダ)に最終ファイルを書き込みます:マスター、バリエーション、ファビコンとアプリアイコンセット、テストシート、ミニガイド。納品リストとファイル名:references/delivery.md。サブエージェントはオプション。レンダリングとエクスポート作業用に最大1つの幅広いブリーフ(../../shared/agents.md)。

タスク

タスクトリガー参照ドキュメント
design新しいロゴreferences/brief.md、references/mark-types.md、references/concepts.md
buildコンセプトをSVGに変換references/svg-construction.md、references/optical-refinement.md
critique既存ロゴへのフィードバックreferences/critique-redesign.md、references/testing.md
redesignモダナイズまたは置き換えreferences/critique-redesign.md、次にdesign
assetsバリエーション、ファビコン、アプリアイコンreferences/delivery.md、references/app-icons.md
presentコンセプト表示、ガイド作成references/presentation-guide.md

絶対ルール

  1. ロゴは識別子であり、説明ではない。1つのアイデア、1文で言えること。競合のロゴを説明できる文はコンセプトではない。
  2. 描く前に学ぶ:正確な名前の綴り、事業内容、誰のためか、3〜5の形容詞、競合、制約。既存の資産(人々が知っている色や形)は、オーナーが別の指示をしない限り尊重する。
  3. まず黒で構築する。フォルムが機能してから色を付ける。弱いフォルムを救うためにグラデーション、シャドウ、エフェクトを使ってはならない。
  4. 自分の作業を確認する。SVGを盲目的に描くことが、質の悪いマークの主な原因である。すべての反復をレンダリングし、表示する。
  5. 認識可能な既存マークをトレース、模倣、「アップデート」してはならない。馴染みがあり、クライアントのものでないなら、それは他人のものである。
  6. 最終ファイルはベクター:テキストはアウトライン化、ストロークは拡張、ラスタなし、フィルタなし、スクリプトなし。
  7. 商標クリアランスやフォントライセンスの保証を決して主張してはならない。どのフォントを想定したか、オーナーが専門家による調査でマークをクリアする必要があることを伝える。
  8. コンセプトチェックポイントで停止する。3つのコンセプトと推奨案を提示し、待機する。選択された方向のみ完全なキットを構築する。オーナーが確認を不要と言った場合のみ、この一時停止をスキップする。
  9. テストは結果であり、意図ではない。何が合格し、何を変更し、何がオーナーに残されたかを報告する。
  10. 汎用的なコンテンツのみを書く。納品物に他のクライアントの名前やマークを決して入れない。

手順

  1. プロジェクトを学ぶ。 ../../shared/stack-detect.mdの基本を読み、既存のロゴ(public/、assets/、brand/、*.svg、アプリアイコンセット、manifest.json)、DESIGN.md、README、ランディングコピーを探す。正確な名前、プラットフォーム(Web、iOS、Android、デスクトップ)、既存の色をメモする。
  2. ブリーフ。 ブリーフ(references/brief.md)を埋める:名前、提供内容、ターゲット、形容詞と反形容詞、競合、制約、マークが機能すべき場所。ファストトラック:1メッセージで最大5つの質問、または前提を述べて進む。形容詞が最も価値のあるインプット。
  3. カテゴリをスキャンする。 よくある表現(フィンテック:盾と上向き矢印、コーヒー:豆と湯気、AI:キラキラと脳)をリストアップする。新鮮な形を与えない限り、これらは使用禁止とする。許可されていればブラウザツールで競合のマークを読み取り専用で確認する。
  4. コンセプト。 少なくとも2つのマークタイプにわたって8〜12の1文コンセプトを書く(references/mark-types.md、references/concepts.md)。アイデアの明確さ、差別化、シンプルさ、関連性、小サイズでの強さでスコアリングする。最も強力で最も異なる3つを残す。書くのは安く、構築するのは高い:3つだけ構築する。
  5. 3つそれぞれの黒ファーストSVGを構築する(references/svg-construction.md)。構築を言葉で説明し(プリミティブ、半径、角度、グリッド単位)、SVGを書く。各反復を保存する(a-v1.svg、a-v2.svg)。
  6. チェックと調整、少なくとも2ループ。
    • node scripts/svg-check.mjs check a.svgで構造、色、ストローク、ニアミス角度、センタリングを報告させる。
    • node scripts/svg-check.mjs sheet a.svg -o sheet-a.htmlでテストシートを構築する:サイズラダー、16pxと32px、単色、反転、背景、目を細めて見る、ミラー、ファビコンタブ、アプライル、アバタークロップ。
    • ブラウザツールでシートを開き、見る。失敗したものを修正する(references/testing.md、references/optical-refinement.md)。繰り返す。
  7. チェックポイント。 3つのコンセプトをグレースケールで大サイズと小サイズで並べて表示し、それぞれ1行、推奨案、コンセプトごとに1つの正直なリスクを提示する(references/presentation-guide.md)。キットを提供する。回答を待つ。変更を希望された場合は手順5に戻る。
  8. キット(フルモード、承認後)。 最終ジオメトリと小サイズ調整。色(1色または2色、単色版と反転版、references/colour-type.md)。タイポグラフィとロックアップ(横、縦積み、シンボルのみ、ワードマークのみ)。納品ファイル(references/delivery.md)。アプリアイコン(references/app-icons.md)。ミニガイド(references/presentation-guide.md)。node scripts/svg-check.mjs variants logo.svgで黒、白、モノコピーを作成。node scripts/svg-check.mjs icon logo.svg --kind ios -o ios.svgでアプリアイコンキャンバス。node scripts/svg-check.mjs ico 16.png 32.png 48.png -o favicon.icoでファビコンサイズをパッケージング。
  9. クローズアウト。 最終チェックリスト(references/testing.md)を実行する。オーナー向けの未完了項目をリストアップする:商標調査、フォントライセンス、印刷校正、色合わせ。

マークタイプ早見表

タイプ選ぶタイミング注意点
ワードマーク特徴的な名前、主にテキストで見られる16pxで弱い。コンパクトなコンパニオンが必要
レターマーク / モノグラム長い名前、イニシャルが既知または短い文字形態をカスタマイズしないと一般的すぎる
絵文字シンボルシンプルで所有可能なオブジェクトがアイデアに合う直球すぎる、クリシェ
抽象マーク幅広いまたは無形の提供内容時間をかけて意味を構築する必要がある
エンブレム / バッジ伝統、職人技、団体細部が小さいとつぶれる
コンビネーションほとんどの新ブランド。ロックアップ内のシンボル+ワードマーク離れても一緒でも機能する必要がある
ダイナミック / システム多数のタッチポイントや製品強固なコアが必要。小規模ブランドには不向き

理由と決定ガイド:references/mark-types.md。

出力

  • ガイダンス: ブリーフと前提、3つのコンセプト(レンダリング画像またはペーストしたSVG、各1行)、推奨案、これまでのテスト結果、未完了項目。リポジトリには書き込まない。
  • フル: マニフェスト付き最終ファイルのフォルダ、テストシート、ミニガイド、各マスターのsvg-checkの実際の出力、オーナーがまだ行うべきことのリスト。
  • 実行しなかったことを明記:レンダリングなし、デバイステストなし、印刷校正なし、商標調査なし。
  • 次のステップ:2〜4つの箇条書き(方向性を選ぶ、商標調査を実行する、サイトとアプリにlll:uiでマークを適用する、lll:design-systemでブランドカラーを設定する)。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル