日本語対応 Mautic シンプルテーマ Blank JP と日本語メール作成のコツ

#

世界で一番 Mautic Meetup を主催している Katz です。Mautic アドベントカレンダー参加記事です。

Meetup を開催し続けると必然的に Mautic の知識が深まっていいですね。

 

Mautic Meetup Nagoya で紹介した内容の一部を紹介します。Mautic で使えるシンプルな日本語対応テーマ Blank JP を公開したことと、日本語メールを送る際の注意事項をまとめました。

 

Mautic テーマ Blank JP の特長

Mautic のデフォルトのテーマは英語に最適化されたものです。

ですので、簡単でも良いので、日本語フォントを選択し、スマホなどでも閲覧しやすいようなテーマを作成しました。

  • フォント指定日本語フォントに最適化
    • 指定順位: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif
  • スマホ & PC で最適化できるようにシンプルなレスポンシブ実装

もしも、不具合や改善の提案などございましたら、是非とも GitHub の Issue よりご提案 or Pull Request をいただけると幸いです。

 

Blank JP インストール方法

Blank JP のインストール方法です。

1. GitHub からダウンロード

こちらのリンクから ZIP ファイルをダウンロード

https://github.com/katzueno/mautic_theme_blank-jp/archive/master.zip

 

2. ZIP ファイルを準備

GitHub で生成される ZIP ファイルはフォルダが含まれています。Mautic のテーマファイルはフォルダを含めるのは NG なので、フォルダのない ZIP ファイルを再生成します。

2-1. ZIP ファイルを解凍します

2-2. フォルダの中身のファイルを再度選択し、ZIP ファイルを生成します

02_rezip.png

2-3. ZIP ファイルを「blank-jp.zip」という名前に変更します

03_rename.png

これで、テーマファイルをアップロードできる準備ができました。

 

3. Mautic 管理画面より、テーマをインストール

Mautic に管理権限のあるユーザーとしてログインします。

3-1. 右上の歯車ボタンをクリックし、メニューから「テーマ」をクリック

04_mautic_dashboard.png

3-2. 右上の「ファイルを選択」ボタンを押し、さきほどの ZIP ファイルを選び、「インストール」ボタンを押してアップロード

 05_install.png

3-3. リストの中に「Blank JP」が現れたらインストール完了

06_mautic_list.png

 

4. 使用方法

メール作成画面の選択から、Blank JP を選びます。

07_emailselection.png

 

ビルダーを起動すると、日本語フォントが適用されたメール作成画面が現れます。

08_compose.png

 

それでは、日本語に最適化されたテーマファイルで Mautic ライフをエンジョイして下さい!

 

Mautic でメールを送る際の注意点

Mautic はアメリカで作られたツールですので、日本語や日本のインターネット事情に考慮されて設計されていない部分があります。

そのため、日本で使うために少し気をつける必要があります。

※この記事は2017年12月時点のお話です。

Point 1. ドメインの SPF 設定はきちんと行う

詳しい説明は省きますが、Mautic から送られるメールがきちんと迷惑メール判定されないように、SPF の設定はきちんと DNS で行いましょう。DKIM なども設定できるとさらに良いです。

 

Point 2. 携帯メールアドレス配信の制約を理解しよう

Mautic がスマホユーザーなど、日本の softbank.ne.jp、ezweb.ne.jp 向けのユーザーがいる場合、HTML メールを送ることが出来ません。2017年時点で、下記のような制約があります

  • Docomo のスマホメールソフトだと全角34文字以上だと変なスペースが入ってしまう
  • softbank.ne.jp や ezweb.ne.jp は HTML メールではなく、プレインテキストメールのみしか見れないので、メール作成画面の「詳細設定」タブをクリックし、必ず「プレーンテキスト」版を作成する。
    09.plainemail.png
  • もしも、クーポンなど画像をどうしても添付したい場合は、Mautic 左メニューの「コンポーネント」-「アセット」からファイルをアップロードした後、メール作成画面に戻り、プレーンテキスト作成の上にある「添付」より選ぶことで添付ファイルとして送付が可能。
    10.attachment.png
    ※ 添付ファイルはアセットに事前にアップロードしないといけないことに気づくのに時間がかかり、ハマりました。

 

Point 3. Outlook などアプリ内で画像を表示させるためには BASE64 埋め込み設定が必要

Outlook や Gmail などのスマホアプリでメールを閲覧する際、画像がメールに埋め込まれていない場合、表示されない場合があります。それは、画像が Mautic のサイト上などに存在していますが、セキュリティの関係で、メーラーからインターネット上にファイルを読みに行かないからです。

そんな時は、下記の設定を行うことで、画像をメールに埋め込むことが出来ます。

  1. Mautic に管理者ユーザーとしてログイン
  2. 右上の歯車ボタンをクリックし「設定」ページを訪問
  3. 左中メニューより「メール設定」をクリック
  4. 「メッセージ設定」より「埋め込み画像をBase64に変換します」を「はい」に
    11.emailsetting.png

※このオプションを使うと、送信メールに画像が含まれてしまうので、メールサイズが大きくなり、メール配信サーバーにも負担がかかります。メールの中の画像サイズ、個数を1〜2個など最小限に抑えましょう。合計80~100KB以下などが好ましいです。専用サーバー、バッチ配信の徹底、 SendGrid、Amazon SES などのメール配信専用サービスを使うことを考慮しましょう。

 

Point 4. プレーンテキスト用に購読解除設定の URL をきちんと表示できるようにしよう

Mautic が送るメールに、メール購読解除の URL を入れることは、「特定電子メールの送信の適正化等に関する法律」などでも立派に罰則があります。

ただ、Mautic では、標準で HTML メールのみしか考慮されていません。

下記のような文章にすると、HTML でも、プレーンテキストでもよろしく表示されますので、Mautic の設定をよろしくされるとよいかと思います。

  1. Mautic に管理者ユーザーとしてログイン
  2. 右上の歯車ボタンをクリックし「設定」ページを訪問
  3. 左中メニューより「メール設定」をクリック
  4. 「購読解除設定」の「{unsubscribe_text} トークン用のテキスト」に下記の文章を挿入
  5. メール作成時に必ず「{unsubscribe_text}」をメールの最後に挿入する
本メールの配信停止をご希望の方は <a href="|URL|">こちら</a>をクリック
|URL|

 

以上です。

それでは、効率よく、確実に Mautic でメールを送ることに気をつけてみましょう。

Mautic アドベントカレンダーに戻る。


コメント欄を読み込み中