参考になるおしゃれなECサイト20選とデザイントレンド

自分が運用するECサイトであればやっぱりおしゃれで使い勝手の良いサイトがいいですよね。
でも、おしゃれにしすぎて使いずらくなってしまうこともあるかもしれません…

今回のブログではおしゃれさとユーザビリティを両立させたECサイトをご紹介します！
実際のサイトを参考に紹介していくのでよりイメージしやすく、一つ一つ解説も入れているのでこれからECサイトの制作を考えている人はぜひご覧ください。

ECサイトに必要なデザイン性

ECサイトではおしゃれさも重要ですが、ユーザーが購入しやすい商品を見つけやすいなどUI/UXの観点からもデザインすることが重要です。

UI（ユーザーインターフェイス）とは?

UI（ユーザーインターフェイス）はパソコンやスマートフォンなどのデバイス（インターフェース）とユーザーをつなぐ、アプリケーションやWebサイトなどの製品に触れる部分のことを指します。

また、UIの使い勝手を良くするためのデザインをUIデザインといいます。
ECサイトのデザインではサイトの使い勝手が悪いと商品購入までに結びつけることが難しいのでUIデザインを気にする必要があります。

UIデザインで気を付ける点

UIデザインは使いやすくするために大まかに以下の点に気を付ける必要があります。

• 欲しい情報を見つけやすくする

  例：文字や画像などの情報がごちゃごちゃしているとわかりずらいのでまとめたり、重要な情報かどうかで強弱をつける

• 操作をわかりやすくする

  例：購入や商品検索はボタンなど、このボタンを押したらどういうことが起こりそうかがぱっと見で分かるようにする

• 目標にたどり着くまでの流れをわかりやすくする

  例：どこをどうすれば目的にたどり着くか導線をはっきりとさせる

UX（ユーザーエクスペリエンス）とは?

UX（ユーザーエクスペリエンス）はユーザーがアプリケーションやWebサイトなどの製品を通じて感じられる感想・体験のことを指します。
体験はお問い合わせや商品購入・比較などがあります。

サイトのUX例

サイトでどのような感想・体験（UX）を得られるかいくつか例を紹介します。

• お問い合わせフォームの入力がスムーズにできたという体験

• レイアウトがすっきりしていて商品の比較がしやすいという感想

• 情報が纏まっていて欲しい情報まですぐにたどり着くことができた体験

• サイトの表示速度が速くてストレスなく見ることができるという感想

UIとUXの関係性は？

UIとUXの関係性を例えると商品購入（UX）をしてもらうために購入ボタン（UI）をわかりやすくするようなイメージです。
商品購入が全体を通しての体験、購入ボタンがその体験を得るための接点になっています。

UI/UXについてさらに詳しく知りたい方は以下の記事がおすすめです！
【売れる！】ECサイトのデザインとUI/UXを考慮した設計

業界別のおしゃれなECサイト

業界ごとにデザインの雰囲気などや載せる情報も大きく異なります。
そこで業界別でおしゃれだと思ったECサイトをまとめてみました。

アパレル業界

アパレル業界でおしゃれなのサイトを紹介します。

FABRIC TOKYO

FABRIC TOKYOオーダースーツというしっかりした大人なイメージに合わせてモノクロにまとめられています。
また商品数が多いためあまり一つ一つの画像を大きくせず、一画面に複数商品が映ることにすることでより自分に合った商品を比較にしながら探すことができます！
オーダースーツはFABRIC TOKYO |1着3万円台〜、高品質なオーダー体験

インユース MOONSTAR

インユース MOONSTARはサイト全体にモノクロのイラストを取り入れているだけでなく、TOPの商品一覧もすべて黒く塗られたイラストになっています。違いを探すように靴の形をしっかり見ることになるのでぴったりな理想的な形の靴が見つけられそうですね！
インユース MOONSTAR

美容化粧品業界

美容化粧品業界でおしゃれなのサイトを紹介します。

SINN PURETE（シン ピュルテ）公式オンラインストア

SINN PURETE（シン ピュルテ）公式オンラインストアはとてもシンプルなデザインですがその分商品画像を大きく見せて、美しい商品画像が際立って見えますね。
化粧品は容器の形で化粧水か美容液かなど、どんな商品かは大体予想できるので商品を大きく見せることはとても効果的です！

また、カテゴリーボタンなどの商品への導線になるボタンは文字を大きくし、余白も広めにとることで分かりやすくなっていて迷わずお目当ての商品までたどり着くことができます。
SINN PURETE（シン ピュルテ）公式オンラインストア

YOAN（ユアン）ONLINE SHOP

YOAN（ユアン）ONLINE SHOPは背景の色味が商品とあっていてやわらかい印象になっています。

「LINE友だち追加で「10%OFFクーポン」プレゼント」などのユーザーの興味を引く内容のものをヘッダーの上部など目立つ箇所に表示したり、トライアルキャンペーンのバナーが常に画面の右下にあったりとユーザーをうまく誘導できるような導線が用意されています！
YOAN（ユアン）ONLINE SHOP｜うるおう角質ケア、誕生。

食品業界

食品業界でおしゃれなのサイトを紹介します。

【公式】株式会社八百彦本店

【公式】株式会社八百彦本店は仕出し料理・お弁当を販売しているので和のテイストに合わせてイラストや見出しに明朝体のフォントを使用しています。

左側のメニューでどんなシーンでのご利用かを選択できるので、場面にあった商品を選びやすくなっています！
【公式】株式会社八百彦本店 名古屋で創業300余年。仕出し弁当、宅配弁当をお届けいたします。

UTOPIA AGRICULTURE | 株式会社ユートピアアグリカルチャー

UTOPIA AGRICULTUREは商品詳細ページのメインビジュアルがかわいい背景イラストと商品のデザインになっていてとても目を引きます。
そして画面の右下に常に商品購入・定期便申し込みのボタンがあるので、ユーザーが購入したい！と思ったタイミングですぐに行動を起こすことができます。
UTOPIA AGRICULTURE | 株式会社ユートピアアグリカルチャー

インテリア業界

インテリア業界でおしゃれなのサイトを紹介します。

MOCK things by hand (モック シングス バイ ハンド)

MOCK things by hand (モック シングス バイ ハンド)は商品のみの画像と実際に使用している画像を載せていて使用しているときのイメージがしやすくなっています。
また、ヘッダーにある「PRODUCT」のサブナビゲーションを表示すると商品が画像付きで表示されるので、自分の探している商品の商品名がわからずとも簡単に見つけることができます！

MOCK things by hand (モック シングス バイ ハンド)

デジタル(家電・ガジェットなど)業界

デジタル(家電・ガジェットなど)業界でおしゃれなのサイトを紹介します。

The Basic Gastable | ザ ベーシック ガステーブルコンロ リンナイ公式通販

The Basic Gastableはコンロという商品自体の形が少し複雑なので、商品画像は背景を切りぬき、商品のみを表示させることですっきりと商品が見やすいようになっています！
実際のキッチンに置いた時の雰囲気は詳細ページに画像を載せておくことでよりイメージがしやすくなっています。
The Basic Gastable | ザ ベーシック ガステーブルコンロ リンナイ公式通販

デザインジャンル別で見る参考ECサイト

どういうテイストのデザインにしたいかが決まっている方もいると思います。
そこでデザインジャンル別に参考になりそうなECサイトをまとめてみました。

ラグジュアリー（高級）

ラグジュアリー（高級）感のあるデザインのサイトを紹介します。

Cellato | セラート

Cellatoはサイト全体が黒背景になっており、シックで高級感のあるデザインになっています。
商品写真も背景が黒になっているため、より商品が引き立っています。
Cellato | セラート

ミレニアル世代

ミレニアル世代(1980〜2005年に生まれた人)に好まれるデザインを紹介します。
この世代は特にオンラインショップを利用する方が多いようなので要チェックです！

uniam（ユニアム） – 獣医師・栄養士監修ねこ専門のフレッシュフード

uniam（ユニアム）は原色に近いカラーを多く使い、ポップな見た目に仕上げています。
それでも商品説明などシンプルな色使いのほうが読みやすい箇所はベージュにしていて、インパクトを持たせる箇所と読みやすくするか所のバランスが取れています。
グリッドのように線を入れることで色がはっきり分かれていても違和感なくおしゃれなデザインになっています！
uniam（ユニアム） – 獣医師・栄養士監修ねこ専門のフレッシュフード

PRODUCTS STORE

PRODUCTS STOREはところどころに人物のイラストが入っていていて作り手の顔がわかり安心感があるようになっています。

また、ミレニアル世代をターゲットにするなら必ずレスポンシブ対応を行う必要があります。
スマホからサイトを閲覧するユーザーが多いので、特にスマホの見やすさにこだわってみるとよいでしょう！

PRODUCTS STORE

ポップ

ポップなデザインのサイトを紹介します。

福井の未来を考えた越前織のワッペンブランド フワッペン

フワッペンはイラストとアニメーションを多く取り入れていてとてもかわいらしいですね！
それでも商品詳細のページはTOPページよりもすっきりしていて情報が見やすいようになっています。
福井の未来を考えた越前織のワッペンブランド フワッペン

TOSACO | おいしい高知の、おいしいビール。

TOSACOもイラストとアニメーションを多く取り入れています。
イラストや色味に合うようにフォントを丸ゴシックのものにしたり全体的にやわらかい雰囲気になっています。
TOSACO | おいしい高知の、おいしいビール。

レトロ

レトロな雰囲気のサイトを紹介します。

るるる温泉｜塩原温泉 湯守田中屋オンラインショップ

るるる温泉は背景がクラフト紙のような質感になっており、商品に入っているのと同じイラストが入っており、商品の印象をより強くするようになっていますね。
るるる温泉｜塩原温泉 湯守田中屋オンラインショップ

シンプル

シンプルなデザインのサイトを紹介します。

SSS- HIGASHIYA・茶方薈・Sゝゝ公式 オンラインショップ

SSSは全体的に写真を大きく見せ、余計な装飾がないデザインにすることで品があるような印象になっています。
SSS- HIGASHIYA・茶方薈・Sゝゝ公式 オンラインショップ – OGATA Online Department Store

クランド（KURAND）

クランド（KURAND）は多種多様なお酒を販売しているサイトで商品数が多く、いろんな条件で商品の検索ができるようにすっきりシンプルにまとまっています。
シンプルですが色味の統一感が良く、ところどころにサイトのトレンドマークとなる招き猫のアイコンが入っていてとてもかわいいですね！
また、商品画像に統一感があり、全く違う商品でもレイアウトを同じにすることで比較しやすくなっているのもよいですね！
クランド（KURAND）｜クラフト酒のお店

最近のデザイントレンド

おしゃれにするなら最近のデザイントレンドも気にしておきたいですよね！
最近のデザイントレンドを取り入れているECサイトを紹介します。

3Dデザイン

最近はECサイトでも3Dを取り入れたサイトが増えてきています！
商品を立体的に見ることができるので、オンラインショップの平面的にしか商品を見ることができないデメリットを緩和することができます。

Rouvenat

Rouvenatは特に目立たせたい商品は商品の全体像が見えるように3Dモデルが表示されていて、ゆっくり回転しながら全体を表示させて、ユーザーが操作すれば見たい方向から商品が見ることができます！
無駄のないシンプルなデザインとゆっくりとした動きは高級感を感じられますね。
Rouvenat | Joaillerie Circulaire– ROUVENAT

ゲームのようなデザイン

ゲームのような没入感のあるサイトを紹介します。
普通のサイトよりインパクトがあるのでユーザーの興味を引くことができます！

ネコノテパン工場-尾道山手の小さなパン屋さん-

ネコノテパン工場はTOPのページがゲームの選択画面のようになっており、そこから商品を選択して購入まで進むことができます。
ゲームのようにすることでユーザーの興味を引き、購入するまでのハードルを下げることができます。
ネコノテパン工場-尾道山手の小さなパン屋さん-

一画面ずつスクロール

一画面ずつスクロールして進むサイトを紹介します。
一つ一つじっくり商品を紹介したいサイトにおすすめです！

まるごとみかん大福／フルーツ大福のお取り寄せ｜金沢 和菓子処 中越

和菓子処 中越では一つの商品を一画面丸々使い紹介しています。
商品数が少ないサイトであれば、商品ごとのインパクトがとても強くなり効果的です！
まるごとみかん大福／フルーツ大福のお取り寄せ｜金沢 和菓子処 中越

スクロールアニメーション

面白いスクロールアニメーションを取り入れたサイトを紹介します。
スクロールアニメーションを適度に入れることで単調にならず、とても印象に残るサイトになります。

いきものグッズ専門「いきもーる」

いきもーるはスクロールするたびに画面の周りに望遠鏡をのぞき込んでいるようなシルエットが表示されます。
表示されるのはスクロールしている間だけなので、見たい商品をじっくり見るときには邪魔にならず面白いアイディアですね！
いきものグッズ専門「いきもーる」※こちらのサイトは8/31をもって閉鎖されており、記事投稿時は閲覧のみ可能です。

まとめ

最後までご覧頂きありがとうございました！
参考にしたいサイトは見つかりましたか？

ECサイトはUI/UXデザインにも気を付ける必要があるのでどこまでおしゃれにするかの見極めも大切になってきます。
例えば、商品数が10点以下ぐらいの少ないサイトであれば装飾に凝ったデザインでも合いますが、商品数が多い場合は装飾の多いデザインだとお目当ての商品が見つけづらくなってしまう可能性があります。

装飾の多いサイトはインパクトがあってよいですし、シンプルなサイトでも細部にこだわれば十分おしゃれなサイトになります。
販売したい商品に合わせたおしゃれなサイト制作を目指しましょう！

また、BRISKでもECサイトの制作を行っています。
ECサイトの構築についてお悩みの方は是非こちらからお気軽にご相談ください！
ECサイト制作ならBRISKにお任せ！