2026-10-09 15:23 1 Comment

Adobe FireflyでのWeb用アイコン作成にかなり苦労した話 #241

Webサイト用のアイコンを作るため、Adobe Fireflyを実務で初めてしっかり使ってみました。 
欲しいのはシンプルなピクトグラム。すぐにできるかと思いきや、実際にやってみるとなかなか思い通りにはいかず、思った以上に試行錯誤することに…。
Web制作の現場で、画像生成AIを制作素材として使ってみて感じたことを話します。

▼Adobe Firefly : オールインワンの AI クリエイティブスタジオ
https://firefly.adobe.com/

 

■おたより募集
番組では、働き方やキャリアに関する悩み、聞いてみたいこと、エピソードの感想などを募集しています。隣の席の先輩だと思って、気軽にお送りください。
▶︎ ハッシュタグ: #ちょいさきトーク
▶︎ おたよりフォーム:https://form.run/@choisaki
▶︎ マシュマロから匿名でもOK! https://marshmallow-qa.com/mypacecreator

■パーソナリティ:けい|Webと仕事を語る、隣の席の先輩
40代・2児の母。会社員を経て、現在はフリーランスとして、Web制作や中小企業のWeb活用支援に取り組んでいます。職場で隣の席の後輩にそっと話しかけるような感覚で、働くうえでのちょっとした経験や思いを音声にしています。
▶︎ Xアカウント:https://x.com/mypacecreator
▶︎ note: https://note.com/mypacecreator

#ちょいさきトーク #Web制作 #フリーランス #キャリア #仕事

感想

まだ感想はありません。最初の1件を書きましょう!

00:02
ちょいさきトーク,あなたよりちょっと先歩いてきた人のWebと仕事の話。 この番組では、フリーなぜWeb制作をしている私,けいが,上司じゃないけどちょっと気軽に話ができる、隣の席の先輩のような立場でWebと仕事について語ります。
さて、ちょっと久しぶりに雑談で、うちの子供の成長話をしたいなと思うんですけど。 2歳になる下の息子の方がですね、
2歳ももう10ヶ月過ぎまして、もうだいぶ3歳が見えてきているというような感じなんですけど。 歌がですね、なんか上手になりまして。
自分で保育園で覚えてきた歌とかですね、 あとはテレビとかで見るいろんな歌を覚えて自分で歌っています。
子供の手遊び歌で有名なですね、グー、チョキ、パーで何作ろうという。 あれも最近保育園でやってるみたいで、グー、チョキ、パーで何作ろうっていうのを自分で歌うんですけど。
右手がグーで、左手もグーで。グーとグーで何作るのかなと思ったら、そこからですね、無理やり片つむり、片つむりとグーだけで無理やり片つむりに持っていくというのがですね、なんか愛おしかったですね。
あとはパー、右手をパーで、左手もパーで、どうするんだろうって、なんか蝶を作りたいんだろうなぁと思うんですけど、
蝶、蝶、蝶、蝶、蝶、蝶ってなんか蝶が一個多かったりとかですね、なんかちょっとした言い間違いとかが本当に可愛くて、
このまま、もう間違えたままでずっといてくれというような、そんな時期にうちの息子もなったなというふうにしみじみ感じています。
これがね、正しくまた言えるようになると成長したなぁと思うんですけど、それはそれでなんか寂しいなというのも本音だったりします。
あとは、昔か今もですね、CMソングというのは本当にキャッチーなので、子供はすぐ覚えて歌うなと。
昔の歌のリメイクとかですね、替え歌とか、本当に耳に残るようにCMの作る人たちはすごく工夫して作っているのがですね、
一番それを評価してくれるのは小さい子供たちだなというのはすごい思うところで、そういうのを見ているのも子育てのもう一つ醍醐味なのかなというのを思ったりしました。
さて今日の本題なんですけども、ウェブ制作で使うアイコン素材と生成AIというテーマで話をしたいなと思います。
特にですね、その中でもアドビファイアフライという画像生成のサービス、こちらを使っての思ったことという話をしたいと思います。
アドビのファイアフライという画像生成のAIなんですけども、ウェブ制作でアドビのクリエイティブクラウドを契約している方は特に使っているよとか、使ったことあるよという方結構いらっしゃるのかなという気がするんですけど、
私もアドビのCC契約をしていますのでずっと使うことはできてたんですけど、あんまりその業務の中で画像の生成をしないといけないシチュエーションというのが案外なくてですね、
03:08
今まで意外とそのファイアフライを使ってこなかったという立場になります。
もともと私がデザイン業務をメインにしてないというところがあって、こういう素材の作成が必要な場合っていうのはデザイナーさんにお願いすることが多いので、
私の方でどうしても画像を用意しないといけないということが、そんなに今まで意外となかったという事情があります。
そもそもですね、なんで今回はAIで作ろうかなという話になったかというと、お客さんのサイトの方で、これはもう私が直で保守契約のあるお客さんのサイトなんですけども、
そのサイトのですね、ナビゲーションをちょっと改善したいという相談をいただきまして、
そこでお客さんからですね、こんな感じにしたいんだよねっていうのを、お客さんがChatGPTで作ったイメージ画像というのを送られてきまして、
そこにいわゆるシンプルなピクトグラム風のアイコンとナビゲーションのモンコーンっていうのが並んでいるという、
URLとしては一般的な形状のものであるんですけど、モンコーンにあったアイコンというのをですね、
おそらくChatGPTの生成して、6個ぐらいアイコンが並んでいたんですけども、
ただしそのもらった画像は本当に1枚絵なので、その中のアイコンを切り出してサイトにそのまま使うっていうのはちょっと難しいですし、
サイトで使っているカラーとも合わなかったりとか、
あとそもそもお客さんからもらったものをそのまま使うところに対して、ちょっとライセンス的なところの不安があったので、
それだったら似たようなものをこちらで用意した方がいいかなと、どっちにしようそのまま使えないしというところで、
今までだったら素材サイトの方を探しに行って、イメージにあったアイコンをいくつか選ぶという作業になるんですけど、
こういうナビゲーションに添えるアイコンって意味合いがですね、
モンコーンのものをそのままズバリ表すアイコンがなかなかなかったりとかするので、
結局作った方がいいよねということになるのは今までも多かったんですけど、
そういう時、デザイナーさんにお願いして作ってもらう代わりにですね、
こういうシンプルなアイコンであればAIで作ってしまえば早いんじゃないかというところでですね、
お客さんはChatGPTでカンプを出してきたんですけど、
私は今回じゃあせっかくクリエイティブクラウドに契約して生成クレジットも付与されてますし、
アドビが商用利用について明確に案内も出してますので、比較的クライアントワークにも使いやすいというところがあるので、
ちょっとファイアフライでやってみるかというところに至りました。
今ですね、ファイアフライでベクター画像の生成の機能っていうのがあるんですよね。
アイコンだとやっぱりSVGで欲しいケースっていうのが多いので、
06:02
このベクター画像で生成してイメージに合ったものが出来上がると最高だなというので、
このアドビのファイアフライにですね、こういうアイコンが欲しいんだけどという風のプロンプトを送って、
いろいろ生成をしてみたんですけど、
いやーこれがですね、難しくて全然思ったの出てこなかったというすごい苦労をしました。
欲しいのはですね、単純なピクトグラムですね、シンプルな。
例えばスマホのiPhone風の単色のアイコンの真ん中に図形が入っているとかですね、
またTシャツの画像に胸のところにプリントが入っているとか、
このシャツとかの加工をするサービスの学びが一緒だったので、そういうアイコンが欲しいというのだったりとかですね。
本当にそのシンプルなものでいいのに、なんか妙に凝ったものが生成されてくるんですよ。
なんかこう丸がついてたりとか、光が当たってたりとか、すごい立体的だったりとかですね。
これ結構プロンプトをいろいろ苦労して調整をしても、
一応参考画像として、もともとお客さんが送ってきたChatGPTの生成したアイコンをくっつけることもできるんですけど、
それっぽくしてというプロンプトを描いても、なんかこじゃれたものができてしまうというのがすごい気になったんですね。
こんななんか凝った画像を作れるのに逆に単純なものの方が難しいんだなぁと思って、
得意不得意あるんだなというふうに思ったわけです。
で、今ベクター画像の生成がですね、アドビの方でファイアフライイメージ3っていうモデルがあるんですけど、
そっちに当てたんですけど、それと別にオープンAIのGPTイメージ1っていうモデルの2つが今ベクター画像の生成で選べるようになっていまして、
これGPTのモデルの方がもしかしたら得意かもなぁと思って、ちょっとクレジットの消費が余計にかかるんですけど、そっちを選んで、
一回やらせてみたら、やっぱりですね、アドビのモデルに比べてイメージに近いものっていうのが出てきました。
なので、結構そのタッチとかですね、得意不得意があるんだなぁというのがすごいよくわかりました。
アドビはどちらかというと写実的だったりとか、写真っぽいとかですね、絵画っぽいとか、
しっかりとした創作物を作るのにすごい強いそうだなという感じがありまして、
対してちょっとしたシンプルなものであれば、オープンAIのモデルの方がイメージに近いものが出てきたなというそういう印象でした。
で、いいの出てきたじゃんと思ってですね、それSVG形式でダウンロードできるので、それをイラストレーターで開くことができるんですね。
で、これイラストレーターで開いてみたらですね、これが実はですね、いられてみるとパスがガタガタだったんですよ。
例えばですね、スマホ、iPhoneのデフォルメしたような形状のアイコンを作ったんですけど、
09:03
本来まっすぐであってほしいところ、あと角が丸くなってますよね、この角丸のRっていう丸っこいところですね。
そこがですね、4つ角全部バラバラだったりとか、
あとなんか、手書きのサインペンで描いたような、ちょっとナチュラル感のある、まっすぐじゃない感じというか。
手書きで描いたイラストをトレースしたような、そういうパスになってまして、なんかこれ、なんかもっと綺麗にならないのかなというのをすごい思ったと。
でこれ、直すの?どうすんの?っていうような感じでですね、
見た目としてはすごくイメージに近いものができたけれども、それがベクター画像としていい感じになってるかっていうと、もう全然話が違うなというのを強く感じました。
まあですので、これもう少しモデルも向上していくと話はまた変わってくるんだと思うんですけど、
ちょうどこれ試したのが昨日だったんですけど、昨日の段階ではまだ形の決まった図形とかですね、そういうのはプロのデザイナーさんとかが作った素材をベースにしてそこに調整加えていく方が、
なかなかSVGの画像をAI生成で実用に耐えるものを作るのは、まだまだちょっと難しそうだなという印象でした。
結局ですね、今回私が使おうと思っていた環境においては、アイコンの表示のサイズが結構ちっちゃかったりとか、
あとASP型のECサイトのシステムにアップロードして表示させていくんですけど、
そこでSVGがちょっと扱いづらい、どっちにしろPingに変換して使うっていうこともあったので、
ちょっとパスがいがんでるけれども、サイズがちっちゃくしたら、よっぽど見ないとわからないよねっていうぐらいの感じだったので、そのまま採用は今回はしたんですけど、
なかなか使えるシチュエーション限られるなぁという、まだまだ今時点ではそんな印象でした。
これ前もですね、プロンプトでデザインを作るようなAIサービスを試してみたことあるんですけど、
文字とか言葉でビジュアルを伝えて思ったものを作るっていう行為がですね、めちゃくちゃ難しいなというのはすごく感じます。
特にですね、専業のデザイナーではないとはいえ、それなりに仕事としてデザインをかじったことがあるので余計そう思うのかもしれないんですけど、
なかなか今回は必要なアイコン6個を、ファイアフライでですね、この文脈にあったアイコン6個、ちょっと時間はかかりましたけど揃えることができたんですけど、
これ今後も似たような作業があった時に、同じことまたやるのかなって考えると、
12:00
それだったらイラレが得意なデザイナーさんに最初からお願いしてやってもらった方が、かえってコスト安いよねというのもクオリティもいいですし、
すごく思っちゃったんですよね。
そのお願いしたデザイナーさんがAIを使って作るのはまあ、それはそれで全然構わないんですよ。
得意な人だったら、私がファイアフライ相手に試行錯誤していたよりは、早く綺麗に適切な方法を選んでAIも使うことができるでしょうし、
実用に応じて手で調整したものを過線比として出してくれるはずなので、これはコーディングなんかをする自分に置き換えてもそうなんですけど、
コーディングの心得がない人がAIに全部やらせて出来上がったものと、今までコードを書いてきた人間がAIにやらせて仕上がってくるもの、
やっぱりクオリティ同じAIを使っていても全然違うと思うんです。
それと同じで、もともとその分野の土台がある人がAIを使うことによってブーストされて、より良いものが早くできるという面はあると思うので、
ちょこちょこと作るんだったら便利だなと思ったんですけど、
たくさん揃える場合はもうちょっとあんまりやりたくないなというのが正直に思ったところです。
AIで専門外だけど自分でもできることっていうのは確実に増えたというのはあるんですけど、
かといってじゃあできるようになったからやった方がいいかっていうのはまた違う話だなというのはやっぱり思いました。
なので今日のまとめとしましては、
ただ作れると、今後実用的にちゃんと使えるものを作るは違う話だなというのをですね、
アイコンのAI生成を通じて強く強く感じたというのを今日の話としたいと思います。
そもそもですね、アイコンが必要になった土台として、
最近お客さん側からChatGPTで作ったものが送られてきてこうしたいみたいな話が結構出てきたなと、
いうのがあります。
で結構ですね、ウェブ制作の現場にいるとそういう経験をされている方は他にも増えてるんじゃないかなという気がしますので、
次回このお客さんがAIで生成したものを提出してきた時に考えたことの話をしたいなと思います。
今週も最後までお聞きくださりありがとうございます。
さて、来週なんですけども月曜日が祝日になりますので配信はお休みになります。
ちょっと迷ったんですけど、スライドして火曜日に配信しようかなと思ったんですけど、
ちょっとですね、いろいろ岐阜県の講座がいよいよ始まったりとかですね、ちょっとバタバタとしておりますので思い切って来週の月曜日の配信はお休みにしまして、
1週間後の金曜日、10月の16日を次回配信としたいと思いますので、よろしくお願いいたします。
この番組ではおたよりや感想を募集しています。概要欄のおたよりフォームかXでちょいさきトークのハッシュタグをつけてポストをお願いします。
15:04
ちょいさきはひらがな、トークはカタカナです。
YouTube、Spotify、Apple、Amazon、スタンドエフェム、リッスンのうちお好きな配信アプリでフォローをお願いいたします。
それではまた来週、良い週末をお過ごしください。
15:23

コメント

こちらはCodexで学校の授業用のスライドの説明用SVG画像作ったりしましたが、こちらは結構いい感じにできてますねー、ソースを見てもきれいなXMLでした。やはり得意分野と不得意分野がありますね。 お子さんの成長のお話、微笑ましいですねー、こちらでも一時期街のお茶の間で0歳児の里子の赤ちゃんを見てました(その子自身はもう別のお家に行ってしまったのですがたまに動画が送られてきます)

スクロール