スライダーのベストプラクティス：知っておくべきこと

公開: 2018-04-09

それで、あなたはあなたのウェブサイトにスライダーまたはカルーセルを置きたいですか？その前に、考慮すべき多くの要因があります。置き忘れた、不適切に構成されたスライダーは、単に無視されるだけではありません。それは実際にSEOに損害を与え、訪問者を苛立たせる可能性があります。

それは確かにそれらが悪いことを意味するのではなく、他のWordPress機能やプラグインと同様に、それを適切に構成する必要があります。 WordPress Webサイトにスライダーを実装するときに従うべきベストプラクティスのいくつかを次に示します。

スライダーを視覚的に心地よいものにする

全身麻酔に加えて、考慮すべき他の要因があります。スライダーの全体的な関連性、ページ上の位置、さらには画像のシーケンスでさえ、すべて説明すべき重要な視覚的側面です。

単純にする

特に自動再生をオンにする場合は、スライドがシンプルで効果的であり、要点を理解することが非常に重要です。これはテキストだけに当てはまるわけではありません。アートや写真のギャラリーとしてスライダーを使用している場合を除き、すっきりとした整頓された画像を使用してください。

広告のようにデザインしないでください

邪魔な広告のおかげで、多くの人が「バナーブラインドネス」を発症します。置き忘れた、不適切に設計されたスライダーは、この現象の影響を受ける可能性があります。広告主が従うすべてのデザインのヒント、特に最も迷惑な広告で採用されている戦術は避けてください。

つまり、点滅するライト、派手なフラットカラー、Impactや同様のフォント、その他の気を散らすテクニックを使用しないでください。あなたのカルーセルが製品を販売または宣伝している場合でも、それはウェブサイトに溶け込み、自然に見えるはずです。あなたは人々にあなたのスライダーを見てもらいたいかもしれませんが、これらの攻撃的な戦術は反対を引き起こします。

スライダーを便利で関連性のあるものにする

配置するすべてのスライダーには、明確な目的が必要です。それはあなたの写真を紹介していますか？ユーザーをサイトの特定の部分に誘導しますか？あなたのサイトについて説明してください。製品を宣伝してみませんか？ユーザーを引き付けますか？

そして、カルーセルを適切な場所に配置します。スライダーの配置は、スライダーが気付かれるか忘れられるかを決める最も重要な要素の1つです。ページのコンテンツに埋め込まれたり、ランダムに配置されたりしていないことを確認してください。サイドバー、ページの上部近く、ブログ投稿の下など、戦略的で目立つ場所に配置する必要があります。フッターでさえ、スライダーを配置するのに適した場所です。

スライドシーケンスを慎重に選択してください

訪問者がすべてのスライドを見るために立ち往生すると思い込まないでください。シーケンスは慎重に選択してください。最初の数枚のスライドは、ユーザーの関心を引き付けて興味を持ってもらうように努める必要がありますが、それが失敗した場合は、少なくとも自分の主張を理解するようにしてください。

ただし、それは他のスライドの効果を低下させる言い訳にはなりません。誰かがたまたまクリックしたスライドに関係なく、会社について話したり、すばらしい写真を披露したりするなど、すべての目的を果たす必要があります。

スライダーを使用可能にする

スライダーの基本的なルール：スライダーは使いやすく、訪問者に迷惑をかけないようにする必要があります。モバイルを使用する大勢のオーディエンス向けに最適化する方法から、スライドの回転時間を慎重に調整する方法まで、カルーセルをよりアクセスしやすくする方法はたくさんあります。

自動再生をオフにすることを検討してください

一部のユーザーにとって、動きは気が散ったり迷惑になったりする可能性があります。ブログ投稿、またはサイト全体でユーザーをフォローするサイドバーでは、常に自動再生をオフにします。彼らが読み込もうとしている間に訪問者の気を散らすことは決して良い考えではありません。

ただし、場合によっては、カルーセルをすべての訪問者が注意を払うものにしたい場合や、複数のスライドを表示することが重要な場合があります。自動再生をオンにするかオフにするかを決定するときは、スライダーの場所、内容、および意図を考慮してください。

ローテーション間の時間を増やす

デザインに自動再生が必要な場合、特にテキストが含まれている場合は、スライドの移行が速すぎないようにしてください。準備が整う前にスライダーが進むとイライラします。遅い読書ペースに最適化します。 10秒以内にできるだけ多くのスライドを表示するカルーセルよりも、低速ですが適切に設計されたカルーセルの方が適しています。

ナビゲーションオプションの最適化

ナビゲーション矢印をクリックしてその時点でスライドショーを進め、スライドをスキップすることを余儀なくされることほど迷惑なことはありません。ホバーまたはナビゲーションで一時停止することは、多くの人が期待する機能です。 Soliloquyスライダーにはこの機能があり、作成するカルーセルの大部分で有効にする必要があります。自動再生を維持することを選択した場合、これは必要です。

一方、ナビゲーションバブルや一時停止ボタンを使わずに自分で進むカルーセルは、1つのスライドを見つけるためだけにサイクル全体が終了するのを待たなければならないため、多くのユーザーを苛立たせる可能性があります。スライダーにもナビゲーションコントロールを追加してください。

特にモバイルや高齢者の視聴者が多い場合は、特大のナビゲーションコントロールも検討する必要があります。

最後に、画像が多いカルーセルでは、ユーザーが必要な特定のスライドを簡単に参照できるように、サムネイルを含めることを検討してください。

SEOの損傷を避ける

誤って構成されたスライダーは、検索エンジンに対応していないスライダーです。幸いなことに、あなたのウェブサイトとそのカルーセルをSEOフレンドリーにする多くの手段は、それらをよりユーザーフレンドリーにします！これらの慣行は、従うことが最も重要です。

応答性ファースト

スライダープラグインを使用している場合は、ほとんどの場合、その応答性について心配する必要はありません。ただし、この部分は重要です。テキストと画像がすべてのデバイスで見栄えがすることを確認するためにテストします。ボタンのサイズを微調整し、ぼやけた画像を置き換えます。美しいモバイルスライダーのためにあなたがする必要があることは何でも。

スワイプも有効になっていることを確認してください。モバイルユーザーは、スライダーなどの要素に対してスワイプジェスチャが機能することを期待します。そうでない場合は、煩わしさを引き起こす可能性があります。

アクセシビリティのための設計

アクセシビリティを念頭に置いてWebサイト全体を設計する必要がありますが、スライダーもこの方法で作成する必要があります。障害者の移動を助けるだけでなく、SEOを改善する傾向があります。

優れたアクセシビリティ設計の例としては、キーボードコントロールの有効化、特定の条件下での自動スクロールや停止の回避、テキストに十分なコントラストがあることの確認などがあります。

素晴らしいスライダーヒーロー画像を作成する

革新的な戦術の1つは、「ヒーローイメージ」、つまりWebサイトの内容を説明するランディングページのバナーを、アニメーション化されたスライダーに置き換えることです。この手法には、長所と短所があります。カルーセルは、標準のヒーローイメージと同じくらい効果的ですが、慎重に実装する必要があります。

ホームページにスライダーを配置する場合は、新しい訪問者に1つの質問があることを忘れないでください。このWebサイトとは何ですか。すべてのスライドは、それ自体で、コンテキストなしで、この質問に答える必要があります。

H1見出しを避ける

検索エンジンにとって、H1はページのタイトルとして機能します。そのため、スライダー内など、複数の見出しがある場合、検索エンジンを混乱させ、SEOを低下させる可能性があります。安全のため、カルーセルでの使用は避けてください。

スライダーのみのナビゲーションリンクは避けてください

スライダーを介してのみアクセスできるWebサイトのページはありますか？これを避けるようにしてください。ユーザーと検索エンジンの両方にとって混乱を招きます。リンクスライダーをナビゲーションツールとして使用できますが、別のオプションがあることを確認してください。

効果的なスライダーの作成

ウェブサイトにカルーセルを配置することを決定した後に従うことができるベストプラクティスの1つは、Soliloquyなどのプラグインの使用を検討することです。特に、新しいWeb開発者の場合、自分でスライダーを作成しようとすると、SEOの惨事に終わる可能性があります。プラグインは操作がはるかに簡単で、WordPressと検索エンジン用に特別に最適化されています。

Webサイトに役立つ、便利で魅力的なスライダーを配置するためのヒントがわかったところで、どのように使用する予定ですか。 このガイドが、今後のWebデザインの取り組みに役立つことを願っています。 それまでの間、TwitterやFacebookでご連絡ください。

保存保存