ショートアニメーションを取り入れたWebデザイン事例9選。Webサイトに動きをプラスする

Web上のいたるところで活躍しているアニメーション。ヒーローエリアに配置して第一印象を強めるだけでなく、他のセクションにも活用することで、表現をぐっと豊かにしてくれます。

そんなアニメーションのトレンドは、年々移り変わっています。現在のトレンドはズバリ、スタイリッシュなショートアニメーション。短時間で要点を伝えられるので、クイックさが求められる現代にぴったりですね。

今回はショートアニメーションを取り入れたWebデザインを9事例ご紹介します。実例をとおしてトレンドをつかみましょう！

1. Syscoin

Syscoinはブロックチェーンという少しハードルが高い分野を扱っているため、ライトな印象をあたえるショートアニメーションで、サービスとユーザーのギャップを埋めています。

またWebサイト全体に散らばっているイラストも、複雑な概念をシンプルに伝えることに役立っていますね。ショートアニメーションやイラストには、ユーザーに親近感を抱かせる効果があります。

Syscoin

2. The Digital Panda

ショートアニメーションが活きるのは、難解な概念の平易化だけではありません。

こちらは広告制作会社の公式ウェブサイトです。ショートアニメーションを用いて、日常的な会社のルーチンを再現しています。アニメーションで活躍しているのは、社名にも入っているパンダです。

The Digital Panda

3. CAMO

左側に表示されるメッセージをよりわかりやすく伝えるために、右側にアニメーションがついた小さなイラストを配置しています。

派手なアニメーションで注意をひくのではなく、あくまで補助的な役割に徹しているところがポイントです。

CAMO

4. Zapare

今までご紹介した例よりも、さらに短く細かいアニメーションが採用されています。

細部の動きのみにアニメーションをつけることで、必要な情報だけをきちんと伝えています。

Zapare

5. Junto

チームメイトと協力して仕事に取り組んでいる様子を、非常に限定的な動きのショートアニメーションで表現しています。

動いているのは細かな部分だけですが、こうした小さな動きがあるのとないのとでは、印象はまったく異なるはずです。

Junto

6. Gegenbauer

社内の複数の部門を、ショートアニメーションでそれぞれ紹介しています。カーソルをあわせるとキャラクターが活発に動き始めるギミックがおもしろいですね。

選択している部分以外をぼかすなど、細かな工夫が見て取れます。

インタラクティブな要素とショートアニメーションを組み合わせるなら、ぜひお手本にしたい、遊び心あふれるデザインです。

Gegenbauer

7. Creative Canopy

ヒーローエリアだけでなく、アイコンから小さな図面までさまざまなところにアニメーションが埋め込まれています。

圧倒的なアニメーションの数にもかかわらず野暮ったく見えないのは、アニメーションがシンプルで短いためでしょう。

Creative Canopy

8. Mutify for Mac

補助的なショートアニメーションによって、Webサイトに活気と統一感を与えています。

とくにヒーローエリアのアニメーションからは、音楽業界特有の雰囲気を感じ取れるはずです。

Mutify for Mac

9. Cortex Copywriter

ヒーローエリアのイラストに、ちょっとしたアニメーションをつけています。会社のビジョンを鮮やかに表現し、テーマをいきいきと伝えていますね。

Cortex Copywriter

おわりに

イラストにちょっとしたアニメーションがついていると、ついつい目で追ってしまいませんか？

アニメーションはいわば漫画のようなものです。トレンドの中身は入れ替わっても、存在そのものの魅力が失われることはありません。

またショートアニメーションは、たしかにトレンドのひとつですが、すぐに飽きられて消えてしまうような存在とは異なります。シンプルだからこそ応用がきいて、冷たい印象になりがちなデジタルの世界に温かみを与えられる、将来性のある存在なのです。

（原文：Nakajima Asuka　翻訳：Nataly Birch）

こちらもおすすめ！▼