こんにちは、デザイナーの伊藤です。
デザイナーのR&D雑記では、デザイナー各々の専門分野や好きな分野におけるアニメーション表現がテーマとなっています。キャラクター、エフェクト、3D、PV、UI、ツールに関してなどなど…（一例です）。ジャンルは基本的に自由なので、デザイナーの個性が出る内容になっていくかと思います。お楽しみに！

初回のテーマは「良いトランジションについて考える」です。
トランジションは「移行」「変化」という意味で、一般的には動画のカットを切り替える際の効果のことを指します。この効果はゲームでも多用されていて、表現方法も様々です。このトランジションの役割や表現手法を考えながら、良いトランジションとはどんなものかを追求したいと思います。

トランジションの役割とは

まずこの効果が付くことで「今場面が切り変わったんだな」ということがより伝わりやすくなります。スタンダードカット（演出が無く次の場面にすぐ切り替わること）も技法の1つではありますが、切り替わる2つのカットが似たようなレイアウトやカラーである場合、切り替わったことが分かりにくくなってしまいます。

• 

他にはどんな役割があるのでしょうか？
ゲームのトランジションをよく観察してみると、画面が切り替わった後すぐに注目したいところに目線が向くようになっていることが分かります。
『星のカービィ スターアライズ』のゲームスタート時のトランジションをざっくりですが再現してみました。

• 

スタート画面→セーブデータ選択画面への遷移の際、タイトルの背景になっていたパーツがぐるりと回転します。回転するパーツに追従しながらセーブデータのボタンが配置され、セーブデータ選択画面に遷移する形になります。

次に続く画面では、押したボタンのパーツが瞬時にトランスフォームし、次の画面の背景に変化します。その後流れるように右に向かって1番注目したいパーツから順に配置されていきます。

• 

また、画面中央にパーツが配置されるレイアウトに切り替わる際は、円のワイプを使用したトランジションになっていて、画面が切り替わった後中央に目線が集中するようになっていました。

画面が切り替わった後すぐに注目したいUIに目線が向くように、演出によって視線を誘導しています。トランジションは単なるにぎやかしでなく、次の画面へ気持ちよく繋ぐ効果があることが分かりました。

良いトランジションを作るには？

リファレンスを探していると多様な表現方法にたどり着くと思います。迷ったときは以下を考慮しながら適切な表現を選択していけば、自ずと良いトランジションが作れるのではないかと思います。

• 前後の画面のレイアウト
• 次にどこを見てほしいか
• ゲームの世界観に合った表現か

視線誘導は機能として大事なポイントになりますが、3つ目の「ゲームの世界観に合った表現か」もとても重要なポイントだと思っています。

上記で挙げた「星のカービィ スターアライズ」」はダイナミックでスピーディーなアニメーションが、ポップでエネルギッシュなゲームの世界観とマッチしていました。しかしこれを知的な雰囲気のゲームやホラー寄りなゲームに適用すると違和感のあるものになってしまいます。
トランジションは世界観を伝える要素の1つであり、表現次第でユーザーをよりゲームの世界に引き込むことができます。しかし適切でない表現や視線の動きを無視したものになると、没入感を邪魔してしまうので気を付けなければなりません。

まとめ

良いトランジションには、次に注目するポイントを示す機能が備わっていて、表現によって世界観を伝える手段になっていることが分かりました。ゲームの雰囲気に上手くハマった表現ができると、世界観をより一層伝えることができ、見る人をワクワクさせることが出来るはずです。

トランジションはゲームによって個性があって、斬新な演出に遭遇するとワクワクしますし、自分もこんなの作れたらいいなあと常々考えるのですが、それは「使い勝手」や「心地よさ」を計算したうえで作られていたものだったと思うと、とても奥の深い分野だなと感じます。

ワクワクと利便性のバランスが取れたデザインを作って、ユーザーの体験をより良いものにできるデザイナーになりたいと改めて思いました!
今回の記事はここまでです。最後までお読みいただきありがとうございました☆