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

Post on:2016年6月6日

sponsors

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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