メールレイアウトに枠線とコンテンツの区切り線を追加する

レイアウト要素に枠線を適用したり、コンテンツレイヤーの間に区切り線を挿入したりできます。

レイアウト要素に枠線を追加する ​

メールデザインのレイヤー（Row、Column、Buttonなど）に実線の枠線を追加するには、レイヤーをクリックしてFigmaの線を適用します。これは、Emailifyからエクスポートされる最終的なHTMLにCSSの枠線として自動的に含まれます。

枠線とレイヤーの内側のコンテンツの間にゆとりを持たせるには、枠線を適用したあとに、そのレイヤーに余白を適用することを検討してください。

メールクライアントはグラデーションの枠線に対応していません。Figmaの線にグラデーションの塗りを使うと、最終的なHTMLエクスポートではグラデーションの最初の単色で代替表示されます。

コンテンツレイヤーの間に区切り線を追加する ​

メールレイアウトのColumn内にあるコンテンツレイヤーの間に区切り線を追加する必要がある場合は、Emailify専用の区切り線要素を追加できます。「Column」レイヤーをクリックし、プラグイン下部にあるQuick Addのドロップダウンメニューから「Divider」項目を選択して、Add + ボタンをクリックすると、区切り線のレイヤーがColumnに挿入されます。

区切り線レイヤーをColumnに追加したら、レイヤーパネルでレイヤーをドラッグ＆ドロップして、どのレイヤーの間に配置するかを並べ替えられます。また、FigmaのレイヤープロパティパネルでレイヤーのHeightを調整してサイズを変えたり、FigmaでレイヤーのFillを任意の単色に変更して背景色を調整したりできます。

メールクライアントはグラデーションの枠線に対応していません。区切り線にグラデーションの塗りを使うと、最終的なHTMLエクスポートではグラデーションの最初の単色で代替表示されます。

区切り線レイヤーに内側の余白を追加する ​

Settingsパネルを開いた状態でメール内のEmailifyの区切り線レイヤーを選択し、Inner Paddingトグルを有効にして、選択した区切り線レイヤーに適用したい余白の値を入力すると、区切り線に内側の余白を任意で追加できます。

これにより、HTMLとして出力されるときに区切り線レイヤーの内側に「内側の」余白が追加されます。Column内のほかのレイヤーに影響を与えずに、特定のテキストレイヤーの余白の値を指定できます。

Mobile Paddingトグルを有効にして、選択した区切り線レイヤーに適用したい余白の値を入力すると、モバイルでEmailifyの区切り線レイヤーの余白を任意で上書きすることもできます。この設定は、HTMLメールをモバイルで表示したときにのみ反映されます。

レイアウト要素の背景に角丸を追加する ​

RowまたはColumnのレイアウト要素に（線なしで）背景の塗りを設定している場合は、レイヤーをクリックし、FigmaのCorner Radiusプロパティで角丸の値を設定すると、背景の角を丸くできます。

画像ベースのコンテンツについてご注意ください。デスクトップよりも小さい角丸をモバイルに適用すると、画像の全体を保持するため、画像は四角いJPGとしてエクスポートされます。これにより、モバイルで小さい角丸を適用できますが、角丸はPNGに焼き込まれません。そのため、CSSの角丸に対応していないOutlookでは、画像の角が四角く表示されます。

メールクライアントは枠線の角丸に対応していません。Figmaの線を含むレイアウト要素に角丸を使うと、最終的なHTMLエクスポートでは角の丸くない四角い枠線で代替表示されます。

線と角丸を併用する際の重要な注意事項 ​

角丸は、線も適用されているColumnレイヤーであれば確実に機能します。ただし、RowレイヤーはHTMLのテーブルであり、（残念ながら）テーブルは線の角丸に対応していないため、Rowレイヤーでは機能しません。

残念ながら、Outlookはどのバージョンでも角丸に対応していないため、設定にかかわらず、これらのクライアントでは常に四角い角で代替表示されます。

最良の結果を得るには、RowやWrapperではなく、線のあるEmailifyのColumnレイヤーに直接角丸を適用してください。ただし、どのバージョンのOutlookで表示しても角丸は表示されないことに注意してください。