allWeb制作フローが変わる!便利な最新オンラインツール43個まとめ【2020年版】2020年2月21日ずっと使える、デザインの基本まとめました。Animation)とは、論理的ではっきりとした目的を持った、控えめなアニメーションを指します。読み込み時間を短く感じさせるだけでなく、ユーザーインターフェースに生命を吹き込みます。インターフェースデザインを掛けあわせたり、分割したり、シェイプやサイズを変更することで、まるで人間のように、生きているような動きを実現できます。ナビメニューに応じてユーザーをスムーズに移動させたり、スクリーンに応じて要素が整理、変更されるのを伝えたり、デザイン要素の階層を補強するために、機能的なアニメーションを利用するように心がけましょう。今回は、アニメーションをうまく利用する6つの基本原則、テクニックをまとめてご紹介します。Feedback)はとても重要で、ユーザーの操作をうまく通知します。日常生活においてボタンなど、わたしたちの操作に反応する動きを期待しています。ユーザーインターフェースの反応は素早くすることで、どこをクリックしたか正確に伝え、新しいインターフェースと作成した要素との関係をうまく示します。サイトやアプリ全体をクリックしやすくなり、何が起こっているのかすぐに分かるようになるでしょう。関連性のあるアニメーション新しく作成されたパーツや、行った動作との関連性をうまく示しましょう。この関連性のある結びつきに関する考え方は、ユーザーがどのようにレイアウトが変更され、何が変更する引き金、トリガーになったのか理解しやすくする、という論理から成り立っています。以下は、2つのナビメニュー用のアニメーション変化です。ひとつ目は、タッチしたボタンから離れたところから表示され、関連性テクニックをうまく活用できていません。ふたつ目はタッチしたポイントからメニューが表示されています。することで、タッチしたポイントとの結びつきをうまく表現できます。ひとつの参考例は、特定の状況で機能が変化するボタンで、「再生」や「停止」ボタンがもっとも一般的でしょう。再生ボタンから一時停止ボタンに変化することで、ふたつの動作がリンクしていることを意味し、クリックすることで片方だけを見えるようにしています。ここにアニメーション遷移を加えるときは、スムーズな動きで、とぎれとぎれにならないようにしましょう。自然なアニメーションユーザーがびっくり驚いてしまうようなアニメーション遷移は避けましょう。それぞれの動きは、日常生活における動きに影響されるべきで、スピードが早くなったり遅くなったりするのには、物体の重さや表面の摩擦が関係しています。同じような考えとして、はじまりと終わりに間を置くことで、より心地よいインターフェースデザインを実現できます。以下のサンプルでは、ユーザーがリストをクリックすると、詳細がズームで表示されます。カードのサイズが大きくなるときに、曲線を描きながら展開しているのが分かります。意図的なアニメーション着目したいポイントに、うまいタイミングで誘導しましょう。ユーザーインターフェースにおいて動きは、もっとも目立つ要素です。文字テキストや画像イメージも、アニメーションには勝つことはできないでしょう。良いアニメーション遷移は、次のステップへとユーザーを誘導するのに役立ちます。訪れたユーザーは、次に何が起こるか予想することができませんが、適切なアニメーションは、ユーザーがどこにいるのか確認でき、コンテンツが急に変更されないように工夫されています。ウィンドウを最小化するときにこのアニメーションを利用しており、最初と次のステップのつながりをうまく理解することができます。ひとつのサンプルは、リストやカード要素を選択することで、詳細はズームで表示されるアニメーション遷移で、こちらもコンテンツの結びつきを理解しやすくなっています。素早いアニメーション要素にアニメーションを加えるときは、待ち時間がない程度に素早く動かし、変化を理解できる位の遅さに調整しましょう。不要な時間ラグや、持続時間が長くなるような遅いアニメーションは利用しないようにしましょう。アニメーションを遅くすることで、ページ読み込みが完了するまでの時間が長くなってしまい、最終的にユーザビリティーを損ねてしまいます。アニメーションを素早くすることで、ユーザーはアニメーションが終わるのを待つ必要がありません。以下に設定すると良いでしょう。したアニメーションページ遷移では、複数のアイテムが異なる方向や向きに移動することで、ユーザーが混乱しやすくなるので、あまり多くの要素を一度に動かすのは避けましょう。アニメーション遷移ははっきりと、シンプルで、首尾一貫となるようにしましょう。More)」の考えを念頭に入れておきましょう。いかがでしたでしょうか。このようにアニメーションは行き当たりばったりではありません。それぞれの動作の裏には、はっきりとした目的があります。アニメーション遷移によって重要なポイントに着目させ、ユーザーが迷子になるのを防いでくれます。ウェブサイトやアプリんのプロジェクト内容に関わらず、これらの基本原則を利用することで、よりはっきりと、分かりやすい体験を提供できるでしょう。気配りをもってデザインしましょう。それぞれのディテールに目を向けることが、より人間らしさを加えたアニメーションをデザインする鍵となるでしょう。Postsウェブサイト制作に欠かせない、アニメーション人気テクニック4つまとめ2017/02/09ウェブ考察Webアニメーションを極める、5つのデザインテクニックまとめ2015/05/262017年に注目したい、グラフィックデザインの最新トレンド9個まとめ2017/05/16CSSアニメーションを効果的に活用する、最新デザイントレンド6個まとめ2015/03/20"ウェブ考察"の最新記事はこちらずっと使える、デザインの基本まとめました。