【デザインニュース】vol.3　Lottieで広がるSVGアニメーションの世界

=================================================
長津：カドベヤCOO／弊社WEBディレクターの長(おさ)的存在
須田：UIデザイナー／ゲーム・ドラムに日々没頭
竹田：WEBディレクター／サウナのためなら全国に出没
森山：WEBディレクター／無類のガジェット好き
古川：WEBディレクター／クリエイティブ部マネージャー
=================================================

🔳　今週のピックアップ　「Awwwards特設サイト」

UIデザイナー須田によるデザインコーナーvol.3。
今週の須田的ベストデザインは「Awwwards特設サイト」。

須田：こちらはAwwwards（アワーズ）という全世界のウェブサイトを採点する機関のHPです。
長津：端っこにアワーズっていう帯がかかっているヤツとかあるよね。
須田：そうです。アワーズで受賞するとブランドとして世界でも通用するという結構すごい賞です。これは年に1回今年のNo.1のサイトを決める、そういう一大イベントの特設サイトになります。
去年か一昨年、日本が会場になった事もあるみたい。
長津：え？そうなんだ。
須田：チケットを購入すると、リアルで開催されているイベントに行って、Adobeの方からトークが聴けるっていうイベントもあるみたいです。
長津：今年の開催場所はアムステルダムか。
須田：そうですね。このサイトって、アワーズが主催するイベントであり、公式サイトになるので、最先端技術や流行りのコンテンツがギュッと詰まったサイトになっているなぁ、と思いました。

長津：たしかに。今のスパンキーっていうさ…このサイトに載ってるキャラクターがいるんだけど、これのNFT持ってるよ。（参考：Super Freak）

長津：スーパー・フリークってアーティストがやってて、イケてるよね。
須田：かわいいです。この動いてるイラストは、画質的にガッツリSVGのアニメーションだと思うんですよね。画質もキレイだし、GIF画像みたいに荒くないですよね。
長津：たしかに！イラストの線もキレイだし、めっちゃかわいいよね。
須田：ここまで動かすのにどれだけ労力が居るんだろう…って思いながらこのイラストを見てました。
長津：でも全部描いてるでしょ？あと、3Dじゃないよね？
須田：描いてると思います。3Dでもないと思います。パスで書いて、瞳が線になった時とかの差分を全部用意して、動き自体は「After Effects」と、あとは「Lottie」かな。
長津：なるほど。じゃあ、カーソルがあったら動き出すこともできる？
須田：できると思います。どうやらこれは一定の時間でループしてるようですね。
長津：かわいいな。スーパー・フリークのスパンキーも、アニメーションしてる感じだよね。
須田：そうですね。これもすごい画質がきれいだから、おそらくパスで出力していますね。

🔳　Airbnb開発アニメーションライラブリ「Lottie(ロッティー)」

長津：「Lottie」ってさ、どういうファイル形式なの？パスの状態でムービーを書き出せる、もしくは連番で書き出せるって感じ？
須田：静止画じゃなくて「Lottie」で書き出すと、Jsonという形式で長いソースコードが書き出されるので、それをフロントエンドエンジニアの方にSVGアニメーションとして映るように実装してもらう感じ。

長津：なるほどね。須田：ボタンを押した時とかのトリガーの設定とかもどうやら対応できるみたいです。長津：住友林業でも同様の事をしたよね。SVGって中身を見るとコードがすごい長いよね。須田：そうですね。Canvasって書いてるから、おそらくSVGアニメーションのはずです。長津：こういう表現方法もあるんだね。あえてレトロにしてる表現って事でしょ？須田：そうですね。レトロなキャラクターと配色だけど、やってる事は割りと最先端ですね。

長津：すごいね、面白いね。Web3.0でもオンチェーンとオフチェーンというのがあって、オンチェーンは、ブロックの中に（イーサリアムのブロックに）書き込まれてるモノになるわけ。だから、画像データとか参照してくる感じじゃなくて、書き込まれてる状態にするの。つまり、Web3.0のオンチェーンでは、SVG状態のモノが直に書き込まれてるわけ。ただ、そんなに沢山書き込めるわけじゃないから、エイトビートのガビガビしたデータっていうのがオンチェーンデータになるって事が多い。

須田：重たいですよね。
長津：重たい（笑）その反対にオフチェーンは、外から参照してきて、絵でいうところの枠みたいなモノだけがチェーンに乗っかってて、その中にサーバーとかIPFSっていう分散化されたサーバーがある感じ。そこから画像を参照してるわけ。その結果、Web3.0のオフチェーンでは運営母体が潰れたりしてサーバーの契約が終わったら、NFT自体がなくなっちゃうのよね。Not Foundになるわけ。

須田：なるほど。
長津：それが全部オンチェーンになってたら、運営母体がどこであろうと、その人達が消え去ろうと、永続的にチェーンの中に残るっていう事が保証されるからいいんだよね。本格的なNFTみたいな。
須田：内包してるか、借りてくるか、みたいな感じ？
長津：そう！だから完全分散化していてどこにも依存していないっていう状態がオンチェーン。これまであまりSVGの価値を解ってなかったけど、やっとこういう風に使うデータなんだなって解った。
須田：SVGのアニメーションってリッチですからね～。スマホとかでも、待ち時間のスプラッシュが可愛かったりするとあまりイライラしない。演出としてかなり大事なポジションだと思います。
長津：なるほどね。面白いね。じゃあ今日はここまで。アディオス！

〆
編集：広渡