Foundation for EmailsFrameworkを使用してレスポンシブメールデザインを作成する方法

公開: 2017-06-26

レスポンシブメールデザインを簡単に作成できるマーケティングツールはたくさんあります。重要なのは、メールの外観をより細かく制御したい場合があるということです。そのための最善の方法は、メールを最初から設計することです。 Foundation for Emailsなどのフレームワークを使用すると、優れた妥協点が得られます。あなたは最初から一つ一つの部品を設計する必要はありませんが、あなたはどのように、いつ、どこでそれらを使用するを完全に制御を得ますか。

この記事では、最初に電子メールフレームワークとは何か、そしてそれらがどのように役立つかについて説明します。次に、Foundation for Emailsと、それを使用して独自のカスタムのレスポンシブメールキャンペーンを作成する方法について説明します。仕事に取り掛かろう！

電子メールフレームワークとは何か（そしてそれらがどのようにあなたがより良い電子メールを作成するのを助けることができるか）

フレームワークではまだコーディングが必要ですが、メールの場合はプロセスが非常に簡単です。

一般に、フレームワークは、特定のタイプの製品の開発を支援するために設計されたプラクティス、ファイル、およびコードをまとめたものです。それらは、毎回車輪の再発明を行わないようにすることで、複雑なプロジェクトをより迅速に作成するのに役立つコードの構成要素と考えてください。

電子メール用のフレームワークもあります。それがこの記事で説明する内容です。いくつかの利点を調べてみましょう。

事前に作成された要素は、電子メールをより迅速に設計するのに役立ちます。 現在、ほとんどのメールには、ボタンやメニューなど、画像やテキスト以外の要素が含まれています。これらの要素を含めるには時間がかかる場合がありますが、フレームワークを使用すると、要素を即座に挿入してカスタマイズできます。
箱から出してすぐに反応します。 ますます多くの人々がモバイルデバイスに目を向けるにつれて、あなたはあなたの電子メールが彼らの画面にうまく表示されることを確実にする必要があります。最新のフレームワークのほとんどはデフォルトでレスポンシブです。つまり、心配することが1つ少なくなります。
テンプレートは、デザインを開始するのに役立ちます。 最新の電子メールフレームワークの多くには、キャンペーンをすばやく作成するのに役立つさまざまなテンプレートが含まれています。

ご覧のとおり、ここでの共通のテーマは、フレームワークを使用すると時間を節約できるということです。プロジェクトを最初からコーディングしたい場合はたくさんありますが、より高い品質でより速く物事を成し遂げることができるフレームワークを使用する価値があります。

Foundation for EmailsFrameworkの紹介

Foundation forEmailsのホームページ。

先に進む前に、オンラインで利用できる2つのFoundationフレームワーク（Foundation forSitesとFoundationfor Emails）があることに注意することが重要です。この記事では、後者に焦点を当てます。主なセールスポイントは、その応答性の高いグリッドです。このタイプのシステムは革新的ではありませんが、Foundationの人気はその使いやすさに基づいています。

フレームワークの選択はかなり簡単で（コーディングの経験がない場合でも）、2つのバージョンから選択できます。1つはカスケードスタイルシート（CSS）に基づいており、もう1つはSassに基づいています。当然、Sassバージョンでは、CSSスタイリングを繰り返す必要がないため、さらに時間を節約できますが、Node.jsにある程度精通している必要があります。

最後に、Foundation for Emailは、ボタンやメニューなどの多くの「パターン」を提供して、作業をさらに簡単にします。より多くの時間を節約するために、最初からレイアウトを設計する代わりにテンプレートを使用することもできます。

主な機能：

レスポンシブグリッドを使用して、最新のメールキャンペーンを作成します。
フレームワークのCSSバージョンまたはSassバージョンのいずれかを提供します。
パターンを利用して、共通の要素をメールにすばやく追加できます。
レイアウトを使用して、電子メール作成プロセスをさらに合理化します。

価格：無料| 詳しくは

Foundation for Emailsを使用してモダンなデザインを作成する方法（4つのステップで）

前述したように、Foundation forEmailには2つのバージョンがあります。このセクションでは、セットアップに必要な作業が少ないため、CSSバリエーションを使用します。さらに、最終結果は同じように見えるはずです。変更されるのは、そこにたどり着く方法だけです。

Sassバージョンの動作を確認したり、その使用方法について詳しく知りたい場合は、このすばらしいチュートリアルから始めることができます。

ステップ1：Foundation for EmailFilesをダウンロードする

まず、Foundation for Emailの[はじめに]ページに移動し、 CSSバージョンの小見出しの下にある[スターターキットのダウンロード]ボタンをクリックします。

Foundation for Emails GettingStartedページ。

ファイルを取得したら、ファイルを解凍して、その内容を新しいフォルダーに抽出します。この段階で、フォルダーにはindex.htmlファイルと2つのサブフォルダーが含まれている必要があります。1つはCSS用で、もう1つはテンプレート用です。

今のところ、お気に入りのテキストエディタを実行し、それを使用してindex.htmlファイルを開きます。かなりむき出しになっているはずですが、すぐに修正します。

ステップ2：グリッドシステムをよく理解する

Foundation for Emailの応答性は、その柔軟なグリッドシステムに基づいています。メールを最初から作成する場合は、独自のグリッドを作成してメールのセクションをセグメント化することをお勧めします。そのために、コンテナ、行、列の3つの異なるコンポーネントを使用します。

テキストエディタ内でFoundationのindex.htmlファイルを開き、本文セクションまで下にスクロールします。

<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<!--  Your grid goes here  -->          
</center>
</td>
</tr>
</table>
</body>
</html>

ご覧のとおり、メールの本文には、ここでは触れないプリセットテーブルが含まれています。代わりに、 <！–グリッドがここに表示される–>と表示されるセクションに独自のグリッド要素を追加します。コンテナに使用する必要のあるコードから始めましょう。

<table class="container">
<tr>
<td></td>
</tr>
</table>

それでは、そこに行を追加しましょう。

<table class="row"> <tr> <th></th> </tr> </table>

最後に、その行を列に分割できます。

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="expander"></th>
</tr>
</table>

各行は最大12列で構成されていることに注意してください。上記のコードは、モバイルデバイス（ small-12 ）などの小さな画面では12列全体を使用してコンテンツを表示する必要があるが、デスクトップ（ large-6 ）では6つしか使用しないことを電子メールクライアントに通知します。

問題は、メールが大画面に表示されている場合、6つの空の列があるため、修正するために2番目のテーブルを追加する必要があることです。

<table class="row">
<tr>
<th class="small-12 large-6 first columns">
Column One
</th>
<th class="small-12 large-6 last columns">
Column Two
</th>
<th class="expander"></th>
</tr>
</table>

ご覧のとおり、両方の列は基本的に同じです。ただし、最初の列と最後の列の2つの異なるクラスがあります。これらは、行の最初と最後の列を電子メールクライアントに通知し、その間の列はそれらを使用する必要はありません。

index.htmlファイルをブラウザで開くと、次のように表示されます。

基本的なグリッドシステムの例。

はい、それはかなり裸ですが、メカニズムはこの段階で明らかになるはずです。各電子メールには必要な数の行を含めることができ、各行に最大12列を含めることができます。今のところ、好きなレイアウトが見つかるまでグリッドシステムをいじり続け、要素の追加を開始するまで、テキストプレースホルダーを使用してそれらを識別します。

ステップ3：メールにコンポーネントを追加する

Foundation for Emailは、多くのコンポーネントでパックされており、最も一般的に使用されるのは、ボタン、背景画像、および小見出しです。それらは非常に単純なので、順番に見ていきましょう。ボタンを追加するには、1つ以上の列内で次のコードを使用する必要があります。

<table class="button tiny success">
<tr>
<td>
<table>
<tr>
<td><a href="#">The text of your button</a></td>
</tr>
</table>
</td>
</tr>
</table>

このコードは、背景が緑色のシンプルな小さなボタンをメールに追加します。ここで重要な要素は、小さな成功クラスです。 1つ目はボタンのサイズを管理し、2つ目はボタンの色を管理します。ここで利用可能なすべてのクラスを追加する代わりに、ボタンに関するFoundationの公式リソースにリンクして、自由にそれらを閲覧できるようにします。

それでは、背景画像に移りましょう。 ラッパークラスを使用して行の幅全体を占めるようにし、CSSを使用して特定の背景を割り当てる必要があるため、これらは少し注意が必要です。

<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
Your content
</td>
</tr>
</table>

最後になりましたが、小見出しについて話しましょう。これらは最も単純なものです。必要なのは、必要なタグでテキストをラップすることだけです。

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>

それはそれと同じくらい簡単です！これらの3つの要素を使用するだけで、見栄えの良いメールを作成できます。もちろん、その秘訣は、CSSを使用して心ゆくまでスタイルを設定することです。これにより、最終ステップに進みます。

ステップ4：CSSを使用してメールのスタイルを設定する

一部の電子メールクライアント（Microsoft Outlookなど）は、HTMLファイルから一部のスタイルタグを削除します。これは、電子メールが問題なくレンダリングされるようにするため、および潜在的なセキュリティの脅威を取り除くために行われます。ただし、その結果、CSSをHTMLに直接追加（またはインライン化）しない限り、電子メールはかなり退屈に見えます。

そうすれば、コンテンツとそのスタイルの両方が1つのファイルとして読み込まれ、ほとんどの最新の電子メールクライアントで完全に機能するはずです。 CSSがインライン化されたHTML要素は次のようになります。

<table class="wrapper" align="center"><tbody><tr><td class="wrapper-inner" style="padding:20px">content</td></tr>

これは少し面倒になる可能性があるため、HTMLファイルとCSSファイルを別々に処理してから、FoundationInlinerなどのツールを使用してそれらを組み合わせることをお勧めします。コードを貼り付けてボタンをクリックするだけで、後は自動的に処理されます。

インライン化されたHTMLファイルを取得したら、サブスクライバーに送信する前に、電子メールマーケティングツールを使用してテストすることができます。これは常に良い考えです。

結論

機能的でレスポンシブなメールを作成する方法はたくさんあります。ただし、柔軟性を求めている場合は、Foundation forEmailsなどのフレームワークを使用することをお勧めします。事前に構築されたコンポーネントを使用して最初から電子メールを設計するか、テンプレートを使用してプロセスを高速化することができます。何を選択しても、メールの作成に費やす時間を大幅に削減できます。

要約すると、Foundation forEmailsを使用して最新のEメールを作成するために必要な4つのステップは次のとおりです。

フレームワークのファイルをダウンロードします。
グリッドシステムをよく理解してください。
メールのコンポーネントを使用します。
CSSを使用してメールのスタイルを設定します。

Foundation for Emailsフレームワークの使用方法について質問がありますか？ 下のコメントセクションで質問してください！

Faberr Ink /shutterstock.comによる記事のサムネイル画像。