スタートアップ企業のwebサイトは、サービスを提供してきた実績が少ない状態であることも多く、どうしてもページコンテンツを充実させることが難しくなります。
それだけに、webサイトにおける一つ一つの細かなアニメーション演出の工夫が印象を大きく左右します。
ユーザーがサイトを訪れた瞬間からサイトを離れるまでの動作の中で起きるアニメーションには、さまざまな種類があります。その中でも、ページ間の移動は特に注目すべきポイントです。ユーザー体験をより良くするために適切に設計されたページ遷移アニメーションは、自社のブランドを印象づける強力なツールとなります。
ページ間移動のアニメーションの実装例
>>普通のページ間移動の実装例デモページ（別タブで開きます）
ページの移動をする際の普通の挙動です。
特に何のアニメーションも起こらずに次のページへ飛びます。
>>工夫したページ間移動の実装例デモページ(別タブで開きます)
工夫したページ間移動です。
次のページへ移動する際に、横からふわっとスライドインするアニメーションをつけています。
ヘッダーメニューのパーツ（画面上部に固定された「ホーム」と「ギャラリー」のリンクメニュー）は、ページ移動前にも後にも同じものが配置されるので、あえてアニメーションさせずに制作。切り替わったのはどの部分なのか、ということを明示することで、ユーザーにとってのわかりやすさにつながります。
トップページと移動先のページを行き来する際のユーザーは「移動したところからトップページに戻る」という自然な期待に沿う形でアニメーションの向きを逆にして制作。きちんと戻ったという実感を持たせることができ、ユーザーにとって自然に感じられるアニメーションです。
近年では「View Transition API」の技術が注目されています。異なる DOM 状態間のアニメーション遷移を制作する仕組みを提供し、同時に DOM コンテンツも単一の手順で更新します。
しかし、まだすべてのWebブラウザで互換性がある技術ではなく、現状は実験段階のものです。
そこで、「swup」というJavaScriptライブラリを用いての制作を行います。
swupはView Transition APIに対応しているブラウザとそうでないブラウザに対して、ページ間移動のアニメーションの出し分けが可能になっています。
最新の技術を追い求めるだけでなく、従来の技術との互換性を保ったまま制作することは、長く使っていくホームページを制作する上で重要です。
