Advertisement

ecoomercetheme_top

 

海外デザインブログWPLift.comで、デザイン、機能性ともに充実している、人気の高い有料WordPressテーマに採用した、デザイントレンドをまとめたエントリー「WordPress Theme Trends – eCommerce / Shop Themes」が公開されていたのでご紹介します。

 

 

今回は、あらゆる商品の販売を行うeコマース、ショッピングサイトにおける、デザイントレンドをまとめており、今後のWebサイト制作に役立ててみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

1. 余白スペースを使った、ミニマルスタイル

 

他の多くのWebサイト同様、ショッピングサイトのデザイントレンドにおいても、余白スペースをたっぷり採用した、シンプルなミニマルなスタイルが多く見受けられます。販売している商品にフォーカスを当てる、eコマースサイトとの相性もばっちりです。

 

 

Enfold

ショッピングサイトだけでなく、豊富なカスタマイズ性が人気のWordPressテーマ。

trends-ecommerce-1

[button_square color=”red” url=”http://themeforest.net/item/enfold-responsive-multipurpose-theme/full_screen_preview/4519990″] デモページ [/button_square]  [button_square color=”purple” url=”http://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

The Retailer

trends-ecommerce-2

[button_square color=”red” url=”http://themeforest.net/item/the-retailer-retina-responsive-woocommerce-theme/full_screen_preview/4287447″] デモページ [/button_square]  [button_square color=”purple” url=”http://themeforest.net/item/the-retailer-retina-responsive-woocommerce-theme/4287447?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

Mazine WordPress Theme

滑らかなアニメーションを加え、よりエレガントな印象を与えてくれるWordPressテーマ。

trends-ecommerce-3

[button_square color=”red” url=”http://themeforest.net/item/mazine-wordpress-theme-a-wp-ecommerce-theme/full_screen_preview/198602″] デモページ [/button_square]  [button_square color=”purple” url=”http://themeforest.net/item/mazine-wordpress-theme-a-wp-ecommerce-theme/198602?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

2. あらゆる端末に対応する、レスポンシブグリッド

 

スマートフォン利用者数の増加により、モバイル端末から購入するユーザーも同時に増えています。せっかくサイトを訪れてくれたユーザーが、購入手続きに進めないなど不具合がないよう、デスクトップはもちろん、iPadなどのタブレット端末やスマートフォンにも対応しているか確認しましょう

 

 

Gather

ウィンドウ幅に応じてグリッド数が変化する、オーソドックスなグリッドレイアウト。セール商品などを分かりやすくする工夫なども素敵。

trends-ecommerce6

[button_square color=”red” url=”http://themetrust.com/demos/gather/”] デモページ [/button_square]  [button_square color=”purple” url=”http://themetrust.com/themes/gather”] ダウンロードページ [/button_square]

 

 

 

Shopo

人気商品や各アイテムごとの関連商品の表示など、ユーザーのニーズに応えた、シンプル系レスポンシブレイアウト。

trends-ecommerce7

[button_square color=”red” url=”http://themify.me/demo/themes/shopo/”] デモページ [/button_square]  [button_square color=”purple” url=”http://themify.me/themes/shopo”] ダウンロードページ [/button_square]

 

 

 

Adamas

商品カテゴリーから選択したり、価格帯を設定するフィルタ機能など、操作性を充実させたテーマ素材。

trends-ecommerce8

[button_square color=”red” url=”http://themeforest.net/item/adamas-responsive-ecommerce-wordpress-theme/full_screen_preview/4948388″] デモページ [/button_square]  [button_square color=”purple” url=”http://themeforest.net/item/adamas-responsive-ecommerce-wordpress-theme/4948388/?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

3. 進化したフルサイズイメージスライダー

 

画面いっぱいに表示されるイメージ画像は、ユーザーにインパクトを与え、各商品アイテムページへ誘導します。また個別ページにおいては、商品をさまざまな角度で見たり、カラーバリエーションなどを表示するときにも、イメージスライダーは利用さています。

 

 

さらにスマートフォンやタブレット端末のユーザー数が増えたことで、指をスワイプ操作できる、タッチスクリーン対応という点も重要になってきています。

 

 

Blanco

フルサイズで表示されるイメージ写真と一緒に、テキストやボタンなどをアニメーション付きで追加できる、ハイブリッド型イメージスライダーを実装しています。

trends-ecommerce9

[button_square color=”red” url=”http://themeforest.net/item/blanco-responsive-wordpress-ecommerce-theme/full_screen_preview/2755246″] デモページ [/button_square]  [button_square color=”purple” url=”http://themeforest.net/item/blanco-responsive-wordpress-ecommerce-theme/2755246/?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

ShopTheme

できるだけシンプルに、そして手軽にショッピングサイトを始めたいという方に向けたテーマ素材。CSSによるスタイリングも行いやすいワイヤーフレーム的な使い方もできそうです。

trends-ecommerce10

[button_square color=”red” url=”http://organicthemes.com/demo/shop/”] デモページ [/button_square]  [button_square color=”purple” url=”http://www.organicthemes.com/theme/shop-theme/”] ダウンロードページ [/button_square]

 

 

 

Eureka

イメージスライダーと一緒に、商品名や詳細情報が表示されるイメージカルーセル。こちらは管理画面からドラッグ&ドロップで設置可能。

trends-ecommerce11

[button_square color=”red” url=”http://demo.colorlabsproject.com/?theme=eureka-woocommerce”] デモページ [/button_square]  [button_square color=”purple” url=”http://colorlabsproject.com/themes/eureka/”] ダウンロードページ [/button_square]

 

 

 

Chamomile Theme

エメラルドグリーンにピンクのキュート系カラーリングWordPressテーマ。管理画面の使いやすさを重視した、ユーザーフレンドリー設定。

trends-ecommerce12

[button_square color=”red” url=”http://demo.bluchic.com/themes/chamomile/”] デモページ [/button_square]  [button_square color=”purple” url=”http://www.bluchic.com/shop/chamomile-theme”] ダウンロードページ [/button_square]

 

 

 

4. ページ遷移なしで確認できる、ショッピングカートシステム

 

購入した商品を、常にショッピングサイトのナビゲーションメニューやサイドバーなどに表示しておく、AJAXを使ったカートシステムが普及しています。これでユーザーは、わざわざページを移動せずに、一目で確認できるようになります。

 

 

MiniShop

はじめに必要な機能だけを実装している、カスタマイズ性もばっちりなWordPressテーマ。右上に表示される、カートアイコン付きリボンに、カーソルを合わせると、詳細が表示されます。

trends-ecommerce13

[button_square color=”red” url=”http://themeforest.net”] デモページ [/button_square]  [button_square color=”purple” url=”http://themify.me/themes/minshop”] ダウンロードページ [/button_square]

 

 

 

OneCart

購入商品確認ボタンをクリックすると、ポップアップで詳細を表示してくれる、AJAXカートシステムを導入したWordPressテーマ。

trends-ecommerce14

[button_square color=”red” url=”http://themeforest.net/item/onecart-ajax-responsive-ecommerce-wordpress-theme/full_screen_preview/3167538″] デモページ [/button_square]  [button_square color=”purple” url=”http://themeforest.net/item/onecart-ajax-responsive-ecommerce-wordpress-theme/3167538/?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

ShopDock

ドラッグ&ドロップで商品をバスケットに入れていく、ユニークな購入方法を採用したショッピングサイト用テーマ。

trends-ecommerce15

[button_square color=”red” url=”http://themify.me/demo/#theme=shopdock”] デモページ [/button_square]  [button_square color=”purple” url=”http://themify.me/themes/shopdock”] ダウンロードページ [/button_square]

 

 

 

Bazar

シンプルなグリッド状に並べられた商品に、スムーズなアニメーションを追加して、よりビジュアルにこだわったショッピングWordPressテーマ。

trends-ecommerce16

[button_square color=”red” url=”http://themeforest.net/item/bazar-shop-multipurpose-ecommerce-theme/full_screen_preview/3895788″] デモページ [/button_square]  [button_square color=”purple” url=”http://themeforest.net/item/bazar-shop-multipurpose-ecommerce-theme/3895788/?ref=showhey0705″] ダウンロードページ [/button_square]

 

 

 

人気WordPressテーマに見る、ポートフォリオサイトトレンド2013

制作実績や自己紹介ページに便利な、ポートフォリオサイト編となります。

theme_trend_top

 

 

参照元リンク : WordPress Theme Trends – eCommerce / Shop Themes – WPLift.com