アイデアから使えるSVGを仕上げるまで
明確な制作条件、手元の画像、スケッチからSVGを作り、形状・透過・書き出しサイズを確認して納品するための実践的な手順。
SVGが完成したといえるのは、使う場所で意図どおりに機能したときです。大きなプレビューでは魅力的でも、ツールバーに置くと読めない、不要な背景が付いている、編集できる図形ではなくビットマップが入っている、といった問題は起こります。ここでは、制作条件の整理、作り方の選択、繰り返し使える納品前の確認手順を紹介します。
使う場所から考える
ツールを開く前に、題材、用途、寸法、背景を書き出しましょう。「サボテンのアイコン」だけでは、多くの判断が残ります。「園芸アプリ用のサボテンのアイコン。24ピクセルと48ピクセルで判別でき、緑とクリーム色を使い、背景は透明」と書けば、結果を評価する基準ができます。
必須条件と好みは分けておきます。24ピクセルで輪郭が見えることは必須でも、鉢の形は変わってよいかもしれません。バナーなら細部よりも構図や周囲の余白が重要な場合があります。制作条件をプレビューの横に置き、修正ごとに何を解決するのかを明確にしてください。
出発点を選び、できあがったSVGを確認してから、使用先に合ったファイルを準備します。
制作方法を選ぶ
- アイデアを文章で伝える： 言葉から新しいアイコンやイラストを作るなら、AIによるSVG生成を使います。テキストからのSVG生成には1クレジットが必要で、十分な残高のあるアカウントでのログインが必要です。
- 手元の画像を変換する： 利用したい形がすでにPNGやJPGに含まれているなら、画像からSVGへの変換を使います。画像のベクター化には2クレジットが必要で、こちらもログインが必要です。画像を解釈する処理であり、すべてのピクセルを厳密に再現するものではありません。
- 図形を自分で描く： 意図したスケッチや単純な幾何形状なら、手描きSVGエディターを使います。描画、SVG圧縮、ラスター形式への書き出しはブラウザー内で処理されます。ファイルを処理するだけのためにAI生成を行う必要はありません。
生成の作業にはStudioを利用します。直接描ける形を何度もAIに再現させようとするのではなく、素材に適した方法を選びましょう。
最初のプロンプトを具体的にする
まず、題材を1つ、画像の役割を1つに絞ります。配色、シルエット、線のスタイル、背景を指定し、目的から外れる条件は取り除きます。たとえば次のように書けます。
園芸アプリのアイコンに使う、鉢に植わったサボテンを1つ、正面から描く。濃い緑、ミント、温かみのあるクリームの3色を、フラットな塗りで使用する。大胆で単純な形、統一された輪郭線、十分な余白、中央に置いた構図、シンプルな透明背景。文字、アルファベット、透かし、グラデーション、細かい装飾は入れない。24 × 24ピクセルでも判別できること。
色の名前は方向性を伝えるもので、ブランド指定の色値を正確に保証するものではありません。厳密な色やタイポグラフィが必要なら、ダウンロードしたSVGを適切なベクターエディターで確認・調整してください。
題材、配色、配置、目標サイズを固定し、一度に1つの変更だけを試します。新しく生成するたびに制作条件を全文で繰り返し、たとえば「主な輪郭線を太くする」という1条件だけを変えます。それでもAIの出力は変わることがあります。同一の形になると期待せず、最初の条件と照らし合わせて比較しましょう。よい結果が得られたら、次の生成を試す前に保存します。
ベクター化の前に元画像を整える
画像編集ソフトで不要な余白や無関係な物体を切り取ります。小さくぼやけたサムネイルを引き伸ばすのではなく、輪郭が明瞭で十分な大きさの元画像を使ってください。題材と背景の区別をはっきりさせ、完成形に不要な圧縮ノイズ、細かな質感、柔らかい影を減らします。
輪郭の明確なフラットな記号は、髪の毛、反射、煙を含む写真に比べて、解釈が必要な部分が少なくなる傾向があります。単純化しても残したい特徴を決めましょう。背景を除去したい場合は、元画像を別途準備してください。任意の外部前景抽出が、すべての変換に標準で含まれるわけではありません。次の試行を送信する前に、得られた輪郭と色を確認します。
実際に使うサイズでSVGを確認する
24ピクセル、48ピクセル、そして実際の表示サイズで確認します。小さなサイズでは、隙間がつぶれていないか、線が消えていないか、細部がノイズになっていないかを見ます。想定した表示サイズでは、曲線、整列、内側の余白を確認してください。パスの数が多いことより、シルエットが分かりやすいことの方が重要です。
内部の座標領域を定めるviewBoxも確認します。その範囲の外にある描画は切れる場合があります。逆に余白が多すぎると、寸法が正しいアイコンでも小さく見えてしまいます。次の点も合わせて点検してください。
- 文字とフォント： 必要なフォントがないとレイアウトが変わることがあります。フォントが確実に利用できる構成にするか、用途に応じてベクターエディターで文字をアウトライン化します。
- 透過： 明るい背景と暗い背景の両方でプレビューします。白く塗られた形と、何もない透明な領域は別物です。
- 埋め込みラスター画像： SVGには、ビットマップを参照または埋め込む
image要素を含められます。拡張子が.svgであるだけでは、画像全体が拡大縮小可能なパスで構成されているとは限りません。
書き出す前に、実際の表示サイズと複数の背景で画像を確認します。
元のSVGを残し、納品用のコピーを書き出す
形式を変える前にSVGをダウンロードしてください。cactus-source.svgとcactus-web.svgのように分かりやすい名前を付け、別々のローカルファイルとして保存します。これは自分で保存しておくコピーです。コピーをSVG圧縮ツールで処理し、見た目を比較してください。最適化で外観が変わった場合に戻れるよう、元データは残します。
受け取るアプリでピクセル画像が必要ならSVGからPNGへの変換、Web用画像ならSVGからWebPへの変換を使います。変換前に、SVG側で目標の書き出し寸法を準備してください。24ピクセルのアイコンを2倍のピクセル密度で表示するには、48ピクセルのラスター画像が必要です。書き出したファイルでも透過と輪郭を再確認しましょう。形式ごとの利点と制約は画像形式のガイドで解説しています。
原因を直してから渡す
アイコンが分かりにくいなら、細部を追加する前にシルエットを単純にします。ベクター化で細かな斑点が出るなら、同じ変換を繰り返すのではなく元画像を整えましょう。端が切れるなら描画範囲と余白を、文字がずれるならフォントを確認します。書き出した画像がぼやけるなら、ピクセル寸法と実際に表示しているサイズを点検してください。
納品前には、題材、色、小さなサイズでの見やすさを確認し、描画範囲と透過をチェックします。ダウンロードしたファイルを実際の使用先で開き、必要なラスター画像と一緒に元のSVGを保管してください。この最後の確認が、見栄えのよいプレビューを、本当に使える素材に変えます。