Webアニメーションの春が来た
株式会社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に貢献できると思います。
ぜひお楽しみください～