【保存版】心地よいWeb遷移アニメーションの基本ルール6個まとめ

図1-1
トグル・トランジションの比較。

突然のトランジションはぶつ切りのように感じるが（画像左）、不透明度エフェクトを追加すると、スムーズで魅力的に（画像右）。

図1-2
メニューの開き方の比較。

左の画像のようにメニューが突然、下から上にただい表示されるのではなく、右の画像のようにフェード・アニメーションを利用することで、より穏やかで流れるような遷移を実現。メニューに対するユーザーのエンゲージメントを高めることができる。

図1-3
ある状態から別の状態への移行にフェード・アニメーションを使用した一般的な例。

スケールと垂直方向の動きを使ってアニメートしていますが、これについては次の原則ルールで紹介します。

高度な使用例として、2つのスクリーンレイヤーまたはシーケンス間のインタラクションをシームレスに統合してみましょう。シーンの切り替わりがユーザーにはほとんどわからないようになるでしょう。多くの成功した製品は、ユーザー体験を向上させるためにこの戦略を採用しています。

図 1-4
レイヤーの「プロファイル・ビュー」は、次の状態に移行する間、シームレスに移動します。より具体的な使い方は次の図で。

図1-5
この流動的な遷移は、大小2つの「プロフィール表示」レイヤーを利用することで実現しています。

スケーリング効果をつかって、2つのレイヤー間をなめらかにフェードさせることで、1つのタイトルレイヤーが両方の画面状態をシームレスに遷移しているように見えます。

図2-1
「フェードイン・アウト」効果にスケールを取り入れると、オブジェクトはよりダイナミックで生き生きとした存在感を放ちます。

このトランジションは、レイヤーが上から下へ滑るように出入りするような、優雅な動きを演出できます。

図 2-2
テキストレイヤーにスケール効果を使う例。

（左）アクティブなレイヤーと非アクティブなレイヤーを、スケールとわずかなフェードアウトを使ってハイライト。

（右）テキストとカードのレイヤーを拡大縮小することで、魅力的なトランジションを実現した方法。

図2-3
スケーリング・トランジションによって、より大きな要素をどのように強調できるかの例。

(左）音楽アプリでおなじみのスケーリングの例は、アルバムカバーのトランジションで見かけます。音楽プレーヤーのオーバーレイが縮小すると、アルバムジャケットはサムネイルサイズも一緒に縮小します。

(右）オーバーレイを開くとき、縮小して前の画面のピークをわずかに表示することで、背景にレイヤーがあるように見せることもできる。iOSオーバーレイスタイル。

図3-1

(左）横のナビゲーションで表示オプションを切り替えるのは、ソーシャルメディアアプリの典型的な動作。スワイプまたはトグルをタップして表示を切り替えることができる。

(右）一方、このアプリは縦方向のナビゲーションで少し変わったレイアウトに。上下にスワイプすることで表示オプションを切り替えることができる。

図3-2
各アプリの投稿をスクロールする場合、その方向性は正反対になるのもポイント。

(左）予想通り、上下にスワイプすることで投稿を閲覧できる。

(右）このアプリのナビゲーションが縦型であることを考えると、投稿をスクロールするのは横型のアクションになるでしょう。

図3-3
メニューやその他の関連するトランジションを開くときも、アプリの全体的な方向性を暗示することができる。

(左）メニューを開くと、アプリの縦型ブラウジングが体験できる。

(右）メニュー要素は左から右に表示され、アプリの水平ブラウジング体験に。

図4-1
トグルスライダーのようなクイックアクションは、人々にフィードバックを与えるために適切なスピードを持つことが重要です。この例はページ内遷移なので、ページ間アニメーションよりもわずかに速くする必要があります。

図4-2
要素の多いページ間遷移では、各状態から切り離されたと感じさせないよう、まとまりのある見せ方が必要。

ページ内遷移よりも若干遅くなるかもしれませんが、アニメーションの速度を遅くする必要はありません。

製品が遅いと感じないようにするには、適切なスピードがやはり重要。

図5-1
この画面上のすべての要素が同時にアニメーションすると、複雑でごちゃごちゃとした印象をもつでしょう。

これが、重要度によって優先順位が付けられたカスケード遷移がある理由。

このアプリでは、もっとも重要な要素は「Profile view」と「サポート・チャート」であるべき。

そのあとに、もっとも重要なプライマリー（Primary）要素より重要度の低い、セカンダリー（Secondary）要素が次に続くでしょう。

図5-2
音楽アプリでは、プレイヤー・ビューを折りたたむときに、遷移がごちゃごちゃしがち。

カバーレイヤーとタイトルレイヤーに注目するだけで、シームレスなトランジションが実現できます。

図5-3

(左）プレーヤーオーバーレイが最小化する様子。

既存のミュージックタイトルとプレーヤーエレメントは、下にスライドするだけで消えます。

(右）画面が最小化されると、新しいタイトルレイヤーが表示される。

こうすることで、プレーヤーの要素やカバースケールのアニメーションの邪魔にならない。

図6-1
（左）音楽アプリのより詳細なコンテキストを示した例。

（右）アプリの機能レイヤーの構成や、プレーヤービューが折りたたまれ、最小化されたビューで概要画面が表示されるとき、どのように遷移するか示した例。

図6-2
この例は2つの部分で構成されています。

アプリ画面の複数のレイヤーがどのように作られているかを示しています。

次に、既存の画面が縮小され、アプリの最下層である暗い背景レイヤーが導入しているとき、コメントオーバーレイが下からスライドしてきます。

すべてのレイヤーと方向性のある動きは、空間性の一部。

図6-3
方向性の原則で強調したように、この2つのアプリは異なるナビゲーション構造を持っています。

画面領域だけでなく、遷移や移動の起点を理解することで、包括的な空間構造を把握することができます。

このような空間的フレームワークを構築することで、製品のユーザーエクスペリエンスの独自性が大幅に向上するでしょう。