コンビーズメールプラスTweetこんにちは、コンビーズのハマちゃんです(・’ω’・)今回のブログは年末特別企画!HTML知識のかけらもない私・ハマちゃんが、クラウド型メール配信サービス「コンビーズメールプラス」の「HTMLメールエディタ」を使って、実際に右の画像の年末のご挨拶メールを配信するまでの一部始終を解説を交えてご紹介いたします。アクセスして、左メニューのログインフォームより、「コンビーズID」と「パスワード」を入力します。2.ログインに成功すると、管理画面のトップページが表示されます。ページ左側の[HTMLメールエディタ]ボタンをクリックし、HTMLメールエディタを起動します。ステップ2:ナビゲーションに沿って初期設定を済ませよう!件名を設定し、好みのレイアウトを選ぶ1.エディタを起動すると、まず[新規作成][続きから編集]の2つの選択肢があります。今回は新規作成を選択しました。前回までに途中保存したデータがある場合は、続きから編集することも可能です。※前回保存時と同じパソコン・同じブラウザでHTMLメールエディタを起動した時のみ、[続きから編集]ボタンが表示されます2.件名を入力します。今回は年末のご挨拶ということで、当社からのメールとわかりやすいように「会社名」と「挨拶文」を件名にしました。ワンポイント件名の文字数は全角10~30文字程度が一般的です。それ以上の文字数になるとメールを見る環境によっては表示されない場合もあるので、ご注意くださいね。伝えたいことは、最初の10文字ほどで表現するとグッドです!3.好きなレイアウトを選びます。画像とテキストを組み合わせた、4つのレイアウトからイメージに合うものを選択できます。レイアウトは後からも編集することができるので、なんとなくで選んでもOKですよ(╹◡╹)サクサク進めていきましょう!これが本文の編集画面!本文の編集画面が表示されました。赤枠の箇所がそれぞれ、「画像」と「テキスト」の編集エリアです。次のステップからは、この画面をメインに作成方法を紹介します!ステップ3:文章と画像を配置して、メール本文を作る!1.文字を入力して、色や大きさを変えてみようテキスト編集エリアをクリックすると、「テキストメニュー」が表示されます。文字は、大きさや色の変更をはじめ、文字を太くしたり、斜体にするなどの設定をすることができます。他にも配置位置の変更(左揃え・中央揃え・右揃え)や、区切りに使える水平線の挿入、箇条書きに使えるリスト文字の入力ができます。アクセントを付けたいところに、「文字色の変更(青)」&「文字サイズ130%」&「太字」の設定をしました。当社の代表と従業員一同の署名を「文字サイズ70%」と少し小さくし、配置を「右揃え」にしました。カラーは自由自在!文字色と全体の背景色は、パレットに表示されている色以外にも、カラーピッカーから好きな色を選んだり、16進数のカラーコード(例:#FFFFFF)で指定することができますよ。ワンポイント本文を別のソフトで作ってコピーしておいて、エディタのテキストエリアに貼り付ける際は、MicrosoftWordやワードパッドなどの文字を装飾できる文書ソフトを用いると、そのソフト内の文字の装飾情報までコピー&ペーストされてしまいます。文書ソフト内の文字装飾情報は、HTMLメールエディタでは用いることができません。解消するためには、「TeraPad」や「サクラエディタ」などのテキストエディタで文章を作ることをおすすめします。http://sakura-editor.sourceforge.net/2.ブロックを操作して、思い通りのレイアウトにしよう本文のレイアウトを変えたい!文面にメリハリをつけたい!そんなときは、ブロックを追加しましょう。ブロックって?ブロックとは、画像やテキストを挿入するための小さなテンプレートで、形状と用途の異なる5種類があります。HTMLメールエディタではこれを組み合わせて、HTMLメールの本文を構成しています。ブロックを配置して、好きな位置に動かしたり、複製・削除ができます。「余白ブロック」を使いこなそう文面が詰まっている・ごちゃごちゃしていると感じるときには、「余白ブロック」が活躍します!レイアウトの調整にぜひお試しください。ワンポイントある程度メールに盛り込みたい内容を考案してから本文の作成を始めると、メール全体のボリュームをつかみやすく、文章も適切な量で作ることができます。ブロックの数でコンテンツ量の目安を測ることもできますよ。3.画像を当てはめて、グラフィカルなメールにしよう画像エリアをクリックすると、「ライブラリ」と「画像メニュー」が表示されます。ライブラリとは画像を置いておける倉庫で、ここに画像をアップロードすると、エディタで使う画像を呼び出すことができます。画像メニューでは、画像にURLリンクの設定をしたり、配置を上揃え・中央揃え・下揃えに編集することができます(初期状態では上揃えです)。この動画では、あらかじめアップロードしておいた、タイトル部分の画像を挿入しています。応用!今回のメールでは罫線用の画像と合わせて上下に余白ブロックを追加することで、メインのブロックとの間を見やすく調整しました。ブロックの追加や文字の編集を繰り返し...そして、完成したHTMLメールがこちらです!画像をクリックすると、本文全体を見ることができます。ステップ4:完成したメールの配信手続きをしよう!あとひといき!各種設定を済ませて配信予約!本文が完成したらもう少しです!あとは、配信に関する設定を済ませ、配信手続きを行えば、メール配信の一連の操作はおしまいです。お疲れさまでした!次の章では、HTMLメールエディタで使う画像を作成するコツを紹介しています(╹◡╹)2.HTMLメールエディタで使用する画像作成のコツ作成する画像サイズの目安HTMLメールエディタで使用する画像は、大サイズが600ピクセル、小サイズが185ピクセルにそれぞれ横幅を合わせると、画像エリアに挿入した際にきれいに表示されます。対応しているファイル形式は、jpg・png・gifの3種類です。ワンポイントメール内で使用している画像を作成した画像編集ソフトは、AdobeのPhotoshopCS4です。http://firealpaca.com/「レイヤー機能とはなんぞや?」とお思いの方、ハマちゃんも初めはまーーーーーったく分かりませんでした...(・_・;)しかし!少しずつ慣れてみると、これがとても便利なのですよ!ちょっとした説明画像などはすぐに作れるようになれちゃいます。試してみる価値、大いにアリです(╹◡╹)おわりにいかがでしたでしょうか。今回は長めの記事をお送りしました。́∀`)∩それではまた次回お会いしましょう!コンビーズのハマちゃんでした(・’ω’・)コンビーズではFacebookとTwitterも運営しています。こちらもあわせてよろしくお願いします。コンビーズメールプラスSNSでもご購読できます。