Photoshop、InDesign、IllustratorおよびAdobe XDを使用してHTMLの時事通信を設計する方法
あなたの聴衆の注意を捕獲するHTMLの時事通信か電子メールのキャンペーンの設計について考えるか。 よかった 多くのROIを持って来る行っているマーケティングの決定をした。
この記事は、あなたが始めるのに役立ちます。 私達は電子メールの設計、HTMLの時事通信のコーディング、および電子メール配達の基礎を導入する、従って十分にソフトウェア選択のあなたの範囲を理解する。
目次
HTMLの時事通信またはキャンペーンは何であるか。
電子メールマーケティングの世界では、電子メールには二つのタイプがあります。 プレーンテキストの電子メールとHTML電子メール。
ほとんどの業界、特に販売に電子メールを使用する業界では、HTML電子メールを使用しています。
傑出した画像、印象的なcall-to-action(CTA)、よく書かれたテキストの組み合わせは、すべて受信トレイにあなたの加入者の注意をつかむために追加されます。 Rooted NYCのこの例のように:
プレーンテキスト上のHTMLの電子メールを作成することの最も大きい利点は時事通信の設計である。
あなたは、電子メールが受信トレイに表示されます正確にどのように制御するために取得します。 それはinboxにウェブサイトか光沢のある広告のパンフレットを直接送ることと同等である。 あなたは、あなたのブランドイメージをキャプチャする方法で色、フォントや画像を混在させ、一致させることができます。
しかし、法律や技術などの他の業界では、プレーンテキストの電子メールはある程度の深刻さを伝えるため、より良いパフォーマンスを発揮できることに注 彼らは広告のようにあまり見えません。
HTMLニュースレターの設計、コーディング、送信方法
HTMLメールやニュースレターを作成する方法を学んでいるときは、作成に入る3つの分離されたステップがあることを認識する必要があります。
- それがあなたの契約者の受信箱でいかに見るべきであるか決定しなさい。
- デザインをHTMLでコード化します。 電子メールクライアントがレンダリングできるプログラミング言語にデザインを入れます。
- それはあなたの聴衆の受信トレイに到着することを確認してください。
ニュースレター作成のすべての側面に使用できるプログラムが多数あります。 設計、コーディング、送信のために別のプログラムを選択することができます。
または、すべての三つのステップのための単一のツールを使用することができます–電子メールマーケティングソフ 私達はこのプロセスのための3つの別々の物上の1つの用具を選ぶことを推薦します（Sendinblue、できれば）。 ▲
時間とエネルギーを節約できます。
しかし、我々はあなたが扱っている正確に何を知っているので、すべての可能なオプションを順を追って説明します。
HTMLニュースレターの設計を始める
ニュースレターを作成する最初のステップにデザインソフトウェアを使用する最大の利点は、特定のデザインソフト しかしグラフィック-デザインプログラムであなたの時事通信か電子メールを作成することは事をラインの下のあなたのためにより困難にさせる。
単にデザインをHTMLメールとしてエクスポートしたり、.aiファイルを自動的にコード化したりすることはできません。
あなたはそれをコーディングするか、そうするために専門的なHTMLの専門知識を持つ人を取得する必要があります。
しかし、あなたが一つの特定のツールであなたの創造的な仕事を最もよくするなら、それを使用してください。 実際には、デザインの部分になると、任意のフォトエディタやレイアウトツールが仕事をします。
HTMLメールを設計する際に考慮すべき3つの重要な設計制限は次のとおりです:
- レスポンシブメールデザイン:
あなたの電子メールやニュースレターは、あなたの加入者が使用するどのようなデバイ これは、すべての電子メールの66％が米国のスマートフォンで開かれていることが報告されています。 これは、デスクトップビューとモバイルビューの設計計画が必要であることを意味します。 - 固定幅:
すべてのニュースレターは、購読者が水平にスクロールする必要がないように、固定幅を持つ必要があります。 あなたは彼らがすべてのコストで挑戦的な読書体験を持つことを避けたいです！ 600ピクセルは、ほとんどのデバイスに適しているため、HTML電子メールの幅の業界標準です。 あなたは650まで行くと、まだあなたの電子メールが正しくレンダリングすることができます。 折目の上の - :
あなたの電子メールの従がうラインはあなたの契約者の注意をつかむ最初のチャンスである。 あなたがそのテストに合格し、彼らがあなたの電子メールを開くならば、あなたは本当に良いヘッダーで彼らの注意を保持するもう一つのチャンス これは、連絡先がスクロールする前に表示される領域です。 これは、上記の倍のスペースと呼ばれています。 始めに最も重大な情報を正しく含んで下さい。
Photoshopを使用してHTMLニュースレターを作成する方法
Photoshopで新しいドキュメントを開く
まず、新しいドキュメントを作成します。
これはあなたのニュースレターに背景を含めることができますので、幅は通常のニュースレターよりもわずかに大きくする必要があります。 推奨される合計幅は800ピクセルです。
長さに関する限り、あなたはここに限定されません。 開始する場所がわからない場合は、1000ピクセルの長さを選択します。
解像度の面では、ニュースレターには72DPIで十分です。 Web用のすべての画像と同様に、CMYKではなくRGBカラーを選択する必要があります。
ドキュメント内に600ピクセル幅のボックスを作成し、中央に配置します。 これはあなたの時事通信の内容が行くところである。 次に、文書の残りの部分の背景色を選択します。 背景色として白またはライトグレーは、気が散るされていない快適な読書体験を作成します。 いくつかのブランドは、あまりにも、背景のための柔らかいパステルカラーでよくやっています。
あなたのブランドは、その大胆さのために知られている場合は、先に行くと、背景の生意気な対照的な色を選択します。 それがブランドにある限り、よい(ある時事通信の決め付ける考えのためにここにかちりと鳴らしなさい)。
600px幅のボックスでニュースレターを設定
今、あなたはあなたのファイルを設定して持っていると、あなたは始める準備が整いました。 上から下にデザインを作業してみましょう。
HTMLメールの上部には、ニュースレターやキャンペーンのwebバージョンへのリンクを配置するのが伝統的です。 画像が表示されない場合（Microsoft Outlookではデフォルトで発生します）、またはその他の理由で電子メールクライアントが電子メールを正しく表示しない場合、webバージ
しかし、より多くのブランドは、webバージョンのリンクを残したり、電子メールの下部に慎重に配置しています。
このようにして、読者の気をそらすことも、折り目の上のすべての調整されたデザインを損なうこともありません。 B2Bで作業する場合、加入者の多くはMicrosoft Outlookを使用しているため、webバージョンへのリンクを含める必要があることに注意してください。
ウェブ版への邪魔にならないリンクの真下（またはリンクをスキップした場合は、ニュースレターの最初の要素として）、ティーザー画像を追加します。 Photoshopの画像サイズとテキストを調整することができます。
多くの場合、ティーザー画像にはあなたのロゴと認識可能なブランドイメージが含まれています。 また、ティーザーイメージにcall-to-action(CTA)ボタンを含めることもできます。 この領域は、その貴重な倍以上のスペースを表しています。 一般的に、長さは200-250ピクセルでなければなりませんが、あなたがカバーされた折り目の上の領域を持っていることを保証するための最良の方法は、電子メールマーケティングソフトウェアでそれをテストすることです。
Photoshop
で設計された確定されたニュースレターは、ヘッダーの直後にニュースレターまたはメールキャンペーンの本文が表示されます。 ここに600ピクセルの長方形を挿入し、テキストを追加し、お好みに合わせて画像を挿入します。
単にこのブロックを複製して、追加のニュースレターコンテンツを作成します。 ガイドを使用してブロックを調整し、距離を確認します。 優れた読書体験を確実にするために十分な間隔を使用していることを確認してください。
ニュースレターやメールキャンペーンにソーシャルメディアボタンを追加したい場合は、メールの本文の下の最後にそれらを挿入します。
最後に、フッターで閉じます。 ここでは、ユーザーが購読設定を更新し、ニュースレターから簡単に購読を解除するための会社情報とリンクを含める必要があります。 あなたは限り、それはまだ完全に読みやすく、クリック可能だとして、小さい、普通のフォントを使用することができます。
InDesignを使用してHTMLニュースレターを作成する方法
InDesignで幅600pxのドキュメントを作成する
InDesignでは、ページ幅600ピクセルの新しいドキュメントを作成します。 長さに関しては、どのような作品を選択してください。 ページをカスタム形式で保存して開きます。
メールレイアウトはPhotoshopを使用した場合と同じ構造になります:
- ブラウザで表示するオプションのリンク
- 折り畳みの上のヘッダー画像
- 本文（メインコンテンツ）
- フッター
InDesignで確定したニュースレターデザイン
InDesignでは、長方形ツールを使用して、ページ幅になる3つの長方形を互いに上に作成します。 これはヘッダー、時事通信の内容およびフッターを挿入するところである。
ヘッダーに画像を追加します。 画像を配置し、比例して挿入します。 購読者がそれらを見ることができるように、InDesignニュースレターで使用するすべての画像がオンラインでホストされていることを確認してください。
スムーズな読書体験を確保するために、ニュースレターの本文に白い背景を追加します。 テキストツールを使用してテキストを挿入し、最後に余白を追加して、ページの端に対して実行されないようにします。
フッターは、退会リンクや他の会社の詳細を配置するのに最適な場所です。
イラストレーターを使用してHTMLニュースレターを作成する方法
Illustrator画像を設計するための素晴らしいツール。
しかし、それは全体のニュースレターを設計するための最良の選択ではありません。 あなたの時事通信の背景、あなたのロゴまたは他のグラフィックを設計するのにIllustratorを使用しなさい。
Illustratorで背景を作成する
ニュースレター自体は別のプログラムで作成する必要があります。
Adobe XDを使用してHTMLニュースレターを作成する方法
電子メールテンプレートのデザインに適した最新のデザインプログラムの一つは、Adobe XDです。
実際には、グラフィックデザインチームがテンプレート作成に推奨する唯一のツールです。 そして、彼らは知っている必要があります。 彼らはそれらの多くを設計します。
Adobe XDは、学びやすく、無料で直感的なグラフィックデザインツールです。 Adobe XDでニュースレターを作成するには、ファイルを作成し、Photoshopの下に記載されているのと同じ手順に従ってください。
Adobe XDの機能の特徴は、リピートグリッドツールです。 1つのボックスを何度も複製する代わりに、[グリッドを繰り返す]オプションを選択できます。
繰り返しグリッド関数
たとえば、ブログアイテムのティーザーとして機能する4つのコンテンツブロックを持つニュースレターがあるとします。 1つのコンテンツブロックを作成し、選択範囲の上にマウスを移動し、[グリッドの繰り返し]を選択します。 次に、4つのコンテンツブロックができるまでグループをドラッグします。
承認のために上司や同僚にデザインを送ったとしましょう。
そして、彼らは一つの変更だけでそれを承認します。 彼らはすべての見出しが古いブランドの灰色ではなく、新しいブランドのピンクになることを望んでいます。 個々の見出しを選択して手動で変更するのではなく、1つを変更するだけで、パターンは自動的に他の見出しに採用されます。
Adobe XD
で設計された完成した電子メールキャンペーンこれは、数十または数百の画像の繰り返しグリッドグループを扱う場合に特に役立ちます。 これはあなたが電子商取引のセクターで規則的に出会う一種の問題である。
あなたのための十分なデザインのヒントはありませんか？ より多くの指導を必要としたら私達の時事通信の設計先端から点検することを確かめなさい!
今日Sendinblueで無料アカウントを作成！
私はSendinblueで私の次のニュースレターを構築したいです！
HTMLニュースレターをコーディングするためのヒント
あなたのデザインを得ましたか？ あなたが必要とするすべてのサインオフを持っていますか？ すごい！ 今私達は堅い部分に得る:あなたの時事通信をコードする方法。
一部のデザインプログラムには、ドキュメントをHTMLにエクスポートするオプションがあります。 しかし、だまされてはいけません。 残念ながら、これはHTMLメールでは機能しません。
電子メール用のHTMLのプログラミングは、web用のプログラミングとは大きく異なります。 さらに、すべての電子メールクライアントは異なる動作をするため、さまざまな電子メールクライアントでどのように見えるかをテストする必要があ
すでにプログラミングに精通している場合は、読み続けてください。 私たちはあなたのためにいくつかのヒントを持っています。
がいない場合はプログラマー経験者のメールコーディング、いくつかのオプションを取りクリエイターが素材やデザインにフォーマットが正しく描画する:
- 採用プログラマー経験の符号化のためのHTMLメール
- を選択メールサービスプロバイダなどのSendinblue(oh、こんにちはそうです。）、およびデザイン1を再作成します。:ニュースレターソフトウェアのドラッグアンドドロップキャンペーンエディタで1。
- 贅沢な選択:あなたの時事通信または電子メールのキャンペーンのための型板をプログラムする付加サービスを提供する電子メールサービスの提供者を選 あなたは彼らにあなたがテンプレートを見てみたい正確にどのように示すデザインファイルを送信し、彼らはソフトウェアのバックエンドでコー その後、あなたがしなければならないのは、ソフトウェアにログインし、あなたの新しいテンプレートにしたいテキストや画像を挿入し、送信を押し
あなたはウェブサイトのデザインのためのプログラミングの経験があるが、単に前にHTML電子メールのためにコード化されていない場合は、ここで考慮すべきいくつかのヒントがあります。
HTMLメールプログラミングが狂っている理由
電子メールのコーディングがwebデザインのコーディングと非常に異なる理由の一つは、電子メールがどのようにレンダーされるかにおいて、ここではさらに多くの要因があるということです。 Web用にプログラミングするときは、OS、ブラウザ、画面サイズなどの要因に対処する必要があります。
電子メールのためにプログラミングするとき、対照的に、あなたはこれらの要因だけでなく、より多くの考慮する必要があります。 これらには、電子メールクライアント、画像ブロックオプション、送信サービスが含まれます。
さらに、web用にコーディングするときに考慮する必要があるブラウザはいくつかありますが、世界中に少なくとも1,000人の電子メールクライアントがあ
あなたは最大の市場シェアを持つ電子メールクライアントだけを見ても、あなたはまだあなたのHTMLメールをレンダリングすることができ、約50の電子メー
さらに、webベースの電子メールアプリは、ブラウザによってレンダリングが異なります。 そして、あなたの電子メールが表示されるデバイスや画面サイズのトンを持っています。
そして、それをすべてオフにトップに、あなたは電子メールクライアントは、主に古い学校のHTMLを使用するという事実に対処する必要があります。 HTMLの最近の開発の多数は電子メールの顧客ソフトウェアによって単に採用されなかった。 そして電子メールの顧客のための普遍的な標準がない。
全体的に、電子メールのためにプログラムするのは難しい作業です。 心の弱い人のためではありません。
ニュースレターやその他の電子メールのためのHTMLコード：何のために見るべきですか！
コードを作成するには、プレーンテキストエディターまたはDreamweaverのようなビジュアルツールを使用できます。 それは永遠の周りされているので、プログラミングの世界のこの恐竜は、HTML電子メールテンプレートをコーディングするためにうまく動作します。
私たちが確立したように、ニュースレターのプログラミングはweb開発とは大きく異なります。 ここで考慮すべき最も重要な違いのいくつかは次のとおりです:
- 構造から始めます。 HTMLテンプレートは、電子メールクライアントに何を期待するかを伝えるdoctypeで始まります。 あなたのヘッダーとのこれに続いて下さい。 これは、メディアクエリ、スタイリング、および任意のアニメーションが行く場所です。 ヘッダーに続くものはすべて、メールの本文としてカウントされます。 このコンテンツをbodyタグで囲みます。
- 個別のCSSファイルを忘れます。 ほとんどの電子メールクライアントは、それらをサポートしていません。 つまり、HTMLとCSSを別の方法でうまく再生する必要があります：インラインCSSスタイル。 それらはほとんどの電子メールの顧客によって認識可能であり、背景色および壷のような主時事通信の設計要素に、使用することができる。
- ニュースレターのレイアウトには、ネストされたHTMLテーブルを使用します。 分かってる。. 分かってる。. これは非常に1999年に感じていますが、それは私たちが仕事をしなければならないものです。 テーブルタグは、電子メールクライアントがrowspan属性もcolspan属性もサポートしていないという事実を回避する方法です。 あなたは全体でテーブルを使用したいと思うでしょう。 可読性を向上させるために、セルのパディングを使用します。
- altテキストを覚えておいてください。 画像を別々に保存し、alt-textタグを含めます。 これは入手の可能性を改善し、事をイメージを妨げるそれらの電子メールの顧客のあなたの時事通信を読むそれらのためにより容易にさせる。
- あなたのフォントについて具体的に！ H1やH2などの通常のHTMLタグは、電子メールクライアントで正しく表示されません。 HTMLでフォントサイズとスタイルを直接指定する必要があります。 ただし、すべてのフォントが正しく表示されるわけではないことに注意してください。 電子メールに使用するのに最適なフォントの詳細をお読みください。
メールキャンペーンを開始するときに使用するコードの例を以下に示します。 これは、黒の背景に白いテキストとしてレンダリングされます。
あなたのニュースレターの送信
今、私たちは第三と最後のステップに到達します：あなたの電子メール送信ツール。
Gmailのような無料のメールサービスで、すべての連絡先をBCCフィールドに入力するだけでメールを送信できると思うかもしれません。 残念ながら、規則的で自由な電子メールの提供者を使用してちょうどバルク電子メールのキャンペーンのためのそれを切らない。
最大の問題は、あなたが極端に低い電子メールの配信可能性を持っているだろうということです,これは、あなたの電子メールのほとんども、あなたの連絡先の受信トレイのサーバー上にそれを作ることはありませんことを意味します. あなたの電子メールは文字通り決して日のライト、または、知っている、inboxのバックライトを当てられたスクリーンを見ない。
プライベートメールアカウントからメールを送信しようとする代わりに、Sendinblueなどのニュースレターソフトウェアを使用する必要があります。 あなたの電子メールのマーケティングサービスにあなたの電子メールがinboxで着くことを保障する場所の多くの用具そしてプロシージャがある。
ほとんどの電子メールのマーケティング用具はあなたの電子メールの時事通信の型板のHTMLを直接アップロードすることを可能にする。 あなたはそれを設計し、コード化したら、あなたはそれをアップロードし、直接それを送信することができます。
ニュースレターのコーディングに最も速い代替
しかし、より良い方法があります。 時事通信の作成が民主化されたので専門の電子メールのキャンペーンを送るデザイナーまたはプログラマーである必要はない。
三つの異なるツールを使用する代わりに、ここで説明するすべてを一つの簡単なツールで行うことができます。 オールインワン選択はSendinblueのような電子メールのマーケティングソフトウェアで時事通信の型板を、作成することである。 ニュースレターの作成の3つのステップは次のとおりです。:
- ある時事通信のインスピレーションを得た後、ドラッグアンドドロップの編集者が付いているあなたの電子メールを設計する。
- コーディングはバックグラウンドで自動的に行われるため、技術的な側面について心配する必要はありません。
- 送信するには、ボタンをクリックするだけで、メールがスパムフィルタを回避し、受信トレイに入れられるようにします。
私たちのプラットフォーム上で本当のためにそれを試してみることに興味がありますか？ あなたがしなければならないのは、無料のSendinblueアカウントを開くことです：
私はSendinblueで無料のニュースレターを作成したいです>>
このようなより多くのコンテンツについては、私たちの毎月のブログのニュースレターを購読し、Twitterで私たちに従ってください！