Community画像github.com

Logomarks/ロゴマーク

ジオメトリックなロゴマーク(シンボル、レターマーク、モノグラム)を、logomarks.ai の無料 Logomarks セットの基準に従って、クリーンな単色 SVG としてデザインします。グリッド512、正確なフィット、コンストラクションキット、ハウスチェック、セットのテイストに準拠。新しい幾何学マークのデザイン、ロゴマーク・ブランドシンボル・レターマーク・モノグラムの描画や反復、SVG マークのハウスルールチェック、既存の Logomarks の編集・リミックス・グリッチ作業に使用します。

ロゴマーク とは?

このスキルは、David Sherlock 氏が作成した 3,797 個の無料ジオメトリックロゴマークセット「Logomarks」に準拠した新しいマークをデザインし、既存のマークをチェック・編集・再利用するための包括的なガイドです。標準仕様は 512x512 のビューボックス、マークの最長辺は正確に 448 で中央配置、単色 SVG の塗りつぶしパスのみ使用し、ストロークやグループ化は禁止です。ワークフローは、ブリーフの読み取り、ファミリーの選択、アイデア出し、キットを使った構築、フィットスクリプトの実行、レビュー、納品の順です。キットは polygon-clipping を利用したジオメトリ操作ユーティリティで、円、矩形、多角形、ブール演算、アイソメトリック図形、グリッチスライスなどをサポートします。このスキルは、Claude Code、Cursor、Codex などの AI エージェントプラットフォームで動作し、ロゴデザインの一貫性と品質を保証します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Logomarks/skills/tree/HEAD/skills/logomarks

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

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

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

ドキュメント

Logomarks

David Sherlock による 3,797 個の無料ジオメトリックロゴマーク。すべて同一基準で描画されています。 https://logomarks.ai (CC0、パブリックドメイン)。このスキルは、このセットに属する新しいマークをデザインし、既存のマークをチェック・編集・再利用する方法を示します(プロジェクト用に既存のマークを選択して設定するには、Logomarks ピッカースキルを使用してください)。

このフォルダの内容:

  • SKILL.md:このファイル。
  • scripts/kit.mjs:セットの構築に使用したジオメトリキット(図形、真のブール演算、ウィービング、アイソメトリックキューブ、アイソソリッド)。npm install polygon-clipping が必要です(package.json 付属)。
  • scripts/fit.mjs:任意の SVG マークを標準サイズに調整しチェックします。依存関係なし。
  • scripts/examples.mjs:キットで再構築したセットからの6つの実マーク。
  • examples/:それらの出力(既にフィット済み)。

既存マークの使用

サイトは静的 API としても機能します。インストール不要:

  • https://logomarks.ai/marks.json:各マークの name、slug、file、 tags(round、square、letter、number、symmetric、radial、solid、light、wide、tall、new) および描画サイズ。
  • https://logomarks.ai/svg/<slug>.svg:マーク自体。
  • https://logomarks.ai/marks/<slug>:そのページ。PNG、ファビコン、ブランド モックアップのダウンロードあり。
  • https://logomarks.ai/logomarks.zip:すべてのマーク。

ゼロからデザインする前に、既存のマーク(またはそのリミックス)が要件に合うか確認してください。marks.json を取得し、タグと名前でフィルタリングします。

標準(譲れない条件)

  • viewBox="0 0 512 512"。

  • マークの最長辺が正確に 448、中央配置:マージン 32。実際のアウトラインで測定します。横長マークは幅 448 で高さはそれより短く、縦長マークは高さ 448 です。目測でサイズ調整しないでください。fit.mjs を実行します。

  • ジオメトリを測定し、キャンバスは測定しないでください。 構築中、マークは 0~512 の範囲をはみ出すことがあります(アイソソリッドや縦長スタックは通常そうなります)。それは問題ありません。フィッティングステップで実際のアウトラインを測定する限りは。viewBox 内でレンダリングしてマークの境界を求めないでください。その範囲外はレンダリングから見えず、「フィット」が外側に残してしまい、最終ファイルが端で切れてしまいます。fit.mjs はすべての点と曲線を測定するため、どこに描かれたマークでも処理できます。fit.mjs --check はキャンバスからはみ出したマークを不合格にします。

  • ファイル全体:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
      <path fill-rule="evenodd" d="…"/>
    </svg>
    
  • currentColor での塗りつぶしパスのみ。ストロークは不可(展開してください)、<g>、transform、 style、マスク、クリップパス、ID、テキストも不可。穴は本当の穴(evenodd または逆巻き)、背景色で塗られた形状ではありません。

  • 座標は小数点第一位まで。

ワークフロー

  1. ブリーフを読み取る。 名前、事業内容、雰囲気(落ち着いた、技術的、遊び心、プレミアム)、マークが使われる場所(アプリアイコン、ファビコン、看板)。小さいサイズで使用する場合は、部品の少ない太めのマークが適しています。
  2. 一つのファミリーを選ぶ(下記参照)。一つのマークでファミリーを混在させない。
  3. 4~6 の一行アイデアを書く。 それぞれが一つのアイデアでなければなりません:「S字チャンネルで分割された円盤」であって「S、ドット、光線のある円盤」ではありません。レターマークは名前のイニシャルを使用します。
  4. キットで最良の 2~3 を構築する: プリミティブをブール演算で組み合わせ、write() を呼び出す短いスクリプト。非常に単純なマークの場合のみ、パスデータを手書きします(「パスを手書きする」参照)。
  5. フィット: node scripts/fit.mjs out/ ですべてを標準サイズに調整。
  6. レビュー:チェックリストに照らして。各マークを 32 px と 512 px でレンダリングして確認。不合格のものは切り捨て、生き残ったものを反復改良。
  7. 納品:各マークに短くユニークな名前(1~2語:「Cube Window」、「Moonrise」)、一行アイデア、SVG を添えて。

セットが好むもの

所有者のレビューから:一つのネガティブスペースアイデアと、太く均一な隙間を持つ、太いソリッドマーク;アイソソリッドとキューブ;一つの繰り返し要素から構築された詳細なマーク;ミニマルなドットとピクセルマーク;かわいい陶器の置物のような動物。何よりも、モダンなテック、AI、テックウェアブランドのように見えるもの:精密で、エンジニアリングされ、少し未来的。インターロッキングバンド、モジュラータイル(最も好まれる)、モノラインとマルチライン描画、面取りと斜めカット、精密なリングと軌道、グリッドシステム、ステンシルとユーティリティ文字、グリッチスライス、モノグラム。ただし、UI、ネットワーク、チップ、回路アイコン、ニューラルネットワークノードグラフ、脳、または既知の AI マーク(六角形の結び目、アスタリスク、四つ星スパークル)に近いものは不可。

ファミリー

セット内のすべてのマークは一つのファミリーに属します。ファミリーを選んだら(ワークフローのステップ2)、構築前に references/families.md の該当セクションを読んでください:どのように構築されるか、512 キャンバス上の数値、試されてカットされたもの。このファイルで引用符付きで名前が挙げられているセクション(「Iso solids」、「Glitch editions」)もそこにあります。

ファミリー:Bold negative space;Swiss grid;Stencil letters;Monograms;Serif letters and monograms(バッチ230);Letter badges;Woven;Iso cubes;Iso solids;Overlaps (XOR);Line (monoline);Multiline (tracks);Oblique;Dot grids;Animals;Animals in the house styles;Leaf and seed;Halftone solids;Dither taper(バッチ167、186);Detailed;Inflated;Glitch slices;Shear and Wire letters(バッチ112–113);Inline letters(バッチ124);Rail and Trace letters(バッチ166);Echo letters(バッチ202);Tech brand marks(バッチ213);Modular;Orbits;Letter symbols, symbols, hidden creatures and forms(バッチ168);Techwear(バッチ107);Industry marks(バッチ95–97);Tried and dropped(バッチ51);Folded(折り紙);Fold seams and straps(バッチ170);Iso · Planes(バッチ215);Bold · Emblems(バッチ216);Bold · Y2K(バッチ232);Letters · Blackletter and Bold · Shatter(バッチ231)。

キット(scripts/kit.mjs)

図形は 512 キャンバス上のポリゴンセットです(y は下向き、C = 256 が中心)。

関数生成物
circle(cx, cy, r)、ellipse(cx, cy, rx, ry, deg)円盤
rect(x, y, w, h)、rr(x, y, w, h, r | [tl, tr, br, bl])長方形、角丸または部分角丸
squircle(cx, cy, R, n)スーパー楕円:バッジのソフトスクエア(n 4.5)
regular(cx, cy, r, sides, deg)、roundPoly(points, cut)正多角形;角丸の任意多角形
poly([[x, y], …])任意の多角形
annulus(cx, cy, r, w)幅 w のリング;r は中心線、外縁ではない
sector(cx, cy, r, a0, a1)、arcBand(cx, cy, r, w, a0, a1, round)扇形;太い円弧、オプションで丸い端
lens(cx, cy, length, width, deg)ベシカ/葉
drop(centre, r, tip)涙形
pill(a, b, w)、bar(a, b, w)丸い端または四角い端の線。図形用またはギャップ切断用
stroke(points, w)、sample(f, t0, t1, n)太いポリライン(可変幅可)と曲線に沿った点
weave(strands, w, gap)、ring(cx, cy, r)上下に交差するストランド
iso(edge)、cubes(list, edge, ox, oy, gap)アイソメトリック点;キューブ配置
isoPrism、isoBlock、isoRing、isoPileアイソソリッド(「Iso solids」参照)
dedupe(points)stroke() の前に重複点を削除
grow(shape, d)、soften(shape, r1, r2)真のラウンドオフセット(負の値で縮小);内側の角を r1、外側の角を r2 で丸める(膨らんだ形状)
robust()スクリプトの先頭で一度呼び出す:polygon-clipping が例外を投げるたびに微小なジッターで再試行する
grown(shape, w)、over(back, front, w)形状に 2w のバンドを追加(それを引いて部品を切り離す);front が back の前面、w だけ切り離し
egg(cx, cy, rx, ry, deg, k)卵形。置物のボディ用
slices(shape, cuts, shifts, { deg, g })グリッチスライス:ギャップ g で帯にカットし、各帯をカット方向にスライド
BADGE、knockout(kind, letter)、clearance()7 つのバッジ形状;中央に配置され、ノックアウトされた文字。端から 50 未満に近づいた場合は縮小
PIX7、pixels(rows, p)、checker(rows)太い 8 ビットアルファベット;1 つのソリッドとしてのピクセルグリフ;角のみの接触
dsegs(segments, t, g)先端が尖った表示セグメント、均一なギャップで分割
SKEL、skelSolid(k, H, T)ジオメトリックサンセリフ体を中心線として;四角い端でストロークしたソリッド
tracks(pts, { n, pitch, w })、fillet(pts, r)、balloon(pts, w0, w1)並行トラック;角丸ポリライン;バルーンストローク
filletClosed(pts, r)、trackLoop(pts, { n, pitch, w })すべての角がフィレットされた閉じた多角形(角ごとに r 可);閉じたアウトラインを周回する3トラック(動物用 pitch 42)
walk(at, deg, steps)タートルパス:['L', length] と ['A', turn°, radius] のステップ、正確な半径の円弧(開いた Track 動物)
seeded(str)乱数シードを設定。Math.random 用。マークごとに設定することで、robust() のジッターとバッチがバイト単位で再現可能に
svgShape(svgText)、pathRings(d)SVG マーク(またはパスデータ)を形状として読み戻す:曲線と円弧はサンプリング、evenodd または nonzero の穴に対応
glitchMark(svgText, { kind, cuts, shift, deg })既存マークのグリッチエディション(「Glitch editions」参照)
U、D、I、X和集合、差集合、積集合、排他的論理和
rot(shape, deg, cx, cy)、rotN(shape, n)、move、scale、flipX変換;rotN は中心の周りに繰り返し配置
polar(r, deg, cx, cy)角度による点(0° = 右、90° = 下)
segmentLines(lines, { t, box })、segments(nodes, strokes, o)セグメント文字:各ストロークが個別のセグメント、接合部は二等分線に沿って分割
isoPieces(pieces, u)ユニットキューブのピース。シームレスな面、ピース間と折り目にのみギャップ(Iso Lock)
blocks(list, W, H)、nest(W, H, n, sides, cut)均一なギャップを持つソリッドブロックでタイル張りされた長方形(Golden and the Blocks);ピールされた細分割
linkage(bars, pins)ピンで連結されたカプセル。各カプセルは前のものの上に重なる
write(file, shape)、svg(shape)出力

ギャップを切断するには、ギャップ幅の bar()(または細い annulus())を減算します。部品を堀に浮かせるには、そのスケールアップコピーを減算し、元の部品を追加し直します(Hex Gem)。polygon-clipping が「Unable to complete output ring」をスローする場合、図形が正確なエッジを共有しています:一方を 0.01 動かします。それでも十分でない場合は、アウトラインと深度の両方に微小なジッターをかけてビルド全体を再試行します(1e-4 から約 0.02 まで数回試行)。または、面を長方形の和集合ではなく、一つのきれいなアウトラインとして再描画します。「Degenerate segment at [NaN, NaN]」はポリラインに重複点があることを意味します:dedupe() してください。キットヘルパー(stroke()、pill()、grown())もブール演算を呼び出すため、ユーザーコードのジッターが届きません:代わりに一度 robust() を呼び出せば、内部の失敗は自動再試行されます。

バッチ 64 より前の grow() は役に立ちませんでした:各リングを最初の点が最後に繰り返される形で単純化し、リングがその一点に潰れてしまうため、そこに円を追加または削除するだけでした。修正済みです。古いキットのコピーを使っている場合、grow(rect(0, 0, 100, 100), -10) で確認できます。

大きめのサイズで、明るい背景で確認してください。 小さな暗い背景のサムネイルは誤解を招きます:開口部が塗りつぶされて見えたり、細い部分が隠れたりすることがあります。マークをカットまたは出荷する前に、400 px、明るい背景でレンダリングしてください。

パスを手書きする

単純なマークは直接パスを書くことができます:

  • 円は 2 つの円弧:M cx-r cy a r r 0 1 0 2r 0 a r r 0 1 0 -2r 0 z。
  • リングは fill-rule="evenodd" を使用した一つのパス内の 2 つの円。内側の円が穴になります。
  • evenodd の場合、重なる部分も穴になります。 重なるソリッドの場合は、キットでマージするか、デフォルトの nonzero ルール(すべてのソリッドを時計回り、すべての穴を反時計回りに描画)を使用します。
  • その後、fit.mjs を実行します。手動で 448 に合わせようとしないでください。キャンバスにクロップしないでください:描画の一部が 0~512 の外にある場合、fit.mjs がそれを内側に戻します。

レビューチェックリスト

以下のいずれかに失敗するマークはカットまたは作り直してください:

  • 一つのアイデア。「そして」を使わずに一文で説明できる。
  • 32 px で判読可能:隙間がつぶれたり、どろどろになったりしない。10 単位より細い部分がない。
  • 一つの隙間幅と一つのストローク太さ(または明確な 1:2 の比率)が全体で一貫している。セットの隙間を維持する(別パーツ間は 22 単位):サイトの Gap、Weight、Soften コントロールは各マークのパーツと隙間を測定し、それらが均一なときに最もうまく機能します。唯一の例外は、折り目や重なり部分の SEAM(縫い目)が 11 の場合(Crease and Strap マーク、「Fold seams and straps」参照)、そしてそのシルエットだけで 32 px で判読できる場合のみ。
  • アイコンに見えない。 これはマークが最も失敗するルールです。自問してください:アイコンセット(Material、Lucide、SF Symbols)に収まっていても違和感がないか?もしそうなら、どんなにうまく描かれていてもカットしてください。ロゴマークは、特定のブランドに属する抽象的または様式化された記号であり、物事や動作のピクトグラムではありません。具体的には、UI アイコンではない:矢印、再生、ホーム、ギア、ナット、ベル、ロック、ダウンロード、コピー、チャットバブル、地図ピン、Wi-Fi 弧、グラフ(扇形スライスも含む)、画像(山と太陽)、「進入禁止」の斜線、スピナーのようなドットリング、パッケージボックス。日常的な物体の線画はすぐにアイコンになってしまいます:カップ、ボトル、眼鏡、トロフィー、シルクハット、ロケット、自転車、宝石はすべてアイコンとして読めます。
  • 偶然に身体部位になっていない:重なるリングの間のアーモンド形やレンズ形に注意。
  • 意味のあるシンボルではない:宗教的、政治的、またはオカルト的なシンボル(六芒星、五芒星、十字架、三日月と星、トリケトラ、鳥居、巴、卍)は不可。

…

関連スキル