Webデザインの見せ方やアイデアが素晴らしい、最近気になったチェックしておきたいWebサイトのまとめ

Webデザインのセンスを磨く方法の一つは、他人の作ったものを数多く見ること。
コンテンツの見せ方やレイアウト、繊細なアニメーションを使ったインタラクションなど、デザインのアイデアが素晴らしい、最近気になったチェックしておきたいWebサイトを紹介します。

サイトのキャプチャ

Wrk

フランスのWeb制作会社のサイト。ぱっと見、普通の矩形パネルに見えますが、CanvasとSVGを使った弾力性に富んだレイアウトやグラフィックは非常に楽しめます。
縦長ページの構成は新感覚で、ナビゲーションのスマホ時にフッタのコンテンツと合体するのはいいアイデアですね。

サイトのキャプチャ

Booounce!

ショートムービーやアニメーションGIFをコレクションしているサイトで、バウンスの名のようにバウンドを伴うエフェクトが気持ちいいです。ナビゲーションの細かいアニメーションをはじめ、一覧表示、進むと戻る、作品の見せ方、なにもかもがインタラクション性に優れています。

サイトのキャプチャ

Pocket Penguins

出版社のプロモーションサイトで、カラフルなかわいい本は斜めに並べることで印象に残るデザインです。構成はシンプルな縦長ページですが、斜めのアニメーションや背景の変化などの演出が心地良いサイトです。

サイトのキャプチャ

Pharrell Williams

音楽プロデューサー、そして自身もアーティストのファレル・ウィリアムスのオフィシャルサイト。彼が手がけた作品をインタラクティブ豊かなUIで堪能できます。

サイトのキャプチャ

Pleasure to Burn

ニューヨークのクリエイティブ集団が作成したデジタル出版のデモ。縦長ページをスクロールことで、イラストや物語が明らかになります。

サイトのキャプチャ

Persona

クリエイティブ集団のポートフォリオサイトで、トップのインタラクションはインパクト大です。何もしなくても優雅に動き、マウスをあてると反応してきびきび滑らかに動きます。Canvasを採用するサイトも増えてきましたね。

サイトのキャプチャ

six

世界中に多くのクライアントを抱える制作会社のサイト。シンプルなスクロールエフェクトながら、コンテンツとサイドバーのスピードを変えたり、ナビゲーション表示のトリガーなど、細部まで使いやすいデザインです。

サイトのキャプチャ

Navigating Responsibly

デンマークの海運会社の環境サイト。波を彷彿させるエフェクトが優雅で美しく、コンテンツを切り替える時のズームエフェクトもよいアクセントになっています。写真やインフォグラフィックも素晴らしいですね。

サイトのキャプチャ

Poignée de main virile

フランスのクリエイティブ集団のサイト。トップに使われている斜めのマスクは、遷移時のエフェクトにも使われています。各コンテンツの最下部にあるナビゲーションのアイデアが特に秀逸です。

サイトのキャプチャ

Squarespace Circle

クリエイターのための支援サイトで、サークルはコミュニケーションの輪でしょうか。トップは静止画でも美しいですが、ロード時のズームが美しさを更に演出しています。サークルとホワイトが美しいサイトです。

サイトのキャプチャ

PLANE–SITE GbR

コンテンツ戦略を扱うドイツの制作会社。縦長ページで、導入部分の3Dのアニメーションでぐぐっと引き込まれます。コンテンツはシンプルなデザインで、時計のようなエフェクトが新鮮です。また、途中から表示されるナビゲーションのアイデアも非常に面白いです。

サイトのキャプチャ

Small Victori

Dropboxの機能を拡張するサイトで、トップの重なった3枚のレイヤーがちょっと面白いデザインです。この3枚は縦長ページなので、スクロールで見ることができ、3枚が終了した後にも更にパネルが隠されています。下のコンテンツをちら見させるのいいですね。

サイトのキャプチャ

Jürgen Hassler

プロダクトデザイナー・ディレクターのポートフォリオ。ナビゲーションのアイデアが面白く、ダイナミックにスライドし、コンテンツ表示時の次へのボタンも非常に便利です。

サイトのキャプチャ

Swiss Army Man

2016年6月アメリカで公開されている映画のサイト、日本での公開は未定。ハリーポッターのダニエル・ラドクリフをマウスで操作したり、キーボードで文字を入力して話すことができます。

サイトのキャプチャ

Star Wars Episode IV in one picture

スター・ウォーズ エピソード4/新たなる旅立ちを一枚の画像で見せるサイト。スクロールをたっぷりご堪能くださいw
making ofのメイキングも必見!

sponsors

top of page

©2018 coliss