本日はShopifyで構築されたお洒落なECサイトを、デザイナー目線から30サイト厳選してご紹介します。
ShopifyでECサイトを制作しようとしている方も、そうでない方も、ぜひECサイトのデザインの参考にご覧ください！
1.FORNE / 知育雑貨ブランド
（株式会社GO RIDE事例紹介）
「つくる あそぶ しる を くらしのなかに」 をコンセプトにしたプロダクトブランド。シンプルな構成のミニマルデザインに、あたたかみのある優しい色使い、フォントの強弱をつけ読みやすいレイアウトに。ページ背景と商品写真背景を同色にすることでこだわりの詰まった全ての商品を引き立たせています。
2.KIT /ヨガ・アクティブウェア
写真を大きく使い、商品はシンプルな配置で、ユーザーが迷わないようなUIデザインになっています。バナーのデザインを商品に寄せることによって、商品が浮かないように、統一されたデザインになっています◎
3. Lafaurie Paris / メンズブティック
パララックスの動きが気持ちいい。柔らかなカラーパレットをモノトーンのタイポで引き締めるコントラストが、ファッション誌のような洗練された雰囲気を生み出しています。ホバーの動きやページ遷移のアニメーションなど、細部までこだわり抜かれたUI設計も参考にしたいですね。
4. IJJI / ユニセックスアパレル
敬遠されがちな原色のカラーパレットを、あえて主役に持ってくることで逆に商品を引き立たせる超上級デザイン。ロゴのポップで愛らしい存在感が ”攻めすぎない” バランスを保ち、親しみやすさを生み出しています。
5. hardgraft / ファッション小物
トップページはシンプルな構成ですが、商品ページに進むとびっくり！寄りの写真を様々なアングルからふんだんに見せることで細かなディテールを伝え、まるでショップに訪れて直接触れているかのようなリアルな感覚を与えています。
6. VENROY / ユニセックスアパレル
リラックスした大人カジュアルなデザイン。カラーパレットやフォントのチョイスは定番ながら、動画と写真を効果的に用いることで、上品でファッショナブルなデザインに仕上げています。
7. ULLAC Oy / ユニセックスアパレル ストリートカジュアル
ポップな配色と遊び心溢れるフォントづかいで、ブランドの世界観をうまく表現しています。ルックブックは見やすいですね。全体的にグリッドレイアウトでまとめることで、統一感のあるサイトに！
LIFE STYLE
8. Our Place / キッチン小物
家族の食卓、はみ出したサラダ、大胆に盛り付けられた目玉焼き、食べかけのパスタ・・まるで映画のワンシーンを切り取ったような「日常」を散りばめることで、ノスタルジックかつスタイリッシュなデザインに仕上げています。柔らかいカラーパレットが心地よいですね。
9. KANAGU STORE /暮らしの飾り金具
スクロールすると、どんどん写真が切り替わる仕組み。ヘッダーの柄が他ではあまり見ない、個性的な柄で、ワンポイントになっています。
10. Recess / 炭酸飲料 / アメリカ
TOPからスクロールしていくと、商品が飛び出てきたり、背景の色が変わるなど、遊び心溢れるサイトです。商品にカーソルを当てると、商品名に合ったイラストが、サイドに出現します！様々な仕掛けがあり、見応えのあるサイトです。
11. MN Uniform / エプロン
メニューの見せ方がオシャレ！全体的に余白とコンテンツのバランスが絶妙で、アニメーションの使い方がとても上品ですね。白とネイビーという定番の配色も、写真と動画の色彩をうまく活かすことで、ノーブルな仕上がりになっています。
12. カキモリ / 文房具
おしゃれな商品の画像を画面めいいっぱいに表示させて、シンプルでオシャレな店舗の雰囲気を再現させています。
文房具のアナログさを伝えるフォントやアイコンなど、細部までのこだわりが伝わるデザインです。
13. KOREDAKE / 完全栄養プロテイン
ブランドカラーを所々に使用し、全体的にまとまりを感じるサイトです。背景色に使用されている色は、薄ピンクを基調とし、プロダクト写真が、一番目立つような色使い。メインビジュアルから、Shopページに飛ぶことができる動線で、ユーザーにわかりやすいようなサイト設計です。
14. TOSSWARE / ガラス製品
深めのグリーンと、あちらこちらに効果的に効かせたオレンジが、クリアな美しいガラスの存在感にベストマッチ。イメージ写真の背景にオーロラフィルムやサテンのカーテンを用いるなど、主役をより魅力的に見せる工夫が随所に散りばめられています。
15. Flower by EDIE PARKER / アート・小物
配色、フォント設計、写真コンテンツからロゴまで、全てがユニーク！ピンクやグリーンといったキッチュなカラーをメインに配し、グリッドレイアウトをうまく利用しておもちゃ箱のようなワクワク感を演出しています。
16. MASTER&DYNAMIC / ヘッドフォン＆スピーカー
デジタルなフォントデザインが見事にマッチしたこちらのサイトは、ヘッドフォン＆スピーカーの専門店。商品ページのプロダクト説明も、丁寧なコンテンツが読みやすいレイアウトで設計されていて、高級感がありますね。
https://www.masterdynamic.com/
17. Pretend Store / ライフスタイル小物
明るい色使いがクリーンな印象。インパクトの強い赤を程よく散らすことで爽やかに見せていますね。セレクトショップならではの様々なプロダクトも、撮影フェーズからトンマナを徹底することで上手に統一感を持たせています。ホバーで商品写真を切り替えるアイデアもオシャレ！
https://pretendstore.co/collections/home
18. KANADEMONO / 家具
静かで抜け感のあるデザインと、空間を意識した写真がとても美しいです。
シンプルながら完璧に計算されたデザインが、ブランド哲学を見事に表現しています。
19. MYRO / デオドラント
蛍光色に近いポップなグリーンを黒のフォントで引き締めつつ、パッケージの色合いもうまく活かしています。アイコンイラストが可愛らしいですね。遊び心のあるキャッチコピーにあえてセリフ書体を用いるなど、小粋なデザインセンスが光ります。
BEAUTY
20. Monastery / コスメ
コントラストが美しい、洗練されたデザイン。ブラーエフェクトの使い方がかなりハイセンスですね。ところどころ大胆な色ベタを用いながらも、控えめなサイジングのフォント設計で絶妙なバランスを生み出しています。
https://www.monasterymade.com/
21. Plenaire / スキンケア
ふわりとした浮遊感のあるアニメーションと、抜けるような青空を背景にした写真がとてもマッチしています。操作感が気持ち良いですね。パララックス効果の特性を生かしたデザインと、緻密なコンテンツ設計が美しい！
FOOD
22. HAUS / お酒
タイポづかいがインパクト抜群。ロゴも含めたトータルアートワークがしっかりしていて、かなりハイセンスなサイトです。お酒のアレンジレシピなどコンテンツも充実していて、読んでいて全く飽きない！考え尽くされた導線設計にも感服です。
23. USUAL / ワイン
潔いモノトーンの配色と太めのラインが目を引く、ワイン専門店のサイト。フォントの強弱をつけることで、読みやすいレイアウトに仕上がっています。商品のページの写真もインパクト大！
24. Raaka / チョコレート
暖色系の写真で統一することで、チョコレートようなこっくりとした甘さと深みのあるデザインに。ボリューミーな読み物コンテンツがたくさん詰め込まれていて、誠実さと情熱が伝わるサイトです。
https://www.raakachocolate.com/
25. 49th Parallel Coffee / コーヒー
優しい色味のミントグリーンを効果的に使うことで、親しみやすくフレンドリーなサイトになっています。男性的なかっちりとしたデザインですが、程よいゆるさの手書き風フォントとイラストアイコンが良いバランスですね。
26. PIPCORN / ポップコーン
飛び出す絵本のような、可愛らしいデザイン！童心に帰るアイコニックなイラストをふんだんに散りばめつつ、ループアニメーションをうまく使ってオーガニックな風合いを生み出していますね。
27. PRESS LONDON / コールドプレスジュース
クリーンでフレッシュなカラーパレットが可愛いサイト。大きめのフォントサイジングで、年代問わず読みやすいデザインに。ブログコンテンツも充実していて、SEOによく配慮された設計です。
OTHERS
28. Lick / ペンキ
カラーセレクションにスクエアタイルを使ったデザインは、インスタグラムを思わせます。写真を2枚ずつ用意し、ペンキの乾く前と後、クロスのデザインと自然な光に照らされた様子をホバーすることで見れるようになっているところに注目です。
29. TIMETABLE / レコードショップ
ランダムに動くスクロールや画面中央に浮かぶ ”仕掛け” 、ホバーのアニメーションなど、全てに「カルチャー」を感じる驚きのデザイン！サイケデリックな背景もオシャレですね。どんな作りになっているのか想像もできません・・・
30. CLARE / ペンキ
カラフルでソフトな配色にイエローが効いています。とろりとしたテクスチャーをそのまま見せる、コスメのような色見本がオシャレですね。商品ページの写真もイメージが湧きやすくて◎
いかがでしたか？
見ているだけで楽しい気持ちになる素敵なECサイト３０選でした！
ぜひデザインの参考にしてみてくださいね。
ShopifyでおしゃれなECサイトにリニューアルをしたいなどございましたら
こちらまでご連絡ください。
GORIDEへのお問い合せはこちら
電話： 050-3188-6793
（株式会社GO RIDEについて）
 |
執筆者
株式会社GO RIDE 取締役 CCO (Chief Creative Officer )：大西 巴（Onishi Tomoe) 国内外多数のECサイトデザイン、UI/UX設計を担当。EC運用マネージャーの経験から、マーチャント、エンドユーザー目線のデザインを得意とする。 |
|---|
横浜と米国ロサンゼルスを拠点にしているShopify Plus Partnerです。
Shopifyを用いたECサイト制作、コーポレートサイト制作から、広告運用、LINEやメールといったCRM連携等のデジタルマーケティング施策まで一気通貫でサービスを提供。バイリンガルスタッフが多く在籍しており、日系企業の北米進出支援や海外企業の日本進出支援も得意としています 。
自社メディアGO RIDE NEWSでは制作からデジタルマーケティングに関する情報を発信しております 。
