[限定提供]{class="badge informative"}
HTML テンプレートへの画像の変換 image-to-html
Journey Optimizer は、静的な画像デザインを、完全にカスタマイズ可能なモジュール型のHTML メールコンテンツテンプレートに変換することで、メール作成を大幅に高速化します。
ジェネレーティブ AI テクノロジーを活用することで、統合ツールは画像のレイアウト、タイポグラフィ、カラー、視覚要素を分析し、クリーンなモジュール型HTML コードを生成します。このコードは、 メールDesigner で完全な編集可能性を確保しながら、デザインの忠実性を維持します。
このコードなしの機能により、マーケターは、技術的な専門知識がなくても、グラフィックデザイナーやデザインツールからレスポンシブな編集可能なメールテンプレートにビジュアルアセットを変換し、複数のジャーニーやキャンペーンで保存および再利用できます。
主なメリットは次のとおりです。
- 手動でコーディングするよりも高速 - コンバーターは数分で画像を編集可能なHTMLに変換するので、時間のかかる手動のモックアップからHTMLへのワークフローをスキップできます。
- 技術的なスキルは不要 - マーケターは、デザインや開発のサポートを受けなくても、テンプレートを作成および調整できます。
- キャンペーン全体で再利用可能 - テンプレートをライブラリに保存し、任意のジャーニーやキャンペーンで使用します。
- デザインに忠実である – 出力は、メールDesignerと完全に互換性がある一方で、レイアウトとスタイルに一致します。
画像から HTML へのコンバーターは、次の場合に最適です。
- プラットフォームの移行：別のメールマーケティングプラットフォームから移行しますか？ゼロから再構築することなく、既存のメールデザインを Journey Optimizer 対応のHTML テンプレートに変換します。
- デザインモックアップのコンバージョン：デザインモックアップを、Photoshopや Figma などのデザインソフトウェアから、機能的なメールテンプレートに変換します。
- クイックテンプレート作成：開発者のリソースを待たずに、時間に敏感なキャンペーン用のメールテンプレートを迅速に生成します。
- テンプレートライブラリの構築：技術チーム以外のメンバーがカスタマイズおよびデプロイできる、ブランドと一貫したテンプレートの包括的なライブラリを作成します。
- 技術的な依存関係の軽減：マーケターがメールテンプレートを個別に作成し、繰り返すことができるため、キャンペーンの実行が迅速化されます。
ガードレールとレコメンデーション limitations
画像をHTML コンテンツテンプレートに変換する場合は、次の制限事項に注意してください。
-
AI の解釈：AI は、画像の視覚的解釈に基づいて HTML を生成します。複雑なデザインや通常ではないデザインでは、コンバージョン後に手動で調整が必要になる場合があります。
-
テキストの正確性：AI はテキストを正確に認識および再現しようとしますが、テキストコンテンツを常に確認し、必要に応じて修正を行います。
-
動的コンテンツ：コンバージョンプロセスでは、画像に基づいて静的な HTML が作成されます。コンバージョン後には、パーソナライゼーション、動的コンテンツ、トラッキングを手動で追加する必要があります。
-
複雑なレイアウト：複雑なレイヤー、通常ではないシェイプ、非標準の要素を含む非常に複雑なデザインは、完全に変換されない場合があります。一般的に、よりシンプルなデザインがより良い結果を得られます。
-
処理時間：画像の複雑さとサイズによっては、コンバージョンプロセスに最大 5 分かかる場合があります。AI の処理はバックグラウンドで行われるので、画面を開いたままにすることなく他のタスクを実行できます。変換が完了すると、テンプレートは自動的にドラフトとして保存されます。
-
限定提供：限定提供機能として、画像から HTML へのコンバーターは継続的に改善されています。機能と精度は変化する場合があり、お客様からのフィードバックは機能の向上に役立ちます。
画像からHTML テンプレートへの変換 convert-image
画像デザインを完全にカスタマイズ可能なHTML メールテンプレートに変換するには、次の手順に従います。
-
メールデザインを含んだJPEGまたは PNG 形式の画像ファイルが存在することを確認します。
note note NOTE 最適な結果を得るには、明確な視覚要素と読みやすいテキストを含む高品質の画像を使用します。画像の幅は、標準的なメールディメンションに一致させて 600～800 ピクセルにするのが理想的です。 -
左側のメニューから コンテンツ管理/コンテンツテンプレート を選択して、コンテンツテンプレートリストにアクセスします。
-
「テンプレートを作成」をクリックします。
-
テンプレートの詳細を入力し、チャネルとして「メール」を選択して、「作成」をクリックします。
-
画像をテンプレートに変換 セクションで、次の手順を実行します。
-
（オプション）組織がJourney Optimizerで定義されたブランドテーマを持っている場合は、テーマを入力として選択すると、生成されたHTMLのスタイルをブランドテーマパラメーターに従って設定できます。 テーマの詳細情報
背景色、ボタンの色、フォント、行間、余白、パディングなどのスタイルが生成されたテンプレートに適用され、追加のデザイン作業が軽減され、最小限の編集で使用できるテンプレートが生成されます。
-
画像をアップロードするには、個人を特定できる情報（PII）やその他の機密データが画像に含まれていないことを確認し、対応するオプションをチェックしてファイルをレビューしたことを確認します。
-
画像をアップロード ボタンをクリックして、画像ファイルを選択します。
note caution CAUTION 変換用に画像をアップロードすると、メールに現在追加されているすべてのコンテンツが削除され、生成されたテンプレートに置き換えられます。
-
-
画像を選択したら、開く をクリックして、AI を利用した変換プロセスを開始します。
note note NOTE 生成プロセスには、画像デザインの複雑さとサイズに応じて最大 5 分かかる場合があります。変換処理中に、この画面から移動して他のタスクを操作できます。 -
変換が完了すると、コンテンツテンプレートが自動的にドラフトとして保存されます。
-
メール本文を編集 をクリックします。 変換されたテンプレートが メールDesigner で開き、すべての編集機能が表示されます。 次ができるようになりました。
- テキストコンテンツのレビュー、編集およびパーソナライゼーションの適用
- 画像を変更し、リンクを追加
- カラー、フォント、スタイルを調整
- コンテンツコンポーネントを追加、削除、並べ替え
- 他のテンプレートと同様に、E メールデザイナーのすべての機能を活用
-
必要な調整を行って、テンプレートを絞り込み、ブランドガイドラインに一致させます。
-
テンプレートに問題がなければ、「保存」をクリックします。
テンプレートがコンテンツテンプレートライブラリで使用できるようになり、ジャーニーやキャンペーンでメールを作成する際に使用できます。 詳しくは、コンテンツテンプレートの使用方法を参照してください。
ベストプラクティス best-practices
画像をHTML コンテンツテンプレートに変換する際に最適な結果を得るには、次の推奨事項に従います。
- 既存のコンテンツを保存：画像を HTML に変換すると、メール内の既存のコンテンツがすべて置き換えられます。この機能を使用する前に、現在の作業内容を常に保存します。
- ワークフローを計画：メール作成プロセスの開始時に画像から HTML へのコンバーターを使用するか、現在のすべてのコンテンツを置き換える準備が整っていることを確認します。
- 解像度：テキスト認識と要素検出を向上させるために、高解像度の画像（幅 1200 px 以上）を使用します
- 明確さ：テキストが明確に読みやすく、視覚要素が明確に定義されていることを確認します
- 幅：一般的なメールクライアントの要件に一致させるために、標準的なメール幅（600～800 px）で画像をデザインします
- ファイル形式：JPEG または PNG 形式を使用 - 圧縮された画像や低品質の画像を回避します
- 完全なデザイン：ヘッダーからフッターまで、完全なメールデザインを単一の画像に含めます
- シンプルなレイアウト：シンプルで適切に構造化されたレイアウトは、非常に複雑なデザインよりも正確に変換されます
- 標準要素：一般的なメールデザインパターン（ヘッダー、本文セクション、CTA、フッター）を使用します
- テキストの読みやすさ：テキストと背景の十分なコントラストを確保します
- Web セーフフォント：一般的な web セーフフォントを使用したデザインは、忠実度が高くなります
- 要素の重複を回避：構造を認識しやすくするために、デザイン要素を明確に分離します
- ドラフトを確認：コンバージョンが完了すると、テンプレートは自動的にドラフトとして保存されます。生成した HTML の正確性について、時間をかけて慎重に確認します
- 完全にテスト：様々なメールクライアントとデバイスでメールをテストします
- 手動で絞り込み：E メールデザイナーの完全な編集機能を使用して、必要に応じて調整を行います
- ブランド一致：カラー、フォント、スタイルがブランドガイドラインに一致していることを確認します
- パーソナライゼーション：必要に応じて、動的コンテンツとパーソナライゼーショントークンを追加します
- アクセシビリティ：必要に応じて、アクセシビリティ機能を確認および強化します