<p class="thumb"><img src="http://web-marketing.zako.org/images/2017/06/topol-io.jpg" alt="" width="800" height="417" class="alignnone size-full wp-image-31079" /></p>
<p>ソーシャルメディアが台頭してきたとはいえ、まだまだメールもコミュニケーションの手段として主流のひとつであると思います。</p>
<p>そして、そのコミュニケーションを取るデバイスがスマホ中心となるなか、メールもHTMLメールのような、よりリッチなもので伝えやすくなっているかと思います。</p>
<p>そのHTMLメールを、より作りやすくしてくれる。今回はそんなツールをご紹介したいと思います。</p>
<!--more-->

<h3 class="header-label">HTMLを手軽にデザインできる「Topol.io」</h3>
<p>「<a target="_blank" href="https://topol.io/">Topol.io</a>」は、<strong>レスポンシブのHTMLメールを、テンプレートをもとに作成</strong>することができるサービス。</p>
<p>リッチテキストエディタで、パーツをドラッグ・アンド・ドロップしながら追加し、見た目を手軽に編集することができます。</p>

<h4 class="tips">テンプレートからHTMLメールを作成</h4>
[caption id="attachment_31078" align="alignnone" width="800"]<img src="http://web-marketing.zako.org/images/2017/06/topol-io-template.jpg" alt="" width="800" height="515" class="size-full wp-image-31078" /> HTMLメールのテンプレート一覧。[/caption]
<p>ログインすることなく、トップページからテンプレートを選択することでHTMLメールの編集を開始することができます。</p>
<p>テンプレートにはアパレルのセールやデバイスのリリース、イベントの告知などのテイストが用意されています。</p>

<h4 class="tips">リッチテキストエディタで手軽に編集</h4>
[caption id="attachment_31077" align="alignnone" width="800"]<img src="http://web-marketing.zako.org/images/2017/06/topol-io-editor.jpg" alt="" width="800" height="603" class="size-full wp-image-31077" /> エディタでHTMLメールをプレビューしながら編集。[/caption]
<p>テンプレートを選択すると、すぐにHTMLメールのエディタが開きます。このエディタを使ってHTMLメールを作成していきます。</p>
<p>それぞれ要素を選択すると左側に設定画面が開き、レイアウトや画像の変更などと行ったことをおこなえます。</p>

[caption id="attachment_31076" align="alignnone" width="800"]<img src="http://web-marketing.zako.org/images/2017/06/topol-io-text.jpg" alt="" width="800" height="219" class="size-full wp-image-31076" /> テキストを編集。[/caption]
<p>テキストはプレビューの部分をクリックすることで編集メニューが開き、その場で文章を変えていくことができます。</p>

[caption id="attachment_31075" align="alignnone" width="800"]<img src="http://web-marketing.zako.org/images/2017/06/topol-io-preview.jpg" alt="" width="800" height="603" class="size-full wp-image-31075" /> プレビュー画面でスマホサイズにしたもの。[/caption]
<p>プレビュー画面では、PC、スマホのサイズでそれぞれ確認することができます。</p>

<h4 class="tips">HTML形式でダウンロード</h4>
[caption id="attachment_31074" align="alignnone" width="800"]<img src="http://web-marketing.zako.org/images/2017/06/topol-io-html.jpg" alt="" width="800" height="461" class="size-full wp-image-31074" /> ダウンロードしたHTMLファイル。[/caption]
<p>作成が完了したらHTML形式でダウンロードします。保存をしておくと、編集画面のURLを控えておくことであとから追加編集することもできるようです。</p>

<p>興味がある方は<a target="_blank" href="https://topol.io/">Topol.io</a>へどうぞ。</p>
