チュートリアル
Claude Opus 5.5で商品メールのダークモード崩れを調べる
Claude Opus 5.5に同じメールの明暗表示を比較させ、問題の素材やスタイルを特定して小さく修正します。HTML、ロゴファイル、実際の受信画面を渡してください。ブラウザーのプレビューは配置確認には使えても、メールアプリの挙動を保証しません。まず商品、オファー、ボタンを読める状態にし、その後で装飾を整えます。
Claude Opus 5.5に同じメールの明暗表示を比較させ、問題の素材やスタイルを特定して小さく修正します。HTML、ロゴファイル、実際の受信画面を渡してください。ブラウザーのプレビューは配置確認には使えても、メールアプリの挙動を保証しません。まず商品、オファー、ボタンを読める状態にし、その後で装飾を整えます。
テンプレート編集の前に不具合を分類する
ダークモードの問題は異なる層で起きます。元メールを残し、変更ごとに前後を比較できるようにします。
| 消えるもの | 確認する場所 | 最初に試す修正 |
|---|---|---|
| ロゴ内の暗い文字 | 画像の透明部分 | 明暗両方で読める承認済みロゴ処理 |
| ボタン文字 | 受信メールの文字色と背景色 | そのボタンの色の組み合わせを直す |
| 商品の輪郭 | 商品画像と隣接背景 | 商品色を変えず背景付きの画像処理を試す |
| 画像非表示で全情報が消える | 画像だけに含まれる情報 | オファーと遷移先を通常の文字でも伝える |
Litmusのダークモードガイドは、受信側の変換やロゴ処理の違いを説明しています。CSS修正が1つ成功しても、すべてのアプリで同じになるとは限りません。必要なのはパッチと、対象アプリを明記したテスト表です。
再現できる小さな受信比較を作る
仮定のボトル発売メールなら、主要な2つの受信アプリで同じメールを明暗表示し、4枚の画像を用意します。アプリ、OS、分かればバージョン、メール改訂番号、画像読み込み状態を記録します。配信サービスがHTMLを変換する可能性もあるため、実際に使うサービスから送信したメールで比較します。
ボトルは見えるのに暗い文字ロゴだけ消える場合、ブランド承認済みの薄い明色縁取りと、背景付きロゴの2案を求めます。実表示サイズで比べてください。幅320ピクセルの元画像を160ピクセルで表示すると、元の2ピクセルの縁取りは約1 CSSピクセルになります。拡大した原稿ではなく160ピクセルで判断します。これは例示の寸法で、共通ロゴ規格ではありません。
この試験では商品写真を変えません。ロゴ、写真、ボタンを同時に変えると次の不具合を追いにくくなります。候補AとBを別保存し、同じ本文で比較してください。
万能な裏技ではなく証拠を求めるプロンプト
[メール改訂版]、[HTMLファイル]、[ロゴファイル]と、受信画面[各アプリ・バージョン・表示モード]を比較してください。
商品色、承認済みロゴの比率、オファー文、リンク先URLは変更しないでください。
各画面の読めない要素を挙げ、画像ピクセルの問題とHTML/CSSの色の問題を区別してください。見える証拠を記述し、根拠のないアプリ挙動を推測しないでください。
各不具合への最小修正を提案してください。ロゴはブランド承認済みの縁取りと背景付き処理を比較し、マークを描き直さないでください。
変更一覧、必要なHTMLパッチ、素材の別版、提示したアプリの両モードを含むテスト表を返してください。画像非表示でもオファーとボタンを理解できるようにします。
承認されたツールで描画やテスト送信ができるなら、実行した確認を正確に報告してください。できなければ未検証と明記し、次に比較すべき受信画面を示してください。ブラウザープレビューだけで互換性を主張しないでください。次の返信ではテスト表の失敗した1行に対応します。例えば「候補Bのロゴは合格ですが、画面4でボタン文字が消えます。そのボタンだけ変更してください」と頼みます。目に見える欠陥に集中でき、毎回全体を作り直さずに済みます。
何を合格条件にするか
テストした各環境でブランドが分かり、商品を認識でき、行動先を見つけられることです。ボタンを開いてリンク先を確かめ、画像非表示も別途確認します。未試験のアプリは合格にせず記録してください。黒いアートボードで良く見えるロゴでも、配信サービスの処理後には崩れる可能性があります。
2026年5月の質問では、ダークモードで赤と青のロゴを保つ方法が話題です。実在するデザイン制約ですが、あなたの施策で処理を検証した証拠ではありません。本文の例は仮定で、Opusの評価ではありません。
次回配信前の疑問
メール全体を1枚の画像にすればよいですか？
画像非表示ではオファーが消え、文字修正も難しくなります。完成した販促画像は有用でも、重要なメール情報は画像外にも残します。
Opusはロゴファイルを直接直せますか？
実際の編集は利用環境のツール次第です。修正済みファイルを受け取り確認してください。文章の助言は編集済み素材ではありません。
Panellyはどこで使いますか？
Panelly Studioで商品販促画像を作り、チャットで画面を調整します。HTML、配信、受信テストは別工程です。Opus連携を意味する手順ではありません。画像説明には商品画像の代替テキストガイドを使えます。
