WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

映像の切り替わるモーションが面白い!「TAO TAJIMA」さんのwebサイト

   

TANGRAM co. ltd.に所属する映像ディレクター「TAO TAJIMA」さんのホームページです。

とにかく映像の切り替わりのモーションが面白い!サイトです。
まずサイトに訪れると画面いっぱいに動画が流れるようになっているのですが、スクロールしようとすると画面がうにょうにょ動くんです!
ある程度スクロールさせると映像が切り替わる仕組みになっています。そうすることで、「TAO TAJIMA」さんが手がけた数々の映像を見ることができるんですね!
紹介の仕方がとてもお洒落です…

画面の一番下にはページナビも設けられており、スクロールしなくても映像を切り替えることが可能です。

しかも!メニューをクリックするとさらに面白い動きをしています。
映像の一覧をサムネイルで紹介しているのですが、左側のハンバーガーメニューをクリックするとそのサムネイルに仕舞われるかの様な動きで映像が消えるようになっています。
さらにメニューを閉じると先程まで見ていた映像がまた見れる仕組みです!一体どうなっているんだ…
私もいつかこんなカッコいいアニメーションを使ったサイトを作ってみたいものです…勉強になります!

 - 動きで表現

  関連記事

群馬にある猿ヶ京温泉の紹介サイトが、動きとイラストを使ったデザインで可愛い!

群馬県利根郡みなかみ町にある観光スポット「猿ヶ京温泉」の「猿ヶ京温泉観光情報協会 …

まるで本当の雑誌を読んでいるかのようなレイアウト

クラフトタイムズが運営するウェブマガジンです。ビールを題材に取り上げ、様々な内容 …

「伝統」と「革新」を伝える「廣榮堂 採用サイト」

岡山で160年の歴史を誇る老舗和菓子屋「廣榮堂」の採用ページです。 学生たちをタ …

タイトル部分に動きをつけて目立たせる

愛知県名古屋市にある和菓子屋「一朶」のホームページです。 縦長のシングルページの …

水色と黒を使用し、近未来感を演出したデザイン

メルセデス・ベンツとPerfumeがコラボレーションしたメルセデス・ベンツのiP …

コンテンツ毎にスクロールボタンを配置し、移動しやすく

高知県にある「サイバラ建設株式会社」のホームページです。 まず、中央に配置された …

ひし形のグリットを使って、授業風景などの写真を紹介している倉敷芸術科学大学のサイトがおしゃれ!

岡山県倉敷市にある大学「倉敷芸術科学大学 芸術学部」のサイトです。 ファーストビ …

折り紙の発想から生まれたオフィスチェア「FLIP FLAP」の特設サイトが、オフィスチェアのデザインを使ったレイアウトでカッコいい!

折り紙の発想から生まれたオフィスチェア「FLIP FLAP」の特設サイトです。 …

商品を色々な角度から見ることができる

  シチズン時計株式会社の特設サイトです。まず最初のオープニングアート …

ユーザーごとにデザインを切り替える

ヤマト運輸株式会社の公式ホームページです。 個人・法人・行政や自治体ごとのページ …