オリジナルのSVGテンプレートを作ろう

ad-pixflowのSVGオーバーレイフィルターは、画像の上にロゴやアートワークを自由に重ねられる機能です。これにより、多彩な画像表現が可能になります。さらに、SVG内のテキストを画像処理中に動的に変更することもできるため、名札作成のような、テキストの差し込みが必要な様々な用途に対応できます。

このページでは、ad-pixflowで利用できるSVGテンプレートの作成方法を解説します。まず、あらかじめ設定済みのサンプルワークフローをご用意しましたので、以下からダウンロードしてインポートしてください。

SVGオーバーレイのサンプルワークフローをダウンロードする

ダウンロードしたファイルは、ad-pixflow画面左上のハンバーガーメニューからインポートできます。

AIでSVGを作成する

簡単なSVGであれば、AIチャットで手軽に作成できます。ここでは、AIを使ったSVGテンプレートの作成方法を解説します。

サンプルワークフローの"photo-frame"は、入力した画像から次のような画像を生成します。

サンプルワークフローphoto-frameの使用例
クリックでギャラリー表示

このワークフローは、画像を400x300ピクセルで切り取った後、SVGオーバーレイでフレームとメッセージを追加します。この処理に使われているSVGを、AIで作成してみましょう。

おすすめのプロンプト

以下のようなプロンプトが効果的です。

ウェブページでビットマップ画像の上にSVGをオーバーレイ表示します。SVGの中に'%%TEXT%%'のようなテキストを配置し、実行時に別の文字列に置換して使用するテンプレートSVGを作成してください。以下の指示に従い、SVGコードだけを生成してください。ウェブページへの組み込み方など、SVG以外の説明は不要です。

ビットマップ画像を飾るフォトフレームを作成します。
- 大きさは400 x 300ピクセル。
- フレームの内側は透明にして、下にあるビットマップ画像が見えるようにしてください。
- フレームは、美術館に飾られているような豪華なデザインにしてください。
- 画像の説明文を入れるため、フレーム下部の内側に「%%MESSAGE%%」というテキストを中心揃えで配置してください。

1段落目でSVGの利用目的を、2段落目でSVGの具体的な要件を伝えています。新しいSVGを作成する場合は、1段落目をそのまま利用し、2段落目以降をあなたの目的に合わせて書き換えてください。

今回はChatGptにログインして、このプロンプトを実行しました。成功すると、次のようなSVGコードが出力されます。

<svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
...
</svg>

ChatGptの場合、SVGが画像としてプレビューされます。画面右上の「コードをコピーする」を押すとSVGコードがコピーされます。

AIチャット上で、SVGが画像としてプレビューされない場合は、出力されたコードをテキストエディタに貼り付け、「frame.svg」のような名前で保存します。保存したファイルをブラウザで開くと、生成されたSVG画像を確認できます。SVGに対応した画像ビューワがあればそちらで確認することもできるでしょう。

もしデザインが気に入らない場合は、AIに追加の指示（プロンプト）を与えて修正を依頼しましょう。良いプロンプトを作成するには少しコツがいりますが、ぜひ挑戦してみてください。

ad-pixflowへ組み込む

完成したSVGテンプレートをワークフローに組み込みましょう。サンプルワークフロー"photo-frame"をコピーし、そこに作成したSVGを適用します。

1. コピーしたワークフローの鉛筆マークをクリックして、編集画面を開きます。
2. ワークフローの最後にあるSVGオーバーレイフィルターの設定を変更します。SVGフォームに作成したSVGコードを貼り付けるか、ファイルから読み込みます。
3. 「位置」は、画面全体を覆う「カバー」を選択します。
4. 「置換キーワード」を確認します。ここでは、SVG内の%%MESSAGE%%をワークフロー実行時に別のテキストに置き換えるように設定します。置き換えのデフォルトとしてmessageを設定しています。
5. 編集が終わったら、「ワークフローを保存」でワークフローを保存します。

これで新しいワークフローが完成です。ワークフローを実行し、作成したSVGの出来栄えを確認してみましょう。

SVG編集ソフトを利用する

AIは簡単なSVG作成には便利ですが、複雑な図形や、テキストを精密に配置したい場合は、SVG編集ソフトの利用が適しています。AIである程度まで作成し、細かい調整を編集ソフトの手作業で行うハイブリッドな方法も効率的です。

ここでは、オープンソースで多くのプラットフォームに対応しているInkscapeを使い、SVGを直接編集する方法を解説します。

多くのベクター画像編集ソフトがSVG形式の出力をサポートしており、それらのソフトで作成したSVGも利用可能です。ただし、ad-pixflowのテキスト置換機能を使うには少し注意が必要です。特に、複雑な装飾を施したテキストは置換に失敗することがあるため、この点を考慮して作成してください。

Inkscapeをインストールする

Inkscapeは公式サイトからダウンロードできます。

Inkscapeホームページ

Inkscapeは非常に有名なソフトなので、WindowsやmacOSではアプリストアからもインストールできるかもしれません。Linuxではaptなどのパッケージマネージャーを利用すると良いでしょう。

テキストを配置する

サンプルワークフローの"global-feasts-captions"は、次のようなキャプション付き画像を生成します。

サンプルワークフローglobal-feasts-captionsの使用例
クリックでギャラリー表示

このワークフローは、16:9比率の料理写真に国名、料理名、メッセージを追加します。この処理に使われているSVGをInkscapeで作成してみましょう。

まずは、以下のようにテキストを配置したSVGを作成します。

1. Inkscapeを起動します。
2. 新規ドキュメントのサイズを ファイル > ドキュメントのプロパティ で幅640px、高さ360pxに設定します。
3. 左側のツールから「テキストツール(T)」を選び、文字を入力します。
   • 左上をクリックし、%%COUNTRY%%と入力します。上部のツールバーで、文字サイズを中程度、配置を「左揃え」、フォントを「sans-serif」に設定します。
   • 画面中央あたりをクリックし、%%NAME%%と入力します。ツールバーで、文字サイズを大きめ、配置を「中央揃え」、フォントを「sans-serif」の「Bold」に設定します。
   • '%%NAME%%'の下の方をクリックし、%%INFO%%と入力します。ツールバーで、文字サイズを中程度、配置を「中央揃え」、フォントを「serif」の「Bold Italic」に設定します。
4. 左側のツールから「選択ツール（矢印）」を選び、テキストをドラッグして位置を調整します。オブジェクト > 整列と配置 を使うと、%%NAME%%と%%INFO%%をページの中央に正確に配置できます。

置換テキストとフォントについて

%%NAME%%のように、後から置換するテキストを入力する際は、必ずテキストツールでキャンバスをクリックして入力を始め、1行で記述してください。Inkscapeには、テキストボックスを作成して複数行のテキストを流し込む機能もありますが、この方法で作成したテキストは置換に失敗する可能性が高くなります。また、SerifやSans-Serif以外のフォントを指定することも可能ですが、ad-pixflowを実行するブラウザがそのフォントに対応していない場合、意図した通りに表示されない点にも注意してください。

装飾を追加する

作成したテンプレートでテキストを画像に重ねることはできますが、黒い文字だけでは少し物足りなく感じるかもしれません。

また、暗い画像に黒いテキストを重ねると、文字が読みにくくなる問題があります。この対策として、画像の明るさに応じて白文字用と黒文字用のワークフローを使い分ける方法や、どんな背景色でも見やすいSVGを作成する方法が考えられます。

ここでは後者のアプローチとして、SVGに次のような効果を追加してみます。

%%NAME%%と%%INFO%%の文字を白に変更し、文字の周りに影を付けて浮き立たせました。これにより、背景が明るくても暗くても文字を判別しやすくなります。

さらに、画像全体を半透明の黒い長方形で覆い、画像を少し暗くしています。これにより、非常に明るい画像が入力された場合でも、白いテキストの視認性が確保されます。

Inkscapeによる編集の詳細

%%COUNTRY%%に飾りをつける

• 左の矩形ツールで、%%COUNTRY%%の上に長方形を配置。オブジェクト > 最背面へ で長方形を再背面に配置。
• 画面下のカラーパレットを使って長方形を赤くします。
• 更に細かく色を設定するため、オブジェクト > フィル/ストローク を選択すると、画面右側にダイアログが開きます。選択ツールで長方形を選択して、Stroke（図形の端）の色を"x"（色なし）に設定します。
• ダイアログのフィル（図形の中の色）タブを選択して、長方形にグラデーション（線形グラデーション）をかけます。グラデーションの方向を修正したい時は画面左のグラデーションツールをクリックします。
• %%COUNTRY%%を選択して、左下のカラーパレットで色を黄色に設定。

%%NAME%%, %%INFO%%を浮き上がらせる

• %%NAME%%を選択した状態で、フィルター > 光と影 > 影を落とす を選択。文字の周りに黒い影をつけます。水平、垂直 のオフセットを0にすると上下左右均等に影をつけることができます。影の効果をキャンセルしたい時はフィルター > フィルターを除去 で、強めたい時は2度フィルターを掛けると影が濃くなります。
• %%NAME%%を選択した状態で、左下の色パレットで文字の色を白色にします。
• %%INFO%%も同様に設定します。

画像全体の明るさを調整する

• 画像全体を覆う長方形を作り、色を黒に設定。画面右の"フィル/ストローク"ツールから、フィルの非透明度を10%に設定します。
• オブジェクト > 最背面 で長方形を再背面に配置します。

SVGが完成したら、早速試してみましょう。

以前の"photo-frame"と同様に、サンプルワークフロー"global-feasts-captions"をコピーし、作成したSVGファイルを組み込んでください。

実際に試しながら、あなた自身の好みに合わせて自由な装飾を加えるのはもちろん、新たなテキスト領域の追加も簡単に行えます。ワークフロー全体を眺めれば、今回とは異なる解像度への対応も非常に容易であることが分かるでしょう。

ヒント: ビットマップ画像のロゴをSVGに変換する

画像にオリジナルのロゴを入れたい、というニーズは多いでしょう。最近ではAIでロゴを生成することもできますが、高品質なビットマップ画像は作れても、SVGのようなベクター形式では期待通りの結果にならないことがあります。

また、既存のロゴ（印刷物、手書きなど）をスキャンしてビットマップ画像として取り込むこともできますが、拡大すると画像の粗さ（ジャギー）が目立ってしまいます。

Inkscapeの「ビットマップのトレース」機能

そんな時に役立つのが、Inkscapeの「ビットマップのトレース」機能です。この機能を使うと、ビットマップ画像をベクター画像に変換できます。下の画像は、左のビットマップロゴをトレースして、右のベクターロゴを生成した例です。

Inkscapeによる編集の詳細

• Inkscapeのドキュメント画面に、ビットマップ画像をドラッグ＆ドロップで取り込みます。
• ビットマップ画像を選択した状態で、メニューから パス > ビットマップのトレース を選択すると、画面右側に「ビットマップのトレース」ダイアログが表示されます。
• 「単一スキャン」モードを選択し、「しきい値」などのパラメータを調整して「適用」ボタンをクリックします。
• トレースが完了すると、元のビットマップ画像の上にベクター画像が重なって生成されます。片方の画像をドラッグして動かすと、新しいベクター画像が作成されていることを確認できます。
• トレースしたSVGロゴだけを保存したい場合は、元のビットマップ画像を削除した後、ファイル >ドキュメントのプロパティ を開き、「ページサイズをコンテンツに合わせて変更」でドキュメントサイズをロゴに合わせます。

ロゴが白黒であれば、この方法で非常に綺麗なSVGロゴが手に入ります。「マルチカラー」モードを使えばカラー画像も変換できますが、こちらはパラメータ調整が少し複雑になる場合があります。

一度SVGに変換すれば、どれだけ拡大しても画質が劣化することなく、安心して使えます。さらに、影を付けるなどの効果をInkscapeで簡単に追加することも可能です。このようにして作成したSVGを利用したのが、サンプルワークフローの"global-feasts-logo"です。

サンプルワークフローglobal-feasts-logoの使用例
クリックでギャラリー表示

このサンプルワークフローでは、トレースしたロゴをSVGオーバーレイフィルターでpositionを右下に設定して表示しています。