生成AIが作ったサイトのアイコンが表示されない・英単語に化ける理由——アイコンフォントとSVGの違い
生成AIに作ってもらったサイトを開いたら、アイコンがあるはずの場所が空白になっている。あるいは、「schedule」「location_on」のような英単語が大きく表示されている——どちらも、同じ原因で起きることが多い現象です。
原因は、アイコンの「描き方」にあります。この記事では、アイコンを表示する主な方式の違いと、最初からつまずかない頼み方、Studioに持ち込むときの考え方を整理します。
アイコンの表示方法は、大きく3つある
Webサイトのアイコンは、見た目は同じでも、作り方がいくつかあります。生成AIは、指定しないと「アイコンフォント」を選ぶことがよくあります。
| 方式 | 仕組み | 起きやすいこと |
|---|---|---|
| アイコンフォント | 文字の代わりに記号を表示する特別なフォントを、外部から読み込む。HTMLには、アイコンの名前やクラスだけが書かれる | フォントを読み込めないと、空白になったり、名前の英単語がそのまま表示されたりする |
| SVGを直接書く | アイコンの形そのもの（線や円の情報）を、HTMLの中に直接書く | 外部の読み込みが要らないので、ファイルだけで表示できる |
| 画像ファイル | PNGやSVGのファイルを、写真と同じように置く | ファイルを一緒に渡し忘れると表示されない |
なぜ、英単語が表示されたり空白になったりするのか
アイコンフォントは、「フォントが読み込めたときにだけ、記号に見える」仕組みです。たとえば、GoogleのMaterial Symbolsは、公式ドキュメントによると、Google Fontsのスタイルシートを読み込み、HTMLには「arrow_forward」のようなアイコンの名前を文字として書きます。フォントが読み込まれると、その文字が1つの記号に置き換わって見えます。
つまり、フォントが読み込まれなければ、画面に出るのは元の文字（英単語）のほうです。Font Awesomeのように、タグにクラスだけを付ける方式では、読み込めないと何も表示されません。
フォントが読み込まれない場面は、いくつかあります。インターネットにつながっていない状態でファイルを開いたとき、HTMLの先頭にある読み込みの行をコピーし忘れたとき、そして、サイトを別のツールへ持ち込んだときです。
最初から「SVGで直接書いて」と頼む
いちばん手戻りが少ないのは、最初の指示でアイコンの方式を指定することです。次の一文を添えてください。
アイコンは、アイコンフォント（Font AwesomeやMaterial Symbolsなど）を使わず、SVGをHTMLの中に直接書いてください。Studioに持ち込むときの考え方
Studioで運用するつもりなら、なおさら方式が大切です。外部から読み込むアイコンフォントは、記号そのものがファイルの中に無いため、SHITAJIで取り込んでも写りません。SVGで直接書かれたアイコンは、形の情報がファイルの中にあるので、持ち込めます。
- これから作る → 最初の指示に「アイコンはSVGで直接書く」を入れる
- すでにアイコンフォントで作った → AIに、SVGへの置き換えを頼んでから取り込む
- 数が少ない → 取り込んだあとに、Studioの「Icon」ボックスで置き直す方法もある。ボックスの種類はStudioのボックスの種類と使い分けへ
よくある質問
| 質問 | 答え |
|---|---|
| パソコンで開くとアイコンが出るのに、別の環境では出ません。 | アイコンフォントは、開くたびに外部から読み込む。インターネットにつながっていない環境や、読み込みの行が抜けたファイルでは表示されない。SVGの直接記述なら、この差が出ない。 |
| アイコンの代わりに、絵文字を使ってもよいですか？ | 使える。ただし、絵文字の見た目は、見る人の端末によって変わる。デザインをそろえたい場所には、SVGのほうが向く。 |
| SVGにすると、色や大きさは変えられますか？ | 変えられる。AIに「アイコンの色を〇〇に」「大きさを24pxに」と頼めば、SVGの指定を書き換えてくれる。 |
| 写真が表示されないのも、同じ原因ですか？ | 原因が違うことが多い。写真は、画像のアドレスそのものが実在しない場合がある。生成AIが作ったサイトの画像が表示されない・壊れたリンクになる理由を参考にしてください。 |
まとめ
アイコンが空白になったり、英単語に化けたりするのは、アイコンフォントが読み込めていないためです。最初の指示で「アイコンはSVGで直接書く」と決めておけば、開く環境や、持ち込む先に左右されにくくなります。
頼み方の基本はChatGPT・Claude・GeminiにWebサイトの下書きを作らせるプロンプトのコツ5つ、取り込んだあとに編集しやすい形を保つ考え方は生成AIで作ったサイトの文章・画像を、あとから自分で直せるようにしておくコツにまとめています。
生成AIで作ったHTML/CSSを、Studioへ。
SHITAJIは、HTML/CSSのサイトをStudioのネイティブ要素として取り込む変換ツールです。 フリープランは月3ページまで無料・カード登録不要で試せます。
次に読む
2026-10-20生成AIが指定した書体が、Studioに持ち込むと別の書体になる理由——システムフォントとWebフォントの違い2026-10-15生成AIが作った料金表・会社概要の「表」が、Studioに持ち込むと列がそろわない理由と対処※ SHITAJIはStudio株式会社とは関係のない独立したサービスです。「Studio」はStudio株式会社の商標です。 本記事は公開されている情報と一般的な制作の知見にもとづいて執筆しています。