SVGや動画、CSSアニメーションを使った面白いアイデア満載！じっくりチェックしておきたい最近のWebサイトのまとめ
Post on:2014年9月24日
sponsors
まだまだ魅力溢れるスクロールエフェクト、SVGなどのベクターデータや動画を使った演出、ユーザーを楽しませたり注目を得るアニメーションエフェクトなど、面白いアイデア満載のWebサイトを紹介します。
Garden
制作のコンセプト：Garden Estúdio
秋を感じるカラースキームとイラストだけがこのサイトの魅力ではありません。公園のモニュメントをモチーフにしたSVGの素敵なエレメント、スクロールに応じて変化するSVGのアニメーションやパララックスのエフェクトなど、最新のテクニックを効果的に使用しています。
Portfolioに掲載されている他のサイトもかっこいいものばかりです。
サイコロ状の3Dのエレメントを使った面白いレイアウトが特徴的で、SVGを使ったアニメーションがきびきびした気持ちいい動きをします。一見タブレットに最適化されているようなデザインですが、デスクトップで見るのが一番楽しめます。
KENZOの2014年秋コレクションのサイト。前回紹介した「No Fish No Nothing」も斬新でしたが、今回も斬新！ スマホ推奨ですが、デスクトップでも楽しめます。
↑のキャプチャだけでも、これWebサイトなの？って感じでしょ。
不揃いの矩形を意図されたアニメーションでレイアウトを構築して見せます。サイズの異なる矩形でもバラバラ感は全くありません。
トップにある通りレスポンシブに対してさまざまなアプローチをしているサイト。ソリッドなエレメントをアニメーションで非常にうまく使用しているのもいいですね。
縦長スクロールページで、斜めにカットされた大胆な区切り線、フォーカスするとズームされてハイライトするなど、細かい演出が気持ちいいです。
トップにあるズームとスライドを組み合わせたスライドがかっこいいですね、Investmentsでのコンテンツもアニメーションを効果的に使っており、見るべき箇所を見てしまいます。
カメラのファインダーをイメージした四隅のL字と矩形エレメントのアイデアがナイスです。大胆なカラースキームとウェイトのあるフォントの使い方が非常にかっこよく、フェードインとフェードアウトなどのアニメーションがうまいです。
兄弟クリエイターのサイトで、兄弟で画面を半分ずつ使っているのはアイデアの勝利です。この写真、静止画じゃなくて、動きます。
トップページの大胆なレイアウト、繊細な気持ちいいエフェクトは一度見たら忘れられないインパクトです。UIも新鮮で、その練り込まれたインタラクションは新感覚ながら戸惑うことなく操作することができると思います。
KENJI ENDO (音でます）
最初に目に止まるのがSVGを使ったタイポグラフィの幾何学的なアニメーション、スクロールに連動してさりげなくアニメーションするSVGの使い方も非常にセンスがいいです。配下ページの下部にあるメニュー表示も面白いですね。制作はLETTERS, INC.さん。
smart water (音でます）
普通の縦長スクロールページと思いきや、下方向ではなく、上方向へスクロールして楽しむサイトです。晴天の空にスクロールが気持ちいいです。
かわいいカラーとイラストを使ったフラットなデザイン。Voirの四方それぞれからスライドするアニメーションやVous Informerの列ごとに異なるスクロールなど、面白いインタラクションが満載です。
縦長スクロールページのポートフォリオ、作品の見せ方やセンスのいい背景などにもぐっときますが、一番の目玉は左端のナビゲーション！ 長い縦長ページでも快適にコンテンツを見ることができます、こんなの初めて！
落ち着いたパステルカラーと軽快なスライドのアニメーションが素敵なサイト。
緩急の伴った前後と左右にスライドするアニメーションがとても気持ちいいです。さりげなく使用しているSVGもいい感じです。
最後はSVGをモリモリ使ったサイト。SVGのアニメーションだけでなく、幾何学的なエレメントも非常に美しいです。
sponsors
