Advertisement

30slideshowsweb

 

ポータルサイトやポートフォリオサイトなどでよく使われているスライドショー。

少ないスペースにいろいろな情報、写真などを記載するだけでなく、ビジュアル面でのインパクトもあるのでビジターに効果的に情報を伝えることができるというメリットがあります。

 

海外デザインブログ1st Web Designerで、ユニークなスライドショーを利用しているウェブサイト30個をまとめた「30 Examples of Great Slideshows In Web Design」が公開されていましたので、今回はご紹介します。

ウェブサイト制作をするときのアイデアの参考になるのではないでしょうか。

 

 

詳細は以下から。

 

 

ユニークなスライドショーを使ったウェブサイトデザインまとめ


 

Agnarson

ウェブデザイナーさんのポートフォリオサイトですが、制作実績をjQueryを使って表示しています。

スムーズで滑らかにサムネイルをスライドさせていますね。

背景の淡いグラデーションともよくマッチしています。

Agnarson

 

 

Boerdam

Ajaxを使ってウィンドウ幅いっぱいにサムネイル画像をスライドさせたインパクトのあるサイトのひとつ。

Boerdam

 

 

Copimaj Interactive

こちらもポートフォリオサイトのひとつで、制作実績を奥行きのあるデザインで表示しています。

垂直型メニューバーも印象的なデザインとなっています。

Copimaj

 

 

Dcovulsions

ノート型パソコンのディスプレイ部分にスライダーを表示したユニークなデザイン。

iPadの日本発売なども近づいているので、他のガジェットでも応用することができそうです。

Dconvulsions

 

 

Envero

デザイン制作事務所のウェブサイトのひとつで、こちらも制作実績をスライドショーで閲覧することができます。

ボックス枠からはみ出したような立体的なサムネイルデザインは参考になりそうです。

Envero

 

 

Esteban

ポートフォリオサイトのひとつで、コンテンツを水平型にスライドさせています。

多少読み込みに時間がかかるのが難点でしょうか。

Estebanmunoz

 

 

Full Fat Studios

Flashを使うことでダイナミックな3Dで次々にサムネイル画像を展開させるインパクトのあるデザインが印象的です。

Fullfat

 

 

Graffino

こちらもポートフォリオサイトですが、スライドショーと一緒にかわいいボタンを配置し、クリックすることで制作実績のシングルページに移動することが可能。

Graffino

 

 

Viljami Salminen

iPhoneをうまくデザインに取り込んだ立体的なデザインをスライドさせたポートフォリオサイトのひとつ。

立体感は今回紹介したウェブサイトの中でもトップクラスではないでしょうか。

Graphik

 

 

Hello Themes

ウェブサイトのテンプレートを販売しているサイトのひとつで、こちらもノート型パソコンのディスプレイをスライドさせ、横に詳細を記述しています。

Hellothemes

 

 

Hyper X

Flashとシンプルなプリローダーを使ったスライドショー。

クリックしやすいボタンも高品質なデザインがナイスです。

Hyperxlocal

 

 

Kollktivdreinull

レタープレス風型押し文字のみをスライドさせるシンプルなデザイン。

伝えたい情報がまとまっている場合に有効的ではないでしょうか。

 

 Kollektivdreinull

 

Kontoblick

写真を並べたようなデザインにそれぞれクリックすることのできるテキスト、ボタンをレイアウトすることで使いやすさもよいですね。

Kontoblick

 

 

Marcsdesign

こちらもノート型パソコンのディスプレイをスライドさせていますが、そのほかにもアルミ缶やiPhone、背景デザインなどのデザインエレメントを加えることでより立体的に仕上げています。

Marcsdesign

 

 

Mint

ヘッダー部分に大きくスペースを作り、カーソルをフーバーするだけで自動的にスライドするユニークな仕組み。

サムネイル画像にもボタンやテキストなどスペースを考えてレイアウトされているのでとても読みやすい印象を受けました。

Mint

 

 

NineteenEightyFour

普段使っている机の上をそのままデザインしたような楽しいポートフォリオサイトのひとつ。

ページネーションを立体的なリボンにレイアウトすることで思わずクリックしたくなるデザインではないでしょうか。

NineteenEightyFour

 

 

Puppetbrain

オリジナルデザインのマスコットキャラクターをスライダーの前にレイアウトすることで、より奥行きのあるデザインを表現しています。

配色もとてもカラフルで個人的に参考メモ。

Puppetbrain

 

 

Slice Machine

サービスの紹介をアニメーションを使って垂直にスライドさせたウェブサイトのひとつ。

ウェブサービスを提供しているサイトなどに使うとよいかもしれません。

Slicemachine

 

 

SlideDeck

アコーディオン風にサービスを紹介するスライドショーのひとつ。

コンテンツをシンプルに分けることで、よりわかりやすくサービス紹介をユーザーに伝えることができそうです。

Slidedeck

 

 

Squared Eye

ボタンをクリックしようとするとポップアップで次のサムネイル画像を確認することができるスライダー。

やさしい色使いのイラストを使うことで親しみやすい印象に仕上げています。

Squaredeye

 

 

Tea Round App

何度か紹介している気もしますが、iPhoneアプリ紹介用ウェブサイトのひとつ。

iPhoneのディスプレイをスライドさせることで、まるでiPhoneを操作しているようなデザインがナイスです。

Tearoundapp

 

 

Things That Are Brown

こちらも制作実績をスムーズな画像切り替えで表現しています。

Thingsthatarebrown

 

 

Utah Travel

ヘッダー部分に重ねてレイアウトされている写真をクリックすることで、スライドさせるリアル志向なウェブサイト。

横に設置されている垂直型ドロップダウンメニューも参考になりそうです。

Utah-maps

 

 

Winestore Online

ワインを販売しているお店を探すことができるカラフルなウェブサイトのひとつ。

サムネイル画像のスライドと同時に、簡単なメッセージも一緒に表示されるようになっています。

Winestore

 

この他にも参照元サイトには、ユニークなスライドショーを使ったウェブサイトがまだまだ掲載されていますので、こちらもよろしかったら一緒に合わせてどうぞ。

 

[参照元 : 30 Examples of Great Slideshows in Web Design – 1st Web Desinger]