UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説

Post on:2018年3月13日

タブのコンテンツをスライドさせるアニメーション

タブをタップして、コンテンツを表示します。

Goodのアニメーションは、コンテンツをフェードイン・フェードアウトさせて表示・非表示させます。
Greatのアニメーションでは、コンテンツを状態間で移動させることによって、遷移の連続性を示します。

タブやフライアウトメニューのようなインタラクションをデザインする時は、コンテンツを開くアクションに相対的な位置を入れてみてください。そうすることで、コンテンツの可視性だけでなく、その位置もアニメーションで伝えることができます。
コンテンツを移動させるスワイプのジェスチャも加えると更によくなります。

カードをタップして詳細を表示するアニメーション

カードの要素をタップして、詳細コンテンツを表示します。

Goodのアニメーションは、左にプッシュか上にスライドを使用して、スクリーンに詳細コンテンツを表示します。
Greatのアニメーションでは、詳細コンテンツ自体をアニメーションさせることによって、2つの状態間の繋がりを確立します。

さまざまな状態間でアニメーションを作成する時には、それらに共有要素があるかどうかを確認し、それらに繋がりを持たせます。例えば、InVision Studioでは、2つのリンクされた画面間で繰り返されるコンポーネントは、モーショントランジションを作成すると自動的に接続されます。これはプロトタイピングのアニメーションを簡単にします。

Creating Usability with Motionで、それに適したさまざまなアニメーションをチェックできます。上記の例では、Masking, Transformation, Parenting, Easingを組み合わせて使用しています。

コンテンツを表示するアニメーション

要素をタップすると、コンテンツを表示します。

Goodのアニメーションは、コンテンツがスクリーンに表示される時に位置と不透明度を変更します。
Greatのアニメーションでは、各グループまたは各要素の外観を素早くずらします。

滝のように表示されるウォーターフォール効果を達成するには、各グループまたは各要素に遅延を適用します。同じイージングと持続時間を維持するので、一貫性があります。各小さな要素はカスケードせず、コンテンツのグループをアニメーションさせます。その際のアニメーションは、素早くするのがポイントです。Googleによると、20ミリ秒以内に各要素を始めることが推奨されています。
Material Designのchoreography principleに参考になる例がいくつかあります。

コンテンツが他の要素を押し出すアニメーション

要素をタップして、コンテンツを拡大表示します。

Goodのアニメーションは、要素を移動させて表示します。
Greatのアニメーションでは、変化した時に周囲に影響を与える要素を示します。

このアニメーションのポイントは、コンテンツ自体ではなく、周囲を気付かせることです。これは、コンテンツの周りの要素を引き付けるか、または反発させることを意味します。
Material motionに参考になる例がいくつかあります。

メニューを表示するアニメーション

ボタンをタップして、メニューを表示します。

Goodのアニメーションは、ボタンからメニューが表示されます。
Greatのアニメーションでは、タップした場所からメニューが大きくなり、そのきっかけになったアクションから出現します。

さまざまな状態を表すボタンのアニメーション

左は状態を示すテキストが表示され、右はさまざまなイベントを表示します。

Goodのインタラクションは、ボタンの次にイベントを見せます。
Greatのインタラクションでは、ボタン自体を使用してさまざまな状態を表示します。

ステータスの視覚的なフィードバックをユーザーに提供するために、ボタンのコンテナを使用してみてください。例えば、CTAをスピナーやローディングのアニメーションに置き換えることができます。進捗状況を伝えるために、背景にアニメーションを追加することもできます。
どのように解決するかはあなた次第です。このアイデアのポイントは、ユーザーが既に操作しているスペースを使用することが重要です。さらに、最後のボタンのカラーをアニメーションで変え、成功の状態を伝えることもできます。

重要な要素に注目させるアニメーション

重要な要素をアニメーションさせて、注意を向けさせます。

Goodのデザインは、ユーザーが気付いたり行動したりする必要がある重要なアクションを強調するために、カラー・サイズ・位置を使用します。
Greatのデザインでは、アニメーションを使用して、重要なアクションにユーザーの注意を向けさせます。

ユーザーが重要な何かに対してアクションする必要がある時は、そのアクションをアニメーションさせて注目を集めるようにします。最初は繊細なアニメーションから始め、アクションの重要度に応じて強度（カラー・サイズ・スピード）を増やします。
これは重要なアクションにのみ使用します。このエフェクトを使用するほど効果が少なく、影響を受けにくくなります。