メールのレイアウトを作成する
メールのレイアウトとは、メールそのものを指します。つまり、件名、デザイン、および添付ファイルなどです。「Shopify Flow」アクションでは、レイアウトと送信者を選択し、メールを送信します。レイアウトはワークフローとは別個に管理されているため、HTMLを再度編集することなく、1つのデザインですべてのお客様にメールを送信することができます。
このリストには、「トランザクショナル」と**「マーケティング」の2つのタブがあり、それぞれに保存されているレイアウトの数が表示されます。初期状態では「トランザクショナル」**タブが開いており、メールの種類が設定される前に作成されたすべてのレイアウトはトランザクショナルとして扱われます。 タブを切り替えても、検索、並べ替え、ページ設定は引き継がれます。マーケティング用レイアウトには、名前の横に「マーケティング」バッジが表示されます。また、「マーケティング」タブで「**メールレイアウトを作成」**を選択すると、新しいレイアウトはマーケティング用として作成されます。
レイアウトを作成する
**「メールレイアウト」**に移動し、「**メールレイアウトを作成」**をクリックしてください。以下の設定を行います：
- 名前 - 識別用の名前です。これが見えるのはあなただけです。
- 件名 -
{{ variables.xxx }}および{{ secrets.xxx }}をサポートしています。 - プレビューテキスト - 任意です。ほとんどの受信トレイで、件名の横に表示される短い一文です。40～100文字程度を目安にしてください。件名と同じ変数をサポートできます。空欄のままにすると、メールクライアントがメール本文の最初のテキストを代わりに表示します。
- 説明 - 任意です。ご自身の参考用です。
- メールの種類 - 注文や発送状況の更新など、お客様が期待する「トランザクションメール」です。マーケティングメールの配信を解除したお客様に対しても、常に送信されます。 マーケティングメール：ニュースレター、プロモーション、お客様再獲得メールなどです。各受信者には、設定で指定された配信元情報と配信停止リンクが記載された個別のメールが送信され、配信停止を登録したお客様は対象外となります。エディタとは異なり、このタイプは後でレイアウトエディタで変更することが可能です。詳細は マーケティングメールと配信停止 をご覧ください。
次に、エディタをお選びください：
| 編集者 | こんな方に最適です |
|---|---|
| ビジュアルビルダー | ドラッグ＆ドロップ式のブロックを使って作成された、デザイン性とブランド性を兼ね備えたメール |
| リッチテキスト／HTML | 簡単な取引関連のメモ、あるいは貼り付けるだけで利用できる完全にカスタマイズ可能なHTMLメール |
ビジュアルビルダー
ビルダーは2つのパネルで構成された画面になっており、左側に設定、右側にキャンバスのライブプレビューが表示されます。「セクションを追加」ボタン、または既存のブロックの間に表示される「+」マークをクリックして、ブロックを追加してください。
左側のパネルには、4つのタブがあります：
| タブ | その中身 |
|---|---|
| 概要 | 名前、件名、プレビューテキスト、説明 |
| ブランディング | メール全体の色、タイポグラフィ、およびレイアウトの余白 |
| ブロック | キャンバス上で選択したブロックの設定 |
| テスト変数 | Shopify FlowのJSONスニペット、システム変数のリファレンス、およびプレビュー用のサンプル値 |
キャンバス上の各ブロックには、ドラッグ、複製、削除、または削除せずに非表示にするための操作ボタンがあります。
ブロックの参照
要素
| ブロック | 設定 |
|---|---|
| 本文 | リッチテキスト、配置、フォントサイズ（12／14／16／18）、色 |
| 見出し | 見出しのテキスト、サイズ（特大のH1から小のH4まで）、配置、色 |
| 画像 | 画像（アップロードまたはリンク）、代替テキスト、幅 10～100％、配置 |
| ボタン | ラベル、URL、スタイル（プライマリ／セカンダリ／アウトライン）、配置、角丸 0～24px |
| 区切り線 | 色、線種（実線／破線／点線）、線幅 1～8 |
| 間隔 | 高さ 4～80px |
| 添付ファイル | ファイルピッカーとタイトルです。添付ファイルと画像 をご覧ください。 |
| ループ | 配列変数に対して「Liquid + HTML」のブロックを繰り返します。ラインアイテムに使用してください。 |
| HTML / コード | Liquid を使用した生の HTML（{% if %} の条件分岐を含む） |
| QRコード | データ（URLまたはテキスト、変数をサポート）、サイズ 80～300px、配置 |
レイアウト
| ブロック | 設定 |
|---|---|
| 画像＋テキスト | 画像の位置（左／右）、画像の幅（20～70％）、縦方向の配置、余白、背景色、および画像／テキスト／ボタンのサブコンポーネント |
| 2つのコラム | 列の分割（50/50、33/67、67/33、40/60、60/40）、間隔（0～40）、縦方向の配置、パディング、および左右の列の内容の分離 |
ブランディング
「**ブランディング」**タブの設定は、レイアウト全体に適用されます：
- 色 - プライマリ、セカンダリ、テキスト、本文の背景、コンテンツの背景
- タイポグラフィ ― 見出しのフォント、本文のフォント、行間
- レイアウト - 以下の間隔設定
| 制御 | どのような変更が行われるか | 範囲 |
|---|---|---|
| 最大幅 | メール本文の幅はどれくらいまで広がりますか | 400～800px |
| コンテナの緩衝材 | コンテンツ領域全体の周囲の余白 | 0～40px |
| ブロックのパディング（側面） | コンテンツと左右の端との間の余白 | 0～40px |
| ブロックの余白（上・下） | 各ブロックのコンテンツの上下にある余白 | 0～40px |
| ブロックの間隔 | あるブロックと次のブロックの間の垂直方向の隙間 | 0～40px |
**ブロックのパディング（上・下）**は小さくしてください。「**ブロック間隔」**によってすでにブロックが区切られているため、両方を大きくすると大きな隙間ができてしまいます。
「設定」＞「ブランドとフォント」でブランドカラーに名前を付けると、ビルダー内のすべてのカラーピッカーで、その色がフィールドの下にチップとして表示され、チップをクリックするとその色が適用されます。フィールドに現在設定されている色のチップは、ハイライト表示されます。設定 をご覧ください。
フォントのドロップダウンメニューには、システムフォント（Arial、Georgia、Verdana、Times New Roman、Helvetica、Trebuchet MS）、Googleフォントのセット（Inter、Roboto、Open Sans、Lato、Montserrat、Poppins、 Nunito、Raleway、Playfair Display、Merriweather、Source Sans 3、Oswald、Work Sans、DM Sans、Space Grotesk）に加え、「設定」＞「ブランドとフォント」からアップロードしたカスタムフォントも選択可能です。
ヘッダーとフッター
ヘッダーとフッターは、キャンバスの上部と下部にあるクリック可能な領域です。それぞれに保存済みのプリセットを適用することで、ブランドイメージの変更がすべてのレイアウトに一括で反映されます。また、**「カスタム（このレイアウトのみ）」**を選択すると、そのレイアウトのみに適用されます。詳しくは、ヘッダーとフッターのプリセット をご覧ください。
リッチテキスト／HTMLモード
このモードでは、本文は単一のエディタとなっており、リッチテキスト／HTMLの切り替え機能と、別のプレビュー切り替え機能が備わっています。
- **リッチテキストでは、**おなじみの書式設定ツールバーをご利用いただけます。
- HTMLでは、素のテキストエリアが表示されます。すでにデザイン済みのメールがある場合は、そこに貼り付けてください。
- 「画像を挿入」を選択すると、メディアライブラリまたはリンクからホストされた画像が追加されます。
プレビューは読み取り専用であり、Liquidタグはそのまま表示されます。実際の値を確認するには、テストメールを送信してください。
Shopify Flowへの配線
レイアウトは作業の半分に過ぎません。Shopify Flowがプレースホルダーに値を割り当てる必要があります。
各レイアウトには、**「Shopify Flow」カードに、「トランザクションメールの送信」アクションに貼り付けるための正確な変数（JSON）**が含まれており、すべてのキー名はすでに正しく設定されています。これをコピーしてShopify Flowに貼り付け、<pick a Flow variable>というプレースホルダーをすべて置き換えてください。
完全攻略ガイド：Shopify Flow からのデータの受け渡し。
テスト変数を用いたプレビュー
[テスト変数] タブには、アプリが検出したすべての{{ variables.x }}が一覧表示されます。そのため、サンプル値を入力して、デザインが正しくレンダリングされるかを確認することができます。
配列をループブロックに渡すには、このタブにJSON配列として入力してください。
テストメールを送信する
レイアウトエディタで**「テストメールを送信」**機能をご利用ください。これにより、レイアウトが実際にレンダリングされ、指定した送信者から、件名の先頭に「[TEST]」が付いた状態でメールが送信されます。ページ上のプレビューではLiquidが評価されないため、Liquidが実際に正しく処理されるかどうかを確認するには、この方法しかありません。
本番環境への移行後は、「履歴」をご確認ください。プレースホルダーが何も生成しなかった送信には、「**空の変数」**というバッジが付きます。詳細は 沿革とトラブルシューティング をご覧ください。
デザインを再利用する
- **詳細 → 「テンプレートとして保存」**を選択すると、デザインが保存され、次回からそのデザインを基に作業を再開できます。保存されたデザインは「マイテンプレート」に保存されます。「マイテンプレート」には、ご自身が保存したデザインのみが表示されます。
- **詳細 → 「複製」を選択すると、**その場でレイアウトが複製されます。
- **詳細 → 「エクスポート」でファイルをダウンロードし、「インポート」**では、アプリから以前にエクスポートした「
.zip」または「.json」ファイルを読み込むことができます。これは、デザインをストア間で移動させる際に便利です。
レイアウトの削除
レイアウトはいつでも削除できます。Shopify Flowステップでそのレイアウトが参照されている場合、レイアウトには「**Shopify Flowで使用中」**というバッジが表示され、削除の確認画面にもその旨が表示されますが、削除自体は阻止されません。
削除した後、そのレイアウトを参照し続けているShopify Flowステップは、「Email template not found」というエラーで失敗し、そのエラーは履歴に表示されます。これらのステップの参照先を別のレイアウトに変更することで、問題を解決できます。
関連情報
- Shopify Flow からのデータの受け渡し - 値を指定する。
- 変数と液体 - 変数の完全なリファレンスです。
- 添付ファイルと画像 - ファイル、画像、およびサイズ制限。
- ヘッダーとフッターのプリセット - 繰り返し利用できるブランディング。
- マーケティングメールと配信停止 - マーケティング用のレイアウトにはどのような特徴があるのでしょうか。
- 設定 - ブランドカラー、カスタムフォント、およびショップ全体で適用されるメールのデフォルト設定。