creatersnest

参考になりそうなフラットデザインのECサイト20個集めました。


トレンドと呼ばれ始めてから数年たち、今ではすっかり主流となったフラットデザイン。
そんなフラットデザインを採用したECサイトを20個ご紹介します。

メインビジュアルのカルーセルが特徴のサイト

パトリック 公式オンラインショップ

http://patrick-onlineshop.jp/
鮮やかなカラーが目を引く、おしゃれなサイトです。

 

PATINA ONLINE SHOP

http://patina.shop-pro.jp/
白をベースにシンプルにまとめたサイトです。

 

メガネ通販のZoff[ゾフ]オンラインストア

http://www.zoff.co.jp/
カラフルなバナーが引き立つデザインのサイトです。

 

グラミチ オンラインストア

http://www.gramicci.jp/grm-shop/
背景の境界線やランキングアイコンなど細かなセンスの光るサイトです。

 

Tattly

http://tattly.com/
モノトーンのシンプルなデザインで写真が見やすいサイトです。

 

CONVERSE ONLINE SHOP

http://shop.converse.co.jp/shop/

カルーセル横にバナーをバランスよく配置したサイトです。

 

Oh My Glasses TOKYO

http://www.ohmyglasses.jp/

文字情報が多めですがバランスよくまとまっているサイトです。

 

サクサク動くアニメーションが気持ちいいサイト

Worth & Worth by Orlando Palacios

http://www.hatshop.com/
スクロールアニメーションや背景動画など最近の技術を取り入れているサイトです。

 

Cocones

http://www.cocones.com/
商品にマウスオーバーすると回転して裏側が見える面白い仕組みです。

 

ステーブルズ

http://thestables.jp/
屋根の形をしたパネル&コンテンツと、スクロール時の動きが個性的なサイトです。

 

PEARLY GATES ONLINE SHOP

https://store.tsigs.com/pearlygates/
カルーセルの切り替わり方やマウスオーバー時の動きに特徴があるサイトです。

 

TROPOPAUSE

http://tropopause.jp/
ふわっと出てくるホバーアニメーションがショップイメージに合っているサイトです。

 

シンプルなパネルレイアウトのサイト

NIXON(ニクソン) オフィシャルサイト

http://www.nixon.com/jp/en/
黒を基調としたシンプルでクールな印象のサイトです。

 

unico オンラインショップ

http://www.unico-fan.co.jp/
見出しのフォントや手描き風アイコンなどに温かみを感じるサイトです。

 

haco. [ハコ]

http://www.felissimo.co.jp/haco/
モノトーンが基調ですが女性向けらしいかわいらしさのあるサイトです。

 

CINRA.STORE

http://store.cinra.net/
ポップな色使いが印象的なサイトです。

 

MARGARET HOWELL

http://www.margarethowell.jp/

多めに取られた余白が美しい、すっきりとしたサイトです。

 

和テイストを取り入れたサイト

小豆島商店

http://shodoshima-s.jp/

大き目のパネルレイアウトで写真が引き立つサイトです。

 

おらほの屋

http://orahono.com/

和色をポイントカラーに使った素朴な雰囲気のサイトです。

 

HIGASHIYAオンラインショップ

http://higashiya-shop.com/

フラットデザインに明朝体という珍しい組み合わせのサイトです。

 

さいごに

いかがでしたか?
物足りなくなりがちなフラットデザインですが、ひと工夫加えることでおしゃれなサイトにすることができます。
様々なサイトを参考にして、デザインの引き出しを増やしてみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


habutako

未経験で入社したWEB制作会社で、マークアップエンジニアとして2年間の修行を積む。現在フリーランス。 ウェブデザイナーと動物ボランティアという2足のわらじを履いて、パソコンとアニマルシェルターと愛猫の間を行き来する毎日。

Next Article【入門】HTML5を一から学びたい人向けのおすすめ本10選