Word から HTML へ：生のコードが表示される理由と対処法

HTML ファイルをアップロードしたのに、リンクを開くとページではなく HTML コードの画面（<!DOCTYPE html>、<div> など）が表示される——この原因はほぼ確実にホスティングサービス側ではなく、ファイル自体にあります。Word / WPS の「Web ページとして保存」 で作られたファイルです。

このケースは 2 通りあり、どちらもページを壊します。

原因はどちらも同じです。Word は文書エディタであり、コードエディタではありません。 Word は HTML を「レイアウトすべき文書の内容」として扱い、ブラウザに渡す「ページ構造」としては扱いません。

幸いなことに、プログラミングの知識は必要ありません。 ファイルを AI ツールに渡して、本物の HTML ファイルを返してもらえば解決します。以下が手順のすべてです。

ステップ 1：ファイルを AI ツールに渡す

1. ファイルをアップロードできる AI ツールを開く（スマホアプリでもブラウザでも、いずれも無料枠あり）：
   • ChatGPT
   • Claude
   • Gemini
   • Microsoft Copilot
2. サインアップ / ログイン（メールアドレスまたは電話番号、1 分ほど）。
3. チャット欄で 「＋」/ クリップ /「ファイルをアップロード」 のアイコンをタップし、Word から書き出した .html ファイルを選びます。100KB 前後のファイルなら、どのツールでも問題なく扱えます。

コツ：ファイルの中身をテキストとして貼り付けるのではなく、ファイルそのものをアップロードしてください。AI が正しく読めるのはその場合だけです。

ステップ 2：次のプロンプトを送る

状況に合うほうを選び、ブロックごとコピーして送ってください（やるべきことが書かれているので、追記は不要です）。

ケース 1：リンクにコードだけが表示される（ソースがテキスト化された）

このファイルは Word / WPS の「Web ページとして保存」で書き出されました。HTML のソースがただのテキストとして扱われ、本文の中でエスケープされた状態（<!DOCTYPE html> や <div> という文字列）になっています。次の作業をお願いします。

1. 本文中のエスケープされた HTML ソースを見つけてアンエスケープする（< を < に、> を > に、& を & に戻す）
2. ブラウザで表示できる完全な HTML ファイル 1 つに復元する（<!DOCTYPE html> から </html> まで）
3. Word 独自のレイアウト・スタイル・コメント（StartFragment、mso-* など）を削除する
4. 元の <style> と <script> の中身はそのまま残す

出力は完全な .html ファイル 1 つだけにしてください。

ケース 2：Word 文書があり、共有できるページにしたい

これは Word 文書から書き出したウェブページです。すっきりとしたモダンな HTML ページに変換してください。

1. Word のレイアウト用コード（mso-*、<o:p>、条件付きコメントなど）をすべて削除する
2. 文書の構造（見出し、段落、リスト、表、画像の位置）は保持する
3. スマートフォンでも読みやすいレスポンシブなスタイルを、システムフォントを使って付ける
4. 画像が欠けている場合は、もともとあった位置に印を付ける

出力は完全な .html ファイル 1 つだけにしてください。

AI が「ファイルが見えない」と答えた場合は、こう返してください。「ファイルはアップロード済みです。上記のとおり処理して、完全な .html ファイルだけを出力してください。」

ステップ 3：AI の回答を確認する

• 正しい回答は HTML コード 1 ブロックです：<!DOCTYPE html> で始まり </html> で終わります。

• 断片しか返ってこない、あるいは説明文が大量に付いてくる場合は、こう返します。

  完全な .html コードだけを、<!DOCTYPE html> から </html> まで、説明なしで出力してください。

• 「このファイルは扱えない」と言われたら、別のツールを試してください。アップロードされたファイルの解析精度はツールによって差があります。

ステップ 4：結果を .html ファイルとして保存する

ここでつまずく人が多いところです。次のように進めてください。

パソコン（おすすめ）

1. コードブロックの 「コピー」ボタン を押します（または全体を選択してコピー）。
2. メモ帳（Windows）または テキストエディット（macOS — 先に「フォーマット → 標準テキストにする」に切り替え）を開きます。
3. コードを貼り付け、「名前を付けて保存」を選びます。
   • ファイル名：my-page.html（.html の拡張子が重要です）
   • ファイルの種類：すべてのファイル（.txt を選ばない）
   • 文字コード：UTF-8
4. ⚠️ Word / WPS で開いて保存し直すのは厳禁です。 Word のウェブページに戻ってしまい、振り出しに戻ります。

スマートフォン

• AI ツールによっては回答を「エクスポート / ダウンロード」できます。.html として書き出せるならそれが一番簡単です。
• できない場合はテキストエディタアプリで新規ファイルを作り、コードを貼り付けて .html として保存します。

ステップ 5：アップロード前に確認する

1. 保存した .html ファイルをダブルクリック（またはタップ）します。コードではなく ウェブページ が表示されるはずです。
2. 画像やスタイルが正しく表示されるか確認します。
3. 問題なければ SharingHTML にアップロードし、発行されたリンクを開いてもう一度確認します。

画像やスタイルがまだ欠ける場合は別の問題です。ページがローカルの画像 / CSS / JS を参照しており、それらがアップロードされていません。『複数ファイルを 1 つの HTML ファイルにまとめる方法』に書かれているとおり、AI にそれらのリソースを 1 ファイルに埋め込んでもらってください。

FAQ

Word の「Web ページとして保存」で作ったファイルのリンクで、生の HTML コードが表示されるのはなぜ？

Word は HTML をコードとして扱わないためです。ソースを Word に貼り付けると、<div> のような内容はただのテキストになり、本文の中で <div> としてエスケープされます。ブラウザから見るとページ構造ではなく 1 段落のテキストなので、ソースをそのまま表示するしかありません。

Word から書き出した HTML を AI で直すときのプロンプトは？

4 つの指示で足ります。本文中のエスケープされた HTML ソースを見つけてアンエスケープする、完全で表示可能な HTML ファイル 1 つに復元する、Word のレイアウト用コード（mso-*、StartFragment など）を削除する、元の <style> / <script> の中身はそのまま残す。最後に「出力は完全な .html ファイル 1 つだけ」と添えると、余計な説明が入りません。上のステップ 2 のプロンプトはそのままコピーできます。

AI の回答を、アップロードできる .html ファイルにするには？

AI が出力したコード全体をコピーし、メモ帳（Windows）またはテキストエディット（macOS — 先に標準テキストに切り替え）に貼り付け、「名前を付けて保存」で、ファイル名を .html で終わる名前にし、ファイルの種類は「すべてのファイル」、文字コードは UTF-8 を選びます。AI に .html ファイルとしてエクスポートさせてダウンロードする方法でも構いません。⚠️ Word / WPS で開いて保存し直すと、Word のウェブページに戻ってしまいます。

Word 文書（HTML ソースではないもの）を共有できるページにするには？

Word / WPS の「Web ページとして保存」でも HTML はすぐに作れますが、レイアウト用コードが大量に付いてきてローカルの画像フォルダにも依存するため、結果は安定しません。文書の内容を AI ツールに渡し、すっきりとしたレスポンシブな HTML ファイルにしてもらってからアップロードするほうが確実です（上のケース 2 のプロンプトを使ってください）。

まとめ

リンクにコードだけが表示される、あるいはレイアウトが崩れている場合は、まずファイルが Word / WPS の「Web ページとして保存」で作られたものかどうかを確認してください。 Word は文書を書くのには優れていますが、ホスティングする HTML を作る道具としては適していません。

AI ツール（ChatGPT、Claude、Gemini、Copilot）に内容を本物の自己完結した HTML ファイルに戻してもらい、ローカルで確認してからアップロードすれば、リンクは普通のウェブページとして表示されます。