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

公開日:  最終更新日:2022/08/27

誰でも簡単にレスポンシブなHTMLメルマガを作成できるWebサービス「BeeFree」
メルマガ配信からのショップへの集客は集客方法の1つとしてどれくらいの割合をしめていますか。テキストのメルマガも良いですが、実際なかなか見てもらえてないという状況が多いのではないでしょうか。そこで見た目も派手で開封率の高いHTMLメルマガを配信してみようと思うかもしれません。

以前の記事


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

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

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

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

「BeeFree」のサイトイメージ
BEE free | Free email editor to design responsive design messages

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

「BeeFree」のRichメルマガテンプレート
サイトにアクセスして、まずは予め用意されているテンプレートを選択します。

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

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

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

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

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

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

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

コンテンツパーツ

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

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

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

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

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

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

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

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

メルマガを作成するWebサービスですが、レスポンシブなページ作成する際にも使えるかもしれません。インラインCSSの記述になってしまうので、どうしてもソースが長くなってしまいますが、さくっと作成したい構造を作成してダウンロードしてからHTML編集していくなど工夫次第では出来そうな気がしますね。




Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク
PAGE TOP ↑