![見出し画像](https://assets.st-note.com/production/uploads/images/141016141/rectangle_large_type_2_3809cd5f43c26fc4164440cd919735ff.jpeg?width=800)
Copilotとロゴを'確実に’簡単作成
CopilotなどAIにお願いすれば、様々な画像を作成してくれますが、ロゴなどに名称を入れたり細かい調整をするとなると、試行錯誤が多く帰って面倒臭くなり「ちょっと手を入れさせて!」って思うことはないでしょうか。
いくつかのWebツールを組み合わせると、驚くほど簡単に「自前の」ロゴが作れる方法を見つけたのでご紹介します。
いやいや!もっと良い方法があるよ!ってご存じの方はコメントいただけると嬉しいです!
前提:
前提としては、完全にAIにお任せではなく
1. 雛形をAIで作成
2. Webツールで下処理、SVGに変換(ここが大切)
3. Inkscape で編集
という流れです。 ツールで編集は嫌だよ!っていう方は該当しないのであしからず。🙏
当初、AIでSVGを直接作成する方法も試しましたが安定しませんでした。 今回ご紹介するのは、画像(jpeg)をAIで作成→WEBツールでSVG化→編集して完成、で図案以外に名前なども確実に入れられる方法です。
例としてSUPのサービス用に、印刷などで利用しやすいシンプル目のロゴを作成することにします。
1️⃣ AIさんに画像をお願い
AI画像はCopilotを利用しました。
呪文は「SUPのサービス用にロゴを作成します。太陽とSUPボードをモチーフに単色4色で作成して」
とか
「SUPのサービス用にロゴを作成します。SUPの上に立つビキニの女性が太陽に向かって漕ぐ図案を色職以下で作成して」
といった感じで頼んでみました
Microsoft Designer の Image Creator (bing.com)
![](https://assets.st-note.com/img/1716015695009-Ft6pnd7M5w.png?width=800)
![](https://assets.st-note.com/img/1716014300369-HwT7btU4sc.png?width=800)
気に入ったのが出来ましたら、ダウンロードして、必要な場所だけにしたい場合はスクショなどで切り取ります。今回はこの画像を 元にロゴSVGにします
![](https://assets.st-note.com/img/1716016060921-O7AC4yHSdX.png)
2️⃣ 画像の色数を減らす
ロゴをシンプルで視認しやすいマークになることや、印刷する前提ですと色数が少ないほうが便利な場合があります。SVGにするときにもディテールがない方が軽く品質の高いデータに変換できるので、多少手間はかかるのですが白黒のグレースケールで減色し、後で色を付け直す確実な方法を取りました。
![](https://assets.st-note.com/img/1716016047911-XdY0QxC3WL.png?width=800)
![](https://assets.st-note.com/img/1716015954189-zuXaRDoOpt.png)
3️⃣ SVGに変換
十分シンプルな4色ほどの画像になったので、これをSVG(解像度によらない、ベクターデータ)にします。
下記のWebツールでサクッと変換してくれます。
![](https://assets.st-note.com/img/1716015789292-pF9Wq02ZPT.png?width=800)
4️⃣ 最適化
今回は十分シンプルなデータだったので使いませんでしたが、SVG化でデータが巨大になった場合はこのツールで軽いデータに変換できます。
![](https://assets.st-note.com/img/1716014208585-ZoEswAuH2q.png?width=800)
5️⃣ inkscapeで編集
ここまで出来たら、後は通常のsvg作成と同じです。ただし、元データがあるとで不要なところを削除したり、色を塗ったりりするだけです。
ロゴの場合、社名やサービス名、商品名など「文字」を正確に入れる必要がありますがAIだと難しいため、いずれにしてもこの工程はでてくるかと思います。
作業的には
1. 複数に分かれているパートを確認、不要な物があれば削除
2. 色が同じもの部分をグループにして着色、調整
3. 文字入れ
で、10分ほどで再構成できてしまいました。
AIが文字を描くと変形して読みづらいとかスペルが違うとか様々な不都合が出来ます。今回も元々あったSUPという文字が壊れていたので削除し、新たに文字でSUPと入れました。
![](https://assets.st-note.com/img/1716016289076-M0zGF8g5MN.png?width=800)
完成!
この方法が良いのは途中のデータ含めすべて手元に残り、細かい調整が可能で、後で変更したくなっても安心なことです。
![](https://assets.st-note.com/img/1716016379293-JVCZR5q7Jl.png?width=800)
追記:
文字が正確に書けるAIももうすぐ。。。
Googleが最近発表した生成AI Imagen3ではテキストも正確にレンダリングができるそうです。。。え〜、がんばって方法編み出したのに(笑
Imagen 3は、テキストプロンプトから画像を生成できる画像生成AIモデル。最高品質の写実的な画像を生成できると謳っているほか、従来の画像生成AIで課題となっていた、画像内のテキストレンダリングを高精度に行なえるという。
軽量でゆらぎ無いデータとして商標などに使うロゴは人の手を介して管理が必要なことはすぐには変わらないでしょうが、作成時の作業は今後ますますAI頼みになることは間違いなさあそうです。
この記事が気に入ったらサポートをしてみませんか?