ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

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

  • WEBデザイン

様々なテーマでお届けしている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選】背景に動画を大胆に使った日本のサイトまとめ

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

  5. 5

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  6. 6

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  7. 7

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  8. 8

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  9. 9

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  10. 10

    結果につなげるLINE@活用。最新集客事例に学ぶ成功の6つのポイントとは?

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  9. 9

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」