ECサイトに最近訪れた時のことを思い出してみてください。ウェブサイトがどんなデザインだったかを覚えていますか？
おそらく忘れてしまっているとは思いますが、どんなことを感じたかは覚えているのではないでしょうか？ワクワクして、嬉しくなり、満足感を感じたかもしれません。もしかしたら、目的の商品にたどり着くのが難しく、訳がわからなくてイライラしたかもしれません。
Eコマースのデザインはウェブサイトの見かけだけではありません。ウェブサイトが実際にどのように機能するかということに加え、一つのページから次へと移っていくページごとの流れ、ストーリーの伝え方、そしてウェブサイトそのものの雰囲気に至るまで、すべてが重要になります。
デザインのトレンドは日々変化しますが、素敵なデザインのネットショップを作成するには、時代に左右されない4つのビジュアル基盤があります。その内容に触れていく前に、まず以下の質問を考えてみてください。
「サイトに訪れた顧客には、どんな印象を抱いてほしいですか？」
端的に言うとマーケティングとデザインは、顧客が行動を起こす、つまり理想的には（多くの）購入につながる体験を提供するためのものです。
そこで、現代的なECサイトの4つのデザイン基盤となる「信頼」「魅力的なビジュアル」「フォーマット」「ナビゲーション」を一つずつ掘り下げていきたいと思います。
Eコマースデザインの基盤
「信頼」
初めてショップを訪れた人にとっては、ブランドや商品についてはもちろん、お客様に喜んでもらおうとあなたがどれだけ努力しているかなんてわからないでしょう。検討材料とはなるかもしれませんが、実際に購入するとなると、まず顧客がショップを「信頼」しなければ話になりません。
顧客は、商品がしっかりと手元に届くことがわかってから購入を決定します。以下の4つの情報は、どんなウェブサイトであっても掲載してほしい、信頼を築くために必要不可欠なものです。
特定商取引法に基づく表記
ネットショップを運営する上で避けることができないのが、この「特定商取引法に基づく表記」です。消費者が安全に買い物ができるために、特定商取引法に基づいて販売者の情報を表記することが事業者に義務付けられています。
返品条件
返品条件は、気に入らなかった商品を簡単に返品できるだけでなく、顧客に「必要があれば返品できる」という安心感や信頼感を与えることができるので、実際の売り上げ増加にも寄与します。
技術的な証明
ウェブサイトにShopify ペイメントを追加することで、顧客情報を保護するための最新セキュリティー技術を搭載した、支払いサービスを使用することが可能になります。尚、セキュリティーが万全である旨を示す画像やロゴバッジ、そして受け付けているすべての支払い手段を必ず表示するようにしてください。
まだ顧客がいない内から顧客の信頼感を得ることは、最大の難関と言えるでしょう。そのためネットショップをデザインする際には、これらの信頼性を示す目印を活用することをお勧めします。
「魅力的なビジュアル」
オンラインで商品を販売している時は、ウェブサイトの「印象」がすべてと言えるでしょう。
人々は1000分の50秒以内にウェブサイトの第一印象を形成すると言われています。皆さんのネットショップの第一印象は、大部分がショップ上で使用した画像により左右されています。
商品画像は、オンライン商品の信憑性を証明するアンバサダーのような役目を果たしています。ネットショップでは、購入前に商品を試したり、触れたりすることができません。そのため、顧客は視覚的なものに頼り、商品が適正なものであるかどうかを判断せざるを得ないのです。
一般的に、背景が白い商品画像や、実際に商品を使っている様子を撮影したライフスタイル画像を使用することをお勧めしています。Outdoor Voices社のホームページでは、ライフスタイル画像でブランドストーリーを伝える一方で、ビジターが商品の詳細を知ることができるように商品にフォーカスした画像も使用しています。
大規模小売店のウェブサイトで商品を購入したことがあるならば、ほぼすべてのライフスタイル画像の中に、白い背景の商品画像が含まれていることに気付いた方もいるかもしれません。白い背景を使って撮影された商品画像は、Eコマースでは言わずと知れた基準となっています。白い背景は商品を詳細に見ることを可能にすると同時に、商品からブランディング要素を取り除くため、異なるターゲット層へもアピールすることができるのです。
ライフスタイル画像を見た顧客は、自分たちを画像内のモデルと置き換え、日常生活でどのように商品を使えばいいかを思い描くことができます。そのため、ライフスタイル画像を取り入れることはとても重要なのです。
商品画像は、ネットショップのエンゲージメント、コンバージョン率、リテンション率を高める鍵となる重要な要素です。
さらに、商品画像だけでなく、ウェブサイトの色調やフォントも検討する必要があります。素晴らしい商品があったとしても、ウェブサイトのデザイン（特に色とフォント）が上手く機能していないと、顧客は関心を失い購入を断念してしまうことが多々あります。ネットショップのデザインは、商品を購入する際の顧客体験全体に影響を及ぼすのです。
「色」は人々の関心や感情を刺激する、とてもパワフルなツールの一つです。ウェブサイトの特定な場所に注目してほしい時や、顧客を購入へと導くためにはとても役立ちます。
ウェブサイトの色調は、主要な色二色（プライマリーカラーとセカンダリーカラー）に限定することをお勧めします。私自身、ウェブサイトの色を選択する時には2種類の優れたツールを使っています。通常はDribbbleというウェブサイトでカラーパレットを調べます。例えば、“red”と入力すると、赤をカラーパレットに使ったウェブサイトの例が表示され、視覚的にどのオプションに最も惹かれるかを見ることができます。
以下はシンプルな白黒のテキストに、グリーンの色調をアクセントカラーとして取り入れたウェブサイトの一例です。
さらに、ウェブサイトのアクセシビリティ（アクセスのしやすさ）もしっかりと考えましょう。すべての年代のさまざまなユーザーがテキストを読みとれることができるように、十分な明暗差がある色を選ぶようにしてください。
最後に、どんなタイポグラフィー（活字デザイン）を起用するかを検討する必要があります。顧客は、「Times New Roman」のようなありきたりのフォントではなく、印象的で興味深いタイポグラフィーをウェブサイトに期待しています。ウェブサイトのテキストは情報を共有するためのものですが、タイポグラフィーはその情報の背景にある感情を伝えるために必要となります。
Shopifyテーマストアでは、それぞれのテンプレートに推奨フォントが付いてきます。ウェブサイト上でこれらの推奨フォントを使うこともできますし、別の情報源から得たフォントを選ぶことも可能です。
色と同様にフォントは二種類までに限定し、使用目的を区別することをお勧めします。グラフィックデザイナーでない人には複数のフォント管理は一筋縄ではいきませんし、ウェブサイトがとても煩雑に見えてしまう可能性があります。フォントを二種類に限定すればそのような問題を回避することができます。まずヘッダーやタイトル用のフォントを選び、本文用としてもう一つのフォントを選んでください。
Supergoop社の例を見てみましょう。タイトルにはブランドの雰囲気をしっかりと映し出したフォントが使われているのがわかります。また、本文用には読みやすいシンプルでクリアなフォントが使われています。
ヘッダーにユニークなフォントを使うことで、ブランドの雰囲気を引き立てる演出をすることができます。一方で、商品説明やチェックアウトのテキストには、わかりやすい本文用のフォントを使用する必要があります。タイトル用フォントは比較的大きなサイズで表示されるため、多少の装飾性があっても問題ありません。しかし本文用フォントには、サイズが縮小しても判読できるものを選ぶようにしてください。すべてのフォントが画面上で判読できるようにデザインされているわけではないので、不適切なフォント（例えば細めのsans serifなど）を選んでしまうと致命的です。テキストが読めなければ、顧客はウェブサイトから出て行ってしまうでしょう。
「フォーマット（デスクトップとモバイル）」
comScore社によると、人々はデジタルメディアに費やす時間のおよそ70％を、モバイル端末上で過ごすということがわかっています。残念なことに、多くのEコマースウェブサイトやプラットフォームは、デスクトップで閲覧することだけを考慮してデザインされています。これでは、新たな売り上げの可能性を失ってしまいます。
Shopify上で運営されているネットショップはすべて「レスポンシブ対応」しています。これは、ウェブサイトがデスクトップ、スマートフォン、タブレットなどの異なる端末や画面サイズに適応していることを意味しています。
スマートフォンに適したデザインテンプレートを選んだ場合には、自ら購入プロセスを経て、取引の流れがきちんと機能しているかどうかを試してみてください。もし上手く行かなかったとしたら、顧客が使用した場合にも同じことが起こり得るでしょう。優れたカート機能やスムーズなモバイル操作なども、テンプレートを最終決定する際には重要な要因となります。
「ナビゲーション」
ウェブサイトのナビゲーションは、顧客が商品を素早く簡単に検索することを促すためのものです。
優れたナビゲーションは、オンラインでのショッピング体験を改善し、マーチャントの売り上げや利益を向上させます。また、ナビゲーションはウェブサイト用に選ぶテンプレートにも影響を及ぼします。例えば、多くの商品を掲載したカタログをお持ちであれば、より広範囲なメニューを備えたテンプレートを選ぶことが得策です。
以下では、ネットショップのデザインガイドラインをご紹介します。まず、ヘッダーには2、3種類のメニューのみを使うようにし、明確で率直なタイトルを付けましょう。ネットショップのトップレベルナビゲーションには、以下のようなヘッダーメニューをお勧めしています。
- Shop（オンラインストア）[商品カテゴリー]
- About Us（会社概要）
- Bestsellers（ベストセラーアイテム）
- Contact（連絡先／お問い合わせ先）
以下で紹介している3種類のメニューは、シンプルで優れたナビゲーションの例です。訪問者にメニューの意図が一目でわかるようになっています。初心者の方はまず上記4つの項目を使うことをお勧めしますが、時間が経つに連れて「お客様が望んでいるものは何か」とういことが徐々にわかってくるでしょう。
その他のナビゲーションリンクは、ウェブサイトの一番下にあるフッターに追加することができます。フッターに適したお勧めのリンクは以下の通りです。
- Shop（オンラインストア）[商品カテゴリー]
- 返品条件
- 特定商法に基づく表記
- サービス利用規約
- 連絡先／お問い合わせ先
リンクがあまりクリックされていないようであれば、ヘッダーやフッターはいつでも変更することが可能です。あるいはサブナビゲーションメニューを追加し、その他の重要なページや商品一覧にリンクを貼ることもできます。
効果的を発揮するデザイン基盤
これら4つのデザイン基盤をしっかりと考慮することは、ネットショップを構築する上でとても大切なことです。スタートアップから大企業ブランドに至るまで多くのネットショップに携わってきましたが、これらのデザイン基盤はすべてのプロセスを通して常に重要な要素となってきました。
大切なのは、信頼性を築き、視覚的に魅力的なデザインを作り上げ、ビジターが使う端末を考慮し、そしてシンプルなナビゲーションを導入してビジターをできる限り早く商品へと案内することです。
原文：Stephan Peralta 翻訳：クリンカース恵子
