Webサイトって動かすことが、“標準装備”ですよね。なんだかお金や手間が掛かってる感じするし、誰かに自慢したくなったりするし、そんな気持ちは良くわかります。でも今のWebトレンドは「やりすぎない動き」です。ページ遷移のつなぎ目がなめらかで、スクロールに呼吸がある。しかもCSSだけで実装しやすく、体感の速さもちゃんと測れるような。
今のトレンドを紹介しつつも、企業や自治体にとって、本当の意味で必要なWebサイトって何？という話を書いていこうと思います。
技術的な流行3つ
View Transitions は、ページ内のレイアウト変化やコンテンツ切り替えにふわっとした橋渡しを付けられる仕組みです。2025年のアップデートで、同一ドキュメント遷移の指定やクラス付けが整い、実務投入しやすくなりました。難しいJSを足さなくても、“切り替えの瞬間”にゆとり を作れるのがポイントです。
Scroll-driven Animations（スクロール・ドリブン・アニメーション） は、ユーザーのスクロール量（タイムライン）に合わせてテキストやカードを動かす機能です。Safari 26でも実装が進み、JSレスで軽いアニメ ができるようになりました。これまで外部ライブラリで頑張っていた“出入り”や“パララックスの抑制”が、CSS中心で表現できるようになったのです。
さらに、INP（Interaction to Next Paint） がCore Web Vitalsに正式採用されました。INPは「操作してから画面が反応して実際に描画されるまでの時間」を評価する指標です。つまり、心地よく反応するUI を作れないとスコアが落ちてしまうという意味です。装飾のための動きではなく、操作感を支える動きが求められる時代になったことの表れだと思います。
UI全体の心地よさを重視
デザイン（エンジニアも含みます）の現場で起きている変化は3点です。
- 遷移のクッションがデフォルトに
画面A→Bの切り替えに、関連要素をマッチングして自然に繋ぎます。要素がどこへ行ったかが分かるので、ユーザーは迷子になりにくいです。これは、ミニマルなブランドでも世界観を壊さず演出することができる方法です。 - スクロールの呼吸が整う
セクション見出しの出現、ギャラリーの奥行きなど、動かす理由がある箇所だけ を軽く動かすと、“呼吸”が生まれます（あ、なんだか呼吸してるみたい、なんてことをユーザは感じませんけど・・）。CSSで書けるので、軽快さと保守性 を両立しやすくなります。 - 見た目だけ速いが通用しづらい
ローディングを飾っても、タップ後の実反応が鈍ければINPが悪化してしまいます。そこで、速く感じる演出＝速く動く実体 が必要になります。たとえば、- フィードバック（押した感）の即時表示
- 遅い処理は段階開示で先に枠だけ見せる
- アニメは短く軽くして、主役はコンテンツ！
・・といったデザイン設計が必須です。
ユーザーへの配慮がUI全体の気持ちよさを底上げして、評価もあげるといったところでしょう。
「動き」は主役じゃないけど・・
動きは主役じゃない・・けど、体験の文脈をつなぐ“句読点” みたいにはなれます。その句読点をCSSで軽く、設計として 組み込めるのが面白くなってきているのが今ではないかと思います。デザインの引き出しを増やすチャンスですし、それを無駄にしてしまうことは、デザイナーとしての成長機会を失ったも同然です。過去の経験上、アナログでもデジタルでも、新しい技術はまず試す、ということをやっていました。デザイナーは、そのような志向性を持ち続けて欲しいですね。
