メルマガをレスポンシブ対応!メール用HTMLテンプレートを作成するフレームワーク「MJML」の使い方
MJMLのインストール方法
MJMLをコンピュータにインストールするには、npm経由かGitHubからダウンロードしてインストールします。
また、Atom、Sublime Textをお持ちの方は、プラグインという形でインストールすることも可能です。
1. npm
npmでのインストールは、下記のコマンドを実行するだけでOKです。
$npm install mjml
また、MJMLをHTMLに変換するには、次のコマンドを実行します。
$ mjml -r index.mjml -o index.html
npmでのコードの詳細は、Documentationから確認することができます。
2. GitHub
GitHubからインストールする場合は、こちらからダウンロードできます。
Mac・Linuxに対応していますが、残念ながら2017年2月1日現在Windowsには対応していません。
Atom・Sublime Textのプラグインとして
AtomやSublime Textのプラグインとしても配布されています。
Live Email Editorを使ってみよう
MJMLではLive Email Editorという、オンライン上でリアルタイムに確認しながら作業ができるエディターも用意されています。
このエディターはMJMLをインストールしなくても利用することができるので、*「ひとまず触ってみたい!」*という方はまずこのエディターをいじってみてください。
それでもコーディングが面倒な方はこちら
ここまでMJMLについて触れてきましたが、*「美しいHTMLメールの配信は魅力的だけれど、コーディング作業は面倒!」*という方もいるかもしれません。
そうした方は、下記のように、ドラッグ&ドロップでメールを作成することができるサービスもありますので、ぜひ活用してみてください。
Benchmark Email
http://www.benchmarkemail.com/jp/
Benchmark Emailは、毎月250通までは無料で配信することができるHTMLメール配信プラットフォームです。
件名のA/Bテストやセグメント配信も行うことができます。
blaynmail
http://blaynmail.jp/function/1.html
blaynmailの機能のひとつとして、HTMLメール作成機能が作成可能です。
空メール登録や効果測定を行うこともできます。
MailChimp
MailChimpは世界で最も利用されているHTML配信プラットフォームです。
残念ながら日本語対応はしていませんが、さまざまなカスタマイズ機能を備えています。
2,000購読者もしくは12,000配信数までは無料で利用できます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- オンライン
- オンラインとは、通信回線などを使ってネットワークやコンピューターに接続されている状態のことをいいます。対義語は「オフライン」(offline)です。 現在では、オンラインゲームやオンラインショップなどで、インターネットなどのネットワークに接続され、遠隔からサービスや情報などを利用できる状態のことを言う場合が多いです。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- A/Bテスト
- ホームページを作るときや何か商品を売りたいときに掲載する写真、あるいはデザインで迷ったときに、不規則ででたらめな順番でホームページや画像のデザインを変えて表示し、利用者がどちらをより多くクリックしたのか、より多く購入につながったのか、ということを試験できる技術やサービスまたは行為自体をA/Bテストといいます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング