はじめる

スライド · 実測

AI でスライド資料全体に使える、そろいのアイコンセットを一つ作る

ヘアライン仕上げのグラファイトのトレイに並んだ、チャコールの陶器の形(円、正方形、三角形、六角形)と、琥珀色の球が一つ
Ciyo で GPT Image 2.5 Sunburst を使って生成した、オリジナルの抽象エディトリアルアートワーク。

アイコンは、一つの家族のように見えるときに資料全体をまとめてくれます。線の太さ、角の形、スライド上の大きさが同じであることです。三つの無料サイトからアイコンを寄せ集めると、たいていの資料は継ぎはぎに見えてしまいます。AI で自分のセットを作ればスタイルの問題は解決しますが、今度はファイルの問題が生まれます。

2026年9月29日、架空の地域の工房 Harbor Street Makers 用に、Ciyo でアイコンを六つ作りました。アイコン同士はよくそろっていました。ところが、一緒に付いてきた SVG をそのまま使うと、暗いスライドのすべてに白い斑点が出るところでした。それをどう見つけ、どう直したかを紹介します。

六つの別々の依頼ではなく、セットのルールを書く

すべてのアイコンを一つのメッセージで、一枚のシートに、家族としてまとめるルールと一緒に頼んでください。一色、一つの線の太さ、丸い線端、同じ見た目の大きさ、固定したグリッドです。六回に分けて頼むと、六つのばらばらのスタイルになります。

Ciyo Agent は GPT Image 2.5 Flare でシートを描き、Ciyo の Vector ツール(ベクター変換ツール)で SVG に変換しました。費用は合わせて 4 クレジットでした。エージェントは、紺色が頼んだ色より少し暗く、#1F3A5F ではなく #10326B に近くなったこと、そしてアイコンが編集できる線ではなく、塗りつぶした輪郭の形として変換されたことを伝えてくれました。

紺色の線のアイコンセット二つが載った Ciyo のキャンバス: カレンダー、交差した工具、人、位置のピン、値札、クエスチョンマーク
キャンバス上のアイコンのシート(左)と、それを変換した SVG(右)。2026年9月29日。
Ciyo Agent に送ったメッセージ
地域の工房 Harbor Street Makers を運営していて、秋の講座のために 10 枚のスライド資料を作っています。資料全体で使える、そろいのアイコンセットを一つ作ってください: カレンダー、手工具、人の集まり、位置のピン、値札、クエスチョンマークの六つのアイコンです。スタイル: シンプルな線のアイコン、白地に一色(紺色 #1F3A5F)、同じ線の太さ、丸い線端、同じ見た目の大きさ、それぞれ自分の正方形のマスの中央に置き、ゆったりした間隔で 3x2 のグリッドに並べ、文字は入れない。そのあと、PowerPoint で色と大きさを変えられるように、アイコンを SVG にしてください。

アイコンを一つずつ見る前に、セット全体を確かめる

セットはいちばん大事なテストに合格しました。線の太さです。PNG の線幅を測ると、六つのアイコンすべてで 12.8 から 14.0 ピクセルで、互いの差は約 5% 以内でした。丸い線端と単色も守られていました。

大きさはそれほどそろっていませんでした。ほとんどのアイコンは高さ約 250 ピクセルですが、人のアイコンは 204 で、クエスチョンマークと値札のインクの量はカレンダーの約半分です。スライド上では、これらが「軽い」アイコンに見えます。新しいセットを頼むのではなく、各アイコンを同じ正方形の枠に入れ、軽く見えるものを数パーセント大きくして直してください。

最初のシートの六つのアイコンの測定結果(各マスは 416 × 416 px)
アイコン幅 × 高さ線幅インク
カレンダー247 × 25014.0 px20,163 px
工具282 × 25512.8 px19,405 px
人298 × 20413.4 px17,812 px
ピン188 × 25113.4 px11,132 px
値札239 × 23812.8 px10,726 px
クエスチョン157 × 24813.4 px10,033 px

変換した SVG に隠れていた問題

SVG を開いてみました。塗りつぶした形が 45 個あり、線は一本もありませんでした。紺色が 26 個、白が 17 個、薄い青が 2 個です。白いスライドなら気づくことはありません。紺色のタイトルスライドでは、白い形がすべて白い斑点として見えます。薄い青の形は、変換ツールが輪郭をなめらかにしたときの残りです。

これは変換したアイコンによくあることで、セットを採用する前に最初に確かめるべき点です。どの編集ソフトでもよいので SVG を開き、塗りの色を見てください。

アイコンを塗りつぶしの塊にせずに直す

白と薄い青の形を消し、すべてを #1F3A5F にするようエージェントに頼みました。エージェントはそのとおりにはせず、それが正解でした。変換ツールは各アイコンを紺色の塗りつぶしの塊として描き、その上に白い形を重ねて輪郭を作っていたので、白い形を消すと塗りつぶしの塊になり、紺色の面積が約 2.4 倍になってしまう、と説明しました。

代わりに、エージェントは紺色の形から白い形をくり抜きました。各アイコンは、ちょうど #1F3A5F の一つの複合シェイプになり、本当の穴が開きました。さらに六つのアイコンを暗いスライドの上に描画し、私たちが尋ねていなかったデザインの問題を指摘しました。紺色のスライドに紺色のアイコンでは、コントラストがほとんどないという点です。

白い形を消すと塗りつぶしの塊になると説明する Ciyo のエージェントパネルと、その横のアイコンのシートと暗いスライドのプレビュー
エージェントの説明と、整えたファイルから描画した暗いスライドでの確認。
二つ目のメッセージ
SVG を確認しました: 塗りつぶしたパスが 45 個あり、線は一つもありません。26 個が紺色(#0F326C)、17 個が白、2 個が薄い青なので、暗いタイトルスライドでは白い形が白い斑点として見えてしまいます。アイコンをスライドで使える状態にしてください: 白と薄い青の形をすべて消して内側を本当に空にし、残った形はすべてちょうど #1F3A5F にして、六つの別々の SVG ファイル(calendar、tools、people、pin、tag、question)として保存してください。それぞれ同じ余白で正方形に切り抜き、並べたときにそろうようにしてください。確認できるよう、暗い紺色のスライドの背景に一度載せて見せてください。

ファイルを取り出す: SVG のコードと白い PNG

ここで一つ制限が見つかりました。エージェントは SVG ファイルを Ciyo のボードに置けません。ボードが受け付けるのは PNG、JPG、WEBP、GIF、MP4、MOV です。そこで、整えた六つの SVG をコードとして貼り付けてもらい(それを .svg ファイルとして保存します)、暗いスライド用には白い PNG 版をボードに置いてもらいました。

六つの SVG を確かめました。どれも #1F3A5F の一つの形で、塗りの規則は even-odd、100 × 100 のグリッド上に最低 10% の余白があり、大きさはそれぞれ 1 から 3 KB です。内側は空(各正方形のうちインクは 7–14%)なので、どんな背景でも使えます。白い PNG は 512 × 512 で、背景は透明です。

紺色のスライドに載せた六つの白い線のアイコン: カレンダー、工具、人、ピン、値札、クエスチョンマーク
ボードの六つの白い PNG を、私たちが #1F3A5F のスライドに配置したもの。
三つ目のメッセージ
両方ともお願いします: .svg ファイルとして保存できるように、整えた六つの SVG のコードブロックをここに貼り付けてください。また、暗いタイトルスライド用に、透明な背景に白で描いた PNG 版(それぞれ 512x512)をボードに保存してください。

あるいは無料のライブラリに決める

必要なアイコンがすべて無料のアイコンライブラリにそろっているなら、それを使い、そのライブラリだけを使ってください。自分でセットを生成する理由は、どのライブラリにもない題材があるときです。たとえば自社の製品、お店、サービスなどです。どちらの場合もルールは同じです。スタイルを一度決めたら、決して混ぜないことです。

PowerPoint で使う

各 SVG は Insert(挿入)、続いて Pictures(画像)から挿入します。アイコンは線ではなく塗りつぶした形なので、色は Graphics Fill(グラフィックの塗りつぶし)で変えてください。スライドごとに線の太さが変わらないよう、すべてのアイコンを同じ大きさに保ってください。

紺色のアイコンのシートと、コントラストの低い紺色のアイコンを載せた暗いスライドが並ぶ Ciyo のボード
ボード上での暗いスライドの確認: 紺色の上の紺色は見えにくいので、白い版も作りました。

スライド用の AI アイコンセット

AI は互いにそろったアイコンを作れますか

はい。明確なルールを付けて、セット全体を一枚のシートに頼めば作れます。2026年9月29日のテストでは、六つのアイコンの線の太さは約 5% 以内に収まりました。アイコンの大きさのほうがばらつきました。

暗いスライドで SVG のアイコンに白い四角や白い斑点が出るのはなぜですか

変換したアイコンでは、塗りつぶした形の上に白い形を重ねて輪郭を描いていることがよくあります。私たちのものには白い形が 17 個ありました。色の付いた形から白い形をくり抜くか、Ciyo Agent にそれを頼んで、穴を本当に空にしてください。

PowerPoint でアイコンの色を変えられますか

はい。SVG を挿入し、Graphics Fill(グラフィックの塗りつぶし)を使ってください。アイコンは塗りつぶした形なので、枠線の設定では変わりません。

費用はいくらでしたか

アイコンのシートと SVG への変換で 4 クレジットでした。私たちのテストでは、整える作業、コード、白い PNG にはクレジットはかかりませんでした。

Ciyo で資料のアイコンを作る

セットを一度説明して SVG に変換し、明るいスライドにも暗いスライドにも使えるよう Ciyo Agent にファイルを整えてもらいましょう。