svg-design

SVG の作成と編集

基本原則： SVG はコードです。ほかのマークアップを書くときと同じように、手書きで作成します。シンプルで、最小限かつ意味のある内容にしてください。各要素と属性には、含めるだけの価値が必要です。

トピック別の参照先

タスク	参照資料
弧のフラグの組み合わせ、一般的なパス形状	references/path-patterns.md
ロゴデザイン、タイポグラフィ、ネガティブスペース	references/logo-techniques.md
アイコンデザイン、グリッドシステム、ピクセルの位置合わせ	references/icon-design.md
グラデーション、マスク、クリップ、フィルター、変形（デザイン上の判断）	references/advanced-techniques.md
アニメーション（CSS キーフレーム、スタッガー、GPU、イージング、SVG 固有の手法）	references/animation.md
最適化、スプライト、SVGO 設定	references/optimization.md
アクセシビリティ、ブラウザーの落とし穴	references/accessibility-and-pitfalls.md
編集ワークフロー、ブーリアン演算、SVG の結合	references/editing-workflow.md

SVG の基本構造

必ず次の構造から始めます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  
</svg>

デザインキャンバスに合わせて viewBox を調整します。SVG をコンテナーに合わせて拡大縮小できるよう、width／height 属性は省略します（固定サイズが必要な場合にのみ追加します）。

キャンバスサイズの慣例

サイズ	用途	備考
0 0 16 16	マイクロアイコン、ファビコン	Heroicons micro、GitHub Octicons
0 0 20 20	小さな UI アイコン、フォーム要素	Heroicons mini
0 0 24 24	標準的なアイコン（最も一般的）	Lucide、Heroicons outline、Material
0 0 32 32	中サイズのアイコン、ナビゲーション	Phosphor は内部で 256x256 を使用
0 0 48 48	大きな表示用アイコン	アプリアイコン、イラスト
カスタム	ロゴ、イラスト	自然なアスペクト比に合わせる

特別な理由がなければ、デフォルトは 24x24 にします。これは業界標準です。

図形とパスの使い分け

図形プリミティブを使う場合	<path> を使う場合
図形が基本的な幾何学形状である	図形に曲線や複雑な輪郭がある
読みやすさが重要である（円は <circle> として記述する）	要素数を最小限にする必要がある
個々のプロパティ（r、cx、cy）をアニメーションさせる必要がある	複数の図形を 1 つの要素にまとめる
図形をプログラムで変更する	デザインツールから書き出す（パスは汎用的）

スタイルのデフォルト値

子要素での繰り返しを避けるため、ルートの <svg> 要素に次の値を設定します。

属性	アイコンのデフォルト	ロゴのデフォルト	理由
fill	none	さまざま	アイコンは通常、ストロークで描画され、ロゴは塗りつぶされます
stroke	currentColor	none または currentColor	親要素のテキストカラーを継承します
stroke-width	2（24x24 の場合）	さまざま	アイコン全体で線の太さを統一します
stroke-linecap	round	round または butt	小さいサイズでは、端を丸くするとよりすっきり見えます
stroke-linejoin	round	round または miter	接合部で鋭い突起ができるのを防ぎます

currentColor は便利です。 SVG が親要素の色を継承できるため、追加の CSS を使わずにアイコンのテーマを変更できます。

viewBox に対するストローク幅

stroke-width はピクセルではなく、viewBox の単位で指定します。キャンバスの寸法に対する相対値で設定してください。

viewBox	一般的な stroke-width	見た目の比率
16x16	1.5	キャンバスの約 9.4%
24x24	2	キャンバスの約 8.3%
32x32	2-2.5	キャンバスの約 6.3-7.8%
48x48	3	キャンバスの約 6.3%
256x256	16	キャンバスの約 6.3%

図形をパスに変換するタイミング

変換する場合：

• 複数の図形を単一の複合パスにまとめる場合（ブール演算）
• より大きなパスの構成要素として図形が必要な場合
• <path> のみをサポートする環境に配布する場合
• DOM 要素を最小限に抑えるために最適化する場合

図形のままにする場合：

• コードの読みやすさが重要な場合（<circle> は自己説明的です）
• 特定のプロパティをアニメーションさせる必要がある場合（円の r のアニメーションは、パスデータをアニメーションさせるより簡潔です）
• SVG をプログラムで変更する場合

角丸四角形からパスへの変換テンプレート

ここでの円弧パラメーターは、導出を間違えやすいものです。参考としてお使いください。

<path d="M 5 2 h 14 a 3 3 0 0 1 3 3 v 14 a 3 3 0 0 1 -3 3 h -14 a 3 3 0 0 1 -3 -3 v -14 a 3 3 0 0 1 3 -3 Z" />

fill-rule：evenodd と nonzero

穴のある複合図形には evenodd を使用してください。巻き方向を気にする必要がないため、より簡単です。

<path fill-rule="evenodd" d="
  M 12 2 A 10 10 0 1 1 12 22 A 10 10 0 1 1 12 2 Z
  M 12 7 A 5 5 0 1 1 12 17 A 5 5 0 1 1 12 7 Z
" fill="black" />

nonzero（デフォルト）では、穴を作るために内側の円を反対方向に巻く必要があります。

ロゴのデザインプロセス

ロゴ（アイコンではなく）を作成する場合は、次のプロセスに従ってください。

0. ロゴの作成前に、必ずデザインの方向性を確認してください。 SVG コードを書く前に、AskUserQuestion を使って、厳選したデザインの方向性を提示してください。この手順は、すべてのロゴプロジェクトで必須です。ユーザーが「モダン」や「YC 風」のように方向性を示している場合でも、それは雰囲気を伝えているだけで、デザインの要件ではありません。デザイナーなら、5～15 個のコンセプトに取り組む前に、方向性を絞り込む選択肢を提示します。

   デザイナーがムードボードを見せるように、選択肢を提示してください。自由回答式の質問は避けてください。ユーザーの分野に合わせて選択肢を調整してください。

   AskUserQuestion({
     questions: [
       {
         question: "ブランドにふさわしいビジュアルの個性はどれですか？",
         header: "ムード",
         multiSelect: false,
         options: [
           { label: "大胆で幾何学的", description: "すっきりした図形、力強い線、自信に満ちた印象。Stripe や Figma のようなイメージです。" },
           { label: "有機的で手仕事感のある", description: "手描きの雰囲気、自然な曲線、温かみ。Mailchimp や Basecamp のようなイメージです。" },
           { label: "ミニマルでタイポグラフィ中心", description: "ワードマークを主軸に、控えめで洗練された印象。Glossier や Everlane のようなイメージです。" },
           { label: "遊び心があり、躍動的", description: "エネルギッシュでカラフル、動きのある印象。Slack や Discord のようなイメージです。" }
         ]
       },
       {
         question: "ロゴでは何を強調すべきですか？",
         header: "焦点",
         multiSelect: false,
         options: [
           { label: "何をするか", description: "製品の中心的な機能に結び付いた視覚的なメタファー" },
           { label: "どんな印象か", description: "感情やエネルギーを伝える抽象的なマーク" },
           { label: "私たちが誰か", description: "ブランド名から作られたレターフォームまたはワードマーク" }
         ]
       },
       {
         question: "同じ分野のロゴの中で、最も共感するものはどれですか？",
         header: "インスピレーション",
         multiSelect: false,
         options: [
           // 重要：この部分には、ユーザーの特定の業界または分野に関連する、
           // 実在する有名ブランドを3～4個入力してください。
           // 以下は AI スタートアップ向けの例です。他の分野では
           // すべて置き換えてください。
           { label: "Linear", description: "精密な幾何学的アイコン、紫のグラデーション、プレミアムな印象" },
           { label: "Stripe", description: "シンプルで力強いワードマーク、単色のアクセント、自信に満ちた控えめさ" },
           { label: "Notion", description: "親しみやすく個性のあるアイコン、近寄りやすく、少し遊び心のある印象" },
           { label: "Vercel", description: "抽象的でミニマルな三角形、モノトーン、開発者向けの印象" }
         ]
       }
     ]
   })
   

   質問を対象分野に合わせることが重要です。 ムードの選択肢、フォーカスの選択肢、特に参考にするロゴは、ユーザーの業界に特化したものにしてください。コーヒーブランドなら、Blue Bottle、Stumptown、Intelligentsia、Counter Cultureを参考候補にします。フィンテックのスタートアップなら、Stripe、Plaid、Mercury、Rampです。フィットネスアプリなら、Peloton、Strava、Nike Run Club、Whoopです。ユーザーがすぐに認識でき、自分の意見を持っているブランドを選んでください。参考にするロゴについての質問が最も大きな効果をもたらします。デザインの方向性全体を具体的なものに結び付けられるからです。

   ただし、ユーザーが具体的なビジュアルスタイルと具体的なイメージの両方を指定している場合（例：「ネイビーブルーの山のシルエットを使った、ミニマルな幾何学ロゴ」）は、この限りではありません。

1. 1つのメタファーでレイアウトを変えるのではなく、複数のメタファーを検討してください。 レイアウトのバリエーションより、コンセプトの多様性が重要です。ドメインに特化したブレインストーミング、カテゴリーの多様性に関する要件、ありきたりな表現の回避について説明している、references/logo-techniques.md のアイデア出しプロセス全体に従ってください。

2. 構造にバリエーションを持たせてください。 ロゴの各セットには、同じスタイル内の複数のメタファーだけでなく、複数のカテゴリーのアプローチを含めてください。5つ以上の候補を提示する場合は、各列から少なくとも1つ含めてください。ワードマークなどのタイポグラフィを使ったアプローチ、シンボルアイコン、抽象的な幾何学的マーク、レターフォームとメタファーを組み合わせたハイブリッドです。references/logo-techniques.md のカテゴリー多様性の表を参照してください。

3. まずプレビューをすぐに準備し、その後、段階的に内容を追加してください。 すべてのロゴを先にデザインしてから見せてはいけません。作成したロゴをユーザーがすぐに確認できるようにしてください。

   1. このスキルの assets/preview.html を、スキルの読み込み元の絶対パスを使って cp でプロジェクトディレクトリにコピーします（ファイルの読み込みや変更はしないでください）。
   2. 最初のロゴをデザインし、そのSVGファイルを書き出します。
   3. 最初のバリエーションだけを含む variants.js を書き出します（形式は references/editing-workflow.md を参照してください）。
   4. open preview.html（macOS）または xdg-open preview.html（Linux）でプレビューを開きます。作業を続けている間、ユーザーは最初のロゴを確認できます。
   5. 以降のロゴは、それぞれSVGファイルを書き出してから、variants.js を更新して追加します。プレビューは3秒ごとに両方のファイルを自動で再読み込みするため、新しいロゴが完成するとブラウザーに表示されます。

   こうすることで、すべてのロゴの完成を待つのではなく、最初のロゴができてから数秒以内にユーザーが視覚的なフィードバックを得られます。

4. 色付きロゴには、必ず -dark.svg バリエーションを作成してください。 白地では見栄えのよい濃いネイビーの縁（#1E3A5F）は、暗い背景では見えなくなります。ダークバリエーションでは、より明るい縁（#4B8BBE）、より明るいリング（#3B6B8A）、オフホワイトの中心部（#E2E8F0）を使用してください。

5. 描画を始める前に、縦方向の使用可能なスペースを計画してください。 32x32のキャンバスに3つの要素を積み重ねる場合、使用できるのは約30単位です。端でクリッピングしないよう、まず縦方向の配置をスケッチしてください（例：ボックス=12、間隔=2、レイヤー=5、間隔=2、レイヤー=5）。

避けるべきパターン

しないこと	代わりにすること
viewBox を指定せずに width="24" height="24" をハードコードする	必ず viewBox を使用し、必要な場合のみ width/height を追加する
<g> グループに fill="none" を設定する	個々の要素またはルートの <svg> に fill を設定する
SVG 内で px 単位を使用する	SVG の座標は単位なしで、viewBox に対応する
エディターのメタデータ（<sodipodi:*>、<inkscape:*>）を含める	エディター由来の不要な情報をすべて削除する
配布用SVGのロゴのワードマークに <text> を使用する	移植性を高めるため、テキストをパスに変換する
変換を3段階以上ネストする	パス座標に変換を統合する
xlink:href を使用する	href を使用する（xlinkは非推奨）
単独で使用するSVGファイルに xmlns を付け忘れる	必ず xmlns="http://www.w3.org/2000/svg" を含める
アイコンで小数点以下2～3桁を超える精度を使用する	アイコンは小数点以下2桁まで、複雑なアートでも3桁までに丸める

相互参照

• デザインの美学：ce プラグインがインストールされている場合、Skill(ce:design) ではより幅広いビジュアルデザインの判断を扱います
• Mermaid 図：ce プラグインがインストールされている場合、Skill(ce:visualizing-with-mermaid) では図に特化したビジュアライゼーション（SVG を除く）を扱います