実装可能なデザインがわからない… 実は難易度が高いHTMLメールのコーディング
GmailやOutlookをはじめとした無数のメーラーの挙動の違いや、Webブラウザとは異なるCSSの制約など、実はHTMLメールの実装には多くの知見を要します。例えばレイアウトにはFlexboxを使用できずテーブルタグを使う必要があるなど、Webサービスの実装方法と大きく異なるメールのコーディングは多くのエンジニアを悩ませます。
例えばWeb開発で便利なflexboxはWindowsのOutlookでは動作しない。
一方でデザイナーの立場からすると、メールのデザインはユーザー体験の重要な要素となるため、見た目にもこだわって作りたいもの。では、実装上の制約に従いながらも多種多様なメーラーで問題なく表示することができるメールはどのようにデザインすることができるのでしょうか？
Figmaで作ってHTML出力できる『Marka Email Generator』
実際のところ、多種多様なメーラーの挙動に対応したHTMLメールをゼロから作るのは実装やテストにかかるコストを考えても、もはや現実的ではないと言っ ても過言ではありません。
そんなときに便利なのが、Figmaのプラグイン『Marka Email Generator』です。なんと、Figma上でメールをデザインし、各種メーラーに対応したHTMLで出力してくれるという便利なツールです。
オートレイアウトでデザインを作れば基本OK
『Marka Email Generator』では、Figmaのオートレイアウト をもとに各種メーラーに対応したテーブルレイアウトのHTMLを出力してくれるため、デザイナーはいつも通りFigma上でデザインを準備することができます。
プラグインがデフォルトで提供しているコンポーネントをもとに微調整する形でも実用的なメールデザインを作ることができますが、適切にオートレイアウトを設定すれば完全にオリジナルのコンポーネントを使ってデザインしても、問題なく各種メーラーに対応したHTMLとして出力することができます。
『Marka Email Generator』のコンポーネントを組み合わせて作れるメールデザイン
見落としがちなダークモードでの表示も確認できる
『Marka Email Generator』にはプレビュー機能が搭載されており、異なる画面サイズでのメールの表示を確認することができます。その他の便利な機能として、ダークモードでの表示もプレビュー確認することができます。
メールをデザインする際に見落としがちな点として、ダークモードでの表示があります。iPhoneをダークモードで使用している場合など、ユーザーが表示したメールがダークモードで表示されるケースがあるのです。特にGmailのダークモードでは、メーラー側が自動で色を変換してしまうため、メールのデザインがサービス側が意図しないものになりやすいのです。この表示をプレビュー画面で確認することができるのも便利です。また、『Marka Email Generator』では、それぞれのオブジェクトにダークモード表示の際のカラーを設定することも可能です。
余分なフレームなどレイアウト崩れの原因を指摘してくれる
Issuesダブでは、HTMLメールのレイアウト崩れの原因となるようなデザイン上の問題を指摘してくれます。Figmaでデザインしていると、気づかないうちに不必要なフレームが残ってしまうことも多いので、全体のデザインが完了したらこのIssuesタブを確認すると良さそうです。
指摘された問題はプラグイン内で簡単に解決することもできます。
無料版では15回までのHTMLエクスポートが可能
HTMLとして出力したメールデザインは、MailChimpのテンプレートとして使用したり、エンジニアにシステムに組み込んでもらったりといった使い方ができます。
『Marka Email Generator』の無料版では15回までのHTMLエクスポートが可能となっており、機能を試したりいくつかのメールデザインを作るには十分な印象です。15回以上エクスポートを行いたい場合は、月額$36の有料プランに加入する必要があります。継続的にメールのデザインを行うようなケースでは、検討してみても良さそうですね。
