HTMLメール制作のコツや便利なサービスいろいろ
2017年2月1日 Webサイト制作, マーケティング, 便利ツール みなさん、購読しているニュースレター（メールマガジン）はありますか？私は利用しているWebサービスや趣味関連のものをあわせてだいたい10サイトくらい購読しています。どれも素敵なデザインのHTMLメールばかりで、見ていて楽しくなっちゃいます :) そんなわけで今回はそんなHTMLメールの現状や、制作時のTipsを紹介します。効果的な導入方法を一緒に考えてみましょう！ ↑私が10年以上利用している会計ソフト！ HTMLメールとは テキストのみのメールではなく、テキストに色がついていたり、画像が挿入されている、HTMLを使って設計されたメールのことをHTMLメールと呼びます。海外では大手Web系企業をはじめ、多くの会社がHTML形式のニュースレターを配信しています。私が購読しているWebサービスのニュースレターやブログの更新通
commit purring cat to memory » Blog Archive » HTMLメール レスポンシブ対応 PC・スマホ
(2014.04.24時点での記事) HTMLメールのレスポンシブ対応（PC・スマホ）をする機会があったので、技術メモです。 すでに他のサイト様で基本的な作りを学ばれている方向けです。 教えてもらったことなど多々です。ありがとうございます。 ちゃんとレスポンシブできたのは、iPhoneとXperia系、GalaxyS4でした。 現状のシェア率から考えると、おそらくユーザーの６割前後には対応できているのではないかと…。 あとは下に書いた端末以外はあまり確認できていないです。 私が確認したauやSoftBankのAndroidは、たまたまArrows、AQUOS PHONEだったからか (この２つは独自仕様性が高め) カラム落ちとか、横幅をwidth100%にしても合わないことが多かったので、 多少の崩れはあきらめることにしました。特に文章が長いときwidthを無視してくるみたい。 ほんとにち
しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則
レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基本原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レスポンシブWebデザインのツールもリリースされているので、ぜひ！ FROONT -Responsive Web Design Tool レスポンシブとアダプティブ Webデザイン フロー 相対的なユニット ブレイクポイント 最大限と最小限の値 オブジェクトのネスト モバイルファースト or デスクトップファースト Webフォントとシステムフォント ビットマップ画像とベクター レスポンシブとアダプ
【Webサイト構築/Webサイト マルチデバイス対応】Webサイト運用負荷低減にも繋がる！レスポンシブウェブデザイン導入実例 20131129メンバーズミニセミナー
【Webサイト構築/Webサイト マルチデバイス対応】Webサイト運用負荷低減にも繋がる！レスポンシブウェブデザイン導入実例 20131129メンバーズミニセミナー
レスポンシブデザイン対応のはてなブログテーマ一覧まとめ！モバイルからの広告収入を伸ばしたいなら、レスポンシブデザイン必須です。 - クレジットカードの読みもの
もう何度目かの宣言かわかりませんが、そろそろ広告を貼る予定の当サイト（笑）。しかし、はてなブログの場合、デフォルトのモバイルテンプレートでは広告掲載の自由度がかなり低いデメリットがあるんですよね。 PCから閲覧…広告を最適化しやすい モバイルからの閲覧…広告を掲載しにくい 現状だとだいた50%くらいがモバイルからのアクセスなので、極端に言ってしまえば、このままだと50%分の広告収入をまるごと捨ててしまうことになってしまいます。広告最適化を考えるなら、かなり勿体無いですよね、これ。 レスポンシブデザインへの対応について： PCデザインのまま、カスタマイズしよう： レスポンシブデザイン対応のテーマは少ない： レスポンシブデザイン対応テーマ一覧： 2カラムのレスポンシブデザインテーマ： レスポンシブブルー： re::design: Mono: Fresh Green: 芭蕉： murmur-sk
ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個 | A40
レスポンシブWebデザインのサイトは国内でも増えてきましたが、制作するとなるとかなり手間がかかります。 そんなとき役に立つのがレスポンシブWebデザイン対応のフレームワーク。中でも「Bootstrap」は、多彩な機能を備え、その使いやすさから広く知られています。 そこで今回は、国内の秀逸なレスポンシブWebデザインを集めた「Responsive Web Design JP」から、Bootstrapを使って作られたサイトをご紹介したいと思います。 whiteSTOUT フォトクリエイティブを中心としたマネージメントオフィスのサイトです。トップに大きな画像を使い、洗練されたイメージとなっています。 AGATHA E-SHOP アクセサリーブランド「AGATHA」のECサイトです。有名ブランドの、しかもECサイトにもBootstrapが使われています。 ACTUS online こちらは有名イン
レスポンシブWebデザインのテストに使えるツール
Webサービス Screenqueri.es ブラウザ上で各デバイスのシミュレーションができる。 Responsive Web Design Test Tool ブラウザ上で各デバイスのシミュレーションができる。 responsivepx ブラウザ上でサイズを変更して表示確認ができる。 ish. ブラウザ上で各サイズの表示を確認できる。 Responsive Tools For Web Designer & Developers 各デバイスの表示が確認できる。操作も可能。 Responsive Roulette ブラウザ上で各サイズの表示を確認できる。 The Responsinator 各デバイスの表示が確認できる。 Juice’r 各デバイスの表示が確認できる。操作も可能。 Screenfly 各デバイスの表示が確認できる。操作も可能。 Responsive Design Testin
レスポンシブなワイヤーフレーム作りには、IllustratorとかInDesignがいいかもな – A Memorandum
ぼんやりと昨年海外で公開されているスライドを眺めていて、「あぁ、なるほど。頭良いなｗ」と思ったのが、InDesignを使ってレスポンシブなワイヤーフレームを作る方法。 レスポンシブな設計というかいろんなデバイスとかを対象にして、ざっくりとワイヤーフレーム作るのになんかうまい方法はないかな？と、自分ではOS XのSketchなんかで複数のサイズのアートボードを作ってやってたんだけど。 よくよく考えてみれば、Illustratorでもサイズ違いのアートボードは作れるし、InDesignも複数のドキュメントサイズを混在させられるじゃん…。しかも、双方に文字のスタイル設定の機能あるし（笑）。 複数のサイズのワイヤーフレームを作る レスポンシブなんてpxで固定サイズにするのもおかしいっちゃおかしいんですが、今のところそうするしかないのでとにもかくにもざっくりとした複数サイズで区分けします。Illus
外部CSSを1枚追加して、ブログをスマホ最適化する5つのフロー | Mnemoniqs Web Designer Blog : Web Design and Web Development
レスポンシブWEBデザインを用いて、外部CSSを一枚追加するだけでiPhone/androidに最適化するまでの流れを書いておきます。スマホ用のCSSをスマホにだけ読み込ませて、全体のCSSを上書きするだけなので、ブログのデザインによっては結構手軽に出来ます。 はじめにスマホ最適化後の要素配置を考える <head>にviewport設定とスマホ用CSSの記述を書く 固定幅をリキッドデザインで組みなおす フォントのサイズ、マージン、中央･水平揃えを調整 画像を2倍のサイズで用意する はじめにスマホ最適化後の要素配置を考える スマホは画面も小さいし、容量が重いとそれだけページの表示速度も落ちます。 ロゴ・メニュー・記事など最低限の要素だけ残し、あとはdisplay:none;で消してしまいましょう。 このブログのトップだと、オレンジで囲んだのがスマホで表示させない部分です。 残った要素を、最
約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋
先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います！以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています！ ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ
文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でータカシ キタジマ
これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しいGoogleマップをレスポンシブ対応で埋め込む方法 | ライフハッカー・ジャパン
新着記事
html5-memo.com
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP