【デザイン事例集】オシャレで参考になるECサイト12選！おすすめギャラリーサイト5つも紹介します。

「売上アップに繋がる魅力的なECサイトを作りたいけど、どうすれば良いかわからない」
「ECサイト制作時に参考になる、オシャレなデザイン事例を知りたい」

という、デザイナー・Web担当者の方もいらっしゃるのではないでしょうか。ECサイトのデザインは、ただ美しいだけではなく「ユーザーが見やすいレイアウトになっているか」が重要です。本記事では、

• 参考になるデザイン事例12選
• ギャラリーサイト5種

を紹介していきます。サイトのデザインが商品のイメージに直結すると言っても過言ではありません。本記事を参考にして、コンバージョン獲得に繋がる魅力的なECサイトを作っていきましょう！

【業界別】参考になるECサイトデザイン事例12選

インテリア・雑貨業界

インテリア・雑貨業界のECサイトが持つ課題として、以下のようなものが考えられます。

Awsome Store

出典：Awsome Store
購入までの導線にこだわっており、商品はグローバルナビにある「カテゴリ」から探せるだけでなく、「フィーチャー」から、パーティ・おうち時間を始めとしたシーンや、ヴィンテージ・ポップなどのスタイルに絞って雑貨を探すことができます。

商品の一覧ページから在庫の有無が一目瞭然。「購入しようと思ったら在庫がなかった」という煩わしさがなくなり、ユーザビリティ・顧客満足度の向上も期待できるでしょう。

商品ページを開くと右に「カートを入れる」ボタンが表示されますが、スクロールしてもボタンは固定されています。これも、購入につなげるための戦略だと言えるでしょう。このようにAwsome StoreのECサイトは、ユーザーを購入へと導く導線がよく考えられています。

IKEA

出典：IKEA

上の画像のように「キャッチコピー」「画像」「色」のパネルをカルーセルで表示し、ユーザーの注目を集めています。クリックしてもらうための施策としてサイドに矢印、下部にプログレスバーを採用。

なんとなく訪れたユーザーに対しても、トップページでインテリアコーディネートを紹介することで「このインテリアをこんな風に飾ってみたい」と、購入意欲を触発するきっかけを作っている点が参考になりますね。

北欧、暮らしの道具店

出典：北欧、暮らしの道具店
ユーザーの「使い方がわからない」運営側の「魅力を伝えきれない」という課題を、スタッフがブログ記事を発信することで解消しています。商品の魅力はもちろん、スタッフの人柄や感情も伝わり、実際におすすめされているような気持ちになることでしょう。プロ目線で紹介するため、信頼を得やすく、コンバージョンにも繋がりやすいのも特徴です。

トップページは「お買いもの」「読みもの」「お知らせ」など記事を開かなくても、メディアのカテゴリが一目で分かる、UIを意識したデザイン。このような細かな配慮がリピーターの育成につながっていると考えられます。

食品業界

食品業界のECサイトには、以下のような課題があります。

解決策として、どのような工夫がなされているのでしょうか。一緒に見ていきましょう。

メゾン・ド・フルージュ

出典：メゾン・ド・フルージュ

自分の好みに合ったジャムを見つけられるような工夫がされています。

このサイトで取り扱っている商品は、苺ジャムのみ。初めて訪れたユーザーは、どれも同じに見えてしまうかもしれませんね。さらに、苺の中でも「酸っぱいものが好き」「甘いものが好き」と好みもあるため「おすすめ」がすべてのユーザーに当てはまるとは限りません。

そこで、商品画像にカーソルを合わせると「酸味」「硬度」「王道度」「レア度」で苺の詳しく情報がわかるような仕組みを採用しました。ユーザビリティを意識した設計だと言えるでしょう。

その他、各商品ページではユーザーの「パンに塗る時しかジャムの出番がない」「購入しても、使いきれるか心配」という不安を汲み取り、おすすめの食べ方を紹介しています。

snaq.me

出典：snaq.me
「コンセプトが伝わりにくい」という課題を、スライドショーや動画を使うことでカバー。上の画像は、サイトを開いてまず目に入ってくるメインビジュアルです。

枠の中が自動的に切り替わり、動画・写真が表示されます。切り替わるときのアニメーションがユニークなため、ユーザーを飽きさせません。運営側は多くの時間、自社の魅力をアピールすることが可能です。

Mr.CHEESE CAKE

出典：Mr.CHEESE CAKE

チーズケーキはコンビニやスーパーでも手軽に手に入るスイーツですが、ブランドサイトとECサイトを統合し、コンセプトを伝えることで「Mr.CHEESE CAKE」ならではの価値をユーザーに伝え、差別化を図っています。

下層ページに移動せずともトップページから購入・再販通知登録のページに遷移できるため、コンバージョンに至るまでの導線がスムーズなのも魅力的。

商品紹介ページでは沢山の情報を載せるのではなく、短い文で説明することにより深みが出て、「特別感・高級感」を感じさせます。

アパレル業界

アパレル業界のECサイトの課題として、以下のようなものがあります。

このような課題の解決策として、どのような工夫がなされているのでしょうか。一緒に見ていきましょう。

COHINA

出典：COHINA
「サイズが合うかどうか不安」「生地感が知りたい」というユーザーの心情を汲み取り、商品ページにはサイズ感がイメージできるようなスタッフからのコメントと、詳しい商品情報が紹介されています。

運営側も、商品の魅力を伝えることで実際の商品とのギャップを減らすことができるため、返品件数を少なくすることにも繋がるでしょう。身長から商品を探せるようになっている点からも、ユーザビリティを意識していることが伝わりますね。

UNIQLO

出典：ユニクロ

商品名よりも、どんな商品なのかイメージできるような「キャッチコピー」を目立たせています。手に取れないユーザーに対して、わかりやすく素材や質感を伝えています。

PCとスマホで開いた時のメインビジュアルを比べると、画像のサイズを変えていることがわかります。スマホが縦長の画像であるのに対して、PCは横長に。このような配慮も、見やすさを意識した工夫だと言えるでしょう。

BEAMS

出典：BEAMS
「MEN」「WOMAN」「KIDS」というグローバルナビゲーションを大きく表示させることで、ユーザーの目的達成をスムーズにしています。
スタイリングページや、映像を用意しており、様々な角度から商品の魅力を伝えていることがうかがえますね。

美容・化粧品業界

美容・化粧品業界のECサイトには、以下のような課題があります。

このような課題の解決策として、どのような工夫がなされているのでしょうか。一緒に見ていきましょう。

Agri&Beauty

出典：プロハーブ

「肌に合わないのではないか」と、ネットで購入することに抵抗を感じる方向けに、価格だけでなく「パーツ」「お悩み」からも商品を探せるようにしています。これによって、ユーザーは自分に合った商品を見つけやすくなりますね。

msh

出典：msh

ページの上部に「10%OFF COUPON＆送料無料」と書かれた帯を載せ、スクロールすると同じ内容のバナーが固定表示されるように設定。「クーポンが配布されているし、送料がかからないなら購入してみようかな」と初めにユーザーに思わせ、コンバージョンに繋がりやすくしています。

「実際に試さないと、実際の色がわからない」という課題に対しては、商品と一緒に色味・発色の具合がわかる画像を用いることで、イメージと実際の商品とのギャップを少なくしている点が、参考になりますね。

LuLuLun

出典：LuLuLun

メインビジュアルの右側にカルーセルを用いて商品の紹介を行い、おすすめの商品を表示して、商品を知ってもらうきっかけを作っていますね。
左側には、「3,500円以上購入で送料無料」や「キャンペーン」と告知し、ECで購入するメリットをアピールしています。

ECサイトのデザインで参考にしたいギャラリーサイト5選

「自分でECサイトの参考デザインを探したい！」「さまざまなECサイトを見てデザインを学びたい・トレンドが知りたい」という方は、ギャラリーサイトを利用してみましょう。おすすめのギャラリーサイトを5つご紹介します。

MUUUUU.ORG

出典：MUUUUU.ORG
MUUUUU.ORGは、縦に長くオーソドックスなデザインかつ、クオリティが高いサイトを集めているギャラリーサイトです。細かくカテゴリが分かれており「業界・デザイン・サイトの種類・色味」からデザインを探すことが可能。ECサイトに関しては330サイト以上の事例が掲載されています。

トップページのデザインに悩んでいたり、制作会社にイメージを伝えるための参考サイトを探していたりする場合におすすめです。

SANKOU!

出典：SANKOU!
SANKOU!は、デザインの参考になる国内のWebサイト・ECサイト・LP・コンテンツページを集めたギャラリーサイトです。ECサイトの事例は100以上掲載。

色味や業種だけでなく「1カラム」や「シズル感」などデザイナー視点でのカテゴリが揃っています。サイト全体のデザインを考えたい時にもおすすめのサイトです。

I/O 3000

出典：I/O 3000
I/O 3000は、Webデザインに関わる人のために作られたギャラリーサイトです。国内外問わず、Web制作の参考になるデザインが掲載されています。

更新頻度が高く、毎月20件ほど事例が追加されているため、最新のトレンドを知りたい方におすすめ。「カテゴリ・タグ・色・年・フリーワード」から検索することができます。事例をランダムに表示する「シャッフル機能」は同サイトならではの機能です。

さらに、ページ左下のボタンをオンにすると、自動で次々事例が表示されていきます。まだ具体的なイメージが固まってない方にも良いかもしれませんね。

1guu（イチグウ）

出典：1guu

1guuは国内から海外まで、クオリティの高いWebデザインを集めたWebデザイナーのためのギャラリーサイトです。特徴は、サムネイルでアニメーションが確認できること。自分に必要な情報があるのか、サイトを開かなくてもすぐわかるので、手間が省けます。

左側の地球のようなアイコンをクリックすると、国名が表示され、世界のサイトのデザインを見ることも可能。アニメーションにもこだわったECサイトを作りたい方、国外からインスピレーションを得たい方におすすめです。

S5-Style

出典：S5 Style
S5 Styleは国内外問わず、約8000種類のWebデザインがまとめられたギャラリーサイトです。200種類以上のECサイトの事例が掲載されています。

カテゴリは「サービス・クリエイティブ・色・テクニック・サイトの種類・日付」から絞りこむことが可能。AND検索とOR検索が可能なため、目的のデザインが素早く見つけられるでしょう。

ユーザービリティを重視したデザインを採用して、売れるECサイトを作りましょう！

本記事では、ECサイト制作において参考になるデザインの事例とギャラリーサイトを紹介してきました。デザインというと「独自性あふれるビジュアル」というイメージをする方も多いのではないでしょうか。本来の意味としては「情報を整理する」「見た目を整える」という2つの役割があります。

見た目にこだわったところで、ユーザーが「使いにくい」と感じてしまえば、離脱率は高まり、コンバージョンにも繋がりにくくなってしまうでしょう。売れるECサイトにするためには、ユーザーにとって見やすく使いやすいサイトを作る必要があります。

「どんなECサイトにしたいのか？」ゴールを明確にしたうえで、この記事をECサイトのデザインを決める際に活用してみてください。