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

Katz Ueno
Katz Ueno

世界で一番 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 アドベントカレンダーに戻る。