HTMLメール制作のコツや便利なサービスいろいろ
2017年2月1日 Webサイト制作, マーケティング, 便利ツール みなさん、購読しているニュースレター（メールマガジン）はありますか？私は利用しているWebサービスや趣味関連のものをあわせてだいたい10サイトくらい購読しています。どれも素敵なデザインのHTMLメールばかりで、見ていて楽しくなっちゃいます :) そんなわけで今回はそんなHTMLメールの現状や、制作時のTipsを紹介します。効果的な導入方法を一緒に考えてみましょう！ ↑私が10年以上利用している会計ソフト！ HTMLメールとは テキストのみのメールではなく、テキストに色がついていたり、画像が挿入されている、HTMLを使って設計されたメールのことをHTMLメールと呼びます。海外では大手Web系企業をはじめ、多くの会社がHTML形式のニュースレターを配信しています。私が購読しているWebサービスのニュースレターやブログの更新通
電話番号への自動リンクを禁止する - スマートフォン（iPhone、Android）
電話番号などの数字に自動的にリンクが張られるのを禁止するタグ。 対象 ： iOS(iPhone) / Safari 電話をかけるタグ - phoneto スマートフォンはフィーチャーフォンと同様、以下のようにタグ（a要素）を書くとリンク選択時に電話を掛けられる。 <a href="tel:0301234567">03-0123-4567</a> （電話番号が 03-0123-4567 の例） iPhone と Android スマホのいくつかのブラウザで動作を確認した。 電話番号のリンク選択後すぐに発信せず、発信確認画面などが表示される。 電話番号への自動リンク禁止 iPhone の Safari などは、上記のタグを書かなくても数字に自動的にリンクが張られる。 ただ、220.100.10.10 のようなIPアドレスにもリンクを張ってしまう。 自動的にリンクを張らないようにするには以下のタ
無料で簡単に埋め込み可能なグラフが作れる「Chartspree」
ウェブページにグラフを挿入したい場合、専用のソフトでグラフを作成したり、画像を作成したりしなければならないわけですが、これは非常に面倒な作業です。しかし「Chartspree」なら、ページソースに埋め込みコードを加えるだけで簡単にきれいなグラフを挿入でき、月1万ビューまでならば無料で使用可能です。 Chartspree | Make charts in seconds http://www.chartspree.com/ 「Chartspree」のコードを埋め込む際は、イメージタグにグラフごとのコードを貼り付ければOK。 <img src="//(ココにコードを入力)" > Chartspreeで作ることができるグラフは大まかに3種類で、それぞれ「svg?」以下の文字列を自由に変更することができます。 ◆棒グラフ コード：api.chartspree.com/bar.svg?Foo=1,1
【WordPress】「p」とか「br」の自動整形を無効に出来るプラグイン
プラグイン大好き、@dearwalker_yuyaです。 WordPressって自動で「p」や「br」を入れてくれるんですが親切が仇になることもあるんです。 以前紹介したこれで【閉じタグ】が無かったり【開きタグ】だけ変なとこにあったりと,おかしなエラーが出てました。 調べてみるとWordPressが自動で入れてれる「pタグ」が問題だったようです。 よし、原因はわかりました。対策しましょう！ WPプラグイン『PS Disable Auto Formatting』を入れる イメージ通りのプラグインに『PS Disable Auto Formatting』ってステキな奴があったのでこいつを入れます。 WordPressより『PS Disable Auto Formatting』でプラグイン検索で出てきます。 FTPなどでアップロードされる方はこちらからどうぞ。 ・PS Disable Auto
事前レンダリングでウェブページの表示時間を高速化
[対象: 上級] 事前レンダリングと呼ぶ技術を使って、ウェブページの表示時間を高速化する方法をこの記事では解説します。 事前レンダリングとは 事前レンダリング (Prerendering)とは、その名のとおり、ページの読み込み（正確にはレンダリング）を前もって実行する仕組みです。 Google検索で採用されている「インスタントページ」には事前レンダリングが使われています。 下のキャプチャは、Googleで「Amazon」を検索したときのChromeのタスクの状況をタスクマネージャで確認したものです。 「事前レンダリング」でAmazon.co.jpが出ています。 「Amazon」で検索したユーザーはかなり高い確率で（1位に出てきた）Amazonのホームページをクリックするはずです。 Chromeは先回りして、ユーザーがクリックしなくてもAmazonのホームページを取得および描画、つまりレンダ
Googleの検索結果にパンくずリストを表示させる方法！
Googleの検索結果には、通常ですと対象ページのURLが表記されますが、 Googleに対して、パンくず用の適したコーディングを行う事により、 リンク付のパンくずリストをGoogleの検索結果に表示する事が出来ます。 今回は、そんなパンくずリストの構築方法を解説します。 パンくずリストの効果 正しいパンくずリストのマークアップ 正しくマークアップされたか確認する パンくずリストの効果 Googleの検索結果では、通常ですと対象ページのURLが直接表示されます。 Googleの検索結果にパンくずリストを表示させると、単純に目立ってクリック率が上がる他、 正しいマークアップによる正しい情報をGoogleの検索エンジンに伝える事が出来るので、 SEO的にも有効です。 また、表示されたパンくずには、対象のページへのリンクも貼られますので、 検索結果から複数のページへ直接移動する事が出来、ユーザビ
【AddQuicktag】ビジュアルエディタから"class"や"id"がプルダウンから選べるプラグイン | Wordpress奮闘記
WordPressのテーマには、CSSファイルにさまざまな”class”属性や”id”属性が用意されています。 これらをどう活用するかが美しいサイトを作っていくポイントになるようです。 特に、有料テーマを購入した場合、これらを活用しないと宝の持ち腐れになってしまします。 例えば、前の記事でご紹介したように、この賢威ではさまざまなアイコンなどが用意されています。 しかし、このような場合、いちいちタグを手書きで修正しなければなりません。 例えば、上の画像の一番上の場合、ソースに下記のように直接書かなければならず、とても面倒です。 <p class=”caution1″>先頭にCHECK！という画像が付いた状態で表示されます。</p> このような手間を大幅に軽減してくれるのが「AddQuicktag」です。 「AddQuicktag」のインストール方法 「プラグイン」－「新規追加」を選択します。
スライドを手軽に作成、シェアサイトで共有、他サイトへ貼り付け、編集できるWebサービス・projeqt
スライドを簡単に作成し、シェアやEnbed、編集も手軽に出来るWebサービスのご紹介。見た目もクールで管理もしやすく、日本語も問題無いのでなかなか便利そうです。 全画面やカルーセルっぽい見た目にも出来るスライド作成サービスです。貼り付けもできるのは結構いいかも。 スライドを作成、シェア出来る、というもの。他サイトに貼り付けるEmbed機能とかPDFやパワポをアップロードして作成、とかも出来ます。 ↑ スライド作成画面はこんな感じ ↑ スライドを1枚ずつ作成。上記のようにテキストでも作れます。WYSIWYGを利用するので楽そうですね。 ↑ 各シェアサイトで共有も出来ます。また、Embed機能もあるので他サイトに自由に貼り付ける事も。 なかなか良い感じです。要アカウントですがFacebookやTwitterのアカウントも利用可能です。手軽にお試しになられては如何でしょう。 projeqt
Twitter カード 7タイプの使い方をカード種別ごとに解説するよ
Twitter カード 7タイプの仕様を Twitter の公式ドキュメントから翻訳して解説します。公式ドキュメントから抜粋して日本語で書き直していますので完全な翻訳ではありません。 Twitter Cards （Twitter カード）、この Blog でもかなり前から指定して使っていますが、7種類のカードから選択できたり、それぞれに指定できる値が異なってたりしてわかりにくいっていう声を聞きましたので （公式な日本語ドキュメントも今のところないし）、簡単に各カード種類別の仕様をまとめてみました。 Twitter Cards は、Facebook や Google+ などが採用している、OGP （Open Graph Protocol） を利用して、ウォールやタイムラインにリンクを投稿する際の表示内容を指定するのと同じ。それの Twitter 版です。タイムラインに URL が投稿されたと
構造化データを活用しよう！ - 2 つのアップデート
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Google が Microdata による組織ロゴの意味づけに対応したそうなので
Google ウェブマスター向け公式ブログで紹介されていましたが、Microdata （schema.org） による、組織ロゴの意味づけをサポートし、組織を象徴する画像と Web サイトを関連づけることで、Google 検索結果で使用される組織ロゴの画像を指定できるようになったそうです。 ということで、実際に使用する場合のサンプルソースなど挙げてみようと思います。 組織のロゴの schema.org マークアップのサポートを開始しました ： Google ウェブマスター向け公式ブログ このたび、Google では組織のロゴについての schema.org マークアップのサポートを開始いたしました。このマークアップによって、組織を象徴する画像とサイトを結び付けることができます。ウェブマスターの皆様は、Google 検索結果で組織のロゴとして使用される画像を指定することができます。 組織のロ
組織のロゴの schema.org マークアップのサポートを開始しました
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
休眠ユーザーをサービスに取り戻す！ユーザー向けHTMLメールで気をつけたいポイント : LINE Corporation ディレクターブログ
こんにちは、ライブドアブログを担当しておりますディレクターの小林です。 サービスをリリースしてせっかく新規にユーザー登録してもらっても、ユーザーがサービスに戻ってこないという悩みは多くのウェブディレクターが抱えていると思います。アプリなどではスマートフォンOSのプッシュ通知機能を使ってユーザーにリマインドを行うサービスも増えていますが、eメールを使ったユーザーへのリマインドについてもまだ押さえておきたいところです。 ライブドアブログでは、新規にブログを作成してくれたユーザー向けにHTML形式のeメールを使ったフォローをはじめました。「ブログを作ったはいいもののまずどうすればよいのかわからない」という初心者の方や、知識にかかわらず三日坊主になりがちな方を応援するのが目的です。今回はライブドアブログでの実例をもとに、ユーザーへのHTMLメール配信で気をつけたいところを紹介したいと思います。 ユ
無料で手軽にHTMLを使ったメルマガの作成と配信ができるウェブサービス「MailChimp」を使ってみた
最大2000人の購読者に対して、月間1万2000通までのメールマガジンを無料で配信できるクラウドアプリケーションが「MailChimp」です。同サービスは購読者の登録と管理を行う専用ツールやHTMLメールの作成支援機能、課金管理システムなどを備えており、ウェブブラウザ上で簡単な作業をするだけでオリジナルのメールマガジンを配信することが可能となっています。 Email Marketing and Email List Manager | MailChimp http://mailchimp.com/ 「MailChimp」のサイトにアクセスして「Singn Up Free」をクリック。 「Email」などの必要事項を入力して、「Create My Account」をクリック。 登録したアドレスに以下のようなメールが届くので、「activate your account」をクリックしてアカウン
無料配布：レスポンシブなHTMLメール用テンプレート / Maka-Veli .com
あ、なるほどー。確かにHTMLメールもレスポンシブにしちゃえば良いんですね。 あまり行わないので発想無かったです。 種類は全部で5種類 例えばこれは こうなる 例えばこんなのは こうなる なるほどなるほど。便利。 使用方法なんかも書いてあります。 興味のある方は是非、こちらから Responsive Email Templates – ZURB Playground – ZURB.com http://www.zurb.com/playground/responsive-email-templates 無料配布：レスポンシブなHTMLメール用テンプレート is a post from: Maka-veli.com
Web上でHTML+CSS製のスライドを簡単に作成、公開できるWebサービス・rvl.io
よく見かけるHTML+CSS3なプレゼン をオンラインで簡単に作成、公開 する事ができるWebサービス、rvl.io のご紹介。編集作業も容易に出来る のでフレームワーク等から作るの も面倒、という方は利用してみては。 WYSIWYGを使ってreveal.jsを使用したスライドをオンラインで作成、公開できる、というWebサービス。キーカーソルで進めたりするアレです。 Web上でプレゼンを生成出来る、というサービスです。WYSIWYGを使えるので簡単に作成出来ます。 ↑ アカウントを作成して作る、という流れ。アカウントはOpenIDです。 ↑ ログインすればマイページが発行されます。スライドは複数作れるみたい。New Deckで新規作成です。 ↑ WYSIWYGを使えます。画像やリンクもOK。HTMLで書くことも可能です。画面右端と下に+のアイコンがあり、ここをクリックする事で次のページを作
ガラケーサイトのWebデザイン・コーディングで気をつける30の事
ページサイズ 1. 各機種のメモリ容量にあわせてページサイズは100Kbyte以下推奨 メモリ容量の関係から、1つのページサイズは画像やテキストなどすべてのファイル合わせて「100Kbyte以内」に収めるのが望ましいです。 ページサイズは、Chromeブラウザの場合「検証」→「Network」のタブから、Firefoxの場合は「要素の調査」→「ネットワーク」から確認できます。 また、キャッシュからの読込があると実際のサイズよりも軽量になるのでスーパーリロードと呼ばれるCtrl + Shift + R またはCtrl + F5で再読込すると、キャッシュクリアしての計測が可能になります。 head関連 2. DOCTYPE宣言はXHTML Mobile 1.0を推奨 検索エンジンがモバイル（ガラケー）サイトだと認識しやすいよう、モバイルSEO的な観点から下記のようにします。 <!DOCTYPE
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
Antwort - Responsive Layouts for Email