この記事は、「HIKKY開発者ブログ」より移動されたリバイバル記事となっています！
今後も専門的な記事をピックアップしていきますので、興味がある方はぜひご覧ください！

株式会社HIKKY・Webデザインチームの許飛です。
今回はWebデザインやUIデザインに使用するアニメーションについてのお話をします。

はじめに

「アニメーション」に対応する英語はanimationです。命や魂を意味するラテン語の「anima」に由来、字面から見れば、「命を吹き込む」というマジックですね。

そもそも人間がいつからこのマジックを作り始めたのかは謎です。かつての博学多才なアリストテレスでも現在の一番優れたギークでもはっきり言えません。今までに見つかった考古資料によると、旧石器時代にまで遡れるそうです。

5200年前のイラン人による、陶器のボウルに描かれたヤギが木の上に飛び跳ねる連続する絵は、最も古いアニメーションではないかと考古学者達は推測しました。

アニメーションの歴史
ヤギが木の上に飛び跳ねる

熱心なデザイナーはこの静止画に基づいて、下記のようなアニメーションに還元しました。躍動感満々ではないでしょうか！

The History of Web Animation.
ヤギが木の上に飛び跳ねるアニメーション

1990年12月20日、世界初のウェブページがイギリスで公開されてから、一時にページが爆発的に作られたものの、コンテンツはかなり少ない状態でした。アニメーションは言うまでもなく、画像も表示できず、ほぼテキストとハイパーリンクだけの状態でした。その後、GIFやFLASHがピカピカと登場し、人類は5000年前の夢を実現しました。

でも、GIFは256色までしか使えないし、大きいサイズのアニメーションはデータ量も大きくページの読み込み速度を遅らせるデメリットがあります。更に、FLASHもApple社との戦争で敗れて衰退しました。

なんだか《平家物語》のような哀れなストーリーですが、インターネット・ハードウェア・ソフトウェアの発展の恩恵をうけて、次々と新しいフォーマットが誕生していきます。そして、いろんなプログラミング言語・デザインツールの誕生・進化で、アニメーションの運用がウェブサイトのキービジュアルだけではなく、ページの隅々まで浸透していきます。

まさに今こそWebアニメーションの春が来たと感じています。

１．より広く浸透していくアニメーション

技術の進歩やデザイン理念に合わせて、今のwebにアニメーションは全面的に活躍しています。従来のスタートアップ、ヒーロー・キービジュアルとバックグラウンド、ページ トランジションを強調する一方、マイクロ アニメーションも浸透しています。

かつてほぼ静的に扱われたヘッダー、フッター、メニュー、アイコン、ボタン、テキスト、ポップアップ、フォーム、インプット、数字、エラーメッセージ、ページネーションなど何十種類のいろんなコンポーネント、画面の隅々までも動きをさせています。

[ Ledger ] Market
スタートアップ：モザイクのようなコラージュで画像を組み立てる

WeProfit - The software development marketplace
スタートアップ：シンプル、フィジカル、色鮮やかシェープを揺れて、拡大する

Isaac Fayemi — Group 256
トランジション：一面にかかった迫力がある煙を、対角線に展開

Ruben Wyttenbach, Index
トランジション：平面のストラップを取り入れる

Material Design
アイコン:Android material

Awwwards Nominees
アイコン:流暢なフェードイン・アウト

L'oiseau et le paresseux - Nouvelles fables
ボタン：浮遊しているような感じ

CSSボタンを演出する155個のHoverエフェクトまとめ
ボタン：trimpathを導入

Rocky Studio | Audiovisual Productions
メニュー：画像を表示する他、ぼかしも入れる

Ronin X6 — Designed without compromise.
展開アイコン：イーズインアウト

2. ジェスチャーの運用

以前のアニメーションは位置、オパシティ、サイズ、色、変形などほんの僅かだけのアニメーターですが、今はかなり豊富になりました。また、ジェスチャーと交互して、更に相乗効果があり、ナビゲーションの効率が高いし、Fluidを用いることで流動的な印象を与えることも可能です

https://korolev.apokrif.media/en/
スクロール：テキストをマスクとして

WOW-page | For Startup
スクロール：コンテンツの表示

Heresto Vodka
スクロール：パララックス

Marija Vitasovic | Digital design portfolio
ホバー：画像に僅かな動きを入れることで、エレガント感が一層アップ

Luaka Bop
ホバー：シェープかテキストのカラーが変わることで、コンバージェンスを促進させる

Rocky Studio | Audiovisual Productions
ホバー：カーソルがコンテンツとブレンド

Ruben Wyttenbach, Index
ホバー：カーソルをフォローしてloading状態を表示

3. 3Dオブジェクトと3Dエフェクトの取り入れ

今までのwebデザインは大体２つの流れが存在しています。つまりflat designとスキューモーフィズム（skeuomorphism）です。点線面をシンプルにすればするほど極めるflat designに対して、後者は外見に似せたデザインを求め、なるべくテキスチャー、質感、ハイライトやシャドウなどで3Dのエフェクトを表現したいです。しかし、データ量が多くて、ローディングがガチャガチャ、閲覧の体験に支障になり得るです。

回線速度やハードウェアの進化のおかげさまで、ローディングの問題は段々と解消していて、Unity/Blend/Houdiniなどの3Dツールで作ったモデルとシーンを取り入れるアニメーションも増えていきます。そして、もっとインタラクティブです。

Bao Society
3Dスクロール：リアルタイムなシャドウの表現

NODO x MAX | Inertia Wheels
3Dスクロール：リッチで迫力溢れる

TES Hydrogen for life — Green Cycle
3Dスクロール：地形の展開

Ronin X6 — Designed without compromise.
3Dスクロール：カルーセル

弊社vketちゃん：3Dモデルにパーティクル

4. アニメーション作成ツールと可能性が爆アップ

デザイナーがアニメーションを作成する際の定番的なツールはAdobe effectsとanimateですが、版を重ねるごとに機能がますます盛り込まれています。また、Trapcode,Stardust,Newton,sapphireのような色々なプラグインも増えており、よりリッチな視覚効果やシミュレーションがもっと手軽にできるようになりました。

また、そのような重いツールの他に、使い勝手の良い手軽なツールも人気を博しています。SVGatorやLottiefileなどは、僅かなステップでSVGアニメーションを生成できますし、ノーコード・ローコードで実装できます。デザイナーにもプログラマーにもフレンドリーなツールです。デザイン・開発工数も短くなります。

プログラマーなら、CSS、Javascript、HTML5などを使って、コードでも複雑なアニメーションを作る可能です。更に、色々なライブラリを利用して、デザイナーに負けないエフェクトを作成できるようになりました

SVGator
手軽なSVGアニメーションツール

Virtual AKIBA World | バーチャル アキバ ワールド
弊社でJR EAST様のコンテンツ用に作成したボタンアニメーション

まとめ

デザイン ツール・プログラミング言語・ブラウザの進化により、webアニメーションの無限の可能性が開きました。アニメーションを通じて、ビジュアルの機能を果たすだけではなく、情報設計の一環として、よりクリエイティブ、直感的な、ユーザフレンドリー、命や魂があるUIに貢献できると思います。

ぜひお楽しみください～

オススメ記事