デザイナー必見!参考にすべき「おしゃれなECサイト」を厳選

おしゃれなECサイトを作ろうと考えている担当者は、まずは自社のジャンルにおいての、おしゃれなECサイトを参考にしたいのではないでしょうか?

ただ、自社のジャンルだけで探そうとすると、業種によってはあまりECが活発でないなど、なかなか良いサイトが見つからない場合もあると思います。デザインやUI、機能的な面で参考サイトを探すのであれば、他ジャンルも含めて多くのサイトを見るべきです。

他ジャンルであっても、おしゃれでUIなどが洗練されたサイトには、必ずデザインのトレンドが取り入れられています。多くのサイトを見ることで、トレンドをつかみ、どのように自社サイトに落とし込むかを考えることが重要です。

本日はforUSERS株式会社で、マーケティングを担当している筆者が、「おしゃれ」かつ「洗練」されたECサイトについて、現行のECサイトから厳選して紹介するので、最後まで記事をご覧ください。

アパレル業界のおしゃれなECサイト5選

おしゃれなECサイトを探すなら、業界のEC化率が高いアパレルECがおすすめです。以下に紹介する5社は、ブランドコンセプトに基づいた世界観を構築してユーザーの共感を得ることに成功しております。

① ユニクロ

アパレル業界の売上高トップを独走するユニクロは、かつてファストファッションの先駆けとして、消耗品としての衣料品を低価格で提供する、まさに大衆向けのブランドの代表でした。しかし、そんなイメージを一新すべく2000年後半にリブランディングを行い、特にここ数年はデザイン・品質と共に価格帯も上がってきており、「低価格で高品質なブランド」としての立ち位置を獲得しつつあります。

そういった背景もあり、現在のユニクロのECサイトはブランディングを意識したデザインになっており、ビジュアル面にはそれが顕著に表れております。

トップページのキービジュアルでは芸能人や著名人をモデルに起用しており、また商品ページでも外国人モデルが多く見られます。そして、いずれも動画を使うなどして、商品の服を見せるというよりは「着用している空気感」を全面に押し出しています

UIは、シンプルで見やすいレイアウトになっており、商品ページには「スタイリング例」や「類似商品」の提案、また「一緒に購入されている商品」も載せるなど、サイトの回遊率を上げてクロスセルを狙う工夫がなされています。

参考:ユニクロ公式オンラインストア

② .st(ドットエスティ)

2021年のアパレル業界売上高3位のアダストリアが運営する.st(ドットエスティ)は30以上のブランドを扱うECサイトです。セレクトショップ型のECサイトの特徴とも言えますが、ブランド自体よりも、アイテムを見せることに比重を置いています。

.stのトップページでは、「ピックアップアイテム」「ランキング」「スタッフスタイリング」「レビュー動画」「スタッフランキング」「アイテムサーチ」と、商品をピックアップした多くのコンテンツが並んでおり、商品検索は一番下に設置しております。

このことから、特定のブランドや特定の商品を探しにくるユーザーよりも、サイトを見て欲しいものを見つけたいユーザーや、その時のトレンドアイテムを求めるユーザーをターゲットとしたサイト構成になっていることが分かります。

また、スタッフのコンテンツを多く設けてWeb接客に力を入れている点は、昨今の、特にアパレルECに多く見られるマーケティング戦略です。

参考:.st(ドットエスティ)

③ ANAP

おしゃれなサイト_ANAP

レディース、10代や子ども向けのアパレルを展開するANAPのECサイトは、約50%という高いEC化率を誇っています。中高生や若い女性がターゲットのブランドということもあり、送料無料訴求やクーポンバナー、SALE案内が一際目立っております

ただし、ペールトーンやビビッドカラーを上手く使って、トータルイメージをおしゃれな雰囲気に仕上げています。

また、特集バナーや一部商品のサムネイルは、それぞれにデザインが施されており、全体的にティーン向けのファッション誌のようなにぎやかなイメージが出来上がっております。このようにしっかりとしたコンセプトを持って世界観を醸成することは、マーケティングにおいて非常に重要になってきます。

参考:ANAPオンラインショップ

④ 無印良品

おしゃれなサイト_無印良品

生活雑貨・家具・インテリア業界の国内代表格でもある無印良品ですが、アパレルにおいても非常に評価が高く、人気のあるブランドです。無印良品ほど世界観が醸成されているブランドは、国内ではなかなかないのではないでしょうか。

徹底されたトンマナで、パッと見ただけで無印良品のサイトだとわかるデザインは、「シンプル」「ミニマル」を追求しており、「無印良品はブランドではありません。」というブランドコンセプトが明確に表れております。

プロダクトの品質にこだわりを持つ無印良品のサイトは、シンプルながらもメッセージ性が強く、素材説明のページ一つを取ってもLPのように作り込まれています。そうしてユーザーの“共感”を得ることで、一貫性のある世界観が作り上げられています。

参考:無印良品

⑤ しまむら

おしゃれなサイト_しまむら

ファッションYouTuberや人気タレントが紹介したことで注目を浴びたファッションセンターしまむらは、昨今のプチプラファッションの流行の波に上手く乗ったこともあり、ここ数年で売上を大きく伸ばし、2021年のアパレル業界売上高は2位と非常に好調なブランドです。

「毎日の暮らしが楽しくワクワクする」のブランドコンセプト通りに、非常ににぎやかなイメージで構築されており、イメージスライドの多用や動画の埋め込み、またパララックス(視差効果)デザインを用いてスクロールに連動したエフェクトを付けるなど、動きのあるサイト作りになっております。

一つ一つ丁寧にデザインされたバナーや、LP風に作り込んだ商品の紹介、またキャラクターをナビゲーションに使うなど、しまむらのECサイトもファッション誌的なデザインになっているのが特徴です。子どもから高齢者まで、ファミリー層に向けた、しまむららしい親しみのあるECサイトです。

参考:ファッションセンターしまむら

家具・インテリア業界のおしゃれなECサイト3選

家具・インテリアのECサイトもおしゃれなサイトが多いジャンルです。特に、家具やインテリアは部屋の印象を左右するため、各社ともサイト内で掲載する写真に力を入れているのが特徴です。その点も意識しながら以下をご覧ください。

① BRUNO(ブルーノ)

24.2%という高いEC化率を誇るBRUNOのECサイトを見たときに、まず目を奪われるのはクオリティの高い写真ではないでしょうか。

ひとつの商品を中心に据えて、それがもたらす生活のイメージや、家族や友人たちとのにぎわいなどが商品写真からあふれんばかりに伝わってきます。写真でサイトの印象が全く変わってくるということがよく分かる好例と言えます。

このように、BRUNOのECサイトは視覚的な情報を重要視しており、「おすすめアイテム」「新着アイテム」「ランキング」に掲載している写真は、一つ一つ商品を切り抜いて掲載しており、また商品ページでは、カラーバリエーションにも切り抜き画像を掲載しています。

さらに、「お支払い方法」では決済サービス各社のロゴを載せたりと、見た目以上に手間をかけて丁寧に作られたECサイトとなっております。

参考:BRUNO online

② IKEA

おしゃれなサイト_IKEA

北欧スウェーデン発祥で世界市場でも最大手のIKEA(イケア)のECサイトは、全体がほぼ写真とテキストのみで構成されておりグリッドレイアウト※を採用しているため、統一感があり一覧性の高いサイトとなっております。余計なデザインを省き、余白を上手く使った「配置によるデザイン」は、洗練された印象をもたらしてくれます。

グリッドレイアウトは情報の更新が簡単で効率性に優れ、またブラウザの幅に合わせてレイアウトが可変するため、ワンソースでスマートフォンやタブレットに対応できることから、運用面においても優れた作りになっております。

商品ページも独特で、一般的なECサイトであれば、1枚目の写真を大きく表示して、2枚目以降はサムネイルをクリックして写真を切り替えていくところを、IKEAのPC版のサイトでは、すべての写真を同じ大きさで並べて表示しており、ここでも一覧性を重視したレイアウトにしています。

一歩間違えると、閲覧するユーザーの混乱を招いてしまうリスクのあるグリッドレイアウトは、難易度も高いですが、上手く構成すれば非常に洗練されたおしゃれなサイトに仕上がります。

※グリッドレイアウト:デザインの大枠を格子状に分割して構成したレイアウト

参考:IKEAオンラインストア

③ LOWYA(ロウヤ)

おしゃれなサイト_LOWYA

LOWYAはオンライン専門の家具・インテリアブランドです。オンライン専門のため販売はECサイトのみですから、必然的に、実物に触れることができないデメリットを覆すほどの魅力的なサイト作りが命題となってきます。

もちろん商品自体もおしゃれで、購入しやすい価格設定にするなど競合との差別化を図っておりますが、ECサイトのデザインも、随所におしゃれな世界観を意識したポイントが見られます。

トップページのスライドバナーは、外国人モデルを起用して、それぞれが独立した丁寧なデザインで作られており、まるでアパレルECサイトのブランドバナーのようです。

また、カテゴリアイコンにはイラストを使用して、並べたときにきれいなグラデーションになるように配置するなど、細かい点でおしゃれに見せる工夫がされています。

特筆すべきは「季節の特集ページ」です。本記事を執筆している時点ではクリスマスシーズンだったので、クリスマス特集が組まれておりましたが、ストーリー仕立てで遊び心たっぷりに商品を紹介しております。

商品を購入してもらうことよりも、あえて世界観を楽しんでもらうことに振り切った演出は、ユーザーに大きなインパクトを与えるに違いありません。

参考:LOWYA(ロウヤ) 家具・インテリアのオンライン通販

化粧品業界のおしゃれなECサイト3選

化粧品のECサイトは、ブランドイメージが特にWebサイトに反映されているジャンルで、サイトから受ける印象がそのまま商品の印象につながるため、ビジュアルと世界観を重要視したECサイトが多いです。今回は厳選した3サイトを紹介します。

① SHISEIDO(資生堂)

おしゃれなサイト_SHISEIDO

化粧品業界の国内シェアNo.1のトップメーカーである資生堂のメインブランドである「SHISEIDO」のECサイトは、キービジュアルをはじめとした商品写真のクオリティが非常に高く、それぞれのビジュアルパーツが強烈な個性を持っているため、土台となるサイトデザインは非常にシンプルなものとなっております。

余白を大きく取り、テキスト量も控えめにして画面を広く使うことで、余裕のある印象になり、高級感も出てきます。あえて黒ベタになっているカートインボタンも、洗練された印象を与える効果に一役買っているように思えます。

このようなサイトデザインは昨今のトレンドのひとつとも言えますが、印象としてはAppleのECサイトにも通じる部分がありますので、自社の商品のビジュアルイメージをインパクトのあるものにする場合は、同じく参考にしてみることをおすすめします。

参考:「SHISEIDO」公式オンラインストア

② プレミアムアンチエイジング

プレミアムアンチエイジングの最新のEC化率は69%と極めて高く、ECが非常に好調なブランドですが、ECサイトのトップページは要素が少なく、非常にシンプルで、基本的には取扱商品への導線のみの構成となっております。

しかし、それぞれの商品には公式サイトが用意されており、商品ごとにまったく異なるデザインイメージのページが展開されます。各商品は独立したブランドとしてそれぞれのコンセプトのもとに商品開発されており、先に述べたように、サイトから受ける印象がそのまま商品の印象につながるため、当然ECサイト内でのアプローチも変わってきますので、必然的に独立したLPが必要になるのです

ドメインこそ同一ですが、ファビコンやサブコンテンツも独自のもので、商品ごとの専用サイトとしての仕様になっているのは、各商品でマーケティング施策を行う際に有効な構成となります。

ただし、各商品で決して無計画にデザインしているわけではなく、コンテンツの幅やナビゲーション部分の高さ、右下のお問い合わせボタンなど、要所でトンマナを押さえて、最低限の範囲で全体の統一感をキープしています。

参考:プレミアムアンチエイジング公式オンラインショップ

③ コーセー

コーセーの2021年の化粧品業界売上高は、資生堂、花王に次ぐ3位と、こちらも人気の化粧品メーカーです。コーセーのECサイトのキービジュアルに注目すると、商品自体のイメージは小さく、イメージキャラクターである芸能人をメインに据えて商品をプッシュしている印象です。

ブランディング先行のサイト作りよりも、ユーザビリティに重きを置いて、化粧品に対してそれほどこだわりのないライトなユーザー層も視野に入れたサイト作りになっております。

その証左として、検索方法を見ると「カテゴリから探す」「肌悩み・目的から探す」「トライアル」「仕上がりから探す」など、さまざまな角度から商品を検索できる仕様になっております。

トップページに並んでいるバナーも、コンテンツの説明も記載するなどの丁寧なデザインが施されており、楽しみながら商品を探せるようになっております。インパクトのあるビジュアルで、ブランディングに重きを置きがちな化粧品ECにおいては、コーセーのようなECサイトは非常にユニークで独自性があります。

参考:Maison KOSÉ(メゾンコーセー)

パソコン業界のおしゃれなECサイト3選

パソコン業界は一般的に家電業界に内包されるため、パソコン業界のECサイトというと、家電量販店のサイトのような、チラシをベースにしたにぎやかなデザインを思い浮かべるかもしれませんが、実はおしゃれで洗練されたサイトもたくさんあります。

① Apple

おしゃれなサイト_apple

ミニマルデザインはここ数年のWebデザインのトレンドですが、AppleのECサイトはミニマルデザインの代表格と言えるでしょう。必要最低限の情報だけで構成されたシンプルなデザインですが、競争の激しいパソコン業界において、こういったデザインを採用できるのは、Appleブランドだからこそでしょう。

AppleのECサイトは、下へのスクロールを意識してストーリー性を持たせた作りになっており、スクロールしていくごとにビジュアルをガラッと変えるなどの変化を見せつつ、製品への理解を深めていく見せ方になっております。

また、テキストのジャンプ率(見出しと本文の文字サイズの比率)を極端に大きくしたり、横幅いっぱいの画像の下には、分割レイアウトを持ってきたりなどして、見る側にとって心地よいテンポを生み出しているのも特徴です。

このようなサイトデザインは情報量が少なくシンプルな構成なので、製品の写真などのビジュアル部分で、ユーザーにインパクトを与えるようなクオリティの高いものを持ってくることが非常に重要です。

参考:Apple(日本)

② Lenovo

おしゃれなサイト_lenovo

国内パソコン市場でトップシェアのレノボ・ジャパンのECサイトは、モノトーンをベースにしてスタイリッシュにデザインされております。その分、ビビッドな色彩のキービジュアルが一際目立ち、ユーザーの目を引き付けます。

このサイトで注目したいのが、トップページのナビゲーションです。ヘッダーの1段目で大カテゴリを紹介し、2段目で小カテゴリを紹介します。そして一旦キービジュアルで目玉となる情報などを挟んで、直下にさらに詳細なカテゴリメニューを配置しています。

導線が練られた配置となっており、商品の性質上、種類が多岐にわたるために煩雑になりがちなところを上手く整理したナビゲーションになっております。

また、キービジュアル直下のカテゴリはタブで情報を切り替える形で、トップページ全体の情報量を変えずに最小限のボリュームで抑えている点でも、洗練された印象を与えてくれます。

「デスクトップ」「ノートブック」のカテゴリページは、一覧を出す前に、「タイプ別」「液晶サイズ」「価格」「ブランド」「用途」などの絞り込みをしてから一覧に導く形になっております。

デスクトップとノートブックのページは、ゲーミングなど他のカテゴリと違って、あまり詳しくないユーザーも訪れることが予想されるため、このような形にしたのでしょう。

このように新しいユーザーの受け口をきちんと用意していることも、国内シェアNo.1という実績につながっているのかもしれません。

参考:レノボ・ジャパン(PC&タブレット)

③ 富士通(FCCL)

おしゃれなサイト_富士通

国内パソコン業界のシェアNo.2の富士通は、パソコンメーカーとしての歴史も古いため認知度も非常に高く、今や子どもや高齢者、ファミリーからビジネスまで幅広いユーザーに支持されているブランドです。

ECサイトは、そういったユーザー層のニーズに応えた作りになっており、キービジュアルでは「セール」「アウトレット」「訳あり品」「目玉商品」などの特価訴求をメインに打ち出しております。

大胆なビジュアルに頼らず親しみやすさを感じさせるデザインですが、安っぽく見えないのは、サイトのベースデザインにおいて、配色を控えめにし、商品を碁盤の目のように並べ、なおかつ写真も統一感を出すなど細やかなデザインへの配慮によるものでしょう。

富士通パソコンが、高齢者やファミリー層に支持されている理由の一つとして、サポートの厚さがありますが、それはサイト上でもしっかりとアピールされております。

このように、バナーデザインや全体の配色、そして実際のサービスも一体となって、ECサイト上に「安心できる世界観」が醸成されております。

参考:富士通 WEB MART

多くのサイトを見ることでトレンドをつかもう

今回、業種別のECサイトをいくつか紹介しましたが、まったく違う業種のサイトでありながら、デザイン上で共通している部分も見つかったのではないでしょうか。それがWebデザインの「トレンド」です。

現在はスマートフォンの普及により、Webデザインにおいてもモバイルファーストが主流です。そのため、スクロールの中で情報を伝達していくことを前提に考えなければいけません。

そういった背景から、要素を縦に積んでいくシングルカラムレイアウトで構成されたシンプルなデザインがトレンドとなっております。ユーザーに「おしゃれだ」「洗練されている」といった印象を与えるには、こういったトレンドを押さえることが重要です。

おしゃれで洗練されたサイトは、自社とは違うジャンルであっても、必ずレンドを取り入れたデザインになっております。

なぜなら、デザインのトレンドは業種などに関係なく、「スマートフォンの普及」「回線速度の向上」など、その時代ごとの環境やユーザー行動の変化から生まれてくるものだからです。

まずは、業種にこだわらず多くのサイトを見ながら、ビジュアル面や機能面でのトレンドを把握して、自社のECサイトにどのように落とし込むかをしっかり考えることが大切になってきます。

おしゃれなECサイトの制作を検討している方は、インターファクトリーのECサイト構築プラットフォーム「ebisumart zero(エビスマート ゼロ)」もぜひご検討ください。トレンドを押さえたテンプレートも豊富で、最新の機能も充実したおススメのプラットフォームです。

詳しい機能などについては公式ホームページをご覧ください。

ebisumart zero公式ホームページ