Emailifyのメールをモバイルでレスポンシブにするには？

EmailifyはレスポンシブなHTMLを自動でエクスポートします。さらに、個々のEmailifyレイヤーにモバイル用の上書き設定を使うことで、モバイルでの表示を細かく調整できます。まずデスクトップ用のメールフレームを作成し、エクスポートする前にプラグインのプレビューでモバイル版を確認してください。

モバイル用の上書き設定はどこで行いますか？

調整したいEmailifyレイヤーを選択し、プラグインのヘッダーにあるSettingsボタンをクリックして、そのレイヤーのモバイル用上書きの項目を使います。テキストレイヤー、Columnレイヤー、Rowレイヤー、Heroレイヤー、Wrapperレイヤー、画像レイヤー、ボタンレイヤーでは、選択したレイヤーの種類に応じて異なるモバイル用の項目が表示されます。

モバイルのレイアウトが別の幅で始まるのはなぜですか？

Emailifyは、FigmaのデスクトップのEmailifyフレームの幅に基づく、1つのレスポンシブ用ブレークポイントを使います。Emailifyフレームの幅が600pxの場合、モバイル用のスタイルは599px以下で適用されます。フレームの幅が広ければ、モバイル用のブレークポイントもそれに合わせて広くなります。

モバイル用のスタイル上書きを追加するには、デザイン内の任意のEmailifyレイヤーをクリックし、プラグインのヘッダーにあるSettingsボタンをクリックして、選択したレイヤーに必要なモバイル用のスタイル上書きを適用します。

たとえば、メール内のテキストレイヤーをクリックすると、モバイルでのフォントサイズ、行の高さ、文字間隔、段落間隔、パディング、配置を上書きできます。一方、メール内のRowレイヤーをクリックすると、パディング、カラム間のアイテム間隔、モバイルでカラムを縦に積み重ねるかどうか、さらに複数のカラムがモバイルでも同じ行に並ぶ場合の縦方向の配置を上書きできます。

モバイル用の上書き設定は、Emailifyプラグインのプレビュー機能で視覚的に確認できます。

メールのモバイル用ブレークポイント 。Emailifyからエクスポートしたメールには「ブレークポイント」が1つだけあり、Figmaのデスクトップ用フレームの幅に合わせて自動で設定されます。たとえばEmailifyフレームが600pxの場合、モバイル用のスタイルや上書き設定は599px以下で表示されます。

メールの幅は600px〜640pxにしておくのが一般的におすすめです。メールクライアントやアプリによっては閲覧パネルの幅が700px未満になることがあり、デスクトップのレイアウトではなくモバイル用のスタイルで表示される場合があるためです。

Settingsを開いてから、Figmaで同じ種類のEmailifyレイヤーを複数選択すると、設定を一括で適用できます。変更した設定は、選択したすべてのレイヤーに適用されます。