![見出し画像](https://assets.st-note.com/production/uploads/images/172833231/rectangle_large_type_2_fd4d85f4463d7db995f816d239c395ae.png?width=1200)
第7週 課題:業務効率化ツール作成|SVG挿絵作成
AIを使って業務効率化するプロジェクト始動!
このkeitaroさん率いる「けいたろう軍団」のプロジェクトでは
毎週 課題提出&フィードバックを繰り返し「2ヶ月後にAIを使って業務効率化できるようになること」を目指しています。
【挑戦】AI画像生成で作るSVG挿絵!Adobe Expressとパワーポイントを活用したカスタマイズ手法
スライドや資料の挿絵って、みなさんどうしていますか?私は本業でたくさん使うので、素材サイトにいっぱい課金しています💦
でもせっかくAIで画像生成ができるので、スライドの挿絵も作れたらいいのに・・・って思いませんか?
ただ、スライドに合わせて色味を合わせたりサイズの調整を手軽に行いたいと思った時、生成した画像データではピッタリ合わないってこと、ありますよね。Adobe Illustratorを使えばベクター化して自分で加工もできますが、Adobeはお高くてハードルが高い・・・💦
そこで今回は、AI画像生成で作ったシンプルなイラストをAdobe ExpressでSVGに変換し、パワーポイントで自在に編集・活用する方法をご紹介します。
![](https://assets.st-note.com/img/1738508969-YWK7sfwuNLPRdk1pjrmvbJDy.png?width=1200)
1.きっかけ
挿絵作成において、デザインがカスタマイズできるかって、とっても重要です。従来のラスターデータでは、拡大縮小による劣化や色の変更が難しく、用途に合わせた調整ができない💦そこで、ベクター形式のSVGに変換することで、解像度に依存せず色や形状を自由に変更できる手法に注目!
AI画像生成でシンプルなイラストを作成し、Adobe Expressで簡単にSVG化することができれば、誰でも手軽に高品質な挿絵を作ることができる✨
というわけで今回の挑戦することにしました!
もう素材サイトの課金はいらないかも?AIで生成した画像をSVGに変換してオリジナル挿絵に!?Adobe Expressとパワーポイントを活用したカスタマイズ手法を紹介します✨AI生成画像もベクターデータにできるって知っていましたか?しかも無料でできます!詳細はnoteで!https://t.co/v0ulEF4ajV pic.twitter.com/JbJMQG9Wc6
— konmari (@konmari_tweet) February 2, 2025
2.Adobe Expressについて
【基本情報】
Adobe Express
Adobeが提供するオンラインツールで、画像の編集や変換、特にSVG形式への変換が簡単に行えます。直感的な操作で、複雑な編集も手軽にできるのが魅力です。
【料金体系と注意点】
Adobe Expressは基本無料プランが存在し、有料プランではより高度な機能が利用可能です。今回の作業は無料でできます!
SVG変換時には、元となるAI画像がシンプルであるほど変換精度が高くなるため、画像生成時のシンプルさが重要となります。これは生成時のプロンプトで要調整!
![](https://assets.st-note.com/img/1738508496-EV861YuKi4AB9xgcqJPXWHef.png?width=1200)
3.SVG挿絵作成の実装手順
ここでは、AI画像生成からSVG変換、そしてパワーポイントでの編集までの具体的な手順をステップごとに解説します。実際に取り組む際の参考にしてください!
【手順】
AI画像生成
ベクター化しやすいシンプルなイラストを、AI画像生成ツール(例: DALL·E、Midjourney、Stable Diffusionなど)で作成します。
イラストはあらかじめシンプルな構図・色使いでデザインすることがポイントです。
Adobe ExpressでSVG変換
Adobe Expressに生成した画像をアップロードします。
画像編集メニューから「SVG形式に変換」機能を選択し、変換処理を実施します。
変換結果を確認し、必要に応じてパスの調整などを行います。
パワーポイントで活用
Adobe Expressで作成したSVGデータをパワーポイントにインポートします。
パワーポイント内で色変更や配置、サイズ調整など、好みに合わせたカスタマイズを実施。
作成した挿絵を資料やWebコンテンツに組み込んで、デザイン全体の統一感を図ります。
【基本設定】
画像生成時の注意点: シンプルな構図・配色にすることで、Adobe Expressでの変換がスムーズに行えます。
![](https://assets.st-note.com/img/1738507828-3doDXIuhJ4RrVGz0KNBwl5qm.png?width=1200)
パワーポイントでの編集: 画像挿入後、レイヤーごとに分割されている場合は、グループ解除して個別に編集可能です。
4.発生したエラーと解決方法
実際に作業を進める中で、いくつかのエラーに遭遇しました。以下は、主なエラーとその解決策です。
【エラー例】
エラー内容: 「パスが途切れている、または不完全なベクター化」
原因: AI画像生成時の複雑なディテールが原因となり、Adobe Expressでの変換に支障が出た可能性があります。
解決策: 画像生成時に、ディテールを抑えたシンプルなデザインに変更する。
パワーポイントでの挿絵活用のコツ
パワーポイントでSVG挿絵を効果的に利用するためのポイントをいくつかご紹介します。
色の変更: SVGは各パスごとに色が設定されているため、個別に色変更が容易。用途に合わせたカラースキームに調整してください。
サイズ調整: SVGは拡大縮小しても劣化しないため、自由にサイズ変更が可能。レイアウトに合わせて最適なサイズに調整しましょう。
レイヤー編集: パワーポイントでは、SVGの各要素を個別に編集できる場合があるため、グループ分けや配置調整が簡単です。
再利用性: 作成したSVGはテンプレートとして保存し、他のデザインプロジェクトでも活用できるようにすると便利です。
5.実装時の注意点
実際に作業する際の注意点をいくつか挙げます。
画像のシンプルさ: AI画像生成時に複雑すぎるイラストは、SVG変換でトラブルの原因になるため、できるだけシンプルなデザインを心がけましょう。
データのバックアップ: 変換前のラスターデータと変換後のSVGデータは、別途バックアップを取っておくと安心です。
![](https://assets.st-note.com/img/1738508559-GEOmA1cvLpJk06I3UFYZWQui.png?width=1200)
まとめ
今回の記事では、AI画像生成で作成したシンプルなイラストをAdobe ExpressでSVGに変換し、パワーポイントで自由にカスタマイズする方法をご紹介しました。SVG形式にすることで、挿絵の色変更やサイズ調整が容易になり、デザインの幅が広がります。初期設定には注意が必要ですが、一度手順を習得すれば、多彩なデザイン表現が可能となります。
おわりに
この記事では、SVG挿絵作成の新しいアプローチとして、AI画像生成、Adobe Expressでの変換、そしてパワーポイントでの編集方法を解説しました。ぜひ、この記事を参考にして、より自由で高品質な挿絵作成に挑戦してみてください。最後までお読みいただき、ありがとうございました!
![](https://assets.st-note.com/img/1738508598-rfmw3Kbxe5CJsU7dI8OM9ApE.png?width=1200)