Advertisement

cool_responsive_top

 

海外デザインブログGraphic Design Junctitonで、レスポンシブWebデザインを上手に利用したWebサイトをまとめたエントリー「Responsive Website Design for Inspiration」が公開されていたので、今回は特に印象的だったサイトをピックアップしています。

 

多くのサイトがアニメーションやビデオ動画パララックスエフェクトなど新しいテクニックを取り入れています。Webサイトを制作するときの参考にしてみてはいかがでしょう。

 

 

[list type=”hot”][li]レスポンシブでよりかっこよく。クールなWebサイトデザインまとめ[/li]

[li]動きをたのしむ、面白レスポンシブWebデザイン参考例26個まとめ[/li]

[li]効果的なレスポンシブデザイン活用事例Webサイト、ブログ40個まとめ[/li][/list]

 

 

 

詳細は以下から。

 

 

 

レスポンシブデザインを有効活用したクリエイティブなWebサイトまとめ

 

Amazee Labs

紙テープを貼って手作りしたような質感で表現され、ウィンドウズ幅を変更してもスッキリとコンテンツが並びます。

responsive_websites_21

 

 

 

Lander

フラットスタイルで描かれたイラストが、ユニークなアニメーションを加えて切り替わります。

responsive_websites_9

 

 

 

Lotto

キュートなイラストデザインをバックに、スクロールするたびに水平方向に移動するコンテンツ展開。

responsive_websites_6

 

 

 

XGraphica

オリジナリティー溢れる配色を使い、アニメーション豊かなパララックスエフェクトでコンテンツをまとめています。

responsive_websites_2

 

 

 

Derek Walker

トレンドとして、トップページにフルスクリーン写真を採用するサイトが増えています。

responsive_websites_1

 

 

 

SEO Services in Sussex

写真を使った印象的なヘッダーデザインに、スルスルとスクロールすることで、コンテンツがアニメーション付きで表示されます。

responsive_websites_5

 

 

 

Electric Mainline

色鮮やかなグラデーションを重ねたフルスクリーンイメージに、巨大なタイポグラフィーが素敵。

responsive_websites_19

 

 

 

Webflow

スクロールするたびに、ふわりとフェードインするエフェクトが、最後までコンテンツを読みたくさせます。いまなら14日間無料でツールを利用できますよ。

responsive_websites_24

 

 

 

Jet Edge

スクロールでコンテンツが切り替わるだけでなく、上空に飛んでいくエフェクトが再現されています。すこしだけ背景にアニメーションが加えられています。

responsive_websites_8

 

 

 

A Ukash Study

マウスクリックに反応して、動画にエフェクトを加えることができるインタラクティブなサイト。

responsive_websites_3

 

 

 

Oblo Project

ページの開き方やコンテンツの展開の仕方など、超立体的なエフェクトが実装されたWebサイトデザイン。

responsive_websites_7

 

 

 

RedCarpet

左固定ナビメニューを使い、グリッドを使い並べられたコンテンツへうまく誘導する工夫がされています。

responsive_websites_16

 

 

 

Dust of the Ground

フルスクリーンで表示される動画に、半透明のシームレスパターンを重ねることで、オリジナルのスタイルを確立しています。

responsive_websites_22

 

 

 

Gang Films

映像クリエーションの制作実績を、イメージ写真をグリッドで並べ、随所にこまかいアニメーションが実装されています。

responsive_websites_11

 

 

 

Hyperakt

モバイル・ファーストの考え方から、各ページのリンクとメッセージ以外はすべて省いたミニマルスタイル。

responsive_websites_25

 

 

 

Wilson Sideral

3Dメガネをかけて楽しむことができる、新感覚のWebサイト。アーティストなど音楽関連サイト制作の参考にどうぞ。

responsive_websites_12

 

 

 

Degordian

でかでかと動画に重ねて表示されたタイポグラフィーに、ダイナミックなアニメーションがナビゲーションメニューに実装されています。

responsive_websites_26

 

 

 

Chernoff Newman

トップページに動画を利用したトレンドを採用し、イメージ写真を魅せるレイアウトは参考になりそうです。

responsive_websites_17

 

 

David Hellmann

ポートレイト写真を大きく見出しに使うことで、よりインパクトのビジュアルを実現。配色の参考としてメモ。

responsive_websites_13

 

 

 

Edinburgh Zoo

スコットランドにある動物園のWebサイト。誰にでも親しみやすいシンプルで、スッキリとしたレイアウトが採用されています。

responsive_websites_15

 

 

参照元リンク : Responsive Website Design for Inspiration | Web Design | Graphic Design Junction