メールマーケティングラボは、メールを使ったコミュニケーション、メールマーケティングの効果をあげるための様々な情報を発信します。
無料HTMLエディタ「BEE free」使ってみた≪前編≫

無料HTMLエディタ「BEE free」使ってみた≪前編≫

みなさんはHTMLメールをどのように作成されていますか?

HTMLのソースから直接書く場合もあれば、HTMLメールが簡単に作れるエディタツールを使って作成することもあると思います。

この、HTMLメールのエディタ。実は海外製品で、非常に使いやすくオシャレなHTMLメールが作成でき、しかも無料で使えるものもあるんです。

そこで今回は、『BEE free』というHTMLエディタツールを実際に使ってみたレポートを、前編・後編の2回に分け、前編ではBEE freeを使ったHTMLメールの作成方法、後編ではBee freeで作成したHTMLデータを使って、メール配信システムから配信する方法をご紹介します!
2016-10-11_09h20_31

 

BEE free [Mailup社]

BEE free はブラウザを介してインターネット上で操作する、クラウド型のHTMLエディタツールで、パソコンへのインストールなどは一切必要なく、インターネットがつながる環境であれば誰でも利用できるWEBツールです。

私自身、このツールの存在こそ知っていたものの、実際にツールを利用してHTMLメールを作成したことはありませんでしたが、今回利用してみて

めちゃくちゃ使いやすい

というのが正直な感想です。

ではさっそくBEE freeを使って、HTMLメールを作成してみましょう。
※本記事の画像は2016年10月現在のBee freeの画面になりますので、実際の画面と異なる場合があります。あらかじめご了承くださいませ。

Chapter.1 画面構成

BEE freeのサイトへアクセスすると、すぐにHTMLメールのスタイルを選択する画面が出てきます。

BEE free  top画面

「Rich templates」と「Basic templates」の2つのスタイルがありますが、どちらでもHTMLメールが作成でき、さほど大きな違いはないので、今回は「Rich templates」「simple」のテンプレートを使ってみたいと思います。

テンプレートを選択すると作成画面が現れます。

BEE free 作成画面top

左側に作成画面と 右側にメニュー欄が配置されています。

BEE free  コンテンツ

右側のメニュー欄には

≪CONTENT(以下コンテンツ)≫
・TEXT(テキスト)
・IMAGE(イメージ)
・BUTTON(ボタン)
・DIVIDER(ディバイダー)※区切り線
・SOSIAL(ソーシャル)
・HTML

≪STRUCTURE(以下ストラクチャー)≫
※HTMLメールを構成するブロック・枠組みのこと

の選択画面があり、右側のコンテンツやストラクチャーを、左側の作成画面へドラッグ&ドロップすることでメールを作成していきます。

今回は、デフォルトで設定されてるテンプレートを編集して、メールを作成していきます。

Chapter.2 背景色の変更

HTMLメールの背景色を変えたい場合は、作成画面内の色を変更したいストラクチャー(ブロック)を選択し、

BEE free  ストラクチャ編集

右側のメニューで、変更したい色を選択すると、

BEE free   ストラクチャ色変更

背景の色が変更!動作もサクサクと動き、ストレスがありません。
BEE free ストラクチャ色変更後

Chapter.3 画像の挿入

デフォルトで設定されている画像を、お手持ちの画像と差し替えたい場合は、作成画面内の差し替えたい画像を選択し、

BEE free   gazou

「Change Image」 と 「Edit Image」 が出てくるので「Change Image」を選択。

BEE free  画像選択

お手持ちの画像データを、BEE freeアプロードする画面が出てくるので、画像を所定の場所へドラッグ&ドロップ。

BEE free  画像選択3

BEE free  画像選択4

これでBEE freeに画像が保存されたので、画像を選択して挿入すれば、画像の差し替えが完了します。

BEE free  画像差し替え

Chapter.4 ボタンの挿入

「記事を読む」や「詳しくはこちら」といったボタンを、メールに入れたい場合は、コンテンツ内から「BUTTON」を選択し、作成画面へドラッグ&ドロップ

BEE free  ボタン設置

作成画面内のボタンを選択後、右側に出るボタン編集メニューで、リンク先のURLや、ボタンの色などを指定することができます。

BEE free  ボタン設置3

こんな感じでボタンの設置ができました。

BEE free  ボタン完成

Chapter.5 ストラクチャーの挿入

HTMLメールに枠組みを新たに追加したい場合は、右側のストラクチャーメニューからお好みのストラクチャーを選択し、ドラッグ&ドロップ

BEE free  ストラクチャのドラック

ストラクチャーが挿入されます。BEE free  ストラクチャのドラック2

そして、挿入したストラクチャーに表示させたいコンテンツを、コンテンツメニューから選びます。

BEE free  ストラクチャのドラック3

今回は3つの画像を入れたいので、前述した、画像の挿入方法と同様に、画像の挿入を行います。

BEE free  ストラクチャのドラック4

ストラクチャは全部で6種類あるので、組み合わせ次第でさまざまなバリエーションのHTMLメールが作成できそうです!

Chapter.6 SNSアイコンの挿入

メルマガからSNS(ソーシャルネットワークサービス)のページへ推移させる時に、よく見るSNSのアイコンも、BEE freeはしっかり対応しています。

右側のメニューから「SOCIAL」を選択し、作成部分へドラッグ&ドロップ。

BEE free  SNS0

「Facebook」「Teitter」「Google Plus」3種類のアイコンが挿入されます。

BEE free   SNS00

3種類以外のSNSのアイコンを挿入したい場合は、右側のメニューの「Add new icon」を選択し

BEE free SNS000

表示させたいSNSのアイコンを選択すると

BEE free  SNS3

こんな感じでアイコンが挿入されます。
BEE free  SNS4

それぞれのSNSページのリンクURLを貼ることはもちろん、アイコンのスタイルや配置する幅の調整も可能です。

Chapter.7 プレビュー&テストメール配信

ひと通りの作成が完了したら、プレビューを確認してみましょう。
画面左上の「Action」から「Preview」を選択すると

BEE free  プレビューwaku

PCでのHTMLメールの見え方はもちろん、モバイル(スマートフォン)でのプレビューも確認することができます。
※スマートフォンの端末によってHTMLの見え方は変わりますので、このプレビューは参考程度にするのが良いでしょう。

プレビュー

テストメールを配信してみたい場合は「Send test」から配信先のメールアドレスを登録し、テストメールを送ることもできます。

BEE free  プレビュー

テストメール配信まで完了したら、画面右上の「SAVE」 ボタンを押して、作成したHTMLメールのソースをダウンロードして完了です。

BEE free 保存

この続きは【後編】で!

Bee freeを使ったHTMLメールの作成までのご紹介でしたが、いかがでしたでしょうか。

画面がすべて英語表記のため、少々とっつきにくい印象はありますが、本記事をご覧いただきながら一度操作を覚えてしまえば、イマ風なフラットデザインのHTMLメールが、簡単に作れてしまうと思います。

次回の【後編】はここで作成したHTMLメールのソースを使って、メール配信ができるまでの方法をご紹介します!お楽しみに。





メール配信システム「配配メール」



The following two tabs change content below.

Ryo Noguchi

Mail​ Marketing​ Lab.(メルラボ)編集部所属。花屋、音楽制作会社を経て、法人向けクラウドサービスのマーケティングを担当。得意技はEQ処理とボーカルピッチ修正。
Loading Facebook Comments ...
Scroll To Top