はじめに
みなさんこんにちは。インプルの岩崎です。
最近、生成AIの力もすごい伸びていますよね。学生時代はデザインをやっていたこともあり、デザイン物の制作依頼も社内で受けるわけですが、制作するときに生成AIの力ももちろん借りています。
生成AIを使ったデザイン制作の課題
非デザイナーからすると、文字を入力するだけでチラシを一枚作ってくれる生成AIはとても重宝すると思います。ですが、デザイナーからすると、生成AIって少し使いづらいですよね。
例えば、書き出し形式がPNGやJPEGだった場合、それ以上編集をするのは難しくなります。なので、めっちゃいいんだけど、ここを少し変えたい！という痒いところに手が届かないのです。これはデザイナーの性だと思いますが、最後は自分の手で微調整を完成させていきたいのです。
そうなると、デザイナーがAIを活用するためには、編集可能なファイルである余地が必要です。しかも、デザイナーによって使っている編集ソフトはそれぞれですから、なるべく多様なソフトに対応した形式である必要があります。
そこで注目したのが、SVGファイルです。
万能なSVGファイル
SVGとは、Scalable Vector Graphicsの略で、webに適したベクターファイル形式です。
普通の画像ファイル（JPEG, PNG）と違い、下記のような形でXMLのテキストデータとして存在しているので、中身を編集することもできます。ちなみに、下記をグラフィカルに表現すると、赤い丸が出てきます。
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
この形式の最大のメリットは、Illustrator、Figma、Inkscapeなど主要なデザインツールで開くことができます。この形式でAIが出力してくれれば、出した叩き台をそのままデザイナーが調整できるのです！
作ってみる
そこで今回は、作りたいバナーの情報を入れてAIに生成させ、それをSVGで書き出すところまでやってみたいと思います。今回は生成されるものはあまり気にせず、SVGがちゃんとできることに注目していきます。
仕組み
まずは今回のプログラムの仕組みについて紹介します。
バナーの生成はGPTのAPIキーを使用して行います。今回はここがメインではないので、プロンプトも簡単な条件を入れる程度で、作らせてみました。モデルもGPT-4o-miniです。
その際、出力の条件にはSVGで出力するように注意ポイントを入れます。これにより、SVGで出力され、編集可能なデータとして扱えるはずです！
生成されたSVGファイルがIllustratorやエディターで開ければ、成功です！
実行してみる
プログラムはすごく簡単です。
prompt = “”” ~ の部分で、バナーの条件を入れています。また、注意書きでSVGにすることを追記しました。
response = ~ の部分でモデルの設定などをし、svg_code = ~ の部分で、出力した回答結果を取得、output.svgとして出力します。
from openai import OpenAI
import os
client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
prompt = """
あなたはSVGデザイナーです。
以下の条件でシンプルなポスター風SVGを生成してください。
- サイズ: 300x250
- 背景色: #FF6600
- 見出し: 秋のセール開催！
- サブコピー: 最大50%OFF、今だけ
- CTA: 今すぐチェック
注意:
- <svg>タグを必ず含める
- テキストは<text>タグで残す
- 出力はSVGコードのみ
"""
response = client.chat.completions.create(
model="gpt-4o-mini",
messages=[{"role": "user", "content": prompt}]
)
svg_code = response.choices[0].message.content
with open("output.svg", "w", encoding="utf-8") as f:
f.write(svg_code)
print("✅ output.svg を生成しました！")余計な部分を処分する
しかし、上記ファイルで一度実行してみたところ、エラーが頻発・・・。
調べてみたところ（というか、感覚ですが）、GPTが解答を出力する際に、余計なテキストも含んでいるのではないかと考察しました。
そこで、下記プログラムを追記して余計な部分を削除するようにしました。
svg_code = response.choices[0].message.content
# 1. コードブロックを削除
svg_code = svg_code.strip()
if svg_code.startswith("```"):
svg_code = "\n".join(line for line in svg_code.splitlines() if not line.startswith("```"))
# 2. xmlnsが無ければ追加
if "<svg" in svg_code and "xmlns" not in svg_code:
svg_code = svg_code.replace(
"<svg",
'<svg xmlns="http://www.w3.org/2000/svg"',
1
)
with open("output.svg", "w", encoding="utf-8") as f:
f.write(svg_code)実行結果！
上記プログラムを追加し、実行してみたところ、無事にSVGファイルが出力され、Illustratorでも扱えるファイルになりました。素晴らしい！
おわりに
いかがだったでしょうか？
SVG出力の部分はうまくできるようになったので、あとはデザインの部分にもっとAIを組み込み、デザイン制作の部分で手戻りを減らせるようにしていきたいと思います！
今回制作したプログラムはGitHubにもありますので、よろしければぜひご覧ください！
ご覧いただきありがとうございました。