スマートフォンの拡大でHTMLメールでの販促が効果的と言われています。
通常のWEBサイトと同様、メールの上部にアイキャッチ画像を配置してメールへの興味を持たせたデザインのメールマガジンも最近では増えてきているようです。さらに極端な例としては、メール本文にクリックできる１枚の画像を貼り付けただけというショップもあるようです。
様々なアイキャッチを作成する時には、
- 伝えたいイメージ
- 売りたい商品
- キャッチコピー / サブキャッチ
上記構成メインのクリエティブになってくると思います。
ABテストなどで、より効果の高いクリエィティブ制作をしているECショップもたくさんあります。
そんな、ECの売上を左右すると言っても過言ではないアイキャッチを作成する際に、参考にして欲しいのが
「３グリッド・ルール」
この「３グリッド・ルール」は簡単な手法で、
アイキャッチの印象をテストすることができます。
この方法は1797年にジョン・トーマス・スミス著「Remarks on Rural Scenery」という農園の景観を美しくするために用いた方法で「Rule of thirds」と呼ばれ、写真や景色がどのような印象を与えるか、どの場所が一番見られているのかというのを測定する方法です。
やり方は簡単です。
できあがったクリエティブに４本の線を均等に引くだけです。
サンプル画像のように均等に線を引きます。
このグリッドは、下図の位置を確認するために引かれています。
閲覧側の目の動き・注目を集めている割合です。
他のサンプル画像を見てみてください。
人物の顔の大きさで印象はもちろん変わります。
注目する点は、目の位置がしっかりとグリッド線上にあるという事です。
強いアイキャッチを与えたいものばかりではありません。
どことなく雰囲気がある印象を与えたい場合には、左上のグリッド部分を外す事でクリエィティブの印象をやわらかくする事もできます。
サンプル画像の花はどことなく「さびしい」イメージですよね？
これは、左上のグリッド交差部分に被写体がいないのが理由です。
見ている人に伝えたい文字は、しっかりと真ん中に。
さり気なく、左下は動画の再生マークが付いていますねｗ
たぶん、次に見てもらいたいコンテンツなのでしょう。
与えたいイメージ（子供）の目がグリッド交差上に。
さらに、クリックできるボタンもグリッド交差上に配置されています。
３グリッド・ルールでわかること
- グリッドの交わる位置に伝えたい文字や写真があるか
- 伝えたいイメージ（強い・さみしい等）がマッチしているか
EC運営ではたくさんのクリエィティブをABテストなどで制作します。
こういった、デザインルールに基づいて制作することでWebページのクリエィティブやメールマガジンなどのデザイン精度を高めていけるのではないでしょうか？
参考リンク：
インターネット・デジタルメディアのためのグリッドシステムによるページデザイン手法
