画像内の文字は通常のページ本文より見落とされやすく、検索・読み上げ・更新にも弱い領域です。可能なら重要情報をHTMLでも提供し、画像で伝える必要がある部分は制作データから再構成します。
最初に画像を用途とリスクで棚卸しする
ヒーローバナー、料金表、操作図、商品仕様、注意事項、SNS広告を一覧にし、掲載URL、原本、言語、更新担当、差し替え頻度を記録します。装飾文字と、購入・安全・契約判断に使う文字を分けると確認の深さを決めやすくなります。
見出しや価格のような重要情報を画像だけに置くと、画面読み上げ、拡大、コピー、検索が難しくなります。HTMLで同じ内容を提供できるものは本文へ移し、画像は補助表現として扱います。
編集可能な制作データから文字を取り出す
Figma、Illustrator、Photoshopなどの編集データと使用フォントを回収し、テキストレイヤーごとに原文を抽出します。画像しかない場合のOCR結果は確定原稿にせず、数字、固有名詞、改行、記号を原本と照合します。
原文ID、画像ID、レイヤー名、訳文、文字数目安、確認者を表で結びます。画像へ直接上書きするだけでは、次回更新時にどの訳文が最新か分からなくなります。
- 元画像と編集可能な制作ファイル
- フォントの利用条件と対象文字の収録範囲
- レイヤー単位の原文・訳文・確認状態
- 掲載URL、ファイル名、更新日、責任者
文字量の変化を前提に再レイアウトする
言語が変わると一行の長さ、行数、単語の区切り方が変わります。原文と同じフォントサイズへ固定せず、文字枠の幅、余白、行間、情報の優先順位を調整します。小さくして押し込む方法はモバイルで読めなくなりがちです。
数字と単位、句読点、URL、ブランド名、アイコンとの対応を確認し、実際の表示サイズで校正します。右から左へ読む言語では、文章だけでなく矢印、工程順、配置の意味も点検します。
訳文品質・アクセシビリティ・更新を一緒に確認する
MQMの考え方を使い、意味の誤り、抜け、用語、表記、レイアウトを分類して確認します。画像のaltは見た目の説明を機械的に翻訳するのではなく、そのページで画像が果たす目的を対象言語で簡潔に伝えます。
公開後は各言語の画像URL、キャッシュ、SNSプレビュー、モバイル表示を確認します。原本が更新されたら翻訳画像も再制作できるよう、原本と派生版の版番号を連動させます。
実行前に押さえる要点
- 重要情報は画像だけに閉じ込めず、可能な限りHTMLでも提供する。
- 制作データとレイヤー単位の原文を確保し、OCR結果は必ず原本と照合する。
- 訳文、実寸レイアウト、alt、キャッシュ、更新履歴まで同じ公開工程で確認する。