Advertisement

4-animation-techniques
 
機能的で楽しいアニメーションは、現代のウェブデザインに欠かせない重要な要素のひとつです。論理的に考えられたアニメーションを活用することで、ウェブサイトに大きな違いを生み出します。アニメーションはステータスを伝えたり、注意を引くことはもちろん、ユーザーの行った行動の結果をうまく表現できます。

 

今回は、より快適なウェブサイト体験を実現するために加えたい、アニメーションの制作テクニックをサンプル例と一緒に詳しく見ていきましょう。

 

 

進行状況(英: Progression)

ローディング・アニメーション

ウェブデザインに使われるアニメーションでもっとも一般的なもので、ページの読み込みに関係しています。ローディング・アニメーションは、コンテンツを読み込むまでの待ち時間をユーガーが短く感じられるように工夫されています。

 

シンプルな動きがローディング・アニメーションにとって最適で、音や余計なエフェクトなどは必要ありません。読み込み中になにか楽しく面白いものがあることで、ユーザーはあまり待ち時間が気になりません。

 

 

loading-animation-top
開いているウェブページが読み込み中であることを、分かりやすく伝えるローディングアニメーション。これまではGIFなどで作成されることもしばしばでしたが、CSSの進化に

 

進行型アニメーション(英: Progress Animation)

アニメーションは、線型に変化することで進行状況を伝えることができます。ローディング・バーは、もっとも分かりやすい例と言えるでしょう。

 

 

複数のステップ順に分けることで、進行状況をより分かりやすくすることもできます。

 

 

スケルトン・スクリーン(英: Skelton Screens)

スケルトン・スクリーンとは分かりやすく言うと、コンテンツ情報が徐々に読み込まれている様子を表した、ページの空白バージョンです。画面上で情報が徐々に表示されるので、読み込みがすぐに始まっているという感覚を生み出します。さらに、スケルトン・スクリーンに控えめなアニメーションを追加することで、ユーザーをコンテンツに集中させてくれ、多くのサイトで役立つテクニックと言えるでしょう。

 

コンテンツが完全に読み込まれる前に、スケルトンスクリーンがUIを徐々に完成させます。

 

 

ビジュアル・フィードバック(英: Visual Feedback)

ユーザーの行動に対する反応アニメーション

 

優れたインタラクションデザインは、さまざまな行動結果を伝え、視覚的に理解できるフィードバックを提供します。サイトを訪問したユーザーがどの要素を操作でき、どのようなことが起こるか予想できない場合、混乱の原因となってしまいます。この問題を対処するには、はっきりと明確で分かりやすいインタラクションを設計するように心がけましょう。

 

ホバーアニメーション(英: Hover Animation)

要素がインタラクティブであることをうまく示す方法として、ホバーエフェクトはビジュアル・フィードバックの中でも一般的なサンプル例のひとつと言えます。

 

ユーザーはどんな機能なのか疑問に思うと、その要素の上にマウスを移動する傾向があります。直感的にアピールできるホバーアニメーションを活用してみましょう。

 

ただしモバイル端末ではマウスカーソルがないため、ホバーエフェクトは適用できません。つまり、ボタンや他のデザイン要素は、ユーザーがその要素をタップできるかどうか、瞬時にフィードバックを提供する必要があると言えます。以下のサンプル例のように、このようなフィードバックは、ボタン要素をクリックしたときにふわりと浮かび上がるなど、ユーザーが操作している感をうまく表現できます。

 

 

image-hover-effect-top
ウェブサイトを魅力的に仕上げるだけでなく、ユーザーの注目を集めることができる、アニメーション・エフェクト。今回は、サイトコンテンツ表示に活用できる、HTML/CSS

 

注目をあつめる(英: Attracting Attention)

わたしたちの目は、動きに引きつけられるのはよく知られています。こういった背景もあり、アニメーションはうまく注目を集め、ユーザーが実行しているアクションを強化できる最適なツールとなるでしょう。

 

たとえば、お問い合わせフォームなどの入力はいくつかのアニメーションを加えることで、使い心地を大幅に強化することができます。正しいデータが入力されていれば、完了時に「うなずき(英: nod)」のような動きを導入してみましょう。反対に、入力に間違いやエラーがあるときは、首を横に振るような「拒否」アニメーションを加えてみましょう。ユーザーがこれらのアニメーションを見ることで、すぐに何を意味しているのか理解することができるでしょう。

 

 

7mobile-animation-top (1)
海外デザインブログ Yalantis で公開された「7 Types of Animations for Your Mobile App」より許可をもらい、日本語抄訳

 

ナビゲーション(英: Navigation)

関係性と移り変わり

 

最近の傾向として、ハンバーガー型アイコンをクリックすることで開閉するナビゲーションメニューに人気が集まっています。ページ遷移などシームレスなWeb体験を表現するには、アニメーションは不可欠となります。うまく設計された移り変わりによって、ユーザーはどこに注目すべきかはっきりと理解することができるでしょう。

 

アニメーションを利用することで、遷移や移行している様子がはっきりとし、ユーザーは何が起こっているのか分かりやすくなります。

 

以下のサンプル例では、ユーザーが矢印ボタンをクリックすると、右側から大きなメニューボックスが表示されます。「ポップアウト」型アニメーションは、スライドするアニメーションによって、全体のやりとりをスムーズに行うことができます。

 

アニメーションは、コンテンツの結びつきにも役立ちます。

 

100css-menu
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイル
mobile-alternative-menu-1
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているの

 

なめらかなコンテンツ遷移

遷移(英: Transition)は、状態が変化している様子を表現するのにとても重要です。以下のサンプル例では、同じページ内の異なる項目へと移動するリンクをクリックすることで、ページ遷移のストレスなく移動でき、アニメーションがいかに役立っているのかうまく説明しています。

 

以下の2つのサンプル例を比較すると分かりやすいでしょう。まず、コンテンツ遷移にアニメーションを適用していないケース。

突然変化してしまうため不自然な動きで、ユーザーにとってコンテンツを読み進めるのがむずかしいインターフェース。

 

そしてこちらがコンテンツ遷移にアニメーションを適用したケース。

アニメーションを加えることで、なめらかな動きを実現できました。

 

ほんのわずかなアニメーションを加えることで、ユーザーがどの項目なのか確認するのに役立ちます。

 

sem_t_tulo-1-1
動き(英: Motion)は物語、ストーリーを伝えます。たとえば「これを今、見てみましょう。」、「操作がうまく完了しました。」など、あまり長くなく、複雑ではないスト

 

クリエイティブなエフェクト(英: Creative Effects)

 

クリエイティブなアニメーションは、ユーザーエクスペリエンスをより楽しく、印象に残るものにできます。アニメーションを利用することで、エンターテイメント性をインターフェースに追加できます。

 

ストーリー性のある長いスクロール(英: Storytelling Long Scrolling)

スクロールしないで閲覧する事のできる画面領域(英: Above the fold)の考え方が、長い間一般的だったため、デザイナーはこの範囲にできるだけ多くの重要な情報を集めるよう設計していました。幸運なことに、現在ではこの考え方が、絶対ではなくなってきています。実際に、通常のウェブページのおよそ66%では、スクロール後のコンテンツ閲覧が行われています。スクロール前後のコンテンツに注目するには、インタラクションにとってスクロール操作が重要になります。

 

ストーリー性のあるアニメーションは、ありふれたインターフェースに感情的なつながりを加えます。一般的となったパララックスアニメーションの代わりに、より控えめに最適化されたものを選びましょう。サイトをスクロール可能にするために、コンテンツをバラバラに分割するように考えてみましょう。分割された各コンテンツをアニメーションを使ってシームレスにつなげてみましょう。

 

以下のサンプル例では、シンプルなイラストをアニメーションさせることで、コンテンツを魅力的に仕上げているのが分かります。

 

animation-principle-top
PhotoshopVIP編集部: 2015年3月30日に公開された記事を再度編集、追加しています。 フロントエンド・デザイナーやデベロッパーは

 

参考にしたいツールやアニメーション関連記事

  • 15 UI Animation Tutorials : ウェブアニメーションの初心者向け入門ガイド。
  • Web Animations : W3によるウェブページとAPIniyoruアニメーションの同期とタイミングまで紹介した中級ガイド。
  • CSS3 Animation Cheat Sheet : CSSのクラス名を記述するだけで、どんな要素にも対応できるアニメーション用コレクション。
  • Tools to Create Animation With : アニメーション制作に役立つ16個のツールをご紹介。

 

さいごに。

デザインは見た目だけでなく、インタラクションが関係しています。アニメーションはわたちたちのコミュニケーションにとって重要で、ウェブサイトというインタラクティブな性質をうまく取り込み、デザインの一部として考えることが大切です。

 

functional-animation-in-ux-design
機能的なアニメーション(英: Functional Animation)とは、論理的ではっきりとした目的を持った、控えめなアニメーションを指します。読み込み時間を短
functional-animation-top
ウェブサイトが進化することで、これまであまり検討されることがなかった新しいデザイン要素、「アニメーション(英: Animation)」がより重要視されるようになって

 

参照元リンク : Popular Web Animation Techniques by Nick Babich – UX Planet | Medium