00:00
それでは、HTMLデザインメルマガのはじめ方ということで、こちらの動画を通して解説を進めていきたいと思います。
では、まずこちらのスライドを見ていただきたいのですが、まず、HTMLデザインメルマガのメリットと効果ということで、解説を進めていきます。
まず、そもそもこのHTMLって何ということで、簡単に触れておきますと、皆さんが好みにするウェブページのデザインに使われるプログラミング言語になります。
プログラミング言語と言ってもすごくシンプルなものなんですが、こちらがウェブページの骨組みとなって構成されているといったものになっています。
このHTMLメルにすることで、写真や画像を使い、ごったデザインでメルマガを配信できます。
なので従来のテキストメールとは少し違ったメールとなっています。
テキストメールとHTMLメールと違いによって疑問に思う方もいるので、そちらも触れておきたいと思います。
テキストメールのメルマガの場合ですと、言葉だけ、テキストだけで情報を伝えなければなりません。
それってすごく難しいと思うんですが、今までですと画像とかプログ記事のような見出し、そういったもので区切れなかったので全部テキストで伝えていかなければならなかったんですが、
それがHTMLメールの場合、情報を視覚的に伝える画像や見出しが配信できる。
あとはクリックを流すボタンなどを設置することができる。
なのでテキストに比べて伝えられる情報量が圧倒的に違うといったものになっています。
さらにデータ計測も可能となっています。
開封率、到達率、クリック率、こういったものがデータ計測することができます。
なので開封率、この数値を見ていただくことで、前回より数値が低くなった場合、内容に面白くないコンテンツだったのか、不備があったのかという判断基準になります。
クリック率などもそういった感じで見ていただければと思います。
実際にHTMLメールの配信ツールということで、どのツールを使っていくかという話なんですが、
こちらは無料で使えるメールチームというのをこの早がお勧めしています。
メールチームをお勧めする理由としましては、ドラッグ&ドロップ、簡単な操作でHTMLメールを作成できる。
03:04
先ほどの開封率とクリック率といったレポート機能、そちらが充実しています。
ほとんど無料で使えることができます。
ステップメールとかそういったものが無料で使えることができます。
ある程度制限はあるんですが、登録アドレスが2000件以内、月のメール配信数が12000通以内、
といってもスモールビジネスならこれぐらいなら無料で余裕を持って使えるかなと思います。
月に12000通を超えることはそうそうないと思うので、
無料でもステップメールは余裕を持って使える、これが一番お勧めしている点になっています。
では実際にメールチームの画面を見ていきたいと思うんですが、
こちらがメールチームのトップページとなっています。
このように海外のツールなのでどころどころほぼ英語なんですが、
Google Chromeのお使いの場合ちょっと補足で、
この補助ツールとして日本語翻訳機能があります。
右クリックしていただいて日本語に翻訳です。
これちょっとおかしな日本語にはなってしまうんですが、ニュアンスをつかめるという意味で活用できます。
1点、メールの編集中だけはこの日本語機能にしない方がいいです。
表示がおかしくなってしまうことが確認できましたので、
これを設定画面とかこの設定になるのかなというときだけにしておいてください。
この原文ページの表示ですね。
こちらをクリックすると元に戻ります。
こちらですね。これをクリックすると元に戻ります。
では早速、HTMLメールのテンプレートを作成していこうと思います。
なのでこのメニュー画面からテンプレートをクリックしてください。
過去に作ったものが一覧となって表示されるわけなんですが、
今回は1から作りたいと思いますので、
クリエイト・テンプレートをクリックしますとこのような画面が表示されます。
その中からベーシックの中の1からのこちらをクリックしてください。
これが実際の編集画面になります。
まずはデフォルトに配置されている要素を削除しながら、
編集方法なども軽く、基本的な操作などを軽く説明していこうかなと思います。
06:08
まずこちらのゴミ箱のマークを押すと削除ができるんですが、
この鉛筆マークでテキストの編集ができます。
太字にしたりとか下線を引いたり、リンクを挿入したり、
画像を配置したり、そういったことができます。
セーブ&クローズで内容を保存することができます。
この鉛筆マークの横のこちらをクリックすると、要素の複製ができます。
こちらのドットをクリックしながら移動することで、要素の移動ができます。
このゴミ箱のマークをクリックすることで、要素の削除ができます。
なのでこのゴミ箱のマークを使って、デフォルトの要素をどんどん削除していきたいと思います。
このフッターの要素で一点注意なんですが、
このアップデートには何だろうというと、
こちらにカーソルをどこでもいいんですが当てていただいて、
リンクのアスタリスクからアスタリスクで始まるこのリンクを控えておいておくんですが、
テキストエディターでも何でも結構です。
今回はGoogleドキュメントで控えておきたいと思います。
これは補足として書いてあるんですが、
これはご登録情報の変更という役割があります。
あとはこのアンスクライブフロムリストです。
こちらのどこでもいいんですがカーソルを持ってきて、
同じようにリンクを控えておいてください。
これは配信解除のリンクとなっています。
ここまでできましたらデリートで消してください。
あとちょっとわかりにくいんですが、
こちら線があるのでこれもゴミ箱で消します。
これでまさに状態から編集がスタートできます。
まずこちらのデザインから背景色などの設定をしていきたいと思います。
まずこのデザインからページをクリック。
このバックグラウンド、背景色を指定していきたいと思います。
09:00
こちらを一回クリックすると、
このようにカラーコードやあらかじめ用意されているデフォルトの要素で色の指定ができます。
このように指定していただくと背景色は変更できます。
こちらカラーコードと呼ばれるもので変更しているので、
このようにカラーコード一覧と検索をかけていただくと、
このようなサイトが出てきます。
好きな色をこのようにクリックしていただいて、
このシャープで始まるアルファベットと数字をコピーして、
こちらに貼り付けていただければ色の指定ができます。
といった形で自分好みのカスタマイズができます。
今回はこの薄いグレーでいきます。
あとはこのボーダーですね。
ボーダーを直線にしていただいて、
こちら何でもいいんですが、
こういった形で今回はこちらも別の色のグレーでいきたいと思います。
こういった形でボーダーが配置されます。
あといろいろ項目があるんですが、
今回は最低限解説していきたいと思いますのでこれでセーブ。
これでページの設定ができました。
この背景色とボーダーの設定になります。
続いてこのプレヘッダーをクリック。
これも同じように背景色という色でバックグラウンド。
今回はあらかじめ用意されているこちらの黒で設定をしていきたいと思います。
自分の好きな色を設定してください。
プレヘッダーはこちらのヘッダーの要素です。
テキストカラーということで今回は白を指定します。
まだテキストを配置していないのでちょっと分かりにくいんですが、
こちらが白になりました。
プレヘッダーリンクこちらも白にしておきましょう。
リンクであることが分かるために下線にしておいてください。
これでセーブです。
続いてフッターです。
フッターはこちらのグレー色にしておきましょう。
12:04
ちょっと濃いめのグレーという背景色を指定します。
フッターテキストということでこちらもこちらに関しては黒にしていきたいと思います。
リンクも黒にして下線でリンクであることを分かるようにしておいてください。
といった形で色の指定などは自分好みに変えていただきたいんですが、
今回はシンプルに作成していこうと思います。
これでページ、ヘッダー、フッターの設定をしました。
あとはこのモバイルスタイルなどでスマホから見た場合の設定ができます。
今回は割愛させていただきますが、ここで主にフォントサイズの指定ができるということを覚えておいてください。
これはスマホから見つつ調整していくことですので今回は割愛させていただきます。
続いてコンテンツをクリックしてください。
要素を配置していきたいと思いますので、この中からテキストをヘッダーの箇所に持ってきてください。
これでタイトルになりますのでタイトルを入力してください。
こちらのスタイルをクリックしていただいて、こちらの中から
テキストを選んでいただいて20ピクセルで設定をしておいてください。
こちらの中から左寄せ、中央寄せ、右寄せができますので中央寄せにしてください。
これでセーブ&クローズです。
これでヘッダーの箇所のタイトルを入力する箇所が作成できました。
今回テンプレートを作成しますのでこのような感じで入力をしていきます。
続いて画像などを配置したいのでイメージですね。
こちらをクリック。
このアップロードから自分のパソコンから画像を持ってくることがアップロードすることができます。
今回あらかじめアップロードしてあるこちらを配置したいと思います。
画像なんですがこちらのエディットをしていただくとサイズ変更できたりとか
15:05
あと丸く切り抜いたりすることができます。
サイズ変更なんですがこちらは半角で入力していただければこのようにサイズの変更ができます。
変更をしていただきましたらこちらをクリックしてください。
丸く切り抜く方法なんですがこちらはオーバーレイズをクリックしてください。
その中からオリジナルをクリック。
背景が白のものをクリック。
丸のものをクリック。
もともと切り抜かれていたのでわかりにくいんですが丸く切り抜くことができます。
ここまでできましたらこのボタンをクリック。
最後にセーブです。
これで画像の調整をしていただければと思います。
これでセーブアンドクローズです。
あとこの画像の下にテキストを配置したいのでこのようにテキストをクリックしながらドラッグアンドドラッグです。
こちらにこの早の野沢です。
会社名、名前、情報区、今回の内容について。
あとは商品の告知などといった形で前書きを入力します。
フォントサイズは14に指定していただいてセーブアンドクローズ。
続いて見出しを設定します。
セキストからドラッグアンドドラッグで配置。
こちらを見出しにしていただいてスタイルを22に変更してください。
これであとは内容ということでテキストです。
フォントサイズは14にしておきましょう。
様相をコピーしていただいて移動。
18:03
コピーで移動といった形でどんどん複製して内容を付け足していってください。
これで最後、編集コンプリントで見出しを作成し、内容については内容のまとめ。
あとは前書きの分析。
あとは商品の告知など。
といった形でテンプレットを後から見て分かりやすいように入力をしておいてください。
最後にフッターです。
フッターはテキストからドラッグアンドドラッグ。
こういったものを入力していただければなと思うんですが、
書いた面をこの早、旗描きが何枚か。
今回シンプルなものにしましたけど、ここにいろいろ書いていただいても結構です。
例えば会社のサイトなどですね。
こういった形でリンクを指定し、こういった形で公式サイトといった形でサイトを配置してもいいです。
続いてこの登録情報の変更ということで先ほど控えておいたものを設定します。
先ほど控えておいたこちらのURLを設定します。
ここでURLの箇所で指定してインサート。
このようにスペースを空けていただいて、
続いてこの配信解除ですね。
21:06
こちらのURLをコピーし、配信解除の箇所にリンクを指定します。
インサートです。
最後このコピーライトということで書いておいてください。
リンクが指定されていたしまともがいい。
こちらのMacの場合はコマンドシストVです。
Windowsの方はコントロールシストVでリンク指定なしのテキストが配置できます。
リンクになってしまった場合はこちらをお試しください。
こちら会社名ということでこのは屋と入力します。
これでセーブ&クローズ。
こういった形でテンプレートの作成が完了しました。
最後にこのセーブ&エビジットですね。
名前を自分が分かりやすいものを付けていただければと思いますが、
ちょっと待ちになってしまいましたが、こんな形で名前を付けてください。
名前の変更はこちらのリネームですることができます。
こういった形でHTMLメルテンプレートが作成できました。
あとはメルマガ配信の準備ということでリストを作成します。
テンプレートの横のこのリストをクリックしてください。
このように目的別でリストを作成することができます。
今回はメルマガ用ということなのでこちらを作成していきます。
こちらのクリエイトリストをクリック。
再び表示されたクリエイトリストをクリック。
まずリストの名前ということでメルマガ用リストとメールアドレス。
こちらでは会社名を入力してください。
あとこちらにリストを使う目的ということなので、
こちらは簡単にメルマガ用リストと入力してください。
24:05
特に指定はないので何でもこれでセーブです。
これでリストが作成できました。
あとは最低限の設定をしていきます。
セッティングスからクモ。
こちらをクリック。
リスト&フィールド&マージタグですね。
こちらをクリック。
メールアドレス以外は消してしまおうかなと思うので
このゴミ箱をクリックしていただいて
デリートと入力。
で再びデリートです。
メールチームの削除方法は特集なのでめんどくさいんですが
デリートと入力しデリートです。
これで英語になっているのでメールアドレスと入力。
セーブ&チェンジ。
これでリストの項目の設定ができました。
あとはこのサインアップ本物のジェネラルフォーム。
トランスレート。
こちらのセットデフォルトランゲージ
こちらをジャパニーズに変更してください。
日本語に設定。
この状態を確認しましたら
下にスクロールしていただいて
こちらのセーブボタンをクリックしてください。
これで日本語化することができました。
あとは細かい設定があるんですが
このサインアップフォームのURLが
こういった形で登録フォームになります。
これをサイトに設置していただくと
登録フォームに誘導することができます。
これでリストができましたので
リストが一通も入っていないと
メール配信することができないので
このアドコンタクトからインポートコンタクト
この真ん中のものをコピーペットフロムファイルに
ネクトで自分のメールアドレス
メールアドレスを設定していただいたもので結構ですので
入力しチェックを入れてネクストですね。
27:06
これでインポート。
この方法でメールアドレスを
こちらのリストに入れることができます。
ここまでできましたらメールマガを配信していきます。
こちらのキャンペーンズをクリック。
クリエイトキャンペーンをクリック。
プレイインテキストのほうがテキストで
オートメーションのほうがステップメールですので
こちらのレギュラーがHTMLメールになります。
名前キャンペーンネームは何でもいいですが
その日の日付が後々見返すときに
管理しやすいかと思います。
これでビーンです。
あとはこの2のところでこちらのボタンをクリック。
こちらでリストを指定してください。
先ほど作成したメールマガ用リストを今回は指定します。
アップロームということで会社名を入力してください。
サブジェクトということで今回は
今回のメールマガのタイプです。
これでセーブ。
ちなみにこのプレビューテキストは入れなくて結構です。
このコンテンツのところでデザインイメージ
こちらをクリック。
セーブ図、テンプレートから先ほど作ったものを選択。
あとは実際にこの内容を書いていただいて
セーブ&プロデュース。
これで配信の準備が整いました。
このSendをクリックすることですぐに配信することができますし
このスケジュールを押すことで時間を指定して配信することができます。
例えば一番読まれやすい9時に設定して配信することもできます。
これでロックオンということで設定が完了しました。
再びキャンペーンを見ていただきたいのですが
このように午後9時に配信できるということを確認していただいて
その時間まで待つといった形になります。
このように一度配信していただくと
30:05
このように一度配信したものですと
リブリケートといって複製することができます。
なので一回メルマガを配信してしまえば
あとは複製して利用することができますので
そちらで効率よく毎日のメルマガを配信に役立ててください。
といった形でこちらのHTMLメールで
メルマガを配信する準備を解説しました。
ぜひ画像などを使って
このHTMLメールを使って
日頃のメルマガ配信に役立ててください。
今回の内容は以上になります。