【Webデザイン考察まとめ】思わず触れたくなる、遊び心のあるアニメーション・装飾集

こんにちは、プロクラスの杉本です！
今回は、アニメーション・マウスカーソル・装飾についてWebデザインの考察を行ってみました！
アニメーションや装飾って、うまくはまったときのサイトの完成度ってぐっと上がりますよね。
ただ動かすだけでなく、ブランドの世界観や、ユーザーが「また触りたい」「スクロールし続けたい」と感じるような体験にどう結びつけるか、というところが腕の見せどころだなと感じています。
今回は、そんな視点で「これは面白い！」と思った演出やインタラクションをいくつかピックアップして、その工夫を考察してみます。

アニメーション考察

世界観に溶け込むスクロールアニメーション

スクロールに合わせてテキストが段階的に現れるアニメーションや、テキストリンクをホバーしたときに文字が順番に表示されるホバーアニメーションは、近未来的なガンダムの世界観とよくマッチしていました。
また、SERIESエリアやNEW PRODUCTSエリアにカーソルを乗せると、背景の奥からガラス細工のようなぼかしの入ったビジュアルがふわっと浮かび上がる演出も、あまり他では見かけない表現で印象的でした。

色の変化で空気感を演出するアニメーション

セクションの英字サブタイトルが、スクロールに連動してまず緑色でふわっと出現し、そのあと左から順にオレンジ色へと変わっていくアニメーションが印象的でした。動きそのものはシンプルながら、サイト全体の柔らかく優しい雰囲気にぴったり合っており、色の変化だけで豊かな表現ができるのだと気づかされました。

【公式】ツクリオ(Tsuklio) | 手料理サブスク（手作りお惣菜の宅配サービス）

作りたての手料理を、専用キッチンから冷凍せずにそのままお届け。冷蔵の作り置き惣菜を毎週お届けする食事宅配サービス、管理栄養士監修の手料理サブスクです。できたてのおかずをご自宅まで配達するので、手間をかけずに5分で夕食作りが完了！安全安心・美味しいつくりおきを通して、ご家族で楽しめる豊かな食卓を叶えます。1人前798円か...

マウスカーソル考察

カーソルが宇宙を泳ぐ、インタラクティブな体験

黒い背景エリアでマウスを動かすと流れ星のようなエフェクトが現れる演出は、サイトを「操作する楽しさ」を感じさせるユニークな仕掛けでした。
また導入エリアでは、スクロールに合わせてテキストが円を描くように流れ、球駆動技術や360度全方向移動というTriOrbの特徴を視覚的に体感させてくれるデザインになっていて面白いなと思いました。

株式会社TriOrb(トライオーブ) 採用サイト

球駆動の全方向移動プラットフォームで生産ラインを革新する、株式会社TriOrbの採用サイトです。詳細な募集要項や、募集中のポジションを掲載しています。

ボタンをなくした、マウスと連動するCTA

コンバージョンエリアに一般的なボタンを置かず、「Get in touch」のテキストをエリア内で流し、カーソルを重ねたときだけ「Contact」の文字が現れる仕組みは、押しつけがましくなく自然にお問い合わせへ誘導するアイデアが秀逸でした。さらにSPでは、PCでカーソルに表示されていた要素がそのままボタンとして配置されており、デバイスごとに見せ方を変えながらも世界観を統一している点にも遊び心を感じました。

irep.inc. | グローバルデジタルマーケティング／日本No.1パフォーマンスマーケティング

サンフランシスコ・ベイエリアを拠点に、東京を本社として世界20ヵ国以上をつなぐデジタルマーケティングエージェンシー。データとローカルインサイトで、ブランドの成長を支援します。

装飾・動き考察

スクロールで動く目次が「読み進めたい」を生み出す

スクロールに連動して、目次の吹き出しや縦線が黄色に変化したり、目次の隣にいる親子のイラストが下に移動したりする仕掛けは、現在地をわかりやすく示しながら、思わずスクロールし続けたくなる工夫が詰まっていました。スマホでは目次テキストの代わりに、画面下部に親子イラストとスタート・ゴールを示す線が固定表示され、PCとSPで見せ方を変えながらも迷わせない配慮が印象的でした。

よこはま動物園ズーラシア×フェリシモ｜FELISSIMO

よこはま動物園ズーラシアとフェリシモのコラボグッズ特設ページ。「動物って、こんなに おもしろい!」をテーマに 、ユニークな動物たちを取り入れた、ほのぼのデザインの動物雑貨を販売 。お買い物は「フェリシモいきもの未来基金」の支援にも繋がります。

ロゴを装飾として全体に散りばめる、統一感の作り方

内覧予約アイコンやセクションタイトルの装飾、テキストリンクのホバー時など、さまざまな場所にロゴの「倉マーク」が使われており、サイト全体にブランドとしての統一感が生まれていました。ロゴをただのシンボルとしてではなく、装飾の一部として繰り返し使う手法は、ブランディングの観点からも参考になるアプローチです。

あなたの収納に、ゆとりと安心を | 【クラモ】東急プロデュースのレンタル収納

クラモ（kuramo）は、東急株式会社プロデュースのレンタル収納。コンパクトサイズから大空間まで多様な収納スペースを備え、あなたの収納にゆとりと安心をご提供します。

付箋をチケットに見立てた、ユーモアあふれるUI

付箋を応募チケットのように見立てたアイデアがユニークで、そのエリアをホバーすると人の手がにょきっと現れてチケットをもぎ取るアニメーションが表示されます。思わず何度も触ってみたくなる楽しさがあり、サイトのコンセプトをインタラクションで体現した好例だと感じました。

シテイしようぜは弟子を募集している師匠を紹介するWebサイトです。

シテイしようぜは弟子を募集している師匠を

まとめ

今回取り上げたサイトを見ていて感じたのは、アニメーションや装飾が「装飾のための装飾」になっていないということです。どの事例も、動きや演出がそのサイトの世界観やブランドの空気感と自然につながっていて、だからこそ「面白い」と感じられるんだなと改めて気づきました。
「触りたくなる」「スクロールしたくなる」という感覚は、ユーザーのサイトへの印象や関わり方にもじわじわと影響してくるはずで、そういう仕掛けをさりげなく忍ばせられるのが、完成度の高いサイトの共通点なのかもしれません。
PCとSPで見せ方を変えながらも世界観を崩さない工夫も、今回の事例からたくさん学ぶことができました。
デバイスの違いを制約と捉えるのではなく、表現の幅として活かせると、デザインの可能性がもっと広がりそうだなと感じています。
またアニメーションや装飾は、つい後回しになりがちな部分でもありますが、実はユーザー体験の質を左右する大事な要素になります。今後は「なぜ動かすのか」を意識しながら、世界観にフィットした演出を取り入れていきたいと思いました。