韓国のビューティーブランドREBEAUTYのEMS Brush Air mini日本語商品詳細ページをHTMLへと再構成した事例です。元データは縦に長い一枚画像でしたが、テキスト・画像・レイアウトが分離された実際のWebページとして生まれ変わりました。以下の数値はすべて、本件で実際に測定された実測値です。
元データ
- リファレンスキャンバス
800 × 9,371 px— 1画面には収まらない縦長の一枚画像 - 画像ファイル1点、
1.4 MB - タイトル・本文・価格・レビューに至るまで、ページ内のすべての文字がピクセル（画像）化されています。検索もコピーも翻訳も、修正すらできません。
再構成の成果物
| 項目 | 結果 |
|---|---|
| ドキュメント言語 | <html lang="ja"> — 日本語ドキュメントとして宣言 |
| セクション数 | 12個 |
| 見出し構造 | h1 1個 · h2 10個 · h3 3個 |
| テキスト | 103個のブロック · 865文字を実際のテキストとして復元 |
| 分離された画像 | 15点（モデルカット、製品ラインナップ、ビフォーアフター比較、レビューアバター） |
| スタイル | インラインCSS 27 KB — レイアウトをそのまま忠実に再現 |
元データ ↔ 再現結果
左側が元の一枚画像、右側が再構成されたHTMLページをそのままキャプチャした画面です。両方のパネルは同じ進捗率で連動してスクロールされます。
読み込み中…レンダリング時の高さが両方とも 9,371 px で完全に一致しています — 上記の品質レポートにある height ×1.000 はこの数値を指します。
品質レポート
再現結果を元データとピクセル単位で照合・比較した数値です。
| 指標 | 値 | 意味 |
|---|---|---|
| height | ×1.000 | 全体の高さが元データと正確に一致 |
| rows | 0.985 | 水平ラインごとの明度分布の相関度 |
| struct | 6.13 | 構造誤差（数値が低いほど元データに近い） |
| bands | 23/24 | 垂直方向に24分割した区間のうち23箇所が許容誤差内 |
| pxdiff | PASS | ピクセル照合ゲートを通過 |
データ転送量
| 区分 | 容量 |
|---|---|
| 元の一枚画像1点 | 1,438 KB |
| 再現HTMLドキュメント | 48 KB |
| 分離された画像15点 | 403 KB |
| 再構成後の合計 | 451 KB（約69%削減） |
合計値で見ても3分の1以下に削減されていますが、実際の体感速度の差はさらに歴然です。一枚画像では1.4 MBをすべてダウンロードし終えるまで画面が表示されませんが、再構成されたページでは48 KBの軽量ドキュメントが瞬時に描画され、画像は画面スクロールに合わせて順次読み込まれるためです。
内容が変更される際 — 運用の負担が激変します
商品詳細ページは一度作ったら終わりではありません。季節限定価格、プロモーションのコピー、配送に関する案内、成分表記など、変更が必要になるのはほぼ常に「数行のテキスト」にすぎません。しかし画像だけのページでは、たった一行のテキストを修正するためだけに画像全体を作り直す必要があります。
| テキストを一行修正する場合 | 画像だけのページ | 再構成されたHTML |
|---|---|---|
| 元デザインデータ | PSDやAIデータを探し出す必要あり（紛失時は最初から作り直し） | 不要 |
| 作業担当者 | デザイナー | 担当者自身で完結 |
| 作業フロー | 修正 → 再書き出し → 再アップロード | 該当の文言を書き換えるだけ |
| 他言語への展開 | 言語の数だけ画像をそれぞれ再作成 | 同じ位置のテキストを差し替えるだけ |
| 変更範囲 | 画像ファイル全体（1,438 KB） | 数行のテキストのみ |
このページでは、103個のテキストブロックがそれぞれの定位置にHTMLタグとして配置されています。「45%」を「60%」に変更したい場合も、そのブロックを一つ修正するだけで完了し、他のレイアウトや画像、余白に手を加える必要は一切ありません。
Gumsonのテキスト編集モードは、このプロセスをそのままツールとして具現化した機能です。変換結果の画面からテキスト情報のみを抽出して入力フォームとして提示し、修正して保存すれば元の位置へと自動で書き戻します。タグ構造やCSSには一切触れないため、デザイン崩れの心配もありません。
何が変わるのか
- 検索エンジンに届く — 865文字が本物のテキストであるため、検索エンジンやAIアンサーエンジンが内容を正確に認識します。画像内のテキストはインデックスされません。
- スムーズに翻訳できる — テキストブロックを差し替えるだけで多言語展開が可能です。レイアウトをゼロから作り直す必要がないため、対応言語を増やすコストを劇的に抑えられます。
- 手軽に修正できる — 価格やキャッチコピーを一行変更するために、元のデザインデータもデザイナーの手配も必要ありません。
- 音声で読み上げられる — スクリーンリーダーによる音声読み上げに対応し、ユーザー側で文字サイズを拡大することも可能です。
- 修正コストがゼロに — 価格や文言が変更になっても画像を再作成する必要はなく、対象のテキストブロックを直すだけで済みます。展開する言語が増えてもレイアウトを再構築する手間はかかりません。
ご自身で比較してみる
元データのキャプチャと再現結果を横に並べ、同じ倍率・同じスクロール量で連動させながら仕上がりをお確かめいただけます。
