誰でも作れる！ “崩れない”HTMLメルマガ作成術（1/4）- ＠IT

2010/07/14 789 users 比留間 メーラー 種明かし ニュ 面白法人カヤック

一撃デザインの種明かし（12） 誰でも作れる！ “崩れない”HTMLメルマガ作成術 面白法人カヤック 意匠部 ME（マークアップエンジニア）課 比留間 和也 2010/7/14 よく使われているメーラーを対象に注意点やコツを紹介しながら、初心者でもある程度問題のないHTMLメールを作る方法を紹介します キレイなHTMLメールを作るコツ/Tips盛りだくさん！ ECサイトはもちろん、企業サイトのニュ... 続きを読む

PHPで日本語メールを送る – 応用編 (添付ファイル、HTMLメール) - EC studio 技術ブログ

2007/08/09 518 users PHP ヘッダ 添付ファイル EC studio 応用編

PHPで日本語メールを送る - 基本編に引き続き、 今回は応用編をお送りします。 基本編で解説したmb_send_mailを使えば シンプルなメールを送るには十分な機能がありますが、 それ以上に複雑なこと、例えばHTMLメールや添付ファイルを 使ったメールにはmb_send_mailは使えません。 mail関数を使ってヘッダにガリガリとメールの仕様に そって書けば送れるのですが、それではあまりに ... 続きを読む

これは使える！レスポンシブ対応のさまざまなHTMLメールが簡単に作成できる無料のオンラインサービス -BeeFree | コリス

2014/10/27 316 users メールアプリ コリス プレビュー レイアウト レスポンシブ対応

ビジネス用のニュース、プロダクトのリリース、プロモーションなど、さまざまなレイアウトのHTMLメールをドラッグ&ドロップで簡単に作成できるオンラインサービスを紹介します。 デスクトップ・スマホ両対応で、プレビューやメールアプリでのテストなど機能も非常に充実しています。日本語もOKでした！ BeeFree 使い方は簡単です。 上記ページの「Let's get started」をクリックし、HTMLメ... 続きを読む

HTMLメールの最近の実装方法を解説、tableは不要になりました

2023/06/01 314 users table レンダリングエンジン modern Edge 解説

HTMLメールの実装で「tableか、、、」とため息をついていた人に朗報です。 tableを使用しなくてはいけなかった理由はWindows上のOutlookだったのですが、新しいOutlookではレンダリングエンジンがEdgeに切り替わります。これにより、tableによる実装は不要になります。 HTMLメールの最近の実装方法を解説します。 Modern... 続きを読む

レスポンシブに対応したHTMLメールのつくり方 | 技術コラム | つみきブログ

2015/04/07 302 users レスポンシブ つみき メーラー 高松 フォーマット

つみきのフロントエンドエンジニア、高松です。 最近、HTMLメール形式で配信するメールマガジンのフォーマットを作る機会があり、今回はその際に学んだレスポンシブなHTMLメールのつくり方を書いてみたいと思います。 HTMLメール作成時に注意しなければならないこと ユーザーがメールを受信するために使うメーラーは多種多様で、各メーラーによってHTMLメールへの対応状況も大きく異なります。 そのため、HT... 続きを読む

攻撃メールの訓練を会社でやったが、いくらなんでも本気出しすぎで引っかかる人が続出「ハンター試験？」

2023/12/17 230 users 続出 訓練 ハンター試験 UDONCHAN 攻撃メール

鈴木うどんみ @_udonchan_ 弊社の標的型メールの訓練、「京急が運賃改定したから出張旅費入れ直せ」って社内システムのフォーマットできて、しかもリンクがhtmlメールでURL偽装されており、当然引っかかった人が続出したんだが、いくらなんでも本気出し過ぎだと思う。あれはずるいわ。 2023-12-16 17:31:22 続きを読む

無料で手軽にHTMLを使ったメルマガの作成と配信ができるウェブサービス「MailChimp」を使ってみた - GIGAZINE

2013/02/11 227 users GIGAZINE MailChimp ウェブサービス 作業

最大2000人の購読者に対して、月間1万2000通までのメールマガジンを無料で配信できるクラウドアプリケーションが「MailChimp」です。同サービスは購読者の登録と管理を行う専用ツールやHTMLメールの作成支援機能、課金管理システムなどを備えており、ウェブブラウザ上で簡単な作業をするだけでオリジナルのメールマガジンを配信することが可能となっています。 Email Marketing and E... 続きを読む

プロがデザインしたHTMLメールの無料のテンプレート集（PSDファイル付き） -Campaign Monitor | コリス

2010/10/25 209 users ウェブデザイナー width コリス PSDファイル HTML

当サイトでも何回か紹介したことのあるプロのウェブデザイナーが作成した、高品質なHTMLメールのテンプレートを配布しているサイトを紹介します。 ダウンロードできるファイルには、下記のものがセットになっています。 HTMLメール用のHTML・画像一式 PSDファイル HTMLメール、PSDファイルともにレイアウトは、width=100%、サイドバーが左、サイドバーが右、の3パターンが揃っています（異な... 続きを読む

HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css | コリス

2017/12/06 197 users Flexbox メールクライアント コリス デフォルト 主流

WebブラウザがFlexboxやCSS Gridをサポートしていく中、HTMLメールではXHTMLとtableレイアウトがまだまだ主流です。 HTMLメールを作成する時のベースになる、HTMLのテンプレートと有用なデフォルトのスタイルを提供するCSSリセットを紹介します。 normalize.email.css -GitHub normalize.email.cssの特徴 normalize.em... 続きを読む

主要メーラーのバグを回避するHTMLメール用テンプレート -Email-Boilerplate | コリス

2011/08/09 194 users コリス メールアプリケーション パク Outlook 作成

Gmail, Outlook, Yahoo Mail など主要なメールアプリケーションに対応した、HTMLメールの主要なレンダリングの問題を避けるために開発されたテンプレートを紹介します。 合わせて、HTMLメールの作成に役立つポイントをまとめたスライドショーも紹介します。 Email-Boilerplateとは HTMLメールの作成に役立つスライドショー Email-Boilerplateとは ... 続きを読む

まだやってない？メルマガをスマホ最適化して開封率/クリック率を向上させる9個の方法 | Find Job ! Startup

2013/08/20 134 users 後回し ユニクロ Startup 工夫 ノウハウ集

メルマガはちょっとした工夫で反応率を上げられる！ 今回の記事では、対応必須ながら後回しになりやすいスマホ用メルマガで開封率・クリック率をアップさせる小技を紹介します。「今は必要ない、だけどいつか使うかも」という方は、ぜひサっとでも目を通して、メモして頂けたらと思います！ テキストメールでも、htmlメールでも共通するノウハウ集です。 今回の記事は、楽天・Yahoo!・ユニクロをはじめ5000件以上... 続きを読む

HTMLメールのデザインテンプレート集「Free HTML Newsletter Templates」 | DesignDevelop

2011/04/03 100 users DesignDevelop templates テイスト

デザインが施された内容のメールは、通常のメールよりも目を惹き、内容への注目度を高めてくれる効果があると思います。そこで今回紹介するのは、HTMLメールのデザインテンプレート集「Free HTML Newsletter Templates」です。（100+ free HTML email templates | Campaign Monitor）さまざまなテイストのテンプレートが多数収録されており、... 続きを読む

レスポンシブ対応のHTMLメールをドラッグ＆ドロップで驚くほど簡単に作成できる無料ツール -Topol.io | コリス

2017/10/12 97 users コリス フレームワーク レスポンシブ対応 テンプレート ベース

便利なツールがどんどんリリースされています。 一から作成するとなかなか面倒なレスポンシブ対応のHTMLメールを簡単に作成できる無料のオンラインツールを紹介します。 デザインもさまざまなテンプレートが用意されており、主要なメールクライアントすべてをサポートしています。 Topol.io Topol.ioはHTMLメールのフレームワーク「 MJML 」をベースに作成されており、さまざまなメールクライア... 続きを読む

HTMLメールに使えるテンプレート30選 | P O P * P O P

2007/07/04 92 users Apprentice II テンプレート 常識 ウェブサイト

HTMLメールに使えるテンプレート30選 July 4, 2007 5:54 PM written by 100SHIKI Apprentice II ネットショップではすでに常識となりつつあるHTMLメール。ウェブサイトのテンプレートはよくありますが、ありそうでなかったHTMLメール用テンプレートが紹介されていました。 スタイルシートも含めた1つのファイルになっていて使いやすいかもしれませんね。... 続きを読む

Gmail, Outlookをはじめ、デスクトップ・ブラウザ・スマホメールにレスポンシブ対応のHTMLメールのテンプレート -Cerberus | コリス

2016/01/14 88 users テン Cerberus レイアウト パターン 難易度

HTMLメールのコードは通常のWebページより難しい、という人は少なくないと思います。しかもレスポンシブ対応のHTMLメールになると、更に難易度があがります。 メールでよく利用されるレイアウトのパターンをシンプルにまとめた、レスポンシブ対応のHTMLメールのテンプレートを紹介します。 Cerberus Cerberus -GitHub Cerberusの特徴 CerberusのHTMLメールのテン... 続きを読む

HTMLメールが必要な時のために！今から見ておくHTMLメールテンプレート色々 - バンクーバーのWEB屋

2011/10/01 86 users HTML カナダ 需要 テンプレート ニュースレター

カナダに来た時困ったのが「ニュースレター？HTMLに決まってるじゃん！」な日本の考え方とは違ったHTMLメールバンザイ文化。 これまでの日本でのプロジェクトにはそいえばHTMLメールなんて扱うことが無かったので、結構困りました。日本でそれほど需要があるようには思えないHTMLメールですが、いざ作らなければいけない状況に陥った時に、なんだかんだあったら便利なHTMLメールのテンプレート！ 「必要無い... 続きを読む

HTMLメールを簡単に作成する「Premailer」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2012/06/28 80 users MOONGIFT レスポンス率 ITエンジニア 普及 海外

日本では普及はまだ今ひとつですが、海外ではHTMLメールが当たり前になっています。ビジュアル的にも映えるのでレスポンス率も高いようです。そんなHTMLメールを手軽に作成できるのがPremailerです。 0 続きを読む

レスポンシブ対応のHTMLメール用のシンプルなテンプレート（テキスト形式にも対応） | コリス

2014/01/13 79 users コリス 罫線 CSS 天地 見出し

Responsive HTML Email Templateの使い方 使い方は簡単です。 「email.html」を使って、HTMLメールを作成します。 作成が完了したら、CSSをインラインにします。 これで、完了です。 CSSをインラインにする時は、下記のツールが便利です。 HTMLメール用のコードの完成 コードの下には、テキスト形式のメールでの表示も確認できます。 見出しの天地に罫線が自動で入... 続きを読む

ASCII.jp：メルマガ開封率をMeasurement Protocolで調べる｜自分でできる！ユニバーサルアナリティクス活用ガイド

2015/07/13 68 users img ユニバーサルアナリティクス ASCII.jp 開封率

小さな企業やサイトで役立つユニバーサルアナリティクスの便利な使い方を紹介する本連載。今回はユニバーサルアナリティクスに追加された「Measurement Protocol」でHTMLメールの開封率を調べる方法を解説します。 応用自在のMeasurement Protocol Measurement Protocolは、Googleアナリティクスに直接データを送信する仕組みのことです。<img>タグ... 続きを読む

『HTMLメールよりテキストメールのほうがクリック率が1.84倍高い』って知ってました？ | FULL KAITEN BLOG

2017/05/10 65 users FULL KAITEN BLOG べびちゅ テキストメール

『HTMLメールよりテキストメールのほうがクリック率が1.84倍高い』って知ってました？ 2017年5月10日 メルマガで一番手間がかかるのが、HTMLメール（※１）の準備ではないでしょうか？ ベビー服ネットショップ『べびちゅ』 でも、2016年12月までのメルマガはHTMLメールが中心でした。 テキストメールは、HTMLメールを受信できない人や簡易な内容のメールを送る際に利用する補助的な位置づけ... 続きを読む

HTMLメール用のレスポンシブテンプレート「Antwort」:phpspot開発日誌

2013/03/22 63 users メールクライアント float レスポンシブフレームワーク

Antwort | Responsive Layouts for Email HTMLメール用のレスポンシブテンプレート「Antwort」 HTMLメールを送る際に、メールクライアントに併せてレスポンシブに動くみたい。 float対応していないクライアント向けにtableタグを使う等しているところが、他のレスポンシブフレームワークと違うところ メールでのマーケティングに活用したいところですね 関連... 続きを読む

LOVE2.0 - モヒカン族を好きになってしまったら

2006/12/14 59 users モヒカン族 中黒 ウィット ユーモア LOVE2.0

恋愛, netaモヒカン族は、一見クールで近寄りがたいオーラを発しているかもしれませんが、ウィットとユーモア溢れるエレガントな愛すべきキャラの人です。そんなモヒカン族を好きになってしまったら……。メールを書くとき1バイト系カタカナや2バイト系英数字を使用しないローマ数字や丸囲み数字を使用しない中黒（・・・）ではなく三点リーダ（…）を使うHTMLメールを送らない正しい表記を用いる正規表現を使う（例：... 続きを読む

HTMLメールが正しく表示されるか調べてくれる『fractal』 | 100SHIKI

2011/07/11 58 users FRACTAL メーラー 100SHIKI バリデータ ツール

よくあるツールだとは思うが、シンプルで良さそうだったのでご紹介。 fractalはいわゆるHTMLメールのバリデータだ。 そのコードが正しいのか、ちゃんと画像が表示されるのか、といったことを調べてくれる。 使い方は簡単で、HTMLメールのコードを貼り付けるだけだ。また24種ものWeb/デスクトップ/モバイルのメーラーに関して互換性をチェックしてくれるらしい。 HTMLメールを作るときには参考にした... 続きを読む

HTMLメールのベストプラクティス的なものを調べてみた - F.Ko-Jiの「一秒後は未来」

2013/05/09 29 users 横幅 F.Ko-Ji あたり ブラウザ コンテンツ

最近HTMLメールでメールを送ってくるサイトが増えていますが、読みやすく仕上がっているものと、読みづらく感じるものとがあります。 その原因のひとつは「横幅」でしょうか。コンテンツの横幅が固定されていない場合、ブラウザを最大化して表示するとメールの1行も横に長くなってしまい、流し読みしづらくなりますよね。 ではHTMLメールの横幅はどうするのが適切なのでしょう。そのあたりを調べていたら「HTMLメー... 続きを読む

メールのためのレスポンシブWebデザインフレームワーク「Antwort」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/03/27 29 users HTML ソフトウェア エンジニア エッセンス オープンソース

AntwortはレスポンシブなHTMLメールを実現するスタイルシートフレームワークです。HTMLはWebブラウザを使って閲覧するのに用いるのが基本ですが、他にも使われることがあります。その一つがHTMLメールです。独自の知識が必要になることもあるのですが、Antwortを使えばそのエッセンスだけすぐに得ることができます。 サンプルデザインです。 スマートフォンではこのように見えます。 デスクトップ... 続きを読む