AIでSVGアイコンを作るときの確認方法｜座標・色・用途を固定する

AIでSVGアイコンを作るときは、形の説明だけでなく、座標の範囲、線と塗り、表示サイズ、何を意味するアイコンかを先に決めます。生成したSVGを大きく表示できても、小さなボタンでは読めない、端が切れる、サイトの文字色に追従しない、といった問題が残ることがあります。

既存のアイコンライブラリやデザイン規則がある場合は、先にそれを使えるか確認します。新しく生成する場合も、その規則から外れた一枚を足すのではなく、同じ条件で比較できる形へ整えます。この記事のSVGは説明用の例で、実際のブラウザー表示、読み上げ、操作性を実測したものではありません。

生成前に、アイコンの契約を短く書く

「シンプルな確認アイコンを作って」だけでは、線の太さ、余白、色、意味が毎回変わります。次の条件を固定してから依頼します。

表は横にスクロールできます

項目	指定する内容の例
意味と置き場所	確認済み状態の文字に添える。操作ボタンではない
座標	viewBoxを0 0 24 24にする
線と塗り	塗りなし、線幅2、線端と角を丸くする
色	単色。インライン利用時にcurrentColorを使う
表示サイズ	16pxと24pxで確認する計画を作る
余白	線の太さを含めて座標の端からはみ出さない
出力要素	必要な図形だけ。不要な画像、文字、外部参照を追加しない

ここでの数値は一つの制作条件の例です。すべてのアイコンを24の座標や線幅2へ揃えるべきという意味ではありません。既存の規則が16や20の座標なら、そちらに合わせます。

viewBoxと表示サイズを別に確認する

SVGのviewBoxは、表示領域へ対応させる座標の長方形を、最小x、最小y、幅、高さの四つの値で表します。画面上のwidthとheightを変えることと、図形を置いた座標の範囲を変えることは同じではありません。W3C SVG 2：座標系とviewBox（新しいタブで開く）

例えばviewBoxが0 0 24 24でも、線の中心をx=0に置いて線幅を付ければ、線の一部は座標の外側に広がります。見た目の余白は、点やパスの位置だけでなく、線幅、線端、影、マスクなども含めて確認します。

端が切れるとき、すぐwidthとheightだけを大きくしないでください。図形がどの座標へあるか、viewBoxと合っているか、線や効果が外へ出ていないかを見ます。逆にviewBoxを広げるだけで直すと、既存アイコンより図形が小さく見えることがあります。収まることと、並べたときの見かけの大きさは別に判断します。

線・塗り・色を揃える

単色の線画なら、塗りなしと線の色を明示します。生成結果の一部に固定色が残っていると、周囲の色を変えてもそこだけ変わらないことがあります。

SVGの仕様は、currentColorをfillやstrokeなどで使える値として説明しています。サイト側の色へ合わせる設計では、固定の色指定と混在していないかを確認します。W3C SVG 2：描画色の指定（新しいタブで開く）

インラインSVGとしてHTMLへ置く場合と、別ファイルを画像として読み込む場合は、外側のCSSからの扱いが同じとは限りません。currentColorと書いたことだけで、どの埋め込み方でも周囲の文字色へ追従すると保証しないでください。採用する埋め込み方で確認する必要があります。

次は、確認済みの文字に添える、説明用のインライン例です。

<span>
  <svg xmlns="http://www.w3.org/2000/svg"
       width="24" height="24" viewBox="0 0 24 24"
       fill="none" stroke="currentColor" stroke-width="2"
       stroke-linecap="round" stroke-linejoin="round"
       aria-hidden="true">
    <circle cx="12" cy="12" r="8" />
    <path d="M8 12 L11 15 L16 9" />
  </svg>
  確認済み
</span>

この例では文字が状態を伝えるため、図形を重ねて読み上げる必要がない設計にしています。操作を実行するボタンの例ではありません。「確認済み」という状態と、「確認する」という操作は意味が違うので、同じアイコンを使う場合も文脈を揃えてください。

形の名前ではなく、使う場所で説明を決める

アイコンが装飾なのか、情報なのか、操作なのかを分けます。W3C WAIは、機能を持つ画像の代替説明では、見た目ではなく実行する操作や目的を伝えるよう説明しています。W3C WAI：機能を持つ画像（新しいタブで開く）

表は横にスクロールできます

用途	読み手へ伝えること	確認する点
文字に添える装飾	隣の文字がすでに伝える内容	重複した説明を増やしていないか
状態を単独で示す	確認済み、処理中などの状態	形や色だけで判断させていないか
アイコンだけのボタン	保存する、閉じるなどの操作	ボタンとしての名前と操作を確認できるか

ボタンに置く場合、SVGにタイトルを書けば操作要素全体の名前や操作性まで解決したとは考えません。既存コンポーネントの実装に合わせて、ボタンの名前、キーボード操作、フォーカス、無効状態などを確認します。SVGの形をAIで作ることと、操作部品を完成させることを分けます。

AIへの依頼は、用途と禁止する追加を含める

既存画面へ追加する単色SVGアイコンの案を作ってください。
用途：確認済み状態の文字に添える装飾。操作ボタンではありません。
viewBox：0 0 24 24。塗りなし、線幅2、丸い線端と角。
線色はcurrentColorとし、固定色を混ぜないでください。
円とチェックの必要な図形だけで構成し、線幅を含めて範囲内へ収めてください。
文字、外部画像、外部参照、スクリプトは追加しないでください。
SVGコードと、座標・色・用途について確認すべき点を別に出してください。
実際の表示サイズでの確認が済んだとは主張しないでください。

生成結果では、依頼にないグラデーション、画像、余分な要素が増えていないかを確認します。単純な形を表すために多数の変形や複雑なマスクが必要になっているなら、読みやすい形へ作り直せないかを検討します。短いコードであることだけを品質の基準にはしません。

単体表示と、画面へ入れた結果を分けて検査する

まずSVGの構造と指定値を確認します。viewBox、幅・高さ、線幅、塗り、色、不要な要素を点検します。複数の図形を使う場合は、重なり順や変形の影響も見ます。

次に実際の画面へ置き、予定したサイズ、背景色、文字色、隣のアイコンと比較します。小さくしたときに円とチェックがつぶれるなら、座標が正しいだけでは不十分です。線の太さや形の間隔を、使うサイズで判断します。

修正後は、大きなプレビューだけでなく、最小の表示サイズと元の配置先を再確認します。同じSVGを複数置く設計でIDやマスクを使うなら、同じページ内での識別も確認します。一枚で表示できた結果を、そのまま複数配置や別の埋め込み方の保証にしないでください。

既存のデザイン規則に合わせて画面を作る場合は、既存UIやデザイン資産を使うv0の進め方も参照できます。図形で業務の関係を説明する場合は、プレゼン資料の図解を作る方法で、形より先に意味と関係を整理してください。

参考資料

• W3C SVG 2：Coordinate Systems, Transformations and Units（新しいタブで開く）
• W3C SVG 2：Painting（新しいタブで開く）
• W3C WAI：Functional Images（新しいタブで開く）

資料の確認日：2026年10月20日。コードは説明用で、ブラウザー、画面への組み込み、読み上げでの実測は未実施です。