Webデザイナー必見。Tubikが考える、UIにアニメーションが欠かせない理由。

UIにおけるアニメーションの使用について、近年盛んに議論が交わされています。特にコンセプチュアルアニメーションは、クリエイティブな実験ができたりUIモーションの限界を広げることから、より注目度の高い分野です。

私たちのデザインスタジオTubikでは、アプリやウェブサイトでのUIアニメーションを使うメリットをすでに過去にも記事にしてきました。今回はその続編として、コンセプチュアルアニメーションがいかにプロダクトの成功に寄与するか、TubiknのモーションデザイナーKirill Yerokhinとともに説明していきます。

コンセプチュアルアニメーションとは

コンセプチュアルアニメーションはコンセプトアートの一領域です。モーションデザインのひとつで、特定のアイデアを伝えるために使われます。

ユーザーインターフェースデザインでは、コンセプチュアルアニメーションはさまざまな場面で使用されています。インタラクション、画面遷移、コントロールの操作、システムからのフィードバックを伝えるアニメーションなど、その使用例は多岐に渡ります。

モーションデザイナーが使用するツールとしては、Adobe After Effects、Principle、Figma、InVisionなどがあげられます。

コンセプチュアルアニメーションがUIデザインに必要な理由

なぜコンセプチュアルアニメーションがUIの現場に必要なのか？これは、現在まさに議論の的になっている問いです。コンセプチュアル アニメーションは、既成の解決策やよく使われているアプローチから抜け出て、限界やルールを超える可能性を帯びています。一方でこの種のアニメーションは、非現実的かつ不必要で、技術的にも難解にみえるでしょう。

重要なのは、UIにおける静的デザイン（絵文字、アイコン、カラーやシェープ）とアニメーションはどちらも、同じ機能を持っていることです。どちらも、アプリケーションを他の類似サービスよりも魅力的にするために使用されます。

Mobile Game Interactions / Tubik

コンセプチュアル アニメーションについてのネガティブな意見もありますが、全てはデザイン次第。課題解決の新しいアプローチを探るクリエイティブ分野のイノベーションは、最初は人々の共感を得づらいのが普通です。

市場がアニメーションの可能性に注目さえすれば、実際社会での実現化の方法はいずれ発見されるでしょう。現代ではデザイナーの考えはコンセプトのみに留まりがちですが、我々Tubikでは今までに多くのアニメーションのアイデアを開発側で成功させてきました。

技術的な課題は時間が解決してくれるでしょう。

UI アニメーションのコンセプト事例

アイテムリストのスクロール

最初の事例は、インタラクティブなアイテムリストです。左の事例はリストがそのままスクロールされるだけですが、右の事例はリストを引っ張った時にホールドバックがかかるのを表現しています。こうすることで、より生き生きとしたデザインとなり、スクロールするのが少し楽しくなります。

また、リストカード同士のスペースをより広く見せるイリュージョンを生み出すこともできます。

リストからアイテムへの以降

これは、アイテムリストやメニューから、個々のアイテムの詳細情報を表示するページへ以降する際のアニメーションの事例です。アニメーションを使用することで、よりダイナミックな動きがつきます。

サイドメニューの表示

サイドメニューの表示など、非常に基本的な機能もコンセプトアニメーションを使用すれば生き生きとしたダイナミックさが生まれます。右の事例のようにオブジェクトを段階的に動かすことで、よりエレガントなデザインとなります。

UIアニメーションコンセプトの実際の活用例

UIデザインにおけるコンセプチュアルアニメーションは、現在クリエイティブな段階にあります。モーションデザイナーは、今までとは異なる提案をクライアントや開発側と話し合えるようになるでしょう。

以下、デザイナーのKirillが他のUIデザイナーと共に作成したいくつかの事例を紹介します。

Finance App Interactions / Dribbble

Music News App / Dribbble

Home Budget app / Tubik

Business Card UI / Dribbble

Calendar app animation/ Dribbble

Force Touch Slide Menu / Dribbble

UI アニメーションコンセプトの利点

どの産業やクリエイティヴ領域でも、イノベーティブな創造や研究は、まずコンセプトから始まることが多いです。それは、自動車産業や建築業界の歴史的な発展をみれば歴然でしょう。コンセプトの力は、進歩を可能にします。

UI アニメーションの世界でも、同じことが言えるでしょう。少し前まで、ほとんどのアニメーションは「非現実的」と言われていました。フラットデザインは、形やカラーはシンプルさとクリーンさを生み出すために使用されてきました。

新しいアニメーションの時代には、厳しい競争の中でアニメーションがアプリやソリューションをより魅力的にみせるために使用されます。