魅力的でド迫力！美しく動くサイト集めてみました。

モーションデザインってつい見入ってしまいますよね。
デバイスや生成AI、ネットワークの進化で高画質な動画が簡単に撮影、制作、閲覧が可能になりました。いい時代ですね！

ただ動くだけじゃない。
美しく動き、見るものを惹きつける。
そんなアイデアが詰まったサイト、集めてみました。

Happy Holidays | PARCO – パルコ –

https://parco.jp/happy-holidays

開いた瞬間広がる音楽、展開されるカラフルな曼荼羅コラージュ。
さらに強烈な個性が爆発しています。
開業55周年記念の一環で作られており、三人のアーティストを起用し生成AIで作られた「HAPPY HOLIDAYSキャンペーン」特設サイト。
ぜひ音楽をONにしてでお楽しみください。

Youtubeに一つ前に公開された広告動画もありますのでぜひご確認ください。

動画を見る

「画像生成AIを駆使し、実際のモデル撮影は行わず、人物から背景まで、グラフィック・ムービー・ナレーション・音楽をすべて生成AIで作成したもの」だそうです。

この圧巻のメインビジュアル。
コレをAIで作ったとは。。。すごい！！
また、つるっとしたお人形さんっぽい人物がパルコっぽい。

B.Y　ポータルサイト

https://crossbackyard.com

Eコマース（電子商取引）のバックヤードに注目し、そこで働く人たちを徹底取材した記事を伝えているポータルサイト。

サイトを開くと同時に動画が始まるメインビジュアル。
画面を左右に分割した「スプリットスクリーン」というデザインを使い、各記事への動きも左右にスライドしながら分かりやすく誘導しています。記事内の赤いラインや画像にカーソルを当てると、注釈や動画が現れる面白い仕掛けがあり、隅々までみたくなるサイトです。

Tote.design

https://tote.design

ど迫力にして超ポップ！デザインスタジオのポートフォリオサイト。
移動しながら制作実績を紹介する流れですが、迷子になりそうなサイケデリックデザインに目が奪われます。そしてハンバーガーメニューにはハンバーガーが組み上がります。
開いた途端、音量大で始まるので要注意。

安倍元総理”襲撃の記憶”

https://www.mbs.jp/news/abe0708/graphics

事件当時を三つの視点から再現した「75秒の記憶」を伝えたサイト。
2023年に公開されたサイトですが、緊迫感と印象的なビジュアル、記憶を検索するような動きと映像が衝撃的です。
WEBサイトでユーザーにここまで伝えることができるということを再認識させてくれる。そんなサイトです。

The Search for Work Happiness

https://www.findworkhappiness.com

書籍の各章の要約を紹介しています。
ページ内のイラストの中を移動しながら、見て触って楽しい絵本のようなサイト。
英語表記のままで見た方がデザインの良さを楽しめます。
チャプターを選んだり、ページ遷移の動きなど、アイデアの参考になります。

Fluffy Hugs

https://nft.fluffyhugs.io

ふわふわと動き、マウスオーバーで拡大したりと、動物好きにはたまらない！
かわいいが渋滞しているサイトです。
ページ隅にぶら下がるネコをクリックすると、次のページに遷移したりと遊び心満載。
猫吸い状態の（犬やパンダ、コアラもいる！）イラストが作れるNFTアートギャラリー。
洋服、背景、吸い付き動物などを選び絞り込んで、好みの一枚を探し出せます。（別サイトに移動し、購入も可）

Nittoニトムズ colocolo5656　特設ページ

https://colocolo.nitoms.com/special/colocolo5656

いつからコロコロってこんなにオシャレで機能的に進化していたのか。。。
メインビジュアルでコロコロを使った可能性が次々展開されていく動画に釘付けです。

[静的エリア途中にgif画像がちょこっと入っており、「商品の伝えたいところ」に目が留まります。
画面スクロール後は通常ヘッダーメニューが多いと思いますが、こちらはフッターメニューと共に出てくる「5656」の丸アイコンが出現。
フッターを掃除しているイメージなのか、メニューを避けてフッターエリアを掃除してくれるコロコロがキャッチーです！

Shupatto

https://www.shupatto.com

ショート動画のように再生速度を高速にしたコマドリ動画で、商品の特徴と魅力をコミカルに余すところなく伝えてるサイト。
折り紙をヒントに制作されたというデザインバック「Shupatto」。
個人的にはNHKの「デザインあ」を見ているようでワクワクしてきます。
若い世代には長尺の動画よりショート動画の方が好まれる傾向にあるので、対象世代によって動画を使い分けるというアイデアの参考になりそうです。
下層の商品ラインナップ箇所でも、商品の側面と正面の画像を使い、デザインや形が効果的に表現されているところに、技術と企画力を感じました。
サイトを眺めていると…どれにしようかな？と考えてしまう自分がいました。

ASH&D Corporation

ash-d.info

大胆なフォントと動きで所属アーティスト紹介しているインパクトのあるサイト「アッシュ・アンド・ディ・コーポレーション」。
モバイルがメインターゲットのようです。
色々大胆に動いていそうなのに、よく見るとそうでもない。
少ない動きでダイナミックに見せるアイデアで見る人にインパクトを与えています。
気づけはじっくり見入ってしまうタイポグラフィーがおしゃれ。

かまぼこの部屋

https://bokoko33.me

動くサイトで有名、かまぼこさんのポートフォリオサイト。
スルスルと動く小気味よさが気持ちいい！
パステルカラーのお部屋の中のあちらこちあらに動きが。。。
いつまでも滞在してしまう魅力的なサイトです。

みさとと。島根県美郷町魅力再発見プロジェクト

https://www.town.shimane-misato.lg.jp/misatoto/

島根県を訪ね歩くように味のあるイラストマップの中を移動する、滑らかな動きが気持ちいい。
ダイナミックな動きと各所の魅力を伝えるイラストで、下層ページへとスムーズにユーザーの興味を誘導しているサイトです。

福岡県立バーチャル美術館

https://virtualmuseum.fukuoka-kenbi.jp

様々な美術の世界にタイムトリップしていく、目が眩むようなオープニングが圧巻。
各美術展ページはそれぞれのテイストに合わせた見せ方で絵画を紹介しています。
とにかく全部クリックして回ってみたくなる。そんなサイトです。

スピッカート| 書き初め2025

https://spicato.com/kakizome2025

大阪のブランディングデザイン会社の2025お正月特設サイト。
オフィス内をクリックして社員の「書き初め」を探していくのが楽しいです。
また、デザイン会社だけあって、絵本のようなイラストも可愛い！
スムーズな動きと、「探す」という仕掛けにハマります。
残り一枚、見つけられず。。。

dream-machine

https://lumalabs.ai/dream-machine

「dream-machine」という動画や画像を作成するサービス紹介サイト。
「頭の中に描くイメージを形にできる」ということが視覚的に表現されている。
画面スクロールで動くコンテンツの動きにも躍動感があり、ページ内の動きはどれも滑らかで美しい。

Sephora Pinball

https://pinball.cosmicshelter.com

ピンボールゲームが遊べる3Dグラフィックスのウェブサイト。
よく見るとコスメ製品がピンとして設置されているキュートなピンボール！
表示まで少し重い感じですが、動きは滑らかで一見の価値ありです。

Immersive Garden

https://immersive-g.com

マウスで触れた部分が浮き出たり、歪んだりする画像エフェクトがすごい！
コンテンツ各所にある動く画像やテキストの滑らかな動きも秀逸。
シンプルなのに随所に技術力が光っているサイトです。

Brightest Stars

https://brighteststars.org/en/explore

複雑で希少な遺伝性疾患の画期的な研究を行うニューヨークの機関がリリースした特設ページ。
宇宙船の打ち上げから始まり、宇宙探査を行いながら、希少な疾患について学ぶ体験型サイトだそうです。
少し読み込みに時間がかかりますが、オープニングのカウントダウンからの打ち上げからの音声、船内コントール画面など細かいところまで作り込まれており、圧巻のクオリティ。
残念ながら英語とスペイン語しかないので疾患については理解できませんでしたが、宇宙船のクルーになった気分を味わいつつ、十字キー操作で惑星にフォーカスしたりと滑らかな動きが楽しいサイトです。

うおみこども園

https://uomi.jp

鹿児島のこども園のサイト。
子供たちの切り抜き画像と可愛いイラストがぽこぽこ出てくる元気いっぱいな雰囲気です。
どのページもスクロールするたびにちょこちょこっと動いており、少しの動きをアクセントに、サイト全体を楽しく表現しています。これらの動きを参考にして、雰囲気作りの手法として取り入れていきたいですね。

CATCH THAT SANTA

https://santa.tote.co.jp

24年のクリスマス特設サイト（
音量に注意！）
一昨年のサイトですが、クリスマスソングと共にスクロールで高速移動していく画面にグギ付！
何度もスクロールしてしまいます。
また、背景のベルなどのイラストをマウスオーバーすると様々な音がする仕掛けも楽しい。

おしまい

いかがでしたか？
動きを取り入れたデザインは、人の記憶に残りやすく拡散性も高い、静止画のみのサイトより多くの情報を視覚的に伝えることができます。
例えばファッションなら、モデルさんが着用したGIFアニメーションを活用していたり、商品であれば様々な角度からの撮影でその魅力を細部まで表現できるのです。

一方で、動画を使い過ぎてしまうと情報過多になり、一瞬興味を惹きつけることはできても煩雑で見にくくなってしまうということがあります。
必要な情報がわかりにくいと本末転倒になってしまうため、静止部分と動く部分のバランスがとっても大切なのですね。

日々楽しいデザインライフを！