ドラッグ&ドロップで作れるオープンソースのHTMLメールビルダー・「Mosaico」MosaicoはD&Dで作れるHTMLメールビルダーです。OSSとしてソースコードが公開されています 従来のこの手のアプリと同じ操作法で、ブロックを追加しながら編集し、HTMLメールを作る事が出来ます コーディングモードの類は無いみたいなので、どちらかというとWeb制作の技術や知識が無い方向けのアプリとなるので、そういったクライアントや案件がある時に重宝しそうです 公開されたのはかなり前みたいですが普通によさ気だったので備忘録。ライセンスはGPLとの事です Mosaico
最近のHTMLメール横幅は600px台前半！HTMLメール事情2017 調査編 | 株式会社NONAME Produce(n2p)｜デジタルプロモーション企画・制作
HTMLメールのメインエリアの横幅を調べてみました。 600px未満 paidy 460px X（Twitter） 500px chatwork 580px Adobe 600px STORES 600px nuzzel 600px note 600px codepen 620px cakes 640px giftee 640px plesk 640px MFクラウド給与 640px ユニクロ 640px CAMPFIRE 642px ホットペッパービューティー 660px ぐるなび 700px plesk japan team 700px apple 740px 700px以上・リキッド ZOZO 一部リキッド・メイン700px Facebook リキッド Peatix リキッド ぐるなびお取り寄せニュース リキッド 600px台前半にボリュームがある感じです。 最近のものは700px台
モダンなダッシュボードのOSSなメールマガジン・メーリングリストマネージャ・「listmonk」
listmonkはモダンなダッシュボードのメルマガ/メーリングリストマネージャです。セルフホスト型として提供されていますのでDLして自分の管理するサーバーにセットする事になります。 数百万の購読者のいるメルマガでも対応する事が出来るパワフルなソフトウェアみたいです。管理画面もすっきりしていて肝心のメルマガ、ニュースレター等はWYSIWYGで書けますのでなかなか使いやすそうですね。 注意点としてソフトウェアとしてはα版での提供である点に気を付けて欲しいそうですが、とはいえzerodha.comという所で数か月くらい数千万のメールを処理出来ている実績はあるそうです。 バックエンドはGo、フロントエンドはAnt Designが使われているそう。ライセンスはAGPLとの事です。 listmonk
HTMLメールのメールマガジンのコーディング【スマートフォン最適化篇】 | 株式会社NONAME Produce(n2p)｜デジタルプロモーション企画・制作
HTMLメールのメールマガジン、スマートフォンでも、もっと見やすくする方法をまとめました！ 前回までは、PCで見るためのHTMLメールの作り方をお伝えしました。 しかし、前回までの方法ですと、Androidの一部機種で、 画面の領域から文字や画像がはみ出し、スクロールバーが表示されてしまい非常に読みにくい。 viewportを設定しても無効になってしまいます。 そんな難題に答えてみた本日のサンプルはこちらです。 デザイン上の注意 デザインは横幅300px程度のスマートフォンの画面で見ることを前提に、横幅600pxで作る。 横幅600px以上は背景色が見えるようにします。 600px未満では縮められるようにする想定です。 レイアウトは一カラムで メディアクエリやjavascriptなどはきかないので、 横幅に応じて一カラムと二カラムを切り替えるのは難しいです。 なので、ニカラム以上のレイアウ
HTMLメール作成で調べたことまとめ - Qiita
HTMLメールのお仕事がきて調べたことまとめ htmlメールを作成してお客様にhtmlファイルを納品するところまでの調査。 注意点 基本的にテーブルコーディング CSSはインライン 全体のサイズは600pxで作る 画像はサーバーにアップして絶対パスで入れる。読み込みを早くするために画像圧縮必須 pngではなくgifやjpgを使用する 画像読み込みもhtmlサイズも容量が大きいと重いしスパム扱いされるといやだしなるべく軽くする 文字の自動調整をしないようにbodyにsize-adjust必須（noneじゃなく100%で） viewportにinitial-scale=1をいれるとAndroidで解釈がおかしくなる レイアウトで段組やカラム分けしたいときはtableの入れ子で作る メーラーによってはキャッシュが根強いので配信後に修正を送り直しても「画像が変わらないよー」って言われるので厳密にす
HTMLメール制作編：コーディングサンプルや、役立つWebサービスのご紹介 | 株式会社グランフェアズ
Posted by NAGAYA on Jun 7th, 2018 HTMLメール制作の基本をご紹介する記事、後編です。 前回の「デザイン/コーディング前に押さえておきたい、HTMLメール作成の基礎知識」ではHTMLメールの制作にあたって事前に知っておきたいポイントを挙げてみましたが、今回はサンプルなども交えて、より実制作に即した内容をお届けしたいと思います。 グランフェアズで実施したHTMLメール初期制作の流れに沿って、下記の3点をお送りします。 今回掲載するサンプルコードは、最大幅640pxのリキッドレイアウトを前提としています。 「ブラウザ表示用HTML」をコーディング 「配信用HTML」に展開 テスト配信を実施 ※前回記事より：配信までの全体の流れ また、HTMLメールが配信できるサービスとして、利用事例があるのは下記です。 ECサイト構築・運用ASPサービス「FutureShop
最近のHTMLメールはリキッド＋最大横幅固定がオススメ！HTMLメール事情2017 実装編 | 株式会社NONAME Produce(n2p)｜デジタルプロモーション企画・制作
久しぶりにHTMLメールを作成しました。以前記事を書いた時から状況が変わっており、改めて最新情報をリサーチしてみました！ 調査編はこちらから コーディングと文字サイズの関係性 iOS10 標準メールアプリにて、コーディングと文字サイズの関係性を検証しました。 gmailアプリでも同様の傾向でした。 テンプレートはこちらを利用しています。 横幅を固定した実装の場合 横幅XXXpxで固定された実装の場合、スマートフォンから見たときのテキストサイズが変動します。 指定している横幅が大きいほど、縮小して表示されます。 環境によっては横スクロールが出る場合もあります。発生条件は確定していませんが、後から画像を読み込んだ際に発生する傾向があります。 ソースはこのようになります。 [html] <!--外側のテーブル--> <table cellpadding=
Outlookに勝てるHTMLメールコーディング vol.1「table構成編」 - Qiita
メールコーディングをする上で重要なポイント <table>タグを組むときにcolspanやrowspanを使わないように組み立てる 半角スペースは極力削る(Gmailは文字数やファイルサイズが大きいと制限で切られてしまうため、なるべく無駄な空白は削ったほうが良い) 画像のパス指定は 'http://' から記述 スタイルはインラインに記述、レスポンシブ対応はヘッダのCSSに記述する Outlook対策 画像のサイズは必ずwidth="size" height="size"を指定する(これを書かないと、元の画像サイズで表示されてしまう。どちらかをautoにしたい時は、width="300" height="*"と書く。 pxは書かない 、 *はauto という意味になる。) 今回の記事で実機確認しているのは、以下の通り。 Mac Mail Gmail(Chrome/FF) Inbox(Chr
HTMLメールでOutlookで崩れるときにする対策 | ocws BLOG
こんにちは。メルマガとかでHTMLメールを作るってこともあるかと思いますが、これがやったことある人はわかると思いますが結構やっかいです。 特にOutlook、、ここでもMicrosoftとかい！って感じなんですが、対応しないわけにはいかないわけで、いろんな人とあーだこーだして試行錯誤した結果、納得したやり方が見つかったので共有したいと思います。 あ、ちなみにここで書くことは、HTMLメールの基本的なところとあとはOutlookでも対応するため用の1つの例と大枠イメージを共有します！ まずは基本事項から まずは基本事項から押さえておきたいと思います。 何がなんでもTable構造 もうこれはお決まりです。HTMLメールの基本はTableレイアウトでお願いします。崩れたくなければ。 ちなみにtdの中とかにdivとかpとか書くのいいけど、padding系とかは使わない方がいいと思う スタイルはイン
Microsoft Outlook 2010 で 外部ツールでコーディングした html メールを送る
テキストエディタや Dreamweaver など、外部で作成した html メールを Microsoft Outlook 2010 で送信する方法。 →「テンプレート」として登録して送る 用意するもの：htmlメール用にコーディングされたhtml (html メールの作成方法は、別途記載する予定) 画像は外部に送るものならサーバにアップ。 社内用程度なら添付でかまわない。 「ファイル名を指定して実行（Windowsマーク+R）」で %appdata%\microsoft\stationery を記入し、Outlookのテンプレートのフォルダを開き、コーディングしたテンプレートをそのフォルダにコピーする。イメージもある場合は一緒でかまなわい。 Outlook2010を開き、「ファイル」→「オプション」→「メール」と辿り、「ひな形およびフォント」をクリック 「ひな形」のタブの「テーマ」をクリッ
リキッド＆レスポンシブ対応のHTMLメールをつくる（gulp） - Qiita
リキッドとレスポンシブ対応のHTMLメール用gulp開発環境をつくった。 Githubにサンプルメールとともにアップ。ほぼ大抵のメーラーでうまく表示できる。 Githubと対応メーラー Outlook2010(win7)： 固定幅表示/リキッドとレスポンシブ非対応のため Gmail(mac)： リキッドのみ/レスポンシブ非対応のため thunderbird(mac)： リキッドとレスポンシブどちらも正しく挙動する iOS 標準メーラー(iOS10)： リキッドとレスポンシブどちらも正しく挙動する Android 標準メーラー(Android4.3)： リキッドとレスポンシブどちらも正しく挙動する Android Gmail(Android6)： リキッドとレスポンシブどちらも正しく挙動する あるあるバグ＆仕様一覧 outlook2010 レンダリングがwordモード 背景画像がひけない リ
HTMLメール送信の注意点は？各メーラーでのテスト方法を紹介 | ITコラムdeSPIRAL｜スパイラル株式会社
普段からテキストメールを利用している人の中には、HTMLメールの送信方法がわからない人も多いのではないでしょうか。HTMLメールの活用は、コンバージョン率の向上にもつながります。本記事では基礎的な知識から送信方法まで、詳しく解説します。 HTMLメールの特徴をおさらい！ HTMLメールとは、HTML言語を使用して作成されたメールのことです。テキストメールとは違い、HTMLメールでは、文字のフォントや色、大きさを変えることができ、テキスト内に画像や動画を入れて自由にレイアウトすることが可能です。 HTMLメールを配信することで、文章だけでは伝わりにくいイメージをわかりやすく明示できるため、より顧客に伝わりやすくなります。 HTMLメールの配信は効果的？メリット・デメリット、流れを解説 特徴１．ユーザーの理解度・満足度が向上する Webサイト上で一部の文字が大きく表示されていたり、画像やグラフ
くずれないないHTMLメール - Qiita
くずれないないHTMLメール レイアウト 使うべきタグと避けるべきタグを意識する. ・paddingやmarginは使わない。 ・インラインCSSを使う。 ・br、hr、heightタグは使わない。 ・全体のレイアウトを作成するときはtableを使う。 ・doctypeを指定する。 ・”wrapper div”でリセットCSSを指定する。 ・フォントはデバイスによって変化することがあるので注意する。 ・基本的なタグや昔から使われているタグを使用する。 ・背景の色は常にリセットする。 https://sendgrid.kke.co.jp/blog/?p=2223 画像 ・pngファイルは使わない。 ・画像のサイズを指定する。 ・alt属性を全ての画像につける。 ・Outlookでは画像の周囲に余白が追加されてしまうことに注意する。 ・floatプロパティは使わない。 どう作るか？テーブルレイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to insert or embed web page in Outlook email body?