eコマースサイトのデザインの最も重要な機能

公開: 2018-01-19

オンラインで販売する計画があります。 何を販売するかを決定し、WooCommerceを使用することを決定しました。次に、ストアを設計する必要があります。

この段階は難しい場合があります。 その完璧なテーマを見つけたり、あなたの目標を理解しているデザイナーを選んだりすることでさえ、あなたが持っていない時間を浪費する可能性があります。 また、これまでオンラインで販売したことがない場合は、本当に重要なことをしっかりと把握していなくても、「見栄えのする」ものを探しているように感じるかもしれません。

重要なものとそうでないものを理解するために、店舗のデザインの最も重要な機能が実際に何であるかを知る必要があります。 これは、「見栄えのする」デザインとパフォーマンスの良いデザインを区別するのに役立ちます。

WooCommerceストアのデザインの最も重要な機能を見て、次の重要な段階に取り掛かることができます。

わかりやすいナビゲーション

ナビゲーションは、店舗のデザインの最も重要な部分である可能性があります。 優れたナビゲーションは、新しい買い物客が手間をかけずに探しているものを見つけるのに役立ちます。 一方で、ナビゲーションが悪いと彼らはイライラし、あなたの店を放棄することさえあるかもしれません。

問題は、実際に何が優れたナビゲーションを構成するかということです。 主なアイデアは、ランディングページからチェックアウトまでの明確なパスを提示することです。 訪問者が最初にどのページにアクセスしたとしても、「どうすればよいか」と尋ねることなく、サイト内をすばやく見つけることができるはずです。

多くの場合、これは、メインナビゲーションで最も重要なカテゴリまたはページのみを表示し、重要度の低い目的地をドロップダウンまたはサイトフッターに委任することを構成します。

HUMANには、非常に基本的なカテゴリを備えたシンプルなトップオブサイトナビゲーションがあり、ドロップダウンメニューはそれをもう少し細かく分類します。

ドロップダウンメニューにいくつかの狭いオプションを提供するシンプルなナビゲーション。
ドロップダウンメニューにいくつかの狭いオプションを提供するシンプルなナビゲーション。

はるかに大きな店であるKohl'sも同様のことを行っています。最も重要なカテゴリが上部にあり、ドロップダウンメニューには、正しい（そして多くの場合より具体的な）場所へのナビゲーションをガイドするのに役立つ明確にラベル付けされた部門があります。

コールズは、ドロップダウンメニューにラベルを追加することにより、大量のサブカテゴリを管理しています。
コールズは、ドロップダウンメニューにラベルを追加することにより、大量のサブカテゴリを管理しています。

かなりの数の製品があり、ナビゲーションが難しくなっている場合は、組み込みのLayered NavigationウィジェットをWooCommerceストアに追加できます。Kohlのように、これにより、顧客は検索結果を色、サイズ、またはその他の基準でフィルタリングできます。特定。

この階層化されたナビゲーションを追加すると、ストアの閲覧プロセスがより簡単に、より速くなります。
この階層化されたナビゲーションを追加すると、ストアの閲覧プロセスがより簡単に、より速くなります。

明確なラベルで幅広いオプションと狭いオプションの両方を提示することで、顧客はあなたの店を好きなように閲覧することができます。 そして、彼らがあなたのナビゲーションを完全に避けたいのであれば、あなたの検索はクリックするだけです。

すべてのデバイスと画面サイズとの互換性

モバイルのみの買い物客が増え続けているため、顧客が使用するさまざまなデバイスや画面サイズを意識することが重要です。

レスポンシブデザインは、サイトの外観を自動的に拡大または縮小して、表示される画面サイズに一致させるWebデザインの方法です。 Googleがサイトのモバイルフレンドリーをランキング要素と見なし、準拠するための最良の方法として応答性を推奨していることもあり、ここ数年ですぐにWebサイトの標準になりました。

レスポンシブデザインとは、サイズに関係なく、店舗のデザインを美しく見せ、すべてのデバイスでうまく機能させることを意味します。

より多くの買い物客がモバイルデバイスをショッピングに使用することを選択するので、あなたの店のデザインはそれが見られる画面と完全に一致することができるはずです。 そうでない場合は、顧客がカートを放棄していることに気付くでしょう（彼らがそこまで行ったとしても）。

良いニュース：私たちのサイトで利用可能なすべてのWooCommerceテーマは、箱から出してすぐに応答します（ストアフロントとその多くの子テーマを含む）。 また、応答性が標準になっているため、WordPress.orgにあるWooCommerce互換のテーマのほぼすべてがモバイルフレンドリーでもあります。

他の場所でテーマを探している場合は、説明またはタグの中で「レスポンシブ」という単語に注意してください。 使用するテーマを決定したら、それが本当にモバイルフレンドリーであることを確認するために、すべての自分のデバイスでそれをテストします。

開発者と協力してレスポンシブデザインをゼロから作成することを計画している場合は、モバイルフレンドリーを優先するためのこのGoogleガイドをご覧ください。一緒にブレインストーミングを行う際に覚えておくべき具体的なヒントがいくつかあります。

すべてのページのクイック読み込み時間

おもしろい事実：オンライン買い物客の約40％は、読み込みに3秒以上かかるとウェブサイトを放棄します。 あなたの店がどんなに美しくても、それが遅いと、あなたのバウンス率は上がり、あなたのコンバージョン率は劇的に下がります。

顧客の大部分を失うことを避けるために、すべての資産を迅速にロードする設計を実装することを目指す必要があります。 そうしないと、バウンス率と終了率が高くなります。

サイトの速度が遅いほど、訪問者を追い払う可能性が高くなります。
サイトの速度が遅いほど、訪問者を追い払う可能性が高くなります。

心配しないでください。訪問者全員が焦って足を踏み鳴らさなくても、美しい店のデザインを実現することは完全に可能です。 圧縮ツール、コンテンツ配信ネットワーク、およびプラットフォーム固有の微調整とプラグインの間で、最大の画像やグラフィック要素でさえすぐに読み込まれるようにすることができます。

デザインがサイトに詰まらないようにするためのヒントをいくつか紹介します。

  • 大きな画像ファイルを圧縮します。 Kraken.ioやTinyPNGなどの無料サービスを使用すると、わずか数秒でこれを実行できます。
  • ホスティングが適切であることを確認してください。状況が少し遅いと思われる場合は、プランのアップグレードについてホストとチャットすることを検討してください。
  • ローカルサーバーから訪問者にストアのキャッシュバージョンを配信するCloudFlareのようなコンテンツ配信ネットワークを調べてください。

鮮明で美しい画像を活用する

最近、店頭にある画面いっぱいの大きな画像すべてに気づきましたか？ たとえば、Momentのホームページは、iPhoneで動作しているレンズのこの美しい写真によって支配されています。

モーメントの訪問者が最初に目にするのは、この大きな写真です。
モーメントの訪問者が最初に目にするのは、この大きな写真です。

これらの大きくて人目を引く画像は、美しいだけではありません。訪問者の注意を、重要な行動への呼びかけに即座に向けます。

モーメントのホームページをもう一度見てください。 美しい背景写真はすぐに製品が何であるかを示していますが、オーバーレイされたテキストには明確な行動の呼びかけがあります。基本的に、「このレンズを入手するにはここをクリックしてください」。

このような大きな画像は、行動を促すフレーズと組み合わせて、商品を説明したり、顧客に特定の何かを見てもらうという素晴らしい仕事をします。 広いエリアでは、商品を詳細に強調できます。適切な写真を使用すると、最初の1秒から商品を販売できます。

もちろん、サイトのデザインは、ホームページ上の1つまたは2つの大きな画像だけに焦点を当てるべきではありません。 また、買い物客を特定のページに誘導する場合でも、単に自分の能力をアピールする場合でも、デザイン全体で非常にクリアな商品画像を使用する必要があります。

ニューバランスのウェブサイトにある2つの製品主導のセクション。
ニューバランスのウェブサイトにある2つの製品主導のセクション。

上記はニューバランスストアからの素晴らしい例です。 これらの画像は、既存の製品写真を背景にオーバーレイするだけで作成されました—バム、インスタントホームページプロモーション。 それらは魅力的で、やる気を起こさせ、ニューバランスが販売しているものを正確にブランドに新しいものに示します。

商品画像の使用を個々のページに限定する必要がある理由はありません。 デザイン全体でそれらを利用し始めると、注文確認画面に至るまで、まったく新しい顧客を誘導するためのより良いショットが得られます。

業界と顧客の一致

最後に、これまでに提供したヒントは、好みの品質の店舗デザインを見つけるのに役立つことを目的としていますが、必ずしもあなたのことではありません。 また、顧客がその設計に何を期待しているかを考慮する必要があります。

あなたはあなたの店の業界とあなたの顧客のニーズに合っていると思うデザインだけを選ぶべきです。 うまく機能しているが会社に合わないテーマを選ぶと、長期的にはあなたを傷つけることさえあるかもしれません。

ハイエンドのファッションアクセサリーを販売している場合、これを反映するために選択するデザインはエレガントでスタイリッシュでなければなりません。 ただし、アスレチックスニーカーを販売している場合は、同じデザインが店舗で見当違いに見える可能性があります。また、他のブランドとの結びつきが気に入らないため、迅速な再設計につながる可能性があります。

さまざまな業界に適したホームページのデザインに関するこの投稿を見て、適切な一致を見つけることについて話すときの意味についてもう少し学びましょう。 あなたがそれを見るとき、あなたはしばしばそれを知るでしょう。

WooCommerceストアのテーマを選択する方法

これらのヒントを念頭に置いて、ニーズを満たし、顧客に適したデザインを見つける準備を整えておく必要があります。 ただし、その完璧なWooCommerceテーマをどこから探し始めるかはまだわからない場合があります。

ガイダンスが必要な場合は、次のような提案があります。

  • ここから始める。 ストアフロントのテーマは無料で、WooCommerceと100％互換性があります。 特定の業界や店舗の種類に合わせて調整された多数の子テーマもあります。
  • 検索を行います。 無料またはリーズナブルな価格のテーマを提供するサイトはたくさんあります—それらを見つけるために少し見回す必要があるかもしれません。
  • WooExpertに連絡してください。 私たちのWooExpertsの多くは、テーマをカスタマイズしたり、最初からテーマを設計したりすることができます。 そして、WooCommerceの知識で、彼らは素晴らしいパートナーになります！
  • 最新のトレンドとベストプラクティスを読んでください。 デザインUXが重要である理由に関するこのガイドはよく読んでください。
  • 最後に、あなたが本当に野心的であるなら…あなた自身のテーマをデザインしてみてください。 私たちの教育パートナーは、WooCommerceを教えるだけでなく、その多くは、HTML、CSS、およびWebサイトのデザインコースを持っており、お気に入りのデザインをカスタマイズまたは作成するのに役立ちます。

このガイドが、本当に重要な設計機能をよりよく理解するのに役立つことを願っています。 何か質問がある？ ご存知のとおり、喜んでお手伝いさせていただきます。