M-HAND BLOG

エムハンドブログ

【WEBデザイン10選】つい買いたくなる、クオリティーが高いECサイトまとめ

43

様々なテーマでお届けしているWEBデザイン10選。今回は、ECサイトをとりあげます。最近では、サイト制作の知識がなくても、テンプレートにお店のロゴや商品画像をはめ込むだけで簡単にネットショップを開設できるサービスも増えてきました。スタートの敷居は、どんどん低くなっています。

しかし、ショップのブランディングや商品イメージの訴求、パソコンでもスマートフォンでも快適に見られることなど、さまざまな要素をクリアーしていくためには、WEBサイトとしてクオリティーが高く、ユーザービリティーも良いサイトでなければいけません。そこで今回は、購入する気がなくても見てしまう、そして見ているうちについ買いたくなってしまう…、そんなクオリティーの高いECサイト10選をお届けします。

参考にしたい魅力的なECサイト事例

YANMAR PREMIUM WEAR

0609_01 のコピー https://shop.yanmar.com/

業種:農機、建機、小型船舶メーカー サイトの特徴:レスポンシブWEBデザイン、パララックス

2012年に創業100周年を迎えたヤンマーが、次の100年に向けて新たな一歩を踏み出したプロジェクト 「プレミアムブランドプロジェクト」。 これは、その一環として開発された革新的な農作業着のECサイトです。クリエイティブディレクターに佐藤可士和氏を迎え、作業着のデザインはISSEY MIYAKEなどでおなじみの滝沢直己氏が手がけています。これまでの農作業着のイメージとは一線を画す新しいコンセプトの作業着だということが、サイト全体の雰囲気からも伝わるクオリティーの高いECサイト。力を入れたプロジェクトならではともいえますが、商品を主体にしたシンプルな構成は多くのECサイトの参考になります。

AIAIAI Headphones

0609_02 のコピー http://aiaiai.dk/

業種:オーディオメーカー サイトの特徴:レスポンシブWEBデザイン、フラットデザイン

AIAIAIはデンマークのコペンハーゲンに本社を置くデザイン・ヘッドホン・ブランドです。このECサイトは、製品自体が持つ「北欧伝統のシンプルなデザイン」という特徴を、サイト全体のトーン&マナーにも踏襲させており、黒をベースに写真もモノクロ処理をしたミニマルデザインのサイトになっています。ヘッドホンという製品らしく、映像や音楽コンテンツも上手く盛り込まれており、情報も充実しています。

CABLE DESIGN

0609_03 のコピー http://cableisdesign.com/

業種:インテリア家具・雑貨 サイトの特徴:レスポンシブWEBデザイン、グリッドデザイン

海外のインテリア、雑貨のECサイトです。トップページは格子状に精度の高いビジュアルが配置されており、英語がわからなくてもクリックしたくなります。STOREページでは、商品のカテゴリーごとにシンプルなアイコンを用いたナビゲーションが配置され、お洒落で使い勝手のよいデザインになっています。スマートフォンでの閲覧も快適。グレーに差し色のグリーンという絞り込まれた色づかいも、シンプルなデザインテイストによく合っており、サイトの配色の参考にもなります。

M co.,ltd

0609_04 のコピー http://www.emme.jp/

業種:ファッション サイトの特徴:レスポンシブWEBデザイン、グリッドデザイン

革小物などのインポートのファッションアイテムを取り扱うECサイトです。現物を実際に手にとって買うことのできないECサイトでは、商品写真の良し悪しが購入を左右する大きな決め手。このサイトは、サイト自体のつくりは凝ったものではありませんが、ヘッダーのメインビジュアルの商品写真やその見せ方のクオリティーが高く、高級感を上手く醸成させています。魅力的な物撮りの仕方、美しい商品レイアウトの参考になるサイトです。

Scope

0609_05 のコピー http://www.scope.ne.jp/

業種:インテリア家具・雑貨 サイトの特徴:レスポンシブWEBデザイン

トップページを見てもわかるように、このサイトは、いわゆるECサイトのイメージとは少し違っています。単に商品だけを掲載するのではなく、その商品のある生活やライフスタイルがイメージできる写真をふんだんに使用し、ストーリーとともに紹介しています。各商品の個別ページでは、イメージ写真とともにエッセイ風の商品説明文が添えられています。眺めて、読んでいるうちにきこまれて、「こんな生活をしてみたい」という気分になってしまう、そんな魅力のあるサイトです。

THE STABLES

0609_06 のコピー http://thestables.jp/

業種:インテリア家具・雑貨 サイトの特徴:レスポンシブWEBデザイン、パララックス

取り扱っている商品もサイトのデザインもお洒落なので、東京にあるショップかと思いきや、青森県弘前市にあるインテリア家具・雑貨のお店のECサイトです。商品の個別ページでは、さまざまな角度や、寄りや引きの写真が掲載されており、温かみのある商品たちの手触り感まで伝わってきそうです。ごくシンプルながら、ひとつひとつへの売り手の愛情が伝わり、安心して購入できそうなサイトになっています。

宮井本店

0609_07 のコピー http://www.miyai-honten.jp/

業種:風呂敷専門店 サイトの特徴:グリッドデザイン

京都の老舗風呂敷(ふろしき)専門店のECサイトです。トップページでは風呂敷をさまざまな切り口で紹介。日本の伝統文化を知るという意味でも、気になるコンテンツが揃っています。風呂敷の特長である「柄」や「テイスト」だけでなく、「包み方」や「用途」などからも商品を探して選ぶことができるようになっているのも親切。探し方の切り口がたくさん用意されているため、ふだん風呂敷という商品に馴染みが薄い人でも興味をもちやすく、ユーザービリティーも高いサイトになっています。

クラスタイル

0609_08 のコピー http://www.kurastyle.com/

業種:酒販売 サイトの特徴:映像、イラスト

「豊かな人生には、いいお酒。」をコンセプトに、本当においしいお酒だけをたくさん揃えたECサイトです。「クラスタイルのコンセプト」という映像で、単にお酒を売っているECサイトではないということをていねいに伝えており、しっかりとブランディングされたサイトになっています。ちょっとしたあしらいに使われているイラストにも温かみがあり、サイトの良いアクセントに…。そんな細部まで、ていねいに作られたサイトです。

一万年の雫

0609_09 のコピー http://www.10000years.jp/

業種:天然水 サイトの特徴:アニメーション

九州の天然水「一万年の雫」のECサイトです。トップページのメインビジュアルは、マウスカーソルの動きに合わせて商品写真が動くアニメーションが付けられており、インパクトがあります。美しい自然を感じさせる写真をふんだんに使用し、全体を通して清涼感を表現することで、他のミネラルウォーターなどの飲料水のECサイトとの差別化を図っています。

ほそやの「まる豚」

0609_10 のコピー http://marubuta.jp/

業種:食料品 サイトの特徴:1カラムデザイン

有限会社ほそやが販売するおいしい豚肉「まる豚」のECサイトです。黒バックの背景が豚肉の写真を引き立たせており、黄色の差し色もデザインのポップなイメージとよくマッチしています。1カラムデザインで、コンテンツの内容も読みやすく、楽しくレイアウトされているため、豚肉についての知識も得られて購入意欲も上がるサイトになっています。シンプルながら、とても完成度の高いサイトです。

今回のまとめ

いかがでしたでしょうか?今回、いろいろなECサイトを見ていく中で、レスポンシブWEBデザインのサイトがかなり増えていることを実感。商品によっては、パソコンよりもスマホで閲覧(購入)する割合が高いとも言われますが、ECサイトでもスマホ重視の流れはさらに進んでいきそうです。

また、クオリティーの高いECサイトでは、商品コンセプトを元にしたブランディングがしっかりと行われていることや、商品の魅力を伝えるためにも、写真やストーリーがいかに大切か…ということも再認識。ご紹介したサイトを、制作の参考にしていただければと思います。

<関連記事> 【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ 【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ 【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ