今年、大注目のキーワード「レスポンシブwebデザイン」をご存知の方は多いだろう。多様なデバイスが使用されるようになった今、どのデバイスでも最適にサイト表示させることは、EC運営において必須作業と言える。

だが、最適化すべきなのはwebサイトだけではない。メールにおいてもレスポンシブ対応は必要だ。各デバイスに最適化されていないメールは、多くの顧客を失うことになる。ここでは、より良いレスポンシブメール作りのためのデザインにおける7つのポイントをご紹介していこう。

レスポンシブメールとは？

レスポンシブメールとは、デバイスのスクリーンやディスプレイのサイズに適したレイアウトを自動的に表示するメールのことをいう。どのような画面サイズでも最適な形でメールを表示させるには、実は、コードから作成することが必要だと言われている。

だが、現状では、多くのユーザーに使用されているGmailやOutlookが、CSSシートをサポートしていない。そのため、今の段階ではHTMLのテンプレートを使い、レスポンシブメールを作成することがベストである。次に、優れたレスポンシブメールを作るための７つのポイントを見てみよう。

1．モバイルに適した表示を最優先する

レスポンシブメールを作る際、モバイルとPCのデザインやコンテンツを全く同じにしなければならないという決まりはない。大事なのは、モバイルに最も適した表示にするための項目を最優先することである。従って、デバイスごとに、内容やデザインが異なっても良い。

2．ナビゲーションをシンプルにする

ナビゲーションにおいても、PCとモバイルで違っていても構わない。デバイスごとに、利用しやすいシンプルなナビゲーションを設計することが肝要だ。

3．読みやすいフォントを使用する

デバイスごとに文字の読みやすさは異なる。そのため、様々なデバイスで、文字の大きさや色を確認し、読みにくいフォントは採用しない。

例えば、iPhoneでは、最低でも13ピクセルは必要だ。また、背景と同系色の文字色を避け、高いコントラストを確保しよう。さらに、文字はテキストだけでなく、画像や動画の中まで確認する必要がある。

4．画像にはテキストを入れる

メールでの画像表示を、オフにしているユーザーは意外と多い。画像が表示されなくても内容を理解してもらえるよう、画像にはテキストの説明文を入れておこう。

5．各デバイスに適した画像に編集する

デバイスによっては、画像が大きすぎる場合がある。そのため、デバイスごとに画像の大きさを最適なサイズに変更しておくことが必要だ。だが、モバイル版では単に小さな画像にすればいい訳ではない。タッチスクリーンのユーザーを想定した、タッチしやすい画像の大きさを保たなければならない。iPhoneの場合は、最低でも44×44ピクセルが必要だと言われている。

また、PC版でアニメーションを使用している場合は、モバイル版では画像に切り替えることも忘れないでほしい。

6．リンク表示には必ず下線を引く

モダンなデザインばかりを気にしてリンク先の表示が分かりにくくなっているメールが多い。リンク先には必ず下線を引き、ユーザーが直感的にリンクだと分かるように配慮することが重要である。

7．モバイルに最適化されたページへのリンクを貼る

メールからサイトへ誘導したにもかかわらず、モバイルに最適化されたランディングページでなければ、顧客を誘導した意味がない。リンク先は必ず各デバイスに最適化されたランディングページに設定しよう。

まとめ

海外では、AntwortやZurb Email templatesといった、レスポンシブメールのテンプレートを配布する便利なサイトがある。これらのサービスを利用しながら、ぜひメールのレスポンシブル対応にもチャレンジしてほしい。

メールだけでなく、運営において様々な施策も行っていきたい所。

タグ ：

#ECサイト

#デザイン

ECサイトを利用する顧客は、商品の購入前に、徹底的に商品を調べたいと思っている。そんな顧客に、より良い購買体験を提供するためには、魅力的で高品質な商品画像が必要不可欠だ。良質な商品画像は、サイトのコンバージョン率を一段と高めてくれる。今回は、優れた商品イメージを作成するための5つのヒントを紹介しよう。

1．ズームイン機能を付ける

オンラインで高価格の商品を取り扱う場合、商品の細部まで見えるようにすることは非常に重要だ。高解像度の画像は、買い物客が実物を見ているかのように、詳細を伝えることができる。

小売大手の無印良品のサイトでは、ハイビジョンズームでさまざまな角度から商品を確認できるようになっている。このように、ズームアップされた商品画像を複数掲載することで、コンバージョン率を高めることも可能になる。

2．照明を確保する

照明は、商品画像の見栄えを良くするための重要な要素だ。自然光の場合は、最も正確に商品の色を映し出してくれる。スタジオの照明の場合は、全ショットで変わらない照明を確保してくれる。特に、食品の場合は、照明環境が悪いと製品の新鮮さがかけるので注意が必要である。

ドレッシングやパスタソースを販売するピエトロでは、商品のドレッシング画像の横に、美しい料理画像を大きく掲載して効果を上げている。そのドレッシングがどのような料理で使用されているかを画像で示すことで、商品に対する理解を深め、購買意欲を喚起する。

3．商品の背景をシンプルにする

シンプルな背景は、買い物客の視線を商品に集中させるのに有効だ。さらに背景の一貫性はサイト全体の統一感を醸し出し、商品をより美しく見せてくれる。

ジュエリー販売会社の田崎真珠 は、白を基調とした背景を採用し、シンプルで洗練された画像を多く掲載している。商品画像をクリックすると、より大きな商品画像のページへ遷移し、商品の細部を確認できる。これらの詳細画像で、ジュエリーの品質を示すことができている。

4．色やサイズごとのバリエーション写真を表示する

買い物客が、小さな色サンプルだけで、色別の見栄えをイメージするのは難しい。一色だけでなく、色別の商品画像を用意しよう。ただし、色をネットで見せる場合、消費者の使用しているパソコンの解像度やネット環境によって、　微妙に差が出ることも踏まえておきたい。色味を説明するテキストにも気を配りたいところだ。

ONWARD CROSSETでは、利用可能な全ての色のパターンの試着写真を掲載している。同じモデルを起用することで、色の肌馴染みの若干の違いを確認することができる。

5．商品を使用している画像や動画を掲載する

商品を使用している画像や動画を掲載すると、購買に至る可能性がより高まる。オンラインの買い物客は、物理的に製品を試すことができないため、この方法を取ることで、ある程度、不安を和らげることができる。

大手の通販会社ベルメゾンは、実際に商品を使用している様子を撮影し、TVショッピングのように動画で商品を紹介するページを設けている。家電、家具、寝具、アパレル、雑貨と幅広いカテゴリの動画が公開されている。

まとめ

以前、本ブログで紹介したように、美しい画像はeコマース成功の鍵と言える。今回は、さらに一歩踏み込んで、より具体的に良質な商品イメージを作るための方法を紹介した。自社サイトの画像をもう一度、見直してはどうだろうか。

タグ ：

#ECサイト

#デザイン

Monogramは、昨年秋にローンチされたiPad専用のEコマースだ。「買い物ができるファッション雑誌」というコンセプトで、大きな注目を浴びた。だが、ローンチから半年、蓋を開けてみたら、全く期待に背く結果となり、軌道修正を余儀なくされた。今回は、その失敗の背景と再起を図る新サービスについて紹介しよう。

2つの失敗要因

Monogramは、提供されるコンテンツの中から自分が好きなファッションアイテムを集めて、オリジナル雑誌を作ることができるサービスである。ただ写真を収集し雑誌化するだけでなく、気に入ったアイテムを購入することもできる。このサービスの大きな売りの一つは、ソーシャルコマース機能により、誰でも簡単にお気に入りのファッショアイテムを広められることだった。だが、これが全く当たらなかった。

ソーシャルコマースでは、ユーザーがシェアする動機が必要だが、Monogramでは、ユーザーに十分な動機付けができなかった。さらに、そもそもシェアできるコンテンツが少なかったという致命的な敗因がある。バージョンアップ後の新しいサービスでは、突破口となるアイディアから、この2つの問題を解決している。

キーファクターは、ファッションブロガー

多くの女性は、憧れのファッショニスタの情報を、常時チェックしている。生まれ変わったMonogramでは、ファッションの最先端を行くブロガーの求心力を借りることにした。これまでとの大きな違いは、ブロガーが単にお気に入りのファッションアイテムを収集、雑誌化するだけでなく、サイトを作り込める編集機能が付加された点だ。つまり、ブロガーが自分の好きなようにコンテンツを作成できるようにしたのだ。

これにより、ユーザーにはファッショニスタお勧めのアイテムを閲覧、購入できるという動機が生まれ、不足していたコンテンツはブロガーによって充実させられるようになる。さらに、iPad専用だったサービスを、PC、タブレット、モバイルなど多様なデバイスに対応するように変更した。

新アフィリエイトモデルでブロガーを活性化

さらに、新Monogramの注目すべき特徴は、ブロガーのためにアフィリエイトのリンク機能を提供している点だ。将来的には、ブロガーを通して商品が購入された場合は、販売された製品に応じて報酬を支払うモデルも計画中である。

まとめ

Monogramが早い段階で、ユーザーのニーズとサービス価値とのギャップに気づきスピーディに路線変更した点は、安易なソーシャルコマースがリスキーだということをよく物語っている。

同社の大きな失敗要因は、ユーザー目線が足りなかったことだ。自社のECは、狙い通りユーザーの共感を生んでいるのだろうか、一度、客観的な視点に立ち、再考してみることをお勧めする。同社が、ファッションブロガーにフォーカスしたコンテンツ重視の新たなモデルで、どこまで巻き返しが図れるか注目したい。

タグ ：

#ECサイト

#デザイン