WooCommerceウェブサイトデザインのための21のヒント

WooCommerceウェブサイトのデザインレイアウトは、顧客獲得に大きく影響します。サイト上での顧客の購買行動は多岐にわたるため、その点を考慮する必要があります。訪問者にあなたのブランドを信頼し、購入すべき理由を納得してもらうには、ほんのわずかな時間しかありません。この記事では、WooCommerceウェブサイトデザインに関する21のヒントを通して、顧客を惹きつけるための貴重な数秒を最大限に活用する方法をご紹介します。

WooCommerceウェブサイトデザインのヒント

1) WooCommerceカスタム検索ボックス

検索バーはいつでも利用できるようにしておきましょう。訪問者は、検索場所を探してスクロールすることなく、探しているものを簡単に見つけられる方法を求めています。あらゆる場所に検索ツールが目立つように表示されましょう。

• Don't forget about mobile:現在、サイトの検索サイトの大部分がモバイル対応であることに気づいていない人が多いようです。モバイルフレンドリーにしましょう。
• Filter the results:検索を賢く使いましょう。例えばユーザーが「木材」と入力すると、「木製フロア」のタグが付いた商品がすべて表示されます。
• Tools:WooCommerce の Product Finder 拡張機能の使用をお勧めします。https://woocommerce.com/products/product-finder/
• Be prominent:検索バーを目立たせましょう。レイアウトやボタンに合わせてアクセントカラーを変えるなど、デザインに工夫を凝らしましょう。

To Enhance your WooCommerce Search, try this plugin: https://docs.woocommerce.com/document/woocommerce-product-search/

2) 整理されたナビゲーション

Online shoppers come to your site looking for speed and convenience of shopping. Make navigation as simple but detailed as possible to get them where they need to be. Always place your navigation bars where visitors expect to see them. The standard positions are vertically down the left of the page and horizontally at the top. It’s even better if you can make the horizontal navigation bar remain at the top of the screen as you scroll down the page. You will also need to ensure that your navigation menus will work with any screen size or device. With users shopping from phones, tablets, desktops and a number of other devices, you want the site to react the same and provide the same easy navigation across all platforms.

ナビゲーションのベストプラクティス

• Categorization is key:ナビゲーションを見直す際は、提供する商品やサービスが分かりやすいカテゴリー分けになっているか確認しましょう。新しいユーザーには意味が分からないような特殊な名称が使われていることがあります。これは、わずか数秒で反応を得て購入プロセスを進めてもらうため、ユーザーをイライラさせてしまう可能性があります。明確で階層的な構造を持つことが重要です。
• Make things sticky:メインナビゲーションは固定表示にするのが良いでしょう。スクロールしてもメインリンクは常に表示されます。商品数が多い場合は、固定ナビゲーション付きのメガナビゲーションをお試しください。
• It ok to have several types of navigation:水平方向のメインナビゲーションは、ほとんどの場合うまく機能します。ただし、情報量によっては水平方向が適さない場合もあります。サイトの領域に応じて、複数の種類のナビゲーションを用意できることに留意してください。例えば、ロゴ上部のトップバーにはカスタマーサービスやショッピング関連のリンクやアイコンを配置し、メインナビゲーションには主要なサービスやサイト内のセクションを配置し、フッターにはこれらすべてを配置するといった具合です。

ナビゲーションの間違い:

• Non-standard style navigation:デザインはクールに感じるかもしれませんが、経験豊富なユーザーにとってはそうではありません。彼らは製品を購入して理解を深めるために来ているので、ユーザーインターフェースに同じパターンが見られることを好みます。デザインの良し悪しに感銘を受けるためではありません。迷っていて、何か違うものを試したい場合は、異なるスタイルでテストし、評価してみましょう。
• Using generic links:サイトで商品を販売しているのに、メインナビゲーションに「商品」しか表示されていない場合は、ユーザーが商品を見つける必要があるため、少し物足りないかもしれません。ロゴの上に小さなトップナビゲーションを配置し、その下に商品カテゴリーまたは商品自体を表示するメインナビゲーションを配置してみてください。
• Don't miss the breadcrumb:ユーザビリティと SEO のための最もシンプルで効果的なツールの 1 つは、サイトを除外することです。

3) 関連商品、アップセル、クロスセル

訪問者の体験をパーソナライズすることで、ニーズや要望に配慮されているという印象を訪問者に与えることができます。商品ページに関連商品を表示したり、閲覧した商品に関連する他のユーザーの購入履歴を表示したりすることも可能です。

Up-sells: This could be a large quantity, better version, or the same product bundled with another which is displayed in the buying experience to push a higher sale.

Related Products: You can have products appear in the product info page, but they are products that are meant to be purchased in addition to the one that the customer is viewing.

Cross-sell: You can have items appear on the product page and in the shopping cart to help encourage an impulse to buy.

Check out built in features of WooCommerce: https://docs.woocommerce.com/document/woocommerce-widgets/

Here is a great extension for Upselling and Cross Selling: https://docs.woocommerce.com/document/related-products-up-sells-and-cross-sells/

YITHのような特定の機能を実現するために有料プラグインを使用することもできます。

https://yithemes.com/themes/plugins/yith-woocommerce-recently-viewed-products/

4) ショッピングカートを永続化する

ショッピングカートの保存:

訪問者がショッピングをしている時に長期的なCookieを設定することで、後から戻ってきて中断したところから再開できるようになります。人生には中断がつきものです。前回の訪問時にカートに何を入れていたか忘れてしまったというだけの理由で、せっかくの売上を失うのは避けたいものです。訪問者はすぐにチェックアウトに進んで注文を完了することも、便利な検索バーや他の興味のある商品の写真を見ながら、もう少し滞在してショッピングを続けることもできます。

Checkout: https://codecanyon.net/item/save-share-cart-for-woocommerce/5568059

WooCommerce クッキー

WooCommerce は3種類のCookieを作成し、既にこの機能を組み込んでいます。最初の2つのCookieにはカート全体に関する情報が含まれており、カートデータの変更をWooCommerceが認識するのに役立ちます。最後のCookie（wp_woocommerce_session_）には、顧客ごとに固有のコードが含まれており、データベース内で各顧客のカートデータがどこにあるかを把握するのに役立ちます。

• woocommerce_cart_hash
• woocommerce_items_in_cart
• wp_woocommerce_session_

Wish Lists:

メニューにウィッシュリストを追加することもご検討ください。ウィッシュリストは、サイト上の在庫から商品を削除することなく、購入者のために商品を保存します。ショッピングカートを長期のウィッシュリストとして使用すると、在庫に問題が生じる可能性があります。代替手段を提示することで、この問題をある程度軽減できます。

Try the WooCommerce Wishlists Plugin: https://woocommerce.com/products/woocommerce-wishlists/

5) カスタマーサービスのリンクと電話番号を目立つように表示する

すべてのオンラインショッピング利用者は、あなたのサイトで安全で安心な体験をしたいと考えています。あなたのサイトは信頼できるかもしれませんが、初めてあなたのサイトを訪れる買い物客は、本当に信頼できるかどうかの証拠を求めています。新規顧客に自己紹介する最良の方法は、連絡先情報を透明化することです。電話番号とカスタマーサービスへのリンクをサイトの目立つ場所に表示することで、顧客は安心し、クレジットカード情報が安全に保管されていることを確信できます。

6) 著名なパートナーやアソシエイツの名前を挙げる

In establishing your credibility nothing is off limits. If you have partners or associates that your guests will recognize, drop those names. If you can show that you are associated with well established and successful companies they are more likely to feel safe shopping on your site. 私たちは認定された WooCommerce エキスパートであり、それを誇りに思っています。

7) 回転式カルーセルは時代遅れ

Carousels have their positive points but they are not SEO friendly. They do help you to show more products and promotions, but they slow your site down and users find them annoying. They move too fast for any real chance to process what is in them. If you must use a carousel, incorporate one that will stop the autorotation when the cursor hovers over it. This gives the customer the opportunity to see the item without actually going to the page with a full description. The best practice is just using static images. Your visitors aren’t interested in bells and whistles. They want great products at the best possible price.

8) セールセクションを目立たせる

Make them feel hungry. The majority of online shoppers will not buy a product until it goes on sale. Prominently display a link to your discounted products so these shoppers will have a direct route to the items they seek. Use a different color for the link or use lettering that draws attention. Bargain shoppers are a great audience to target because they like to tell others what they found at an amazing price. That is free advertising after the sale.

メインナビゲーションの専用エリア:

Site Wide Sale:

On Product Lists:

9) 送料無料を誇示する

Announcing your free shipping in a prominent place on the homepage will help to cut way down on the number of abandoned shopping carts you encounter.Many shoppers will fill their cart only to leave it when they see the insanely high shipping charges. Some will look for your shipping policy before ordering, so make sure you have it in a good position on your page. You will want to offer other shipping options for those customers wanting faster delivery as well.

Retail study: 9 out of 10 consumers say free shipping No. 1 incentive to shop online.

10) セールページで節約オプションをまとめる

ホームページから、お得な情報に特化したエリアへのリンクを設けましょう。送料無料、クーポンコード、ポイント、割引、その他無料特典などを掲載しています。このエリアは、サイト内で最も多くのアクセスを集めるエリアになるかもしれません。バーゲンハンターは、それだけでもブックマークを付けてくれるでしょう。

Add a dedicated sales page: Popular ideas could be the deal of the month/week/day or just creating a page for a one-time holiday special.

11) モーダルボックスを使う

Avoid clutter on your WooCommerce homepage by using a modal window. Showcase a message of importance without making it a part of the homepage. This frees up space on your storefront for more products. These boxes are only helpful if used properly. They have a bad reputation for containing advertising that was nothing more than annoying. Ensure that you do not overuse them and make the button to close the box readily available. Make sure you have a cookie in place so that a user will not see more than one box per visit and they will not see a box at every visit.

12) ライブチャットサポート

Live chat is a great way to immediately address questions, concerns or general doubt that a customer may be having on your WooCommerce store. Very few shoppers will actually call a customer support line and many will leave in frustration. Live chat software is a worthwhile investment to stop buyers doubt in its tracks. Customers get the feeling of a personal touch. Live chat can provide efficient customer service and prevent lost sales.

13) 過度な信頼バッジは危険信号

信頼バッジは良いものですが、過度に使用すると、従業員に誤った安心感を与えてしまう可能性があります。使用するバッジの数を制限し、広く認知されていることを確認してください。過剰使用は、バッジが醸し出すはずの安心感を損なう可能性があります。

14) WooCommerceの商品ページとカテゴリーページをテストする

A/Bテストは、商品を最も効果的に表示する方法を見つけるための優れた方法です。顧客に2つの異なる表示方法を提示し、時間の経過とともに、どちらがサイトにとって最適であるかの統計データが得られます。A/Bテストを試行することで、訪問者の体験と収益を大幅に向上させることができます。

A couple tools we use with our clients: ビジュアルウェブオプティマイザー and ホットジャー。

See some case studies here: https://vwo.com/blog/10-kickass-ab-testing-case-studies/

15) 希少性で訪問者を引きつける

Displaying messages that convey urgency is one way to hook visitors into a sale. If you show them that there are only limited quantities of an item left or make them feel as though their size may disappear soon, they are more likely to go ahead and purchase the item before it’s too late. The trick is to make these messages subtle so they feel like you are doing them a favor when you are ultimately urging them to buy now rather than later or not at all.

Here is a free plugin to try out: https://wordpress.org/plugins/woo-custom-stock-status/

16) スクロールしてもOK

Clients sometimes mention about wanting items above the fold. We respond by asking "Which fold are you referring too?". With so many different size monitors scrolling has become irrelevant. Mobile has also completely changed this game by dominating the statistics making desktops a very small percentage when trying to target a fold. Tony Haile from チャートビート has posted numerous amounts of data to back this up. Do not sell yourself short, give your visitors more on the homepage to support SEO, usability, and merchandising of your products

Check out more statistics here at Time.com: http://time.com/12933/what-you-think-you-know-about-the-web-is-wrong/

17) シェアを奨励する

買い物客が商品を友人や家族と共有する機会を十分に提供しましょう。共有ボタンを用意し、直接共有をお願いするようにしましょう。これにより、より多くの人の目に留まるだけでなく、ブランドイメージとサイトへのリンクも強化されます。共有の機会を提供することで、サイトのトラフィックとコンバージョン率が大幅に向上します。

18) WooCommerceホームページにヒートマップをインストールする

Don't take our word for things. Analyze your homepage before making any change to understand where your click saturation, visitor scrolling, and interest is per channel (Bing, Google, Facebook, Etc.). Keep in mind your best-converting channel can be entirely different than your least. You want to make sure you understand first what is going on with your site prior to doing any changes.

19) よくある質問

中には、FAQを熱心に探しているユーザーがいます。5歳児に説明するかのように、リンクを貼って質問に答えましょう。配送、保証、返品に関する情報も記載しましょう。また、定期的に寄せられる質問と回答を追加して、FAQを最新の状態に保ちましょう。こうすることで、同じ質問に何度も答える手間も省けます。

A great example is at Weber: https://consumer-care.weber.com/hc/en-us/categories/360001489471-FAQs

20) 報道発表をする

If you’ve been mentioned in the news or have press releases available, include them on the site. Display the logos of the media outlets to be readily recognized by visitors. Most will never read the press release but having it there lends credibility that will foster trust in your site. If you do have media attention, link the logos to any articles about your company.

Check out the FLYTE homepage: https://flyte.se/

21) ユーザーからのフィードバックを取り入れる

ユーザーからのフィードバックは、顧客との信頼関係を築く上で役立つツールとなります。製品レビュー、ちょっとした引用、感謝の言葉、製品を使用しているお客様の写真などは、売上を劇的に向上させる可能性があります。これらの情報は、製品の説明欄やサイト全体のサイドバーに掲載できます。

ビジネスに関するレビューを表示するには:

We like using rich plugins for business listings - https://richplugins.com

To get reviews:

We Recommend trying out: WooCommerce製品レビュープロ

Using these WooCommerce Web Design tips for your homepage will go a long way toward improving the user experience of your customers while solidifying your credibility and landing more sales. Placing all the vital information where it belongs and displaying the right products can dramatically increase your conversions. Social media shares and good product reviews will improve SEO and drive traffic. Bright Vessel is a certified WooCommerceエキスパート which can help you build, promote, and improve your storefront. 今すぐお問い合わせください。