タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
この記事は BASE アドベントカレンダー 13 日目の記事です。 はじめに こんにちは。 BASE BANK 株式会社 Dev Division にて Software Developer をしている永野(@glassmonekey)です。 普段はバックエンドエンジニアとして、Go/Python/PHP を主に書いてたりします。 最近はチームの分析基盤づくりとかもやってたりします。 そのことについて先日書いたりもしたので、もし良かったらご確認ください。 devblog.thebase.in 私達のチームでは、「BASE」でショップを運営しているショップオーナーが簡単に資金調達をできる「YELL BANK」というサービスの開発・運営しています。 thebase.in あるプロジェクトで、ショップオーナーへのコミュニケーション手段に HTML メール を新しく作ることになりました。その際に
普段からビジネスにおいてよくつかわれるメール。 今となってはほんとあたりまえになりました。 わたしがこの仕事をはじめた98年前後はメールでおくってもらえますか?っていうとめんどくさいな・・・電話じゃだめなの?なんて嫌がられたものです。 さてさて、メールを受信する際に意識されているかどうかわかりませんが2通りの形式があるのをご存知でしょうか? 1つは文章だけで構成されるテキスト形式メール もう一つは画像の挿入や文字加工で見た目を整えたHTML形式メール(HTMLメールと呼びます) です。 HTMLメールというのは皆さんもよく受信される画像や文字が装飾されたメールでAmazonや楽天などのメールマガジンなどでよく使われます。。 今回はこのHTMLメールはセキュリティ上やめるべきという内容のお話です。 「テキストメール」と「HTMLメール」の特徴 テキストメールの特徴 テキストメールというのは単
イベント開催の告知や新商品の紹介メールなど、画像やリンクを含んだHTMLメールを作成するにはHTMLやCSSの知識に加え、デザインセンスも必要です。そんな時に便利なのがメール作成ソフトウェアの「Mail Studio」で、専門知識もセンスも不要、テンプレートを選んで画像やテキストを編集するだけでオシャレなHTMLメールを作成できるとのこと。実際にMail Studioを使って、手軽にオシャレなHTMLメールを作成してみました。 Mail Studio - Powerful Email Design Tool https://mailstudio.app/ Mail Studioのインストーラーをダウンロードするために、公式サイトにアクセスして「Download for free」をクリック。 Mail StudioはWindows・macOS・Linuxに対応していますが、今回はWindo
世の中には多数のメールクライアントアプリが存在していますが、アプリごとにHTMLメールのどの機能に対応しているかはバラバラです。「Can I email…」ではHTMLメール作成時に「この機能は使ってもいいのかな……?」と疑問を持ったときに、世の中のメールクライアントアプリのどれくらいが機能に対応しているのかを一目で確認できます。 Can I email… Support tables for HTML and CSS in emails https://www.caniemail.com/ サイトにアクセスし、中央の入力欄に使用したい機能を入力すると下部にメールクライアントごとの対応状況が表示されます。緑色は「対応」で、黄色は「部分的に対応」、赤色は「非対応」です。同じクライアントでもバージョンごとに対応が分かれている場合は「どのバージョンから使用できるようになったのか」が表示されていま
日々のWebサイトやアプリの制作を通じて、役に立ちそうな技術情報や楽しい話を発信しています。私たちはGMOメディア株式会社のクリエイターです。 はじめまして。サービスデザイン部のたなかです。 今だに仕事後のビールは最高のご褒美だと信じている中堅あたりのデザイナーです。 現在は ゲソてん などゲームプラットフォームを中心にデザイン業務をしております。 以前、友人(HTMLの知識ゼロ)に「ビール1杯おごるから、 HTMLメール配信用のテンプレート作ってよ」と言われました。 「正直、HTMLメールなんて簡単だろう。」 「このご時世 技術もデバイスも進化しているから、普段のコーディングでできるだろう。」なんて思ってナメてかかりました。 ところがどっこい、HTMLメールは…ビール1杯じゃ足りないほどの頭を悩ますモンスターだったのです。 今回は同じような悩みにぶつかった方にも参考にしてもらえるように、
HTMLメールを使うのも当たり前になってきました。しかし、レスポンシブなメールをきちんとメール向けに仕様に合わせて送らないとレイアウトが崩れてしまったりします。それではせっかく目立つHTMLメールを使っているのに勿体ないです。 そこで使ってみたいのがMaizzleです。HTMLメールを作るためのフレームワークです。 Maizzleの使い方 一例です。Webブラウザでプレビューを出しながら作成できます。 よくあるメールアドレス確認メール用のテンプレート。 管理画面です。 ホットリロードやスクロール同期などの機能があります。 MaizzleはJekyllに似たテンプレートエンジンを使っています。テンプレートに沿って作成することで、レスポンシブなメールテンプレートが簡単にできます。デバッグ機能もあり、HTMLメールを作る際に役立つツールになるでしょう。 MaizzleはJavaScript製のオ
レスポンシブHTMLメールとは、PCやスマートフォンなどのデバイスの画面サイズに応じて、自動的にレイアウトや画像サイズを最適化して表示するHTMLメールのことです。1つのソースで様々なデバイス表示に対応することができます。 しかしながら、HTMLメールのレスポンシブ化の方法や手順は、Webサイトのレスポンシブ化とは少し異なる点があります。既にレスポンシブデザインを理解しているWebサイト制作者の方でも、HTMLメール用のレスポンシブ化について学んでおく必要があるでしょう。 本記事では、多くのメールクライアントで正しく表示される、シンプルなレスポンシブHTMLメールの作成方法を具体的なコーディング方法も交えながら、初心者の方にもわかりやすく解説します。
HTMLメールの作り方!デザインからコーディングまで押さえておきたいポイント【サンプル付き】 更新日:2020/02/05 みなさん、HTMLメールを作成したことはありますか? テキストだけで作ったメールよりも凝ったレイアウトにすることができ、画像を使って華やかに見せることもできるので、よりユーザーの目を引くことができますよね。 華やかなメルマガなどが送られてくると、ついつい見てしまう方も多いのではないでしょうか。 しかし、HTMLメールにはかなり制限が多く、実装には非常に手間がかかります。 そこで今回は、HTMLメールを作成するにあたって注意したい点を、実際にデザイン~コーディング、テスト送信まで行ってご説明していきたいと思います。 【目次】 大前提!まずはこれを守ろう デザイン時に気を付けること こんなデザインは難しい メーラーやブラウザでの違い 実際にデザインしてみた コーディング時
HTMLメールとは、メルマガ配信などの際に画像の挿入や文字の色・サイズの変更などが可能な、Webページと同様の装飾に対応したメール形式です。 HTMLメールには「視覚的な訴求が可能で、ユーザーの行動を測定できる」というメリットがあります。しかし「作るのが難しそう」などのイメージから、HTMLでのメルマガ配信に踏み出せないこともあるでしょう。 そこで今回は、無料で使えるHTMLメールのデザインテンプレートをご紹介します! その他にも、HTMLメールを簡単に作成できる便利なツールも紹介していますので、ぜひご参考ください。 HTMLメールとは? HTMLメールとは、HTML形式で作成されたメールを指します。 HTMLはWebページ作成用に開発された言語です。テキストメールが文字だけで作られているのに対し、HTMLメールは画像を挿入したり文字の色やサイズを加工したりといった、Webページ同様の装飾
メールマガジン(メルマガ)運用担当者必見!HTMLメールの各パーツの適切なサイズとは?メールマーケティングのトレンドを押さえよう更新日: 2020年08月18日HTMLメールデザインメルマガ メールは多くの人に情報を届ける手段として、日々利用されているもの。もちろんビジネスシーンでも同様に、メールマガジンを利用して消費者に情報を提供している企業も多いです。最近では、メールマガジンの中でもHTMLメールを利用するケースも増えてきています。 しかし、そのHTMLメールを活用したいと考えていても、メールの大きさやリンクボタンの大きさに悩む方も多いのではないでしょうか。そこで記事では、各社のHTMLメールの各パーツに適切なサイズを検証しました。 メールマガジン(メルマガ)の中でも利用の多いHTMLメールとは HTMLメールとは、Webサイトを作成するために使われるマークアップ言語であるHTMLで作
マイクロソフトの「Outlook」(以下、アウトルック)を初期設定のまま使っていると、作成したメールにフォントなどの書式が指定されているのをご存じだろうか。 アウトルックでは、HTML、テキスト、リッチテキストの3つから、作成するメールの形式を選択できる。リッチテキスト形式はExchangeサーバーを介した社内メールなどで使われる特殊な形式なので、実質的にはHTML形式かテキスト形式かの二択になる。HTMLはウェブページを作成するときに使われる言語であり、フォントや文字色の指定、画像の配置など、さまざまな書式を設定できるのが特徴だ。これに対してテキスト形式は、書式のないプレーンなテキストとして送信される。
HOME Marketing ホワイトペーパーダウンロード用ランディングページ&HTMLメールのテンプレートを無料配布!【Account Engagement(旧 Pardot)】 Marketing ホワイトペーパーダウンロード用ランディングページ&HTMLメールのテンプレートを無料配布!【Account Engagement(旧 Pardot)】 こんにちは、DXソリューションチームです。 今回は、Marketing Cloud Account Engagement( 旧 Pardot )の活用にお悩みの方向けに、管理画面から設定するだけですぐに使えるホワイトペーパーダウンロード用のLP(ランディングページ)とHTMLメールのテンプレートをご用意しました。ぜひご活用下さい! こんな方にオススメ ホワイトペーパー施策を試してみたいが、標準はデザインがやぼったい 一刻も早くBtoBマーケテ
さまざまなデバイスに合わせたHTMLメールの作成って大変ですよね。デバイスの幅、メーラー固有のバグ、OS別のバグなど、考えることが多くて作成する前から気がめいってしまうものです。ですが安心してください。レスポンシブHTMLメール用のフレームワーク「MJML」を使えば、そういった悩みから解放されるかもしれません。当社のレスポンシブ Eメール デザインサービスでもこのフレームワークを使用しています。 ということで、今回はMJMLを使用したレスポンシブHTMLメールの作り方をご紹介します。 MJMLとは MJMLとはレスポンシブEメールデザインを作成するためのフレームワークです。MJMLという独自のマークアップ言語で記述し、コンパイルするとHTMLファイルが出力されます。 現在プレリリースされているv4.4.0では、リンク付きのボタンを簡単に設置できるmj-buttonというコンポーネントが追加
普段からビジネスにおいてよくつかわれるメール。 今となってはほんとあたりまえになりました。 わたしがこの仕事をはじめた98年前後はメールでおくってもらえますか?っていうとめんどくさいな・・・電話じゃだめなの?なんて嫌がられたものです。 さてさて、メールを受信する際に意識されているかどうかわかりませんが2通りの形式があるのをご存知でしょうか? 1つは文章だけで構成されるテキスト形式メール もう一つは画像の挿入や文字加工で見た目を整えたHTML形式メール(HTMLメールと呼びます) です。 HTMLメールというのは皆さんもよく受信される画像や文字が装飾されたメールでAmazonや楽天などのメールマガジンなどでよく使われます。。 今回はこのHTMLメールはセキュリティ上やめるべきという内容のお話です。 「テキストメール」と「HTMLメール」の特徴テキストメールの特徴テキストメールというのは単純な
基本的な使い方 作成編 リポジトリをクローンする npm ciで各種モジュールをインストールする npx gulpでツールを起動する src配下にhtmlファイルを設置しテーブルコーディングをする src/sass配下にscss記法でスタイルを記述 メール送信編 .env-sampleを.envにリネームして送信先、送信元の情報を記述する npx gulp mailでメールを送信する メールテンプレートとしてhtmlを複数作成している場合、npx gulp mail --file hogeとするとhoge.htmlの内容を送信できます。(デフォルトではindex.html) また、メールのタイトルを指定したい場合、npx gulp mail --subject fugaとするとfugaがタイトルのメールとして送信されます。(デフォルトではhtml mail test) 設定ファイルの記述
2019年9月13日 HTMLメール版のCan I use!「Can I email」が誕生しました!! UI開発者 板垣 先日、普段は静かなHTMLメールコミュニティが久しぶりに盛り上がりを見せていたのでなにごとかと思いましたが、どうやら有志によってHTMLメール版のCan I useともいえる「Can I email」が作成されたようです! これで、作成中のHTMLメールを都度、対象メールクライアントに送信して表示の確認をする手間が省けそうです。 サイトの説明ページに書かれていたことを簡単にまとめました。 このサイトはHTMLメール好きの人たちが手を取りあって作成された。 サイトでは25のメールクライアントでテストが実施されており、それぞれの環境でサポートされているHTML要素やCSSプロパティが確認できる。 現在、サポート状況を確認できるHTML要素およびCSSプロパティの数は約50
React Email 2.0では、作成したメールのプレビュー機能が作り直され、実際にメールを送信することなくWebブラウザでテンプレートがどのように表示されるかを確認できるようになっている。具体的には、モバイルプレビューにて、ブラウザのウィンドウサイズを変更したり、DevToolsを開いたりすることなく、小さい画面でメールがどのように表示されるかを確かめられるようになったほか、ファイルツリーでサブディレクトリがサポートされるようになり、メールの自由な整理が可能になった。また、問題発生時にエラーメッセージが表示されるようになり、問題の原因がわかりやすくなっている。 あわせて、新規インストールでローカルサーバの起動時間をテストしたところ、従来バージョンでは最大40秒だった一方、今回リリースされたReact Email 2.0では、最大でも7秒だった。また、初期設定の完了後には起動時間が1秒ほ
お客様に自社のサービスや商品を広告するメルマガは、数あるマーケティングの方法の中でも高い効果を持っています。 高い訴求力をもつメルマガですが、効果的に訴求ができるメルマガを自力で作成するには、ある程度のIT関連の知識が不可欠でしょう。 写真や文字に装飾のある「HTMLメール」はメルマガを使ったマーケティングでは主流になっています。 そこで今回は、メルマガ広告の土台をなす「HTMLメール」の作成方法に関してご説明していきたいと思います。 また、「HTMLメール」を1から作る方法の他に、とても簡単に「HTMLメール」を作る事ができる「エディタ」というシステムをこっそりご紹介しています。 ビジネスにメルマガを導入しようと思っている方はもちろん、すでに「HTMLメール」を使った広告を導入している方もぜひご覧ください。 直観的な操作で思い通りのHTMLメールを作るならブラストメールのHTMLエディタ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く