ロゴやアイコンを作るなら
公開 10 分で読めます
お店のロゴや Web サイトに並べるアイコンは、名刺・看板・SNS のアイコン・ブラウザーのタブのアイコンと、大きさを変えて何度も使います。そうした用途には、拡大しても輪郭が崩れない SVG(形を線と面で記録したベクター画像)で作っておくと扱いやすくなります。この記事では、架空の自転車店「りんりん自転車店」のロゴとアイコンを、YOBITSUGI AI から Recraft の V4.1 に頼んで SVG で作りました(2026 年 10 月時点)。4 回のやり取りで、ロゴ 3 案・日本語の店名の版・色違い・ファビコン・アイコン 4 つができ、かかった時間は合わせて約 9 分、費用は約 460 クレジットでした。
向いている AI・道具
YOBITSUGI AI では、Recraft がロゴ・ベクター(SVG)・画像の AI として使えます。今回の作業で実際に使われたものは次のとおりです。
| 役割 | 使われた AI・道具 | 今回やったこと |
|---|---|---|
| ロゴとアイコンの形を作る | Recraft V4.1(ベクターの版) | SVG のロゴ 4 つと、アイコンの案を作った |
| 確かめる・仕上げる | Claude Opus 5.5(YOBITSUGI AI の既定のモデル) | SVG の色の数を数え、PNG にして見た目を確かめた。色違いとファビコンを作り、アイコンの線の太さをそろえた |
Recraft は、ベクターの版について、編集できる SVG を返し、ロゴ・文字・イラストのために作ったと説明しています。ほかの画像生成 AI は PNG などの点の集まりの画像を返します(OpenAI の GPT-Image-2.5 と Stability AI の API は PNG・JPEG・WebP)。AI ごとの違いは、Recraft の紹介と画像生成 AI の比較にまとめています。
SVG は形を数値で記録しているので、どれだけ大きくしても輪郭がなめらかです。PNG は決まった数の点でできているので、拡大すると輪郭がぼやけます。
頼み方の例
YOBITSUGI AI のアプリで、次の依頼文を送りました。一字も変えずに載せます。
架空の自転車店「りんりん自転車店」(英字の店名は RINRIN CYCLE)のロゴを、Recraft の V4.1 で SVG(ベクター)で作ってください。
- 案は 3 つ: ① マークだけ(自転車の車輪とベルを組み合わせた形) ② マークの右に英字の店名を並べた形 ③ 丸い枠の中にマークと英字の店名を入れたバッジの形
- 色は紺と黄色の 2 色まで。背景は白。グラデーションと影は使わない
- 小さく表示しても形が分かる、シンプルなものに
できたら、SVG のファイルと、それを PNG にした画像を見せてください。それぞれの SVG に使われている色の数も教えてください。ファイルは logo-rinrin というフォルダにまとめてください。
ポイントは 3 つです。
- 案の形を番号で分けて書く: マークだけ・横に並べた形・バッジのように、使う場面ごとの形を先に決めておくと、比べやすい案がそろいます。
- 色は数と名前で書き、使わないものも書く: Recraft のプロンプトの手引きでも、ロゴやアイコンは細部を減らし、はっきりした形と、色の数を絞った配色に向けて指示するよう勧めています。
- 確かめ方まで頼む: 「PNG にした画像を見せて」「色の数を教えて」と書くと、Claude ができたものを開いて確かめてから答えます。今回は、これで指定していない色のかけらが見つかりました。
実際にやってみた
1. ロゴを 3 案作る
約 1 分半で、3 案の SVG と PNG が届きました。
- 英字の店名「RINRIN CYCLE」は、② も ③ も正しく描かれました。文字は SVG の中で図形(パス)になっていて、書体の入っていない端末でも同じ形で表示されます。
- ② と ③ には、指定していない色(濃い金色と薄い黄色)の、数ピクセルの小さなかけらが 1 つずつ入っていました。Claude が色の数を数えたときに見つけて消し、どの案も紺・黄色と背景の白の 3 色になりました。
- ② は、縦横比を書かなかったので正方形で作られ、横長のロゴの上下に大きな余白ができました。③ は、丸い枠の上半分が文字に置き換わった形でした。
- Claude は、48 ピクセル四方に縮めて見え方を確かめ、ファビコンのような小さな表示には ① が向いていると報告しました。
- 届いた SVG のファイルには、C2PA という規格の来歴の情報(AI で作ったことなどを記録する情報)が入っていて、「Created by Recraft AI」と記されていました。
2. 日本語の店名・色違い・ファビコンを作る
同じ会話で、続けて次のように頼みました。
ありがとうございます。続けて、次の 3 つをお願いします。
- ② の形(マークの右に店名)で、英字の代わりに日本語の店名「りんりん自転車店」を入れた版を、Recraft の V4.1 で SVG で作ってください。横長(2:1)でお願いします
- ② の SVG をもとに、形は変えずに、黒 1 色にした版と、紺の背景に白で抜いた版を作ってください
- ① のマークを、Web サイトのアイコン(ファビコン)の大きさ、32×32 と 16×16 ピクセルの PNG にして、どう見えるか見せてください
できたものは、同じ logo-rinrin フォルダに入れてください。
約 2 分で、3 つとも届きました。
日本語の 8 文字は正しく描かれました。Claude は Recraft に 2 回作らせ、1 回目はベルが黄色い玉のように見えたため、ベルの形が分かりやすい 2 回目を選んだと報告しています。マークの描き方は ② とは違い、十字のスポークと半円のベルになりました。
色違いは、Recraft に作り直させず、Claude が SVG の中の色を書き換えて作りました。紺と黄色を同じ色に置き換えただけでは、ベルの中の紺の模様がベルと同じ色になって消えてしまったため、模様の 3 つの形を背景と同じ色にして見えるようにした、と報告しています。
32×32 では車輪・スポーク・ベルが分かりましたが、16×16 では 5 本のスポークがつぶれて、黄色い点のように見えました。Claude は、16 ピクセル用だけスポークを 3 本に減らして線を太くした、簡略版を作ることを勧めています。
3. Web サイトのアイコンを 4 つそろえる
続けて、このお店の Web サイトに使うアイコンを、Recraft の V4.1 で SVG で 4 つ作ってください。
- 題材: 修理(スパナ)・地図のピン・電話・時計(営業時間)
- 4 つとも同じ線の太さ・同じ角の丸さにそろえ、紺 1 色で、背景は透明にする
- 正方形(1:1)
できたら、4 つを横に並べた画像を見せてください。ファイルは logo-rinrin/icons に入れてください。
この依頼は、思ったとおりにはいきませんでした。Claude の報告では、Recraft の 1 回目の案は線が途切れたり、余計な点が入ったりしたため、指示を直して 1 つにつき 2 案ずつ作り直しました。2 回目の案は形はきれいでしたが、線の太さがアイコンごとに違い、時計の針は中が空いた二重線でした。
そこで Claude は、形の良い案を 1 つずつ選び、線の中心をなぞって、4 つとも同じ太さ・同じ丸い角で描き直しました。描き直した SVG の中身は Recraft が出したものではなく、Claude が作ったものです。比べるために、描き直す前の案も保存してもらいました。Claude が測った線の太さ(アイコンの大きさに対する比)は、描き直す前がスパナ 0.075・電話 0.066・ピン 0.043・時計 0.047、描き直したあとはどれも約 0.073 でした。
この 1 回は、Recraft に案を 12 枚頼み、Claude が描き直しの道具を入れて調整したため、約 5 分と、ほかの回より長くかかりました。
うまくいかないとき
今回、実際に起きたことから書きます。
- 指定していない色が混ざる: 2 つの案に、数ピクセルの別の色のかけらが入っていました。依頼文に「それぞれの SVG に使われている色の数も教えてください」と書いたので、Claude が数えて見つけ、消してくれました。
- 横長のロゴの上下に大きな余白ができる: 縦横比を書かないと、正方形で作られました。横長のロゴは「横長(2:1)で」のように書きます。
- アイコンの線の太さがそろわない: Recraft の案のままでは、線の太さや大きさがアイコンごとに違いました。今回は Claude が描き直してそろえましたが、そのときは SVG が Recraft の出力そのものではなくなります。そろえる前の案も残しておくと、あとで比べられます。
- 色を置き換えると模様が消える: 2 色のロゴを 1 色にすると、重なった模様が同じ色になって見えなくなりました。「模様が見えるように」と書き添えるか、できた画像を見て直しを頼みます。
- 小さいサイズでつぶれる: 16 ピクセルでは、細いスポークがつぶれました。ファビコンなどの小さな表示には、線を減らして太くした簡略版を別に作ります。
ほかに、よくある場面です。
- ほかの会社のロゴに似ていないか心配: AI で作ったロゴでも、すでにある商標に似ることがあります。看板や商品に使う前や、商標として登録する前に、特許庁の J-PlatPat(特許情報プラットフォーム)で、似た商標がないかを調べられます。
YOBITSUGI AI でできること・できないこと
今回試した範囲で分かったことです。
- できたこと: Recraft の V4.1 で SVG のロゴとアイコンを作る・英字と日本語の店名を入れる・SVG の色を書き換えた版を作る・PNG やファビコンの大きさに書き出す・色の数や線の太さを数えて確かめる・線の太さをそろえて描き直す。
- 人が決めること: どの案を使うか、似たロゴがないかの確認、商標の登録です。
- 試していないこと: Recraft V4.1 Pro のベクターの版、Recraft の画風の見本(見本の画像から画風をそろえる機能)、Illustrator などのデザインのソフトでの編集は、この記事では試していません。
料金の目安
YOBITSUGI AI は月額の費用がなく、使った分だけクレジットが減る仕組みです。モデルごとの金額は 料金とシミュレーション で確認できます。
今回は 1 つの会話で 4 回頼み、1 回目(ロゴ 3 案)が約 80 クレジット、2 回目(日本語の店名の版・色違い・ファビコン)が約 81 クレジット、3 回目(アイコン 4 つ)が約 277 クレジット、4 回目(描き直す前の案の保存)が約 17 クレジットで、ワークスペースの稼働の分などを含めた会話全体では約 460 クレジットでした(2026 年 10 月 19 日)。3 回目は、Recraft に案を 12 枚頼んだことと、Claude の描き直しの作業で、費用が多くかかりました。
関連する記事
- Recraft とは: ロゴや SVG のイラストを作る画像の AI
- 画像生成 AI の比較
- デザイン性の高いホームページを作るなら
- Web サイトを作るなら
- Claude Code に絵のセンスはない？ 画像の AI と描き比べて解説(ハック！でAI)
出典
- Recraft V4.1(Recraft・2026-10-19 確認)
- Logos and icons(Recraft・2026-10-19 確認)
- Limits and sizes(Recraft・2026-10-19 確認)
- Image generation | OpenAI API(OpenAI・2026-10-19 確認)
- API Reference | Stability AI Developer Platform(Stability AI・2026-10-19 確認)
- 特許情報プラットフォーム J-PlatPat(工業所有権情報・研修館・2026-10-19 確認)
- 料金とシミュレーション | YOBITSUGI AI(呼継AI)(株式会社Game・2026-10-19 確認)
