ITエンジニア/デザイナ向けにオープンソースを毎日紹介

これは使い勝手良さそうですよ!

ガラケーが主流だった日本においてはHTMLメールはあまり普及しませんでした(Outlook ExpressがよくHTMLメールでセキュリティインシデントを起こしていたのも大きいと思いますが)。しかし海外でのサービスではHTMLメールが当たり前ですし、より多くのコンバージョンを求めるならHTMLメールを使わない手はありません。

しかしHTMLメールというと通常のHTMLと異なる作法が必要で、作成においても若干のコツがいります。それがPCメーラー、Gmail、スマートフォンとそれぞれのデバイスで適切に見られるように考えるとなるとレスポンシブWebデザイン以上に大変なことです。

そこで紹介したいのがInkです。Zurb Foundation開発元が作成した新しいレスポンシブHTMLメールテンプレートです。

サンプルです。ヘッダー、見出し、リストなどで構成されています。これは汎用的ですね。
サンプルです。ヘッダー、見出し、リストなどで構成されています。これは汎用的ですね。

下の方にはソーシャル系バナーも付けられるようになっています。
下の方にはソーシャル系バナーも付けられるようになっています。

別デザイン。こちらはサイドバーがあるタイプです。
別デザイン。こちらはサイドバーがあるタイプです。

サイドバーの下にはやはりソーシャル系バナーがあります。
サイドバーの下にはやはりソーシャル系バナーがあります。

もちろん通常のレスポンシブWebデザインとしても使えます。
もちろん通常のレスポンシブWebデザインとしても使えます。

他にも幾つかサンプルデザインが用意されています。Inkのテンプレートサイトからダウンロードできます。

デザイン例
デザイン例

Inkはタブレット、スマートフォンはもちろんOutlookでも適切に見られるHTMLテンプレートになっていることを売りにしています。スマートフォンのシェアが増えている現在であれば十分利用できるのではないでしょうか。

機能としてはグリッド、コンテンツのセンター配置、サイドバー、ボタン、画像とコンテンツの配置がサポートされています。

グリッドレイアウト
グリッドレイアウト

センター配置
センター配置

サイドバー
サイドバー

ボタン
ボタン

画像とコンテンツ
画像とコンテンツ

これらの部品を組み合わせることでリッチで効果的なHTMLメール(しかも多彩なデバイスに対応!)が作成できそうですね。

InkはHTML5/CSS3製のオープンソース・ソフトウェア(MIT License)です。

Ink: A Responsive Email Framework from ZURB

zurb/ink

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2