ウェブサイトカルーセルスライダー：なぜ、どのように、いつ（13例を含む）

のは、ウェブサイトカルーセル、別名スライダー、別名スライドショー、別名ギャラリーについて話しましょう。

インターネット全体には独自のバリエーションがあるようですが、総称して、移動するコンテンツを持つデザイン要素を意味し、多くの場合、下部に三つの小さな点が表示されます。

カルーセルに関しては、あなたはチーム∞またはチーム∞のいずれかにいます。 最初のチームは、通常、クライアント、第二のチームは、webデザイナーが含まれています。

ここYcodeでは、私たちはスイスです。 私たちは、カルーセルは、あなたのwebデザインをより魅力的にするセンターピースになることができますが、彼らはまた、あなたのウェブサイトの使いや

この記事では、カルーセルのベストプラクティス(および回避する方法)を見ていきます。 カルーセルは多くの機会に使用することができるので、私たちはあなたにうまくやっスライダーのさまざまな例を紹介します。

カルーセルデザインのベストプラクティス（またはほとんど、何をしないでください）

それらは多くのウェブサイトで使用されていますが、カルーセルデザインは簡単にマークを見逃す可能性があります。 なぜいくつかの良い理由があります。 どのカルーセルのベストプラクティスを使用すべきかを説明する前に、避けるべきことから始めましょう。

👎いけないこと：カルーセルの間違いを避けるために

1. コンテンツ：カルーセルがあまりにも少ない時間であまりにも多くをしたいとき、それはウェブサイトの訪問者の目が回転する可能性があります。 テキストはきちんと読むことができない情報は逃され、訪問者は興味を失う。

2. 設計:スライダーが不完全に設計され、あなたのウェブサイトの設計に混じらなければ、広告として誤解されて得ることができる。 その結果、人々はコンテンツを過ぎて右にスクロールします。 これは、バナー失明、人々が意識的または無意識のうちに—広告に似たコンテンツを無視するwebデザイン現象と呼ばれています。

3. SEO：SEOの観点からは、ページ上の最初のものとしてスライダーを使用する場合は、複数のH1ヘッダーを避けてください。 各webページには、HTMLコードに1つのH1が必要です。 別のスライドのために複数のH1Sを使用すれば、Googleはどのキーワードがそのwebページのための最も重要な物であるか混同するかもしれない。 また、ウェブサイトの構造は明確ではないかもしれません。 両方の要因は、あなたのランキングに悪影響を与える可能性があります。

4. モバイル：モバイルデバイスの場合は、手動スライダーのために行くのが最善です。 ジェスチャーがサポートされていること（例えば、モバイルユーザーが次のスライドを表示するためにスワイプ）、矢印が明確に表示され、押すのに十分な大き スライドにテキストが含まれている場合は、モバイル画面で読みやすいかどうかを確認します。

5. 回転: 私たちの限られた注意スパンで、これらの日、それは数秒よりも長いため、ユーザーの関心を維持するのは難しいです。 私たちはすべての場所を持っているので、スライダーの量を低く保ち（五未満）、訪問者にスライダーコントロールを示すことによってカルーセルを制御する機 これは、人々が座って、次のスライドを待つ必要はありませんことを確認します。

👍 Do’s:カルーセルのベストプラクティス

1. 情報は数秒以内に消化することができるように、各スライドをシンプルにしてください。

2. あなたのウェブサイトの残りの部分とデザインのブレンドを確認します。

3. 人々は明確な矢印で回転を制御してみましょう。

4. スライド（5-10秒）の間に十分な時間を持っている、またはさらに良い、完全に自動再生を捨てます。

5. より少しは多くである(スライドの設計そして量の両方)。

6. カルーセルを挿入する前に、質問してください：これは静的コンテンツよりも多くの価値を追加しますか？

第二の考えを持っていますか？

疑問がある場合は、両方のオプションをテストし、どのオプションが高いコンバージョン率を生成するかを確認します。 多くの場合、クライアントは、彼らが何よりもまず促進したいメッセージに明確ではないので、スライドショーを求めます。 なぜすべてを表示しないのですか？ 彼らは考えます。

その場合、作業はスライダーを使用せずに、より焦点を当てたメッセージを作成することにあります。 または、重要なUSP(独特なセールスポイント)を選び、ページの下の他の物を更に述べなさい。 人々はあなたのスライドをめくるよりもスクロールする可能性が高くなります。

あなたはそれが地獄だと判断した場合は、意図的に各スライドを選択します。 すべての新しいブログや製品を追加するだけでなく、ユーザーから最もインタラクティブ性を生み出す最も重要なコンテンツを慎重に選択してくださ

13ウェブサイトのカルーセルの例

今、あなたは何をしないかを知っているので、それを釘付けにしているカルーセルの例を見てみましょう。 ここでは、ホームページから製品や画像のスライドショーに、13のウェブサイトのカルーセルの例

ホームページカルーセル

キャンプはすでに十分に分割されていると思ったら、あなたはホームページスライダーに会っていません。 いくつかのルートは、（多くの場合、ブログのテンプレートで見られる）上部に直接配置するため、他の人は、それらが折り目の上の任意の場所に実装されて見

人々がホームページのカルーセルを直接上に置くことを避ける理由は、このスペースは読者にスクロールして詳細を学ぶように誘惑する明確なメッセージのために予約されるべきであると信じているからです。 カルーセルでは、一つの強いメッセージを伝えるのは難しいです。 さらに、人々がすべてのスライドを見たり、右の過去をスクロールしているかどうかはわかりません。

しかし、すぐに注目の物語や製品を表示するためにホームページのカルーセルで訪問者に挨拶を愛する人もたくさんあります。

例1：ニコール-ギボンズ-スタジオ

ニコール-ギボンズ-スタジオのホームページ-カルーセルは本当にうまく動作します！ それはいくつかの理由で良いことです。

• それは良い機能を持っており、価値を追加します。 デザイナーのニコールは、人々が彼女のウェブサイトに入ると、すぐに別のインテリアの例を直接示しています

• スライドは手動であるので、ユーザーは、彼らが通って反転したいかどうか、どのようなペースで決定します

• 画像から離れて取るためのテキストの重複はありません

例2:Urban Skin RX

Urban Skin RXのこのコンパクトなカルーセルは、優れたアクセシビリティを持っています。

これは、ウェブサイトの残りの部分と同じスタイルで魅力的に設計された二つのスライドを組み込んでいます。 回転時間は、テキストを読むのに十分な長さに設定されています。 大きなフォントとアクションへの明確な呼び出し（CTA）ボタンは、スライドが何であるかを消化することが容易になります。

注：ブランドのホームページをスクロールすると、すでにUrban Skin RXに精通している人に合わせたものであることがわかります。 焦点は、誰かが最初の場所でそれらを必要とする理由を説明することなく、製品を展示することです。 製品スライダーは、ページに合う理由です-彼らはより多くを発見するために訪問者を動機とする一つの明確なメッセージを表示するためにヘッダースペー

例3:Mejuri

ジュエリーショップMejuriのこのカルーセルについて私たちが愛しているのは、圧倒されることなく、二つの異なるものを一度に示しているということです。

カルーセル全体には三つのスライドが含まれており、それぞれに二つのオプションがあります。 進行線は微妙に下部に表示されていますが、これを見つけるにはワシの目が必要な場合があります。 これは最適化のポイントになる可能性があります。

例4:Fresh Brothers Pizza

スライダーはページの全幅にまたがる必要があると誰が言いますか？ また、グリッドにセクションを分割し、新鮮な兄弟ピザのホームページ上のように、小さなスライダーを使用することができます。

確かに、このwebデザインのレイアウトでは、物事は少し多くを得ることができます。 スライダーは訪問者の情報を示していますが、目は左側の大きな画像に描かれています。 誰もがスライダー情報が表示されます。 しかし、情報はCOVID対策と注文時に人々がとにかく見る新しいピザに関するものなので、これは大したことではありません。

製品カルーセル

製品カルーセルは、視覚的に製品についての詳細を学ぶに人々を魅了するためにそこにあり、よく、うまくいけば、それを購入！

これらのタイプのカルーセルは、通常、eコマースサイトのホームページまたは製品ページのいずれかのスポットに配置されます。 スライダは、異なる製品または異なる方法（その機能を示す）で一つの製品を表示することができます。

例5:Keys Soulcare

このKeys Soulcare製品ページでは、harmony ritualパッケージに含まれている各アイテムを表示するためにカルーセルが使用されます。 それは訪問者がスクロールすることなく、すべての関連情報を見ることができますようにスライダーは、完全にウェブサイ＜6511＞＜6948＞＜3234＞＜1991＞＜1505＞＜1344＞例6: KeepCup

KeepCupからこの製品カルーセルは、電子商取引サイトの中央に配置され、あなたが簡単にブランドの最も人気のあるto-goカップを閲覧することができます。 名前、価格、購入ボタンと矢印がどのように配置されているかに注意してください—超洗練された（グラフィックデザイナーへの小道具）。

例7:ホームシック

キャンドル会社ホームシックは、彼らのキャンドルだけでなく、ブランドからのレビューや引用符を紹介するために、彼らの電子商取引のウェブサイト上で様々なスライダー要素を使用しています。

ホームページの途中で、このスライドショーがあります—彼らのベストセラーのキャンドルの移動ギャラリー（私たちは香りのコンセプトが大好き！). 画像スライダーの上にマウスを置くと、それが停止し、わずかに異なる画像が表示されます（たとえば、ろうそくが点灯していることを示しています）。

例8:Milk Bar

Milk Barの製品ページは、写真がおいしそうだからだけでなく、スクロールする喜びです。 以下のチアリーダーのwebページを取ります,左側にスライダー要素と右側のすべての製品の詳細と,訪問者は一見したところ、すべてを参照してください.

ただし、下にスクロールすると、インタラクティブなバナーや、配送、食材、類似のお菓子、カスタマーレビューを表示する別のカルーセルなどの製品情報が表示されます。

コンテンツカルーセル

コンテンツカルーセルをウェブサイトに追加する場合は、最も価値のあるコンテンツ 最初のスライドは常に最も露出を取得し、追加のスライドごとにインプレッションが減少します。

例9: Art of Tea

Art of Teaの下のウェブサイトでは、一つのフルスクリーンスライダーで多くの異なるものが表示されます。

オープニングスライダーは、彼らのアフィリエイトプログラムに参加するためのCTAです。 次は新しい茶缶、袋、束およびシェーカーを示すスライドである。 また、毎月のティークラブへの参加にも専用のスライドが用意されています。

このカルーセルwebデザインがうまくいくのは、画像が各スライドが何であるかを示し、サポートテキストが最小限に抑えられるということです。 改善するための一つのことは、ボタンです。 輪郭のみを持つボタンを選択すると、画像上ではっきりと見るのが難しくなります。

例10: Canvaデザインスクール

Canvaのデザインスクールのページは、他のウェブサイトの要素よりもカルーセルが効果的なインスタンスの良い例です。

ランディングページには多くのコンテンツが表示されるため、カルーセルはさまざまなコースをよりコンパクトに表示するのに役立ちます。 たとえば、以下のチュートリアルセクションでは、スライドショーに比べてはるかに多くのスペースを占有します。

ブログカルーセル

多くの場合、ブログ用のWordPressテンプレートには、最新の記事を自動的に表示するインタラクティブなスライダー要素

これは素晴らしい機能ですが、どの記事が表示されているかに注意してください。 いくつかは、彼らが最も最近公開しているので、クリックに値するが、あなたのホームページのスライダーで最初に表示されない場合があります。 この場合、訪問者をクリックするように誘惑すると思われるブログを手動で選択する方が良いでしょう。

例11: COCOCOZY

インテリアデザインブロガー Colette Sheltonは、彼女のブログの選択を示すスライダーで彼女のブログを開きます。 マウスオーバーすると、ブログのタイトルが表示されます。 モバイルでは、写真はその下のタイトルで表示されます。

画像カルーセル

画像カルーセルは、多くの場合、それはアーティストの作品の作品を表示するために使用されているポー あなたの画像が高品質であることを確認し、追加のテキストを必要とせずに、自分自身のために話します。

例12: Mix Design Collective

Mix Design Collectiveはデザイン会社です。 彼らの仕事は非常に視覚的であるため、ナビゲーションと直接下の写真スライダーでウェブサイトを開くことは理にかなっています。

スライドショーには、キッチンからバスルーム、リビングルームまでの画像が混在しているため、訪問者は集団のデザインスタイルとサービスを知ることがで

比較カルーセル

スライダーは、ユーザーがさまざまなコンテンツや製品をすばやくスキャンする必要がある場合に適しています。 これは人々が項目を比較しているとき丁度事実である。 いくつかの例を見てみましょう。

例13:Amazon

間違いなく最も知られている比較例はAmazonから来ています。 各製品ページでは、あなたが同様に買うことができるすべての関連製品とカルーセルを見つけることができます。 この場合、スライダーは静的画像よりも効果的であり、ユーザーは多くの類似製品をすばやく閲覧することができます。

ウェブサイトのカルーセルにあなたのテイクは何ですか？

あなたが読んだように、webスライダーはyes pleaseまたはplease noにすることができます。 それはすべて、要素があなたのwebデザインでどのように使用され、スライダーがナビゲートする方法をユーザーフレンドリーに依存します。 各スライドが明確な目的を果たしていることを確認し、全体的なユーザーエクスペリエンスが素晴ら あなたが自信を持ってスライダーがコンテンツを表示するための最良の要素であると言うことができれば、あなたは行ってもいいです。