年末特別企画・HTMLメールエディタを使って実際にメールを作ってみました! / コンビーズメールプラス

  • このエントリーをはてなブックマークに追加

メールイメージこんにちは、コンビーズのハマちゃんです(・’ω’・)

今回のブログは年末特別企画!
HTML知識のかけらもない私・ハマちゃんが、クラウド型メール配信サービス「コンビーズメールプラス」の「HTMLメールエディタ」を使って、実際に右の画像の年末のご挨拶メールを配信するまでの一部始終を解説を交えてご紹介いたします。
完全に実録、完全にノンフィクションでございます(;´∀`) どうぞ最後までお付き合いくださいませ!

もくじ
1.専門知識要らずでできた!エディタを使った簡単HTMLメールの作り方
2.HTMLメールエディタで使用する画像作成のコツ

最後まで読めば、あなたもHTMLメールマスター!

1.専門知識要らずでできた!エディタを使った簡単HTMLメールの作り方

それでは、さっそく作ってみましょう!(`・ω・´)ゞ

ステップ1:まずはログインしてHTMLメールエディタを起動!

コンビーズメールプラスにログイン & HTMLメールエディタを起動

01_login_editor1.コンビーズメールプラスのサービスページ http://plus.combz.jp/ にアクセスして、左メニューのログインフォームより、「コンビーズID」と「パスワード」を入力します。

2.ログインに成功すると、管理画面のトップページが表示されます。
ページ左側の[HTMLメールエディタ]ボタンをクリックし、HTMLメールエディタを起動します。

ステップ2:ナビゲーションに沿って初期設定を済ませよう!

件名を設定し、好みのレイアウトを選ぶ

02_new_title_layout1.エディタを起動すると、まず[新規作成][続きから編集]の2つの選択肢があります。
今回は新規作成を選択しました。
前回までに途中保存したデータがある場合は、続きから編集することも可能です。
※前回保存時と同じパソコン・同じブラウザでHTMLメールエディタを起動した時のみ、[続きから編集]ボタンが表示されます

2.件名を入力します。
今回は年末のご挨拶ということで、当社からのメールとわかりやすいように「会社名」と「挨拶文」を件名にしました。

ワンポイント

件名の文字数は全角10~30文字程度が一般的です。それ以上の文字数になるとメールを見る環境によっては表示されない場合もあるので、ご注意くださいね。
特に伝えたいことは、最初の10文字ほどで表現するとグッドです!

3.好きなレイアウトを選びます。
画像とテキストを組み合わせた、4つのレイアウトからイメージに合うものを選択できます。
レイアウトは後からも編集することができるので、なんとなくで選んでもOKですよ(╹◡╹)
サクサク進めていきましょう!

これが本文の編集画面!

本文編集画面本文の編集画面が表示されました。赤枠の箇所がそれぞれ、「画像」と「テキスト」の編集エリアです。
次のステップからは、この画面をメインに作成方法を紹介します!

ステップ3:文章と画像を配置して、メール本文を作る!

1.文字を入力して、色や大きさを変えてみよう

テキストメニューテキスト編集エリアをクリックすると、「テキストメニュー」が表示されます。
文字は、大きさや色の変更をはじめ、文字を太くしたり、斜体にするなどの設定をすることができます。
他にも配置位置の変更(左揃え・中央揃え・右揃え)や、区切りに使える水平線の挿入、箇条書きに使えるリスト文字の入力ができます。

動画でわかる!エディタで文字の装飾テキスト編集動画アクセントを付けたいところに、「文字色の変更(青)」&「文字サイズ130%」&「太字」の設定をしました。さらに、当社の代表と従業員一同の署名を「文字サイズ70%」と少し小さくし、配置を「右揃え」にしました。

カラーは自由自在!
文字色と全体の背景色は、パレットに表示されている色以外にも、カラーピッカーから好きな色を選んだり、16進数のカラーコード(例:#FFFFFF)で指定することができますよ。
カラーパレット

ワンポイント

本文を別のソフトで作ってコピーしておいて、エディタのテキストエリアに貼り付ける際は、MicrosoftWordやワードパッドなどの文字を装飾できる文書ソフトを用いると、そのソフト内の文字の装飾情報までコピー&ペーストされてしまいます。
文書ソフト内の文字装飾情報は、HTMLメールエディタでは用いることができません。
解消するためには、「TeraPad」や「サクラエディタ」などのテキストエディタで文章を作ることをおすすめします。

TeraPad http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html
サクラエディタ http://sakura-editor.sourceforge.net/

2.ブロックを操作して、思い通りのレイアウトにしよう

本文のレイアウトを変えたい!文面にメリハリをつけたい!そんなときは、ブロックを追加しましょう。

ブロックって?
ブロックとは、画像やテキストを挿入するための小さなテンプレートで、形状と用途の異なる5種類があります。
HTMLメールエディタではこれを組み合わせて、HTMLメールの本文を構成しています。

動画でわかる!ブロックの追加・編集ブロック編集動画ブロックを配置して、好きな位置に動かしたり、複製・削除ができます。

「余白ブロック」を使いこなそう
文面が詰まっている・ごちゃごちゃしていると感じるときには、「余白ブロック」が活躍します!
レイアウトの調整にぜひお試しください。
余白ブロックイメージ

ワンポイント

ある程度メールに盛り込みたい内容を考案してから本文の作成を始めると、メール全体のボリュームをつかみやすく、文章も適切な量で作ることができます。
ブロックの数でコンテンツ量の目安を測ることもできますよ。

3.画像を当てはめて、グラフィカルなメールにしよう

画像メニューとライブラリ画像エリアをクリックすると、「ライブラリ」と「画像メニュー」が表示されます。
ライブラリとは画像を置いておける倉庫で、ここに画像をアップロードすると、エディタで使う画像を呼び出すことができます。
画像メニューでは、画像にURLリンクの設定をしたり、配置を上揃え・中央揃え・下揃えに編集することができます(初期状態では上揃えです)。

動画でわかる!画像配置のしくみ画像配置動画この動画では、あらかじめアップロードしておいた、タイトル部分の画像を挿入しています。

ちょっと応用!
今回のメールでは罫線用の画像と合わせて上下に余白ブロックを追加することで、メインのブロックとの間を見やすく調整しました。
10_line_and_spacer

ブロックの追加や文字の編集を繰り返し…そして、完成したHTMLメールがこちらです!

メール完成イメージ画像をクリックすると、本文全体を見ることができます。

ステップ4:完成したメールの配信手続きをしよう!

あとひといき!各種設定を済ませて配信予約!

本文が完成したらもう少しです!
あとは、配信に関する設定を済ませ、配信手続きを行えば、メール配信の一連の操作はおしまいです。
お疲れさまでした!
次の章では、HTMLメールエディタで使う画像を作成するコツを紹介しています(╹◡╹)

2.HTMLメールエディタで使用する画像作成のコツ

作成する画像サイズの目安

image_sizeHTMLメールエディタで使用する画像は、大サイズが600ピクセル、小サイズが185ピクセルにそれぞれ横幅を合わせると、画像エリアに挿入した際にきれいに表示されます。
対応しているファイル形式は、jpg・png・gifの3種類です。

ワンポイント

メール内で使用している画像を作成した画像編集ソフトは、AdobeのPhotoshopCS4です。
Photoshopは有料のソフトですが、Photoshopに搭載されている「レイヤー機能」を同様に使用することができる無料の画像ソフトもありますのでご安心を!
無料ソフトの中で代表的なものを、ここでは紹介します(*^_^*)

Gimp http://www.gimp.org/
FireAlpaca http://firealpaca.com/

「レイヤー機能とはなんぞや?」とお思いの方、ハマちゃんも初めはまーーーーーったく分かりませんでした…(・_・;)
しかし!少しずつ慣れてみると、これがとても便利なのですよ!ちょっとした説明画像などはすぐに作れるようになれちゃいます。
試してみる価値、大いにアリです(╹◡╹)

おわりに

いかがでしたでしょうか。今回は長めの記事をお送りしました。
この記事がきっかけで、みなさんがHTMLメールエディタを使ってもらえるようになると、とても嬉しいです(∩´∀`)∩

それではまた次回お会いしましょう!コンビーズのハマちゃんでした(・’ω’・)

コンビーズではFacebookとTwitterも運営しています。こちらもあわせてよろしくお願いします。
Facebook / 株式会社コンビーズ / Combz Inc.
Twitter / 株式会社コンビーズ・公式アカウント


SNSでもご購読できます。