大手企業やWebサービスが配信！オシャレなHTMLメールのデザイン記事10選
テキストのみのメールに比べてHTMLメールのデザインの表現力が高く、近年のスマートフォンやタブレットなどデバイスの普及もあって活用する企業が増えています。 今回は、デザインの参考になるHTMLメールマガジン（以下、メルマガ）が紹介された記事をご紹介します。 HTMLメールの概要と、HTMLメルマガを利用するメリットなど基礎知識を解説した上で参考になる記事をまとめています。 もし、これからHTMLメルマガの配信を考えている方、既存デザインを見直したい方はぜひご覧ください。 HTMLメールとは HTMLメールとは、HTML形式メールのことを指します。 テキスト形式のメールにはできないテキストの色や大きさなどの装飾や、画像を埋め込んだりできます。また、テキスト形式ではメールがリストに対して届いたかどうかを測る「到達率」、ユーザー開いたかどうかを測る「開封率」を測定することができます。 デザイン性
HTMLメールワークフローに役立つGruntプラグイン | チャットワーククリエーターズブログ
こんにちは、先日Web開発チームに加わりました西口です。 HTMLメールの制作って煩わしくないですか？ おそらくそう感じているWebデザイナーの方は多いのではないかと思っています。 HTMLメールの制作って大変特に下記のような点が挙げられると思います。 テーブルレイアウト（コーディング面倒…）インラインCSS（コーディング面倒…）メールクライントごとで差のあるCSS対応（表示チェックどうすんの…）各種メールクライアントでの表示テスト（古い環境もまだまだ現役…）などなど… 弊社でもHTMLメールはそこまで頻繁に作成することがなかったので、これまでワークフローを見直すことがなく、ヘイトの増加を感じつつもHTMLを直接コーディングして作成していました。 ただ、やはりこういうフローでは時間がかかってしまったり表示確認が面倒だったので、どうにか効率良くならないかと調べていたら、HTMLメール作成用の
作って分かるHTMLメールの基本と使えるタグ／CSSまとめ (1/2)
Emailology - The Science of Looking Good in the Inbox HTMLの冒頭 実際にメールのHTMLを作成しましょう。HTMLの冒頭の文章型宣言は「XHTML 1.0 Transitional」を指定し、HTMLページの始まりを宣言しています。 head要素では、文字コード、ページタイトル、viewportを設定しています。HTMLの文字コードは「UTF-8」、Webページのタイトルを表すtitle要素は、空（から）です。viewportの設定は横幅をデバイス幅に、初期拡大率は1.0の等倍です。 ■HTML冒頭 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
HTMLメールのメールマガジンのコーディング【スマートフォン最適化篇】 | 株式会社NONAME Produce(n2p)｜デジタルプロモーション企画・制作
HTMLメールのメールマガジン、スマートフォンでも、もっと見やすくする方法をまとめました！ 前回までは、PCで見るためのHTMLメールの作り方をお伝えしました。 しかし、前回までの方法ですと、Androidの一部機種で、 画面の領域から文字や画像がはみ出し、スクロールバーが表示されてしまい非常に読みにくい。 viewportを設定しても無効になってしまいます。 そんな難題に答えてみた本日のサンプルはこちらです。 デザイン上の注意 デザインは横幅300px程度のスマートフォンの画面で見ることを前提に、横幅600pxで作る。 横幅600px以上は背景色が見えるようにします。 600px未満では縮められるようにする想定です。 レイアウトは一カラムで メディアクエリやjavascriptなどはきかないので、 横幅に応じて一カラムと二カラムを切り替えるのは難しいです。 なので、ニカラム以上のレイアウ
レスポンシブ対応のHTMLメール作成のコツ
様々な画面サイズにワンソースで対応するレスポンシブWebデザインは、多くのサイトで使用されていますが、HTMLメールをレスポンシブ対応するにはどうしたらいいのでしょうか？ Webサイトの場合、ブラウザで表示しますが、メールは、メーラーで表示します。メーラーは、CSSのサポート対応状況がブラウザと異なる為、従来のレスポンシブWebデザインのテクニックをそのまま流用する事は出来ません。 では、どのようにHTMLメールをレスポンシブ対応させるのか、その方法のひとつをご紹介いたします。 HTMLメールをレスポンシブ対応させる方法 まず、HTMLメール制作の基本的なポイントは「HTMLメールの制作時に気をつけたい9つのポイント | コリス」でご確認いただければと思います。 主要メーラーごとのCSSサポート状況を「Guide to CSS support in email | Campaign Mon
これは使える！レスポンシブ対応のさまざまなHTMLメールが簡単に作成できる無料のオンラインサービス -BeeFree
ビジネス用のニュース、プロダクトのリリース、プロモーションなど、さまざまなレイアウトのHTMLメールをドラッグ&ドロップで簡単に作成できるオンラインサービスを紹介します。 デスクトップ・スマホ両対応で、プレビューやメールアプリでのテストなど機能も非常に充実しています。日本語もOKでした！ BeeFree 使い方は簡単です。 上記ページの「Let's get started」をクリックし、HTMLメールを作ってみましょう。 ※HTMLメールの作成やファイルのダウンロード時に登録は必要ありません。作成したメールをサーバー上にキープする時だけ登録が必要です。 まずはテンプレートの選択をします。 2カテゴリ各4種類、画像やテキストが仮配置された「Rich Templates」。
HTMLメール用のレスポンシブテンプレート「Antwort」:phpspot開発日誌
Antwort | Responsive Layouts for Email HTMLメール用のレスポンシブテンプレート「Antwort」 HTMLメールを送る際に、メールクライアントに併せてレスポンシブに動くみたい。 float対応していないクライアント向けにtableタグを使う等しているところが、他のレスポンシブフレームワークと違うところ メールでのマーケティングに活用したいところですね 関連エントリ レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 レスポンシブな日付ピッカー実装jQueryプラグイン「pickdate.js」 最初からレスポンシブなCSSデザインのHTMLテンプレート３５ レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTab
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
