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

公開日: 

誰でも簡単にレスポンシブな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編集していくなど工夫次第では出来そうな気がしますね。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

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

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

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑