どうも！

 

身長が高すぎてどこのお店でズボンを買っても、裾が足りないディレクター部のコッペパンです。

 

さて、今回はモーショングラフィックスを使用した興味深いウェブサイトをご紹介いたします！

 

 

今ではウェブサイトが非常に多種多様で、個性的で面白い物がたくさんありますが、

昔のウェブサイトと言えば、あまりカスタムが出来なかったどフラットなデザイン...

 

というか、今で言う　“デザイン”　と呼ばれる複雑な内容を組み合わせた物とは違い、

非常にシンプルな、枠と枠で組み合わされたような物でした。

 

インターネットが普及したすぐのウェブサイトでは、

画面内のコンテンツが動くなんて奇跡のような話。

 

これは1998年のAppleのウェブサイト…やはり時代を感じますね。

とは言え流石アップル、約20年前のサイトにもかかわらず、

今でも格好良いと思えるような洗練されたウェブサイトをすでに作っています。

 

 

この時代は、Appleでさえシンプルなプロダクト写真と、限られたフォントしか使用出来ませんでした。
（とは言え当時としては凄い技術ですが…）

 

 

一昔前は、今と比べて技術面や知識面の制限がかかっていたり、

国同士での情報のアクセス方法が少なく、違う国での情報が混ざり合うという環境がありませんでした。

そういった点から、新しいものが生まれるという事が今に比べて少なかったようです。

 

そう考えると、最近のウェブサイトでは多種多様なスタイルや雰囲気、

業種はもちろん、デザインで言えば、

UI・UXデザインからインタラクション、タイポグラフィー、色彩、ナビゲーションなど

 

この違いだけでも技術進化を見れて面白いですよね！

色々見て気付いたら数時間経ってるなんてことも。。。

 

 

そして、今回の本題でもある、注目を集めているモーショングラフィックスの世界…

最近ではウェブサイト・テクノロジーの世界では必要不可欠になって来ています。

 

 

モーショングラフィックスの定義が分からない方は以下をご参考にどうぞ。

 

モーショングラフィックス（Motion Graphics）とは、

 

モーショングラフィックスとは、文字や写真、イラストなどの静止画像に

動きや音を加えて作る、文字通り「動くグラフィックス」のことです。

動画と静止画像の中間に位置する表現方法と言えます。

その表現方法は多様なので、

「ここからここまでがモーショングラフィックスである」と、ひとくくりに定義づけることは困難です。

 

わかりやすい例でいうと、テレビのニュース番組のオープニングで、

視聴者の目を引き付けるため、番組タイトルの文字が回転したり大きさが変わったりと、

ユニークな動きをするところを見たことがあると思います。

それもモーショングラフィックスの一つです。

 

 

と、なんとなーくは分かったかと思いますが、イメージとしては立体的なアニメーションや、

いくつかの素材でレイヤリングされている映像等を指します。

 

様々な業種でも、使用されているモーショングラフィックスですが、

 

今回はあっと目を引く、

モーショングラフィックスを使用した楽しめるウェブサイトを6選

をご紹介いたします！！

 

 

是非とも一度全部目を通した後に、気になるサイトに行ってみてください。

ウェブサイトに行くとまた違うんです、サイトが動くとやっぱり楽しいんです。。。

 

モーショングラフィックスを使用したウェブサイト6選

 

宇多田ヒカル公式サイト（特設ページ）

 

 

最初にご紹介させていただくサイトは、宇多田ヒカルさんの公式ウェブサイト。

 

2019年1月18日に発売された新アルバム「face my fears」のプロモ用に制作された特設ページです。

 

各国のAppleミュージックのランキングや、Youtubeの閲覧回数、

そしてSpotifyにて再生された数をリアルタイムで表示がされています。

 

ファン同士が地球のモーショングラフィックスを通じて

繋がっているような感覚になるのではないでしょうか。

http://www.utadahikaru.jp/hikaru_utada_songs/

 

MASAYUKI DAIJIMA ポートフォリオサイト

 

そして日本人プログラマ－のMASAYUKI DAIJIMA氏のポートフォリオサイト。

 

マウスの動きに合わせてメインビジュアルのモーショングラフィックスが動いたり、

シェイプや、エフェクトが変わってリアルタイムでアートを体感している様な感覚に。

 

個人的にこういった物、大好きなんですよね、、、いつか作ってみたいなと思ったり…

https://www.daijima.jp/

Les Animals wish you a little more

別の世界を表現する、といった意味でのモーショングラフィックスとして、

見た目の違う世界を画面に閉じ込めた様な内容になっているこちらのウェブサイト。

 

マウスの動きに合わせて、様々な世界を覗けるというコンセプト。

スペースバーを使用してページを進んでいく等、海外らしい発想の遊びがあるので、

エクスペリエンスとして面白いサイトになっています。

https://2019.lesanimals.digital/en

Konterball

 

仕事の休憩時間に、

元卓球部の暇つぶしに、

卓球で人と繋がりたい人に。

 

卓球がウェブで遊べるウェブサイトです。

しかも他のユーザーともプレイ出来る。

 

立体感の表現の完成度が凄い…遂に時代はアミューズメント施設に行かずして、

PC一台で卓球がいつでも出来るようになりました。

https://konterball.com/

Satellites

 

JUSTというオランダのクリエイティブチームによって、制作されたサイト。

 

Satellitesとは、日本語で衛生という意味です。

 

お分かりの方もいらっしゃるかと思いますが、画面上に現れる様々な形のオブジェクトは

実際に地球の周りに浮かんでいる衛生や、ロケットの破片のゴミ。

 

三角はデータ通信を可能にしている通信機

多角形になっているものは様々な破片や、ゴミ

四角になっているものはロケットの機体。

 

水不足や、森林伐採の環境問題が気にされいますが、

そういったものは実際に映像や、実際に現地訪れれば状況が確認することが出来ます。

 

しかし宇宙さえゴミで溢れている事実はなかなかイメージが湧くものでわありません…

それを実際に可視化するために制作されたウェブサイトです。

 

グッジョブ、JUST！

https://www.awwwards.com/sites/satellites

Exoplanet Explorer

またまた宇宙モノですが…

 

このウェブサイトは、2017年11月までに発見された宇宙の惑星をリスト化し、

その中から見たい惑星を実際にモーショングラフィックスで表示してくれるというサイト。

 

 

規模からして誰かが妄想で作ったんじゃないかと思ったのですが、

実際にこのサイトに使用されている惑星のデータはNASAから提供されているもの。

 

ウェブサイトを通して、宇宙の広さまで見れるんです…

何だか面白いですよね、画面上で自分の見ることの出来ない限界の世界までも見れてしまうなんて…

http://exoplanet-explorer.space/

 

 

という事で、いかがでしたでしょうか！

個人的な好みの基準に選ばせていただきましたが、面白いものはありましたか？

 

この様にテクノロジーが進化することで、

得られる情報や表現出来る世界がどんどんと広がっています。

 

これからもウェブ業界の進化に注目しておくと面白い発見があるかもしれませんね。

 

最後までご覧いただき誠にありがとうございました～！

 

ホームページ制作はもちろんの事、サイト運用時のアドバイスなど
どんな事でもご相談をお受け付けしております！

この記事を読んで、私たちに興味を持ったお客様は、
ご気軽に以下のお問い合わせボタンよりお問い合わせください！