見出し画像

Webアニメーションの春が来た

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

開発者ブログの人気記事
HIKKYに入社しました!いいところですよ。
【Virtual Market】Vket Quest会場の移植をしてみて:前編
HIKKYでのWebGL開発模様

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

はじめに


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

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

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

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

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

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

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

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

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

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

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

技術の進歩やデザイン理念に合わせて、今の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デザインは大体2つの流れが存在しています。つまり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に貢献できると思います。

ぜひお楽しみください~

2022年12月26日 開発者ブログに投稿
2023年5月9日 Vketマガジンに再投稿


オススメ記事

この記事が参加している募集

みんなにも読んでほしいですか?

オススメした記事はフォロワーのタイムラインに表示されます!