全5回 こもりまさあきのレスポンシブEメール入門

こもりまさあき

スマートフォンでも見やすく、押しやすいデザインで、メールマガジンのCTRをアップ! 書籍『レスポンシブEメールデザイン』の内容をもとに、マルチデバイスに対応したメルマガの設計からデザイン、コーディングの基礎を学びます。

Webサイトでは当たり前になった、マルチデバイス対応。でも、HTMLメールの マルチデバイス対応は大丈夫ですか? このLessonでは、メールとWebの違いを押さえながら、レスポンシブなメールの作り方を学びます。   80% of people delete an email if it doesnʼt look good ontheir mobile device. 自分のモバイルデバ
今月読める記事の上限に達したか、プレミアムメンバー限定のコンテンツです。
続きは購読またはログイン してお読みください。
Loading...
デバイス環境によって表示状態を切り替える、基本的なレスポンシブEメールのテンプレートを実際に作成します。 以下は、このLessonで作るレスポンシブEメールの基本テンプレート完成イメージです。 HTMLメールの基本 HTMLメールは、テーブルレイアウトと呼ばれる手法で作ります。Webブラウザーと異なり、先進的な技術サポートが進んでいないメールクライアントでの表示を考えると、旧来のtable要素を用
今月読める記事の上限に達したか、プレミアムメンバー限定のコンテンツです。
続きは購読またはログイン してお読みください。

有料会員登録で、
すべてのLESSON記事を閲覧できます

Loading...
ここまでに作ったHTMLメールのテンプレートに、ヘッダー、コンテンツ、フッターの各情報ブロックを挿入します。 情報ブロックをtable要素で挿入する 横幅580pxで固定したtable要素のtd要素の中(<!-- ここにコンテンツを入れていきます -->部分)に、完成イメージのように、 ロゴが入るヘッダー領域 バナー画像や本文のテキストが含まれるコンテンツ領域 ただし書きやコピーライト
今月読める記事の上限に達したか、プレミアムメンバー限定のコンテンツです。
続きは購読またはログイン してお読みください。

有料会員登録で、
すべてのLESSON記事を閲覧できます

Loading...
前回までに作ったHTMLメールのテンプレートに、CSSを追加してレイアウトとデザインを整えます。以下は、CSSを追加する前後のメール表示です。 ヘッダー、コンテンツ領域に追加するCSS ヘッダー、コンテンツ領域にCSSを追加する前に、コンテンツ部分全体の横幅を580px、各table要素の横幅は100%を指定します。 コンテンツ領域の「見出しテキスト2」、フッター箇条書き部分、コピーライト部分それ
今月読める記事の上限に達したか、プレミアムメンバー限定のコンテンツです。
続きは購読またはログイン してお読みください。

有料会員登録で、
すべてのLESSON記事を閲覧できます

Loading...
メディアクエリー(Media Qquery)で表示を切り替え、スマートフォン向けの見やすいメールを表示できるようにして、テンプレートを仕上げます。 メディアクエリーとスマートデバイス PCやタブレットといった大きな画面でも、スマートフォンなどの狭い表示領域のデバイスでもHTMLメールを読みやすく表示するには、CSSのメディアクエリー(Media Queries)を使います。メディアクエリーを使うと
今月読める記事の上限に達したか、プレミアムメンバー限定のコンテンツです。
続きは購読またはログイン してお読みください。

有料会員登録で、
すべてのLESSON記事を閲覧できます

Loading...