• Top
• Category
• Contact
• About

サイト構築 -制作

sponsorsr

普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。
スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。

Material Motion,IBM Animation Principles,The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。

Good to great UI animation tips

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• タブのコンテンツをスライドさせるアニメーション
• カードをタップして詳細を表示するアニメーション
• コンテンツを表示するアニメーション
• コンテンツが他の要素を押し出すアニメーション
• メニューを表示するアニメーション
• さまざまな状態を表すボタンのアニメーション
• 重要な要素に注目させるアニメーション
• まとめ

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

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

• 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のデザインでは、アニメーションを使用して、重要なアクションにユーザーの注意を向けさせます。

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

まとめ

ここで紹介した例は、インタラクションにアニメーションを加える際によりよい結果を出すために役立てばと思います。
InVision Studioのような新しいアニメーションやプロトタイピングツールを使用することで、わたし達はクリエイティブなインタラクションの革命を見ることになるでしょう。

アニメーションを利用して、状態の変化を説明し、必要なアクションに注意を喚起し、要素間の関係を示し、わたし達の成果物に少しの楽しさを加えることができます。これらの原則を参考にすることで、アニメーションをGoodからGreatなものに変わるでしょう。

アニメーションを楽しんでください！

Related Posts

coliss