こんにちは！西です。
ちょっと笑えるけど切実だった“アイコンフォント”
調整地獄の話、そして令和の魔法ツール「ChatGPT」がその悩みを一瞬で解決してくれた話をご紹介します。
皆さん、Webサイト制作をしていて「アイコンひとつ」のために数時間、いや数日も消耗したことはありませんか？私はあります。いや、ありすぎました。
そんな私の「黒歴史」が、いまやAIの力で“3秒で解決”する時代になったんです。今日はその感動を余すところなく、皆さんと共有したいと思います！
あのアイコンが憎い──2010年代、深夜のCSS格闘物語
時は2010年代前半。
「Webは軽く！表示は速く！スマホにも対応を！」という流れが来て、私も例に漏れず「アイコンフォント」導入を始めました。
有名なのは Font Awesome（フォント・オーサム）。
便利そうに見えましたよ、最初は。「軽い！CSSで色も変えられる！」って。
でもね……
地獄はそこから始まった。
たとえば、クライアントから「このアイコン、もう少し大きくして」「色、#009688にして」って言われたとき。
.fa-trash {
font-size: 1.5em;
color: #009688;
}
なんて書くじゃないですか。ところがSafariではうまく表示されない。Firefoxでは位置がズレる。
挙げ句の果てには、Androidだけ表示されない……なぜ！？
さらに、フォントとして扱っているがゆえの制約。
・文字間隔の調整ができない
・上下中央に配置するのが激ムズ
・アイコン1個のために巨大なアイコンフォントファイルを読み込む無駄
これ、全部CSSでなんとかしようとして深夜3時に頭抱えてた私、今でも夢に出てきます。
「アイコンなんて簡単でしょ？」って言った人、ちょっと来て
いや、ほんとに。
「ただのマーク」「見た目の飾り」だと思っていたアイコンが、こんなに手間のかかる存在だったとは。しかも、調整を始めたら地獄の無限CSSループに突入する。
当時の私の心の声──
「アイコン1つで人生の時間どれだけ削られるん！？」
令和の衝撃──SVG×AIという救済
時は流れて令和。
ふとしたことから、ChatGPTを使ってSVGアイコンを生成できると知りました。
SVG（Scalable Vector Graphics）って、画像じゃないんです。コードなんです。
え、これが画像になるの？
しかも、拡大してもぼやけない？
しかもしかも、色やサイズをCSSでいじれる？
ちょっと待って。
「あの深夜のCSS地獄、全部ムダだったってこと！？」
そうなんです、過去の自分に言ってあげたい。
「アイコンフォントで苦しむ時代は終わったよ、SVGにしなよ！」って。
実演！プロンプト対決──ChatGPT vs 昔の私
では、実際にChatGPTに「アイコン作って」と頼んでみましょう。
テーマ：「丸っこいゴミ箱のアイコンを作って」
当時なら：
- Photoshopで形作る
- Illustratorでパスを調整
- SVGに書き出し
- デザイナーに修正依頼
- 数日後、ようやく完成
でも今は、ChatGPTにこう言うだけ。
プロンプト例：
「丸みを帯びたシンプルなゴミ箱アイコンをSVG形式で作ってください。色はグレー、サイズは100pxです。」
出力されたSVGコード：
<svg width="100" height="100" viewBox="0 0 64 64" fill="gray" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="24" height="30" rx="5" ry="5" />
<rect x="18" y="15" width="28" height="5" />
</svg>
これをHTMLに貼り付ければ、即表示。CSSで色変更もOK。
svg:hover {
fill: #4caf50;
}
しかも軽い！キレイ！すぐ使える！
当時の自分なら、「神か？」って思ったレベル。
智子の結論──AIは最高の時短アシスタント
振り返れば、10年以上前の私は、デザインとコーディングの狭間で格闘していました。
- 表示のズレに悩み
- 何度もブラウザを開き直し
- クライアントの要望に振り回され
- 自分の睡眠時間を犠牲にしていた
でも今は違います。
AI、特にChatGPTは、私たちの「面倒くさい」を3秒で解決してくれます。
そして、私が学んだ最大の教訓はこれ。
「自分の手で全部やらなくていい。
“考える仕事”にこそ時間を使おう」
Web制作者、デザイナー、そして自分でサイトを作ろうとしている皆さんへ
SVGとAIを味方につければ、
・表現の自由度が上がる
・制作スピードが格段にアップする
・ややこしいCSS調整から解放される
つまり、クリエイティブに集中できる！
これが、令和時代のサイト制作のカタチなんです。
まとめ：あの時の私へ、そして今のあなたへ
10年前、CSSで四苦八苦していた西智子へ。
あなたの苦労は、ムダじゃなかったけど、今ならしなくていいよ。
これからの時代は、
“自分で全部やらない”が正解です。
そして、この記事を読んでくださったあなたが、もしも「アイコンひとつで悩んでる」なら……
ぜひ、ChatGPTを開いて「SVGでアイコンを作って」と話しかけてみてください。
もしかすると、あなたの「徹夜地獄」も、3秒で終わるかもしれません。