Advertisement

kiwinatural-big

 

ダイナミックなアニメーションを得意とした、パララックスエフェクト

今年のWebデザイントレンドとしても、最近よく見かけるWebテクニックのひとつです。

 

 

海外デザインブログInspired Magで、パララックスエフェクトを利用した、クリエイティブなWebサイトデザイン44個をまとめたエントリー「44 Creative Sites with Scrolling Effect」が公開されていたので、今回はご紹介します。

 

パララックスエフェクトの基本的な仕組みや、簡単に実装できる無料プラグインなどについては、以下のエントリーも参考にしていただくとよいかも知れません。

 

 

 

詳細は以下から。

 

 

 

デザイントレンド、パララックスエフェクトを利用したWebサイトデザインまとめ

 

Startseite

画面いっぱいに表示される、素敵なペイント画のスライダーからはじまり、余白スペースの使い方を参考にしたいポートフォリオサイト。

Webフォントを利用した、タイポグラフィーにも注目です。

heidi-lobensommer-big

 

 

 

Weight and Things

自分の体重を入力するとさまざまなモノや動物などに例えてくれる、ユニークなサイト。

実際に計ってみると3,500個分の寿司の重さでした、。

weightandthings-big

 

 

 

Cheese Please

iPhone用アプリを販売、プロモーションしているサイトとなっており、アプリを連想されるチーズが画面中に散らばる、エフェクトが仕込まれています。

cheesepleasegame-big

 

 

 

Portfolio de Michel Doudin

フランスで活動するWebデザイナーさんのポートフォリオサイトで、矢印キーを押すことで、ダイナミックなコンテンツ移動を実現したデザインとなっています。

michel-doudin-big

 

 

 

Biamar

アニメーションを実装したコンテンツ移動だけでなく、複雑なコンテンツ内容の切り替えも注目したい、アパレル用ファッションサイト。

biamar-big

 

 

 

Datskat Inverno 2012

女性アパレルブランドのWebサイトで、ビンテージテイストで統一したかわいらしいデザインが素敵◎。

ブラジル産サイトは、特に気になるデザインが最近多いように感じます。

datskat-big

 

 

 

Lois Jeans 5othe Anniversary

アパレルブランドのルックブックを兼ねた、公式Webサイト。

ナビゲーションメニューをクリックすると、水平方向にアニメーション移動しますよ。

loisjeans-big

 

 

 

Samuel Esteves

写真を中心としたコンテンツ、サイト作成を考えるときに、参考にしたいWebサイトのひとつ。

マウスホイールを回すと、水平方向に写真が展開していきます。

samuelesteves-big

 

 

 

Streni

こちらもアパレルブランドの公式Webサイトとなっており、モノクロベースのエレガントな印象が◎。

タイポグラフィーの使い方なども参考になる、デザイン性が高いサイトなっています。

streni-big

 

 

 

Camping Nord Sud

ウェブデザイン事務所のポートフォリオで、宇宙から始まるコンテンツは、移動するにつれて最後には、。

触ってたのしむサイトの代表例ではないでしょうか。

campingnordsud-big

 

 

 

superChemical

Webサイトを開くと、思わず押したくなるボタンが、。押してみると、パララックスエフェクトがはじまる、ユニークな仕組みとなっています。日本人の方が運営されているようです。

zxcvbnmnbvcxz-big

 

 

 

Why Interactive Showreel

グラフィカルなデザイン、アートを無造作に並べた、ラフな作りに個性が光る、ポートフォリオサイト。

whyinteractive-big

 

 

 

Enjoy Sex:

ロシア語で書かれているため詳細は不明ですが、矢印キーを押すと縦横無尽にキャラクターが歩き出す、ゲーム性を取り入れたWebサイトデザイン。

erekcia-big

 

 

 

Malaga Creation

フランスにあるWebデザイン事務所のポートフォリオサイトで、コンテンツを移動するたびに、ナビゲーションメニューが自動的にアニメーションする仕掛けが、。

malaga-creation_big

 

 

 

Galoper Design

滑らかなパララックス効果が印象的だったサイトのひとつで、上部にあるナビゲーションメニューを押すと、スルスルとコンテンツまで自動的に移動します。

galoperdesign-big

 

 

 

Q Music / Titanic

映画にもなった豪華客船タイタニック号の歴史を知ることができるサイトで、スクロールすると徐々に深海に潜って行きます。なんと最後のフッター部分にはあの客船が、。

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

titanic-big

 

 

 

Modoluce

デザイン事務所の公式Webサイトで、各コンテンツごとに画面が切り替わるエフェクトが実装されています。

利用されているタイポグラフィーも参考になりそうです。

modoluce-big(2)

 

 

 

Montana Express

ブラジルにあるレストランのWebサイトデザインで、美味しそうなビーフステーキやサラダ、ベーコンなどがコンテンツを移動することで、出現します。

montanagrillexpress-big

 

 

 

EDP Renovaveis 2011 Annual Report

コンテンツごとにトグルを使って情報やイメージ画像、コンタクトフォームなどを収納したレイアウト。斜めにコンテンツを展開することが可能となっています。

edprenovaveis-big

 

 

 

Posta – Todo Lo Que Necesitas

最近よく見かけるようになった、水平方向へのコンテンツ移動を実現したWebサイト。

カテゴリーごとに、背景デザインまですべて切り替えた、フレキシブルなレイアウトとなっています。

distribuidoraposta-big

 

 

最後に、、、

[fancy_box]

 

新しいWebトレンドに敏感なIT関連のウェブサイトを中心に、ファッションアパレルやレストランなどクリエイティブな分野での、パララックスエフェクトの利用が多いようです。

パララックスエフェクトを利用する場合、シングルページで作成されるため、ページ読み込み時間がかかるというデメリットもありますね。プロジェクトに応じて使い分ける必要がありそうです。

 

 

ダイナミックなエフェクトが魅力、パララックスWebデザインまとめ(+無料プラグイン9個)

パララックスエフェクトに利用可能なプラグインや基本的な解説をまとめています。

howtoparallax_top

[/fancy_box]

 

[サムネイル@ : Wiki Natural]

[参照元 : 44 Creative Sites with Scrolling Effect – Inspired Magazine]