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

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

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

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

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

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

長津：「Lottie」ってどういうファイル形式なの？
パスの状態でムービーを書き出せる、もしくは連番で書き出せるって感じ？
須田：

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

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

須田：重たいですよね。
長津：重たい（笑）その反対にオフチェーンは、外から参照してきて、絵でいうところの枠みたいなモノだけがチェーンに乗っかってて、その中にサーバーとかIPFSっていう分散化されたサーバーがある感じ。そこから画像を参照してるわけ。

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

〆
編集：広渡