東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

こんなに違う!ECサイトのデザイン5選

2018.07.25 Posted by

「Webサイトの基本のレイアウトみなさん、こんにちは。ウェブラボデザイナーチームです。今回は、暑くて外出が億劫…というときにも便利な、ネットショッピングができる「ECサイト」のデザインをご紹介します。

ECサイトとは

インターネット上で商品・サービスの売買ができるWebサイトを、「ECサイト」といいます。代表的なものとしてはAmazonや楽天などがありますが、一口にECサイトのデザインといっても様々です。
今回は数あるECサイトの中から、ごくごく一部ではありますが、個性的な5つのWebサイトをご紹介していきたいと思います。

Amazon

Amazon
Amazon
先にも代表的なものとして挙げましたが、大手のECサイトといったらやはりAmazon。普段からネットで買い物をする方であれば、1度はWebサイトを見たことがあるのではないでしょうか。
取り扱っている商品の種類が多岐にわたり、それに合わせて様々なサービスを展開しているため、コンテンツ量が多いのが特徴です。当然商品写真は種類も質もバラバラで少々ごちゃっとした印象ですが、TOPページのランキング部分については、文章を省いて写真を並べただけのコンパクトな構成になっています。
Amazonは老若男女幅広い層に利用されるため、Webサイト内の説明は多めです。アイコンが付いているバナーやボタンであってもそのほとんどがテキスト情報とセットになっていて、ユーザーの誤解を招かないようにという配慮が見られます。

ファッション通販 ZOZOTOWN

ファッション通販 ZOZOTOWN
ファッション通販 ZOZOTOWN
ツケ払いの導入やZOZOSUITの配布、さらには“ZOZOのスーツ”の販売開始など、何かと話題のZOZOTOWN。アパレル専門のECサイトです。
ベーシックな3カラムで、Webサイト内を回遊しやすくなっています。特に欲しいものが決まっていなくても、簡単にウィンドウショッピング体験が楽しめそうですね。
Webサイトの幅はそこまで広くなく、かなりコンパクトにまとまっています。しかし、装飾が最小限に抑えられていたり文字のサイズが小さめになっていたりするので、煩雑な印象はありません。また「カート」や「お気に入り」などの主要なメニューはアイコンだけにして簡略化され、全体的にスタイリッシュな雰囲気です。

honto

honto
honto(電子書籍TOP)
書籍専門のECサイトで、電子書籍と紙の本のどちらでも購入することが可能です。そのためボタンなどの各パーツが電子版と紙とでしっかり色分けされており、購入時に間違うことのないよう配慮されています。
ヘッダーのナビゲーションからは商品を絞り込んだり、検索方法を指定したりすることができます。特にユニークなのが「興味関心・気分で探す」という検索方法。本屋さんでPOPを見ていく要領で、思いがけない本との出会いを楽しめるのではないでしょうか。
全体的にスタイリッシュというよりは賑やかな印象で、親しみやすい書店のような雰囲気です。また、Webサイト内のナビゲーションやメニューのほとんどが日本語表記という親切設計で、大変使いやすいWebサイトになっています。

無印良品

無印良品
無印良品
シンプルなデザインが人気の無印良品のECサイトです。店舗の雰囲気をそのまま反映したような、すっきりとしたデザインになっています。写真がメインのシンプルな構成ですが、文字のジャンプ率と全体の余白がほどよく、落ち着いた赤色がアクセントになっていてきれいにまとまっています(ジャンプ率についてはこちらの記事をご覧ください)。
特徴的なのは、ページ真ん中あたりにある「商品」の一覧です。無印良品では衣類から食料品、家具まで様々な商品を扱っていますが、写真をアイコン代わりにすることで、より直感的に商品を探せるようになりますね。

ETQ Amsterdam

ETQ Amsterdam
ETQ Amsterdam
たくさんの商品を取り扱うAmazonや楽天とは対照的に、主にシューズをメインに取り扱っているECサイトです。
商品の一覧ページはカード型のレイアウトを採用しており、商品写真・商品名・値段だけのシンプルな構成で、要素をできるだけ省いたミニマルなデザインになっています。セール中の商品であっても主張は控えめですが、もともとの情報が少ないため赤い文字がよく目立ちますね。
商品の写真はアングルや背景が統一されているため、比較がしやすく、さらにWebサイト全体がまとまって見えます。同じような形状の商品を取り扱っているWebサイトならではの見せ方と言えるでしょう。

——

以上、個性的な5つのECサイトをご紹介しました。
今回は主に見た目の部分に重点を置きましたが、ECサイトにおいてはUI(ユーザーインターフェース)のデザインがより重要になってきます。そのあたりはまた別の機会に掘り下げていきたいと思いますので、お楽しみに!

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278