社内には、1枚の画像としてのみ存在する文書が意外と多くあります。業務規定、社内案内、組織図、研修資料など、デザインの元データは見当たらず、JPGファイルだけがチャットツールや掲示板を行き交っているケースです。
人が目で見る分には問題ありません。困るのは、その文書を活用しようとしたときです。1行引用するにも手作業で書き写す必要があり、「残業に関する規定は何だったか」と検索しても何もヒットせず、AIに要約させようにも貼り付けるテキストすらありません。
ここでは、GNAの社内業務規定ドキュメントを例に見ていきます。以下の数値はすべて、本案件で実際に計測したデータです。
対象：社内業務規定の案内文
- 「オフィスマナー — GNA業務規定」
- リファレンスキャンバス
853 × 3,612 px、画像ファイル1点600 KB - 8つの分野にわたる34の規定が、すべてピクセルの中に埋もれていました。
画像形式でできなかったこと
| やりたいこと | 画像ドキュメント |
|---|---|
| 規定を1行コピーしてお知らせに貼り付ける | 不可 — 手入力で書き写す必要がある |
| 「服装」を含む項目を検索する | 不可 — Ctrl+F で検出できない |
| 小さな文字を拡大して読む | 不鮮明 — 拡大するほど画質が荒れる |
| スクリーンリーダーで読み上げる | 不可 — 読み上げるテキストが存在しない |
| AIに「会議関連の規定をまとめて」と依頼する | 不可 — 渡せるテキストデータがない |
HTML変換後に実現したこと
| 項目 | 結果 |
|---|---|
| 規定 | 8つのリスト・34の項目を実際の <li> として復元 |
| 分野の分類 | 9つのh2見出し — 勤務態度・挨拶と協調・清潔と整理整頓・会議と報告・服装と衛生・対外応対・会社の財産および情報保護・その他 |
| 本文テキスト | 64個のブロック・1,305文字 |
| 画像 | 9点に分割、すべてにalt属性を付与（9/9） |
| 文書情報 | <title>・<meta description>・lang="ko" を復元 |
人にとっての変化
- ドラッグしてそのままコピーできます。お知らせやメールに規定を1行引用する際も、再入力の手間がありません。
- Ctrl+F で検索できます。「服装」「報告」「情報保護」などで検索し、該当項目へ瞬時に移動できます。
- 文字を拡大しても崩れません。画像の拡大とは異なり、テキストはどれだけ拡大しても鮮明に表示されます。
- スマートフォンでも快適に読めます。横スクロールすることなく、画面幅に合わせて適切に折り返されます。
- スクリーンリーダーによる読み上げに対応します。9点の画像すべてにalt属性が設定され、どのような図解かも音声で伝わります。
AIにとっての変化
ここが最大のポイントです。AIは画面の見た目ではなく、文書の構造を読み取ります。画像をそのまま渡すとAIは文字を推測するしかありませんが、HTML化された文書は次のような明確な構造を持ちます。
h1 GNAオフィスマナー
h2 勤務態度 → li 7個
h2 挨拶と協調 → li 4個
h2 清潔と整理整頓 → li 7個
h2 会議と報告 → li 4個
h2 服装と衛生 → li 3個
h2 対外応対 → li 3個
h2 会社の財産および情報保護 → li 3個
h2 その他 → li 3個どの規定がどの分野に属しているかがタグによって明示されています。そのため、「会議に関する規定だけを抽出して」「服装規定を新入社員向け案内の文体にリライトして」といった指示に対しても、AIは確実な根拠に基づいて回答できます。社内文書をチャットボットや社内検索システムに連携する際も、画像ではなくこのHTMLをそのまま投入できます。
原本 ↔ 再現結果
これだけの構造化を行いながらも、見た目のデザインは完全に維持されます。左が元の画像、右が再構成したHTMLの画面キャプチャです。2つのパネルは同じ進捗率で連動してスクロールします。
読み込み中…どちらのキャプチャも 853×3,612 px — まったく同じ見た目で、テキストのコピーが可能です。
品質レポート
| 指標 | 値 | 意味 |
|---|---|---|
| height | ×1.000 | 全体の高さが原本と完全に一致 |
| rows | 0.997 | 行単位の輝度分布における相関度 |
| struct | 1.54 | 構造誤差（低いほど原本に忠実） |
| bands | 5/5 | 縦5分割の全区間がすべて許容誤差内 |
| pxdiff | PASS | ピクセル照合ゲートを通過 |
ファイル容量も軽量化
| 区分 | 容量 |
|---|---|
| 元の画像1点 | 600 KB |
| 再現HTMLドキュメント | 35 KB |
| 分割画像9点 | 98 KB |
| 再構成後の合計 | 133 KB（約78%削減） |
チャットツールで共有されていた600 KBの画像が、わずか133 KBのURLリンク1つに変わります。規定が改定された際も、画像を再作成して再配布する必要はなく、該当ページのテキストを修正するだけで完了します。
規定改定時の運用 — ここで決定的な差がつきます
社内文書は、更新されることを前提として運用されるものです。項目の追加や文言のブラッシュアップ、担当部署の変更などが日常的に発生します。画像文書の場合、改定のたびに以下の手順を繰り返す必要がありました。
| 規定を1行修正する場合 | 画像ドキュメント | 再構成されたHTML |
|---|---|---|
| 元のデザインファイル | 作成者やデータを探し回る（退職済みの場合は最初から作り直し） | 不要 |
| 作業担当者 | デザイン担当者 | 人事・総務などの担当者本人 |
| 作業内容 | 修正 → 画像書き出し → ファイル差し替え | 該当する <li> の1行を直接編集 |
| 再配布 | チャットや掲示板へ新しい画像を再共有 | 不要 — 同一URLで常に最新版を維持 |
| 旧バージョンの混在 | 社員が各自保存した古い画像が出回るリスク | 単一リンクのため旧バージョンが残らない |
この文書では、34の規定がそれぞれ独立した <li> として、8つの分野がそれぞれ独立した <h2> として構成されています。「清潔と整理整頓に1項目追加する」作業は、対象の <ul> 内に1行書き加えるだけで済み、残り33の項目や全体のレイアウトが崩れることはありません。
最大のメリットは、再配布の手間が完全になくなる点です。画像文書は更新のたびに新しいファイルを配り直す必要があり、各自が保存した古い版が使われ続けるリスクも伴います。HTML文書であればURLが1つのため、修正した瞬間に全員へ最新版が反映されます。社内チャットボットや検索システムが参照するソースも、自動的に最新状態が保たれます。
まとめ
- 社内の画像文書は、人に見えはするものの、コピー・検索・音声読み上げ・AI連携のいずれにも対応できません。
- デザインをそのまま維持してHTMLとして再構築することで、人はコピーや検索が可能になり、AIは文書構造を正しく把握できるようになります。
- 本事例では、34の規定と8つの分野をセマンティックなタグとして復元し、ピクセル照合テストを通過するほどの再現性を実現しました。
- 運用・保守の効率が劇的に改善します。規定が変更されてもテキスト1行の修正で完了し、画像の再作成や再配布も不要です。URLが統一されているため、誰もが常に最新版を参照できます。
再構成されたHTMLドキュメントのみを開く ↗ — 開いて直接ドラッグ・コピーをお試しいただけます。
