海外デザインブログWPLift.comで、デザイン、機能性ともに充実している、人気の高い有料WordPressテーマに採用した、デザイントレンドをまとめたエントリー「WordPress Theme Trends – eCommerce / Shop Themes」が公開されていたのでご紹介します。
今回は、あらゆる商品の販売を行うeコマース、ショッピングサイトにおける、デザイントレンドをまとめており、今後のWebサイト制作に役立ててみてはいかがでしょう。
詳細は以下から。
1. 余白スペースを使った、ミニマルスタイル
他の多くのWebサイト同様、ショッピングサイトのデザイントレンドにおいても、余白スペースをたっぷり採用した、シンプルなミニマルなスタイルが多く見受けられます。販売している商品にフォーカスを当てる、eコマースサイトとの相性もばっちりです。
ショッピングサイトだけでなく、豊富なカスタマイズ性が人気のWordPressテーマ。
[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]
[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]
滑らかなアニメーションを加え、よりエレガントな印象を与えてくれるWordPressテーマ。
[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などのタブレット端末やスマートフォンにも対応しているか確認しましょう。
ウィンドウ幅に応じてグリッド数が変化する、オーソドックスなグリッドレイアウト。セール商品などを分かりやすくする工夫なども素敵。
[button_square color=”red” url=”http://themetrust.com/demos/gather/”] デモページ [/button_square] [button_square color=”purple” url=”http://themetrust.com/themes/gather”] ダウンロードページ [/button_square]
人気商品や各アイテムごとの関連商品の表示など、ユーザーのニーズに応えた、シンプル系レスポンシブレイアウト。
[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]
商品カテゴリーから選択したり、価格帯を設定するフィルタ機能など、操作性を充実させたテーマ素材。
[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. 進化したフルサイズイメージスライダー
画面いっぱいに表示されるイメージ画像は、ユーザーにインパクトを与え、各商品アイテムページへ誘導します。また個別ページにおいては、商品をさまざまな角度で見たり、カラーバリエーションなどを表示するときにも、イメージスライダーは利用さています。
さらにスマートフォンやタブレット端末のユーザー数が増えたことで、指をスワイプ操作できる、タッチスクリーン対応という点も重要になってきています。
フルサイズで表示されるイメージ写真と一緒に、テキストやボタンなどをアニメーション付きで追加できる、ハイブリッド型イメージスライダーを実装しています。
[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]
できるだけシンプルに、そして手軽にショッピングサイトを始めたいという方に向けたテーマ素材。CSSによるスタイリングも行いやすいワイヤーフレーム的な使い方もできそうです。
[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]
イメージスライダーと一緒に、商品名や詳細情報が表示されるイメージカルーセル。こちらは管理画面からドラッグ&ドロップで設置可能。
[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]
エメラルドグリーンにピンクのキュート系カラーリングWordPressテーマ。管理画面の使いやすさを重視した、ユーザーフレンドリー設定。
[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を使ったカートシステムが普及しています。これでユーザーは、わざわざページを移動せずに、一目で確認できるようになります。
はじめに必要な機能だけを実装している、カスタマイズ性もばっちりなWordPressテーマ。右上に表示される、カートアイコン付きリボンに、カーソルを合わせると、詳細が表示されます。
[button_square color=”red” url=”http://themeforest.net”] デモページ [/button_square] [button_square color=”purple” url=”http://themify.me/themes/minshop”] ダウンロードページ [/button_square]
購入商品確認ボタンをクリックすると、ポップアップで詳細を表示してくれる、AJAXカートシステムを導入したWordPressテーマ。
[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]
ドラッグ&ドロップで商品をバスケットに入れていく、ユニークな購入方法を採用したショッピングサイト用テーマ。
[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]
シンプルなグリッド状に並べられた商品に、スムーズなアニメーションを追加して、よりビジュアルにこだわったショッピングWordPressテーマ。
[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
制作実績や自己紹介ページに便利な、ポートフォリオサイト編となります。
参照元リンク : WordPress Theme Trends – eCommerce / Shop Themes – WPLift.com
