こんにちは、トイアンナです。
私がECサイトを始めて経営したのは2010年ごろ。サイト制作でプログラミングにお金がかかることは予想していましたが、それよりも「画像制作、多いな！」と驚いたのを覚えています。
ECサイトは、画像の集合体です。メニューのアイコン、全商品の写真、期間限定キャンペーンのイラスト……これまで写真家とイラストレーターへどれくらい発注したか記憶にありません。社内にデザイナーがいればもっと楽にコトが進むかもしれませんが、デザインは外注されるサイトさんも多いのではないでしょうか。
だからこそ、ECサイトは画像をミスると売上がガクンと落ちるワナが控えています。
なぜECサイトはデザインがぐちゃぐちゃになるのか？
まずはこの画像をご覧ください。
ぱっと見て「どこに目をやればいいかわからないな」と感じませんか？
まず目に入る上部のクーポン、真ん中にはメイン商品とおぼしき何か。横にはセール情報が複数登場。ふらっとこのサイトを訪れたお客様は「このECサイトが何を売っているのか」すら認識できないまま離脱することでしょう。
しかし、ECサイトの半数はこの悲劇を１度は経験したはずです。
ECで陥る「トンマナ」のワナ
ECサイトができた当初こそ美しくハマっていたレイアウト。しかし当初作られた告知画像は「〇〇日まで50%OFF」「季節限定商品登場」「会員限定クーポン」などの新情報ラッシュで更新されます。
そしてよほどのことがない限り、同じ外注デザイナーへ頼み続けることはできません。
「とにかく急ぎで！」
「ってかうちの〇〇さんにPhotoshopいじらせたらこれくらいいけるよね？」
「ここより安いデザイナーいるんじゃないの？」
突然決まるプロモーション、納期必達。そこで同じデザイナーへ依頼できない瞬間が訪れます。しかしそれこそがECサイトの統一感を壊すワナです。
デザインの統一感のことを「トーン＆マナー」略して「トンマナ」といいます。デザイナーはフォントのサイズ、会社のイメージカラーなどを統一させることで、デザインや広告で一貫性を持つことができます。
バラバラのデザイナーへ発注すると、このトンマナが崩れやすいのです。
キャンペーンの重要性と、サイトの優先順位は違う
さらに、キャンペーンの重要性と、ECサイトで表示させるべき優先順位を取り違えるとサイトデザインはさらに混迷を極めます。
たとえば「バレンタイン限定クーポンを出したい。これで２月の売りは確実に取りたいからECサイトでも目立たせたい」といった、重要なキャンペーンがあったとします。
しかし、ECサイトではそれよりも「最初に来たお客様へ、ここが何屋か伝える」という優先度の高い目的があります。何屋かわからない店では、どんなにお得なプロモーションがあってもお客様は購入しないからです。
しかし目の前のキャンペーンに引きずられて「とにかく目立たせたい！」と思うと、ECサイトのトンマナを無視したデザインになってしまいます。デザイナーも「とにかく目立たせて」と言われれば統一感を無視するしかないのです。
もう一度、先ほどの画像を見てみましょう。
イラスト：ゆぴ
「ああ、各キャンペーンを注目させたかったんだな」という意図が見えるのではないでしょうか。しかしトンマナを崩してそれぞれのキャンペーンを目立たせようとした結果、「何が何だかわからない」ECサイトとなってしまいました。
トンマナを意識して、クーポンも目立たせる
逆に、目のやり場を上手にコントロールしているECサイトのデザイン例を見てみましょう。
イラスト：ゆぴ
このECサイトなら表示１秒で「服屋だな」ということがわかります。トップに衣類が複数展示されているからです。さらに、右上のクーポンにも目がいきます。全体的に白黒のトンマナであるにもかかわらず、クーポンはライトブルーで目立つからです。
まとめ
ここまでの比較で、トンマナが整ったECサイトでは以下の条件が満たされていることがわかりました。
・ 商品画像の占める面積が大きく「ここは何屋か」を最初に意識させる
・ ECサイトの最大面積を占める色を１～２色に抑える
・ クーポンの色も１色に抑えることで、画面を埋める色を最大３色にする
・ フォントをクーポン・ECサイト全体で統一
もしあなたのECサイトがいまトンマナのごちゃつきに苦しんでいるのであれば……今すぐ英語・日本語の使用フォントと「自社で使う色」を２色指定しましょう。それが背景色と文字色になります。
そしてあと１色「目立たせるための色」を指定しましょう。それがクーポンなど注目情報の色となります。
あとはそのフォント・色指定に従ってデザイナーさんへ「このトンマナでECサイトのデザインは作ってください」と発注するだけです。すっきりしたデザインのサイトは、お客様が見る情報を整理整頓し、売上アップへつながります。
ECサイトの責任者へ就任したら、まずはトンマナをチェックしてください。UI/UXなど使い勝手に関する調査はそのあとで。まずはトップページを認識してもらうこと。そのためにもトンマナを統一させましょう。