Eビジネスを推進するORANGEシリーズ

EC-ORANGE
お役立ち資料ダウンロード ニュースレター登録

心を引きつけるデザインのeコマースサイト20選

「素晴らしい製品やサービスがあるとアピールしよう」
SEO、SMO、PPCの戦略を成功させ、トラフィックが上昇した結果ユーザーの行く着くホームページやランディングページにしたければ見た目にもこだわりが必要です。そして素晴らしいユーザー経験を提供し、苦情や文句のない機能的なサイトを作成する必要があります。

それにはどうすればよいでしょうか。

どうすればサイトに滞在する時間をもっと延ばすことができるでしょうか。
そのために今回は心を引きつける5つのウェブデザインの方法を用いた様々なホームページをご紹介したいと思います。

心を引きつける5つのウェブデザインの条件

わかりやすさ

何についてのサイトなのか、そのサイトで何ができるのか、何が得られるのか、そして何より必要な情報が得られるのか、そういった疑問に明瞭に答えられるサイトでなくてはなりません。

魅力的な見た目

見た目の魅力はユーザー経験よりも簡単に認識されるものです。ホームページがシンプルで明瞭で魅力的であるかが重要です。多くのユーザーはeコマースサイトに慣れ親しみつつあるので、親しみやすさも重要なポイントです。

見た目の序列化

強調したいものを大きくし、残りの物はそれに従属するものとするビジュアルイメージを作ることが大切です。コールトゥアクション(行動を喚起するもの)ボタンを目立つ色にしてページの他の部分から際立たせることも必要です。

注目を集め続ける

笑顔やアイコンタクト、ボディランゲージを含んだ生き生きとした顧客の実生活をサイトに盛り込むことが注目を集めるサイト作成の秘訣です。ありあわせの画像では不十分です。思いがけない、人を驚かせるような画像や.キャッチコピーもブランドと関連性のあるものであれば効果的です。

ひとつのスクリーンごとにひとつの動作

それぞれのウェブページが果たす機能についてよく考え、それを明確にすることです。ユーザーを急かすことなく、旅に連れて行くようなプロセスを提供することが大切です。
これらのポイントを踏まえ心を引きつけるウェブデザインの例を見ていきたいと思います。

Travel Alberta

カナダのアルバータ州の旅行公式サイト。旅行に行きたい気持ちを喚起させる画像や高い操作性が特長。このサイトを見ればアルバータに行きたくなることは間違いない。


Westin Finds

豪華で贅沢な旅を提案する旅行サイト。サイト中央のボックスで主要動作を行う。

(引用元:Westin Finds

Soho Fixed

カスタムメイドも受け付ける自転車販売サイト。大きな画像とシンプルな文面のサイト。商品数は希少で販売されたものもサイトを楽しませるアイコンとなっている。「sold」のアイコンをクリックするとTwitterにジャンプするデザイン。
(引用元:Soho Fixed

Whipping Post

革製品をメインとするeコマースサイト。真っ白な背景は大きな商品画像をよりいっそう際立たせる。ビジュアルも序列化してわかりやすくなっており、顧客行動を喚起させるeコマースサイト。

(引用元:Whipping Post

Spotify

無料で音楽が聴き放題になる音楽ストリーミングサービス。
大きなサイズの、感情に訴える画像がユーザーを刺激する。ユーザーの求める気分を音楽が与えてくれることを約束するようなサイトデザイン。

(引用元:Spotify

Banana Café

複数のアパレルとリンクするeコマースサイト。Windows8でも使用されるフラットデザインを採用したデザイン。背景にはモノクロのムービーが流れており、魅力的でスタイリッシュなデザイン。賑やかで楽しいデザインは他のアパレルサイトと一線を画している。

(引用元:Banana Café

Greats

靴販売のeコマースサイト。画像の大きさはeコマースサイトの中でも最大級。カーソルを合わせると値段などの情報が出てくる。画面下にスクロールしていくと同系統の商品が現れる。商品数の少ないeコマースサイトにとってお手本となるようなデザイン。

(引用元:Greats

Soyuz Coffee Roasting

ロシアのコーヒー豆のホールセラー。ナチュラルでリラックス感漂う画像を配置して顧客を誘引する。ブランドの歴史の紹介はユーザーを引き込むような作りになっている。

(引用元:Soyuz Coffee Roasting

Simple Banking

webベースのバンキングサービス。クリアで使いやすいホームページがバンキングという目的とマッチしている。真っ白な背景が重要なものを強調するというポイントをよく抑えている。

(引用元:Simple Banking

Minga Berlin

靴下専門のeコマースサイト。
退廃的なイメージの画像が特徴的。カーボンニュートラルな全世界無配送も顧客にとって非常に魅力的。

(引用元:Minga Berlin

KitKat

ご存じキットカット。厳密にはeコマースサイトではないが創造力あふれるサイトは見ているだけでも楽しい。

(引用元:KitKat

Juliana Bicycles

自転車販売サイト。大きくて魅力的な商品画像には必要最低限の詳細しか記載されておらず、ユーザーがクリックしたくなるような構成になっている。

(引用元:Juliana Bicycles

Nike – Jordan

巨大な画像と明確なコンセプトが顧客を引きつけ、膨大な数のランディングページに誘いこむ。

(引用元:Nike – Jordan

Jeni’s

アイスクリームのeコマースサイト。ヴィジュアルイメージの序列化がきちんとなされ、シンプルですっきりとしたデザインが特徴的。

(引用元:Jeni’s

Huit Denim

物語性を追求したウェブサイトはジーンズを欲しいと思っていなくても思わず引き込まれてしまう。「Do one thing well」(ひとつのことに専念する)というキャッチコピーが顧客を引きつける。
(引用元:Huit Denim

Diesel

靴、カバン、小物などを扱うカジュアルブランド。カーソルを合わせていない部分の画面はぼやけ、特定の製品への興味と注意を引く。

(引用元:Diesel

Daniella Draper

ジュエリーブランドのeコマースサイト。非常にシンプルなデザインで全体にわたって使いやすく操作性が高い。

(引用元:Daniella Draper

Create Pilates

ピラティス、フィットネスなどのeラーニングサイト。大きな画像とナチュラルなモデルを起用し一体感のあるサイト構成となっている。ウェブの操作性はこの上なく洗練されている。

(引用元:Create Pilates

Booking.com

ホテルやヴィラなどの予約サイト。ホラー感漂うホームページが独特なユーザー体験を提供する。上にスクロールすると不気味な館の階段を上っていくような構成になっており階ごとにホテルの紹介ページが現れる。

(引用元:Booking.com

7 Diamonds

メンズファッションのeコマースサイト。見事な写真構成がユーザーを引きつける。PVのようなムービーも用意され商品のイメージをかき立てる。

(引用元:7 Diamonds
この記事は20 beautiful examples of persuasive ecommerce designをOrange Blogが日本向けに編集したものです。