誰でもレスポンシブなHTMLメルマガを作成できるWebツール「BeeFree」

公開日：2016/01/21 最終更新日：2022/08/27

メルマガ配信からのショップへの集客は集客方法の1つとしてどれくらいの割合をしめていますか。テキストのメルマガも良いですが、実際なかなか見てもらえてないという状況が多いのではないでしょうか。そこで見た目も派手で開封率の高いHTMLメルマガを配信してみようと思うかもしれません。

以前の記事

ネットショップ運営の気になる備忘録

HTMLメルマガ作成の参考になるサイト

HTMLメルマガ作成に使えるテンプレート配布サイトについて紹介しました。

配布サイトで良さ気なテンプレートをダウンロードしたとしても、HTMLを編集する必要があります。

HPビルダーなどHTML編集できるソフトがあれば編集できそうですが、ソフトがなければテキストエディタ等で編集する必要がでてきてしまいます。タグの編集は少しハードルが高くなってしまいます。そこで、本日はホームページビルダーのように直感的にHTMLメルマガの作成できるWebサービスを紹介します。

集客に使えるHTMLメルマガの作成がドラッグ＆ドロップで簡単にできる「BeeFree」

BEE free | Free email editor to design responsive design messages

用意されているテンプレートから選択

サイトにアクセスして、まずは予め用意されているテンプレートを選択します。

テンプレートは「Rich template」「Basic template」と別れており、Basicは枠組みだけ用意されているテンプレートでRichはサンプル画像、テキストなど予めセットされているかの違いです。Richを選択すれば、全体の完成イメージがつきやすいかもしれません。

完成したサンプルを元に内容を変更していくか、ある程度の構造、配置コンテンツが決まった状態から開始するかの違いです。

ドラッグ＆ドロップで直感的にレイアウト・コンテンツを編集

テンプレートを選択すると、画面が切り替わります。ここでは、「e-commerce」を選択してみました。

画面左側がページを作成していくデザインエリアになります。右側には、配置できるコンテンツパーツ、構造エリアが並んでいたり、デザインエリアで選択したパーツに対する設定を行うエリアになります。

構造部分もあらかじめパーツとして選択することができます。これらをドラッグして挿入したり、順番を入れ替えたりすることができます。並べた構造の各エリアにコンテンツを配置していきます。

コンテンツとして配置できるパーツとして「TEXT」「IMAGE」「BUTTON」「SOCIAL」といったパーツなどがあります。各パーツごとに色、サイズなどの見た目の設定やリンク先URLといった設定ができるようになっています。

プレビュー機能でパソコン・スマホでの見た目をチェック

デザインエリアでは、配置しているパーツを選択すると編集していくことが可能です。上図は、「TEXT]のパーツを選択して編集しているところです。テキスト関連のツールバーも表示されるので編集が簡単に行えます。

土台として配置されている構造パーツの上にコンテンツパーツが配置されています。構造パーツごとドラッグ＆ドロップで並びを変更したり、パーツのドラッグ＆ドロップでコンテンツを入れ替えたりすることも直感的な操作でできます。

プレビュー機能でパソコン・スマホでの見た目をチェック

作成途中でプレビュー機能を使えばパソコン、スマホでの見た目を確認することができます。

作成が完了したら右上にある「save」を選択すると、zip形式で作成したページをダウンロードすることができます。注意点として一度「save」を選択すると編集に戻ることができないので、しっかり完成してから「save」ボタンを選択してください。

作成したページはHTMLファイルとしてダウンロード可能、スマホページ作成ツールとしても使えるかも？！

「save」を選択すると作成したページのダウンロードが開始されます。HTMLメルマガを作成したことがある方ならご存知かもしれませんが、メルマガ用のHTML作成時には、見た目を調整するCSSの記述は、各タグにstyle=”cssの記述” というインラインCSSで記述するのが良いとされており、ダウンロードしたファイルのソースも確認するとインラインCSSになっています。