SVGや動画、CSSアニメーションを使った面白いアイデア満載!じっくりチェックしておきたい最近のWebサイトのまとめ

まだまだ魅力溢れるスクロールエフェクト、SVGなどのベクターデータや動画を使った演出、ユーザーを楽しませたり注目を得るアニメーションエフェクトなど、面白いアイデア満載のWebサイトを紹介します。

サイトのキャプチャ

Garden
制作のコンセプト:Garden Estúdio

秋を感じるカラースキームとイラストだけがこのサイトの魅力ではありません。公園のモニュメントをモチーフにしたSVGの素敵なエレメント、スクロールに応じて変化するSVGのアニメーションやパララックスのエフェクトなど、最新のテクニックを効果的に使用しています。
Portfolioに掲載されている他のサイトもかっこいいものばかりです。

サイトのキャプチャ

Alcya conseil

サイコロ状の3Dのエレメントを使った面白いレイアウトが特徴的で、SVGを使ったアニメーションがきびきびした気持ちいい動きをします。一見タブレットに最適化されているようなデザインですが、デスクトップで見るのが一番楽しめます。

サイトのキャプチャ

KENZO Fall 2014

KENZOの2014年秋コレクションのサイト。前回紹介した「No Fish No Nothing」も斬新でしたが、今回も斬新! スマホ推奨ですが、デスクトップでも楽しめます。
↑のキャプチャだけでも、これWebサイトなの?って感じでしょ。

サイトのキャプチャ

Space Style Concept

不揃いの矩形を意図されたアニメーションでレイアウトを構築して見せます。サイズの異なる矩形でもバラバラ感は全くありません。

サイトのキャプチャ

Lab21

トップにある通りレスポンシブに対してさまざまなアプローチをしているサイト。ソリッドなエレメントをアニメーションで非常にうまく使用しているのもいいですね。

サイトのキャプチャ

Dinamo

縦長スクロールページで、斜めにカットされた大胆な区切り線、フォーカスするとズームされてハイライトするなど、細かい演出が気持ちいいです。

サイトのキャプチャ

Echo Capital Group

トップにあるズームとスライドを組み合わせたスライドがかっこいいですね、Investmentsでのコンテンツもアニメーションを効果的に使っており、見るべき箇所を見てしまいます。

サイトのキャプチャ

Tomasz Stolz

カメラのファインダーをイメージした四隅のL字と矩形エレメントのアイデアがナイスです。大胆なカラースキームとウェイトのあるフォントの使い方が非常にかっこよく、フェードインとフェードアウトなどのアニメーションがうまいです。

サイトのキャプチャ

Bell Brothers

兄弟クリエイターのサイトで、兄弟で画面を半分ずつ使っているのはアイデアの勝利です。この写真、静止画じゃなくて、動きます。

サイトのキャプチャ

FABRIK

トップページの大胆なレイアウト、繊細な気持ちいいエフェクトは一度見たら忘れられないインパクトです。UIも新鮮で、その練り込まれたインタラクションは新感覚ながら戸惑うことなく操作することができると思います。

サイトのキャプチャ

KENJI ENDO (音でます)

最初に目に止まるのがSVGを使ったタイポグラフィの幾何学的なアニメーション、スクロールに連動してさりげなくアニメーションするSVGの使い方も非常にセンスがいいです。配下ページの下部にあるメニュー表示も面白いですね。制作はLETTERS, INC.さん。

サイトのキャプチャ

smart water (音でます)

普通の縦長スクロールページと思いきや、下方向ではなく、上方向へスクロールして楽しむサイトです。晴天の空にスクロールが気持ちいいです。

サイトのキャプチャ

Sismo Design

かわいいカラーとイラストを使ったフラットなデザイン。Voirの四方それぞれからスライドするアニメーションやVous Informerの列ごとに異なるスクロールなど、面白いインタラクションが満載です。

サイトのキャプチャ

immersive garden

縦長スクロールページのポートフォリオ、作品の見せ方やセンスのいい背景などにもぐっときますが、一番の目玉は左端のナビゲーション! 長い縦長ページでも快適にコンテンツを見ることができます、こんなの初めて!

サイトのキャプチャ

Dom Jacob

落ち着いたパステルカラーと軽快なスライドのアニメーションが素敵なサイト。

サイトのキャプチャ

Studio Songes

緩急の伴った前後と左右にスライドするアニメーションがとても気持ちいいです。さりげなく使用しているSVGもいい感じです。

サイトのキャプチャ

AIGA SLC 100 Show

最後はSVGをモリモリ使ったサイト。SVGのアニメーションだけでなく、幾何学的なエレメントも非常に美しいです。

sponsors

top of page

©2018 coliss