Webデザインのイメージカルーセル - 利点とベストプラクティス

不足はありません カルーセル特集スライドショー ウェブ上で。実際、この傾向は何もしていません 過去5 - 10年で成長する これまで以上に多くのブラウザのサポートがあります。しかし、イメージカルーセルは本当に努力する価値がありますか？どのようなメリットがありますか、またレイアウトでどのように生産的に使用する必要がありますか?

いくつか共有したい 一般的な傾向、実例、およびアイデア 画像カルーセルに興味があるWebデザイナーのためのものです。これらの動的スライダーは激しく議論されています、しかし私は彼らが正しい文脈で作られたときそれらが価値を付加すると思います.

電子商取引のための製品カルーセル

電子商取引の世界は、ホームページや製品ページで回転するカルーセルでいっぱいです。目標は 明確な情報密度を維持する 写真とテキストで ユニークでありながら貴重な物語を語る 製品販売を手助けする.

がある 2つの主要プレースメント Eコマース商品スライダーの場合：

1. お店のホームページに
2. 商品ページ

両者は違った働きをしますが 同じ目標を果たす - 視覚的に商品を販売する.

例1：Au Lit Fine Linens - ホームページ

Au Lit Fine Linensのホームページを見てください。 フルスクリーン自動回転カルーセルを使用 羽毛布団、枕、ベッドカバーなど、さまざまな商品を披露する.

画像 全幅をとる ホームページの 折り目のかなり上に現れる. 実際、このスライダは、最初にページに着地するときに注意を引くための最初のものです。各スライドは、サイト上の異なるページにつながります。 買い物体験を通して顧客を導く.

このスライダーは、最初にページに着地するときには少々威圧的ですが、 ボタンリンク そして オーバーレイテキスト それだけでダイビングや買い物をしたいと思っている訪問者にも非常に心強いことができます.

事例2：エデンの電話ケース - 商品ページ

あなたはEden電話ケース製品ページでより具体的な例を見ることができます。それを使用します 自動回転スライダー 製品の画像を披露する.

私はこれらが少しであると思います “過度に” 電子商取引の世界では。私がなりたい製品を見たとき 画像の切り替え制御.

より良い選択は画像のギャラリーをすることです 訪問者に与えられたコントロール. たとえば、人間によるデザインページでは、 各写真のサムネイル これははるかに心強いものであり、ユーザーにより多くのコントロールを与えます。.

Webポートフォリオカルーセル

これらのスライドのため、オンラインWebサイトのポートフォリオは少し異なります 常に別のページにクリックスルーするとは限らない. ケーススタディやプロジェクトに関する記事を書く人もいますが、ポートフォリオWebサイトの多くのカルーセルは、 視覚的な仕事を披露する.

例1：ビブーン - ホームページ

Bibounという名前で活動しているフランス人アーティストは カルーセルスライダー ホームページ上 アートワークのスニペットをフィーチャー. 個々のスライドはポートフォリオの内部ページにつながります。 プロジェクト全体をカバー 複数の写真付き.

これはおそらく スライダーを動かす最善の方法 ポートフォリオWebサイトで。それらの特定の作品が展示される理由がない限り、単に作品のランダムなリストを展示することは無意味です。.

すべての作品は 絶妙な Bibounのスライダーで あまり場所を取らない どちらでも。私は何人かの人々が自動回転スライドショーを正当な理由で嫌いであることを知っているけれども、そのようなミニマリストのレイアウトの上で、私はこのデザイン機能について不満を言うのに苦労しています.

事例2：Aaron Blaiseのウェブサイト - ホームページ

Aaron BlaiseのWebサイトにある例がとても好きです。 彼の作品をポートフォリオとして展示, しかし主にこのウェブサイトを使用します 彼のアートビデオを売る. Aaron Blaiseは数十年間ディズニーで働いていました、そして彼はそれを証明するためのスキルセットを持っています.

彼のサイトのホームページスライダーは自動回転しますが、それが信じられないほど煩わしいものではない、または場違いなものであることはわかりません。各スライド 画像に関連するコンテンツが少しあります, そしてそれはアーロンを助けます 彼の最新のビデオレッスンに注目を集める 若手アーティストに特定のスキルを習得する方法を教える.

素晴らしいポートフォリオカルーセル ビジュアルに焦点を当てています, そして 訪問者をさらに導きます ウェブサイトに。あなたがこれら二つの事を得ることができれば私は個人的なポートフォリオのウェブサイトでこのような機能に反対ではないでしょう.

一般的なデザイントレンド

上記の例をいくつか見れば、一般的に2種類のスライダーがあることがわかります。 全画面表示 そして 固定幅.

これらの文体的な選択はしばしば レイアウトに関連する そしてそれがどれだけの量のコンテンツを保持できるかまで。レイアウトがページの全幅に及ぶ場合は、スライダーも広げるのが理にかなっています。しかしこれはまたあなたを強制します 高品質の画像を探す それでも大画面モニターではフルスクリーンで見栄えがよい.

私は個人的には2つのアートポートフォリオの例に見られるように固定幅スタイルを好みます。これらは はるかに制御しやすい, そして彼らはしばしば 背が高くない - 訪問者が簡単にできるようにする 単にそれらを無視する 彼らが望むなら.

自動進行スライドの価値も考慮してください。 それがどのくらい難しいことができる ユーザーがこのコンテンツをキャッチするためのものです。 Nielsen Norman Groupによるすばらしいケーススタディがあり、それが優れていることを示しています 自動進行スライダを使用しない.

私はこのアプローチを採用しています。 メモリをあまり使わない ブラウザのアニメーションや動きが少なく、ほとんどの人は自動回転カルーセルも好きではありません。 あなたの聴衆に応える.

しかし、私はそれが自動前進スライダーを追加する価値が決してないと言うことはできません。 同じくらい多くの見解を得ないでください, そしてあなたもする必要があります 最初のスライドを最も重要にする 多くのユーザーは次のスライドに進まないでしょう。スライダーを自動回転させるかどうかを決めるのは残念ながら 試行錯誤の分野.

どうしても避けるべきこと

これは私が個人的に考える重要なことです 下に落ちる “絶対に避けてください”. 下のスクリーンショットを見たりクリックして、それが何であるかを推測してみてください。.

Yozenn cafeのWebサイトでは、フルスクリーンのヘッダースライダを使用しています。それは素晴らしい自動回転しません、しかしスライドもまた 装飾以外の目的には役立たない.

画像 どこにもリンクしない, そして彼らはほんの一握りの製品を披露します。彼らはみな ホームページの背景に追加 スライダーを使わずにJavaScriptの混乱と余分なキロバイトを節約する.

私はこの背景スライド機能はすでに窮屈なウェブサイトに多くの価値を追加しないと主張するでしょう。画像にリンクや付随するテキストがある場合は、少なくとも関連性が高いと考えられます.

フルページを占めるあなたのヘッダセクションの画像を自由に使ってください どこにもリンクしたり、本物の情報を提供したりしないでください。 それならカルーセルに変えないで.

インタラクティブ機能

ユーザーがカルーセルを移動する方法はデザイン自体に影響します。あります さまざまなナビゲーションスタイル, しかし、これらは最も人気があります：

• ドットベースのナビゲーション
• 矢印ナビゲーション
• サムネイルナビゲーション
• リストリンクまたは見出し項目

最も一般的なのは ドットナビゲーション これは、何百もの最新のWebサイトで見つけることができます。.

例1：ホームページでシック - ホームページ

家でシックは使用して素晴らしい例です スライダーの下にある3つの小さな点 ナビゲーションを表す各画像は自動的に回転し、シリーズ内の関連ドット 黒でいっぱいになる. 他の2つの空の点 スライドを表示する ユーザーが閲覧できるようにする.

これは 人気のデザインパターン 多くのユーザーがすでに認識していることそれは多くのデザイナーが好きではないハンバーガーメニューと同じカテゴリに分類されますが、 ユーザーはすでにそれを認識しています, そして直感的にそれを使用する方法を知っている.

例2：ピュアサイクル - ホームページ

Pure Cyclesのホームページでは、 ドットナビゲーションと矢印ナビゲーションの組み合わせ. この方法では、ユーザーは前後に移動できますが、 また見なさい “全体” ナビゲーション 下部のドットリンクを通して.

この例のドットリンクは、実際には見づらいものです。ビジュアルスライドの難しさは、多くの要素を区別するのは簡単ではないということです。 背景に簡単に溶け込む.

例3：IGN - ホームページ

IGNのホームページであなたは別のものを見つけるでしょう 自動回転カルーセル それを使用する ナビゲーションのタイトルリンク. これは、出版社にとっては一般的なことです。 見出しを売る 製品よりもむしろ。各リンクは最終的に個々のスライドに行きます 記事ページへ.

これらのリンク サムネイルに置き換えることができます, または各ストーリーのサムネイルを含めることもできます。 外観はカルーセルに表示されます, そのため、サムネイルを省略すると実際にスペースが節約されます。.

さまざまなWebサイトがさまざまな理由でさまざまなナビゲーションスタイルを使用しています. あなたの訪問者の目標を考えてください, そして最高のユーザーエクスペリエンスのためのデザイン.

主な要点

あなたは目指すべきです 本物の価値、または追加情報を生み出す カルーセル付き。これは、訪問者が以前に持っていなかった情報であるかもしれません、あるいは、それは訪問者がそうでなければ見つけることができなかったかもしれないページにつながるかもしれません.

自動回転カルーセルを避けるようにしてください。 主要なランディングページでのみ使用する （ホームページは一例です）。カルーセル限り 目的があります, そして 広告のようには見えない, あなたのデザインはうまくいくはずです.

Webカルーセルに関する詳細情報をお探しの場合は、以下の投稿をご覧ください。

• Brad Frostのカルーセル
• ユーザーフレンドリーなホームページカルーセルを設計するための8のUX要件
• カルーセルのユーザビリティ：コンテンツ過負荷のあるWebサイト用の効果的なUIの設計