Advertisement

 

 

Webサイトを訪れたユーザーに効果的に情報を伝えることができ、見た目のインパクトもある写真スライダー。

利用するプラグインやデザイン方法、アイデアによって魅せ方もそれぞれだと思います。

 

海外デザインブログDesign Your Wayで、効果的なイメージ写真スライダーを利用しているWebサイトデザイン45個をまとめたエントリー「Intelligent Use of jQuery Sliders – 45 Inspirational Websites」が公開されていたので、今回はご紹介します。

デザイン性の高いWebサイトを中心にまとめているので、アイデア、インスピレーションの参考にしてみてはいかがでしょう。

 

後半部分では、Web制作に便利なスライダー用プラグインをまとめています、よろしかったらこちらも一緒にどうぞ。

 

 

詳細は以下から。

 

 

ユニークなイメージスライダーを利用したWebサイトデザインまとめ

 

BASIC Agency

ヘッダー部分にイメージスライダーを実装しており、この部分のみ画面幅いっぱい使った迫力のあるデザイン。

 

 

Sanlam DestiNation

青色を中心としたグラフィックデザインが印象的なWebサイトで、スライダーを動かすことで水平方向に展開されたコンテンツを確認することができます。

 

 

Baltic International Bank

2つのイメージ画像を一緒に動かしているユニークなデザイン、背景画像と茶色を基調としたカラーリングをうまくマッチしています。

 

 

Mathieu Clauss

グリッドレイアウトで組まれたすっきりとしたレイアウトのトップ部分にイメージスライダーを実装している具体例、多くのサイトが取り入れているレイアウトではないでしょうか。

 

 

Design Forensics

こちらもグリッドレイアウトを使ったWebサイトで、スライダーの下にサムネイルを実装することでユーザーに分かりやすく情報を伝えています。

 

 

Jay Hollywood

トップ部分に実装されているスライダー部分のみ、画面幅いっぱいに表示されたイメージ写真が順番に入れ替わります。

 

 

Giraffe Restaurants

イギリスを中心に展開しているレストランの公式ホームページ、お店の印象に合わせたカラフルな色使いトダイナミックなスライダーが印象的。

 

 

RGA Comunication

ヘッダー上部にレイアウトされたスライダーのイメージ写真が、ユニークな方法でフェードアウトしていきます。

 

 

Biola Undergrad

クリエティブで個性的なデザインのWebサイトで、ページ中段にスライダーをレイアウトしたあまり見かけないレイアウト。

 

 

Push

ページ上部に取り付けられたトグルをスライドさせることで、一緒にイメージ写真をスライドさせています。

イメージ写真と背景色を同じにすることで、デザインに広がりを持たせることができそうです。

 

 

Jerome Detraz

ページトップ部分にレイアウトされたスライダーに番号を振り分け、スライドさせるたびに変化させているミニマルデザインが特長的。

 

 

Inflicted

こちらもスライダー部分のみ画面幅いっぱいにレイアウトされたイメージ写真がスライドするWebサイト、イメージ写真が個人的に好みだったのでメモとして。

 

 

Humaan

ナビゲーションメニュー部分とスライダーを一体化させたようなデザインで、ボックスからはみ出したような効果を表現したWebサイトのひとつ。

 

 

Belancio

やさしくてオシャレな色使いとぼんやりとフェードインしてくるスライダーの相性がばっちり、配色の参考としてもいかがでしょう。

 

 

Alex Noren

プロゴルファーAlex Norenの公式ウェブサイトで、画面いっぱいに表示される写真をスライドさせることでコンテンツを移動させています。

 

 

COFA Media

アメリカ、サンディエゴを拠点にしたデザイン事務所のポートフォリオサイトで、斜めの切り返しをつけたユニークなデザイン。

 

 

Johnny Broccolii

日本のデザイン事務所のWebサイトで、縦方向にズラズラと並べられた作品実績が自動的にスクロールしています。

※ 音が出ますのでご注意ください。

 

 

Hyperakt

カラフルな色使いのデザイン作品をトップページでスライドさせたWebサイト、ボタンデザインなどを統一事で一体感を表現しています。

 

 

jQueryを使ったイメージ、コンテンツスライダー用プラグインまとめ

 

実際にWebサイトにイメージスライダーを実装するときに便利なjQueryプラグインをまとめてみました。

どれも無料ダウンロード可能となっており、あらゆるエフェクトを使ったインパクトのあるスライダーを作ってみましょう。

 

Nivo Slider (デモページ | ダウンロード)

軽量なjQueryプラグインで9種類のユニークな画像切り替えエフェクトを利用することができます。

 

 

MLB.com COntent Switcher with jQuery and CSS3 (デモページダウンロード)

サムネイルを表示したり、素早い画像切り替えを行いたい時に利用したいプラグイン。

 

 

Nivo Zoom (デモページ | ダウンロード)

サムネイル表示されたイメージ写真をクリックすると拡大表示されるプラグイン。

 

 

Image Scale Carousel (デモページ | ダウンロード)

イメージ写真を表示したい画像表示サイズを変更することで、自動的にイメージ写真がフィットするよう便利なプラグイン、デモページにてお好みの幅、高さサイズを設定可能。

 

 

A Beautiful Apple-style Slideshow Gallery (デモページ | ダウンロード

appleのホームページで利用されているうつくしいスライドショーを作成するプラグイン。

 

 

Zoom Info (デモページ | ダウンロード

並べられているサムネイル画像にカーソルを合わせると、コンテンツ内容を表示してくれるプラグイン、ユニークで軽快な動きが特徴。

 

 

Cloud Carouselデモページ | ダウンロード

矢印ボタンをクリックすると、立体的にサムネイルをくるくると回して表示するプラグイン。

 

 

Create Scrollable Interface  (デモページ | ダウンロード

デモページ左下にレイアウトされたサムネイル部分をドラッグすることで写真全体を閲覧することができるプラグイン。

 

 

Shine Timeデモページ | ダウンロード

jQueryとCSS3を利用したギャラリー、ポートフォリオなどに利用したいプラグインのひとつ、サムネイルにカーソルを合わせるとキラッとしたユニークなエフェクトが、。

 

[参照元 : Intelligent Use of jQuery Sliders – 45 Inspirational Websites – Design Your Way]

[参照元 : Cool and Useful jQuery Image and Content Sliders and Slideshows – Noupe]