テキスト画像をHTMLビジュアルに変換

テキスト画像からHTMLビジュアルへの変換

目的

テキスト中心の参照画像を、より明確で有用なHTMLビジュアルに変換します。ソースの事実を保持し、表現を改善し、情報構造を再設計し、ユーザーがHTMLの方向性を確認した後に高解像度スクリーンショットを出力します。

ワークフロー

1. ソースを理解する

   • 提出された画像を視覚的に検査します。
   • エンティティ、ラベル、数値、カテゴリ、比較、結論、注意点、ソースブランドテキストを抽出します。
   • 装飾テキスト、ウォーターマーク、プラットフォームブランディング、冗長なラベル、レイアウトアーティファクトからコアとなる事実を分離します。
   • OCRが信頼できない場合は、可視情報を手動で書き起こし、不確かなフィールドにフラグを立てます。

2. 出力意図を定義する

   • ターゲットオーディエンスと読み取りコンテキストを推測します：SNS画像、記事グラフィック、セールス比較、内部レポート、商品カード、チェックリスト、ダッシュボードなど。
   • 最適な出力が、意思決定ページ、比較表、インフォグラフィック、サマリーカード、レポートページ、カルーセル状の長いページのいずれであるかを決定します。
   • ユーザーが明示的に忠実な再現を要求しない限り、参照レイアウトを単に複製しないでください。

3. コピーを書き換える

   • 重要な事実、数値、製品名、制限、リスク注記を保持します。
   • 密度の高い文章を、短いユーザー向けのステートメントに書き換えます。
   • 「結論＋条件＋注意点」の表現を優先します。
   • 「最適な用途」「注意点」「主要な利点」「制限」「価格例」「判断ポイント」などの明示的なラベルを、ページをスキャンしやすくするために使用します。
   • 法律、医療、保険、財務、コンプライアンス関連の記述は控えめにし、ソースで裏付けられていない推奨事項を発明しないようにします。

4. 情報アーキテクチャを再設計する

   • 最も重要な結論を最初に配置します。
   • 密度の高い比較には、上部にサマリーまたは「選び方」セクションを追加します。
   • 各アイテムのポジショニングには、製品/エンティティカードを使用します。
   • 詳細テーブルの前に、主要な相違点セクションを配置します。
   • 詳細マトリックスはサマリーの後に配置し、前に配置しないでください。
   • すべてのオプションが同一である行は、ユーザーが網羅的なアーカイブを必要としない限り、目立たせないようにします。

5. HTMLを構築する

   • ユーザーがフレームワークを要求しない限り、スタンドアロンのHTMLファイルを作成します。
   • スクリーンショットに適したCSSを使用します：固定エクスポート幅、安定したグリッド寸法、高コントラスト、読みやすいフォントサイズ、十分な行間隔。
   • 読みやすさを損なう装飾的な要素は避けます。
   • ユーザーが保持を希望しない限り、ソースプラットフォームのブランディング、ウォーターマーク、無関係な参照ラベルを削除します。
   • 生成されたHTMLは編集可能で自己完結型に保ちます。

6. 最終スクリーンショットの前に確認する

   • HTMLのパスまたはプレビューステータスを共有します。
   • 構造と主要なコピー/デザインの選択を要約します。
   • ユーザーがすでにHTMLの方向性を承認していない場合は、最終的な高解像度スクリーンショットを生成する前に確認を求めます。
   • ユーザーが明示的に「直接スクリーンショット」や「最終まで進んで」と要求した場合は、確認をスキップできます。

7. 高解像度スクリーンショットをエクスポートする

   • Chromeが利用可能な場合は、scripts/export_highres_screenshot.pyを使用します。
   • 密度の高いテキストには、広めのエクスポート寸法を推奨します：
     • 標準：幅2200-2600、スケール2
     • 非常に密度が高い場合：幅2800-3200、スケール2
   • PNGをエクスポートし、下部の空白をクロップします。
   • 寸法を確認し、出力を視覚的に検査します。

デザインルール

• ピクセル単位の類似性ではなく、一瞥での理解のためにデザインします。
• 階層を使用します：見出し、結論カード、アイテムカード、主要な相違点、詳細テーブル。
• 数値と制限を視覚的に見つけやすくします。
• 色を意味的に使用します：
  • 緑：相対的な利点。
  • オレンジまたはブランドカラー：主要な相違点。
  • 赤：制限、除外事項、またはリスク。
• セルあたりの単語数を少なくします。多くの単語が必要なセルは、説明を主要な相違点カードに移動します。
• アーティファクト全体を1つの巨大な密度の高いテーブルにしないようにします。
• スクリーンショットの場合、画像のアップスケーリングに頼るのではなく、エクスポート前にHTMLキャンバス幅とフォントサイズを大きくします。

コピールール

書き換え例：

• 密度が高い：「10年保证续保：医保内医疗费/质子重离子；非保证续保：医保外医疗费/癌症外购药/重疾特需」

• 明確：「医保内医疗费、质子重离子可10年保证续保；医保外、外购药和重疾特需不保证续保。」

• 密度が高い：「30天，意外伤害无等待期」

• 明確：「等待期30天；意外伤害无等待期。」

• 密度が高い：「医保内：5000元；医保外：1万」

• 明確：「医保内一般医疗免赔5000元；医保外免赔1万。」

必須の検証

引き渡し前に：

• 重要なソース事実が欠落していないことを確認します。
• 要求された場合、ソースブランド/プラットフォームのテキストが削除されていることを確認します。
• 長い単語や密度の高い中国語の行が重なっていないことを確認します。
• HTMLが意図したスクリーンショット幅で機能することを確認します。
• 最終的なPNGの寸法とファイルの存在を確認します。
• スクリーンショットを生成する場合は、スクリーンショットのパスを含め、可能であればインラインでレンダリングします。

簡潔なチェックリストについては、references/visual-html-checklist.mdを参照してください。