レビュー

『HACK The Nikkei』僕らが嫉妬したデザイン vol.2

2021.11.26

# シリーズ# エンジニア# レビュー

2021.11.26

日々あたらしく生み出されるデザイン。手放しにすごいと感動できるデザインもあれば、近い業界で働く私たちからするとつい嫉妬してしまうようなデザインも。
「やりたいと思っていたことを先にやられた!」「今の自分にはまだできない。悔しい!」などなど、プラスディー社員が嫉妬したデザイン事例を紹介していきます。第二回を担当するのは、リーダブル、メンテナビリティ、ハイパフォーマンスといったWebサイトの品質に関わる内部構造に関心が強いチーフフロントエンドエンジニアの竹内です。

PROFILE

竹内 康章 チーフフロントエンドエンジニア

竹内が担当したサイト
Hobonichi Co., Ltd.
"HOBO SIRI SIRI" PRODUCT SITE

Sony Music Entertainment (Japan) Inc.
SME OWNED WEB MEDIA


WED, Inc.
"ONE" SERVICE WEB SITE

私が嫉妬したのは、日本経済新聞社のデジタル人材採用サイト『HACK The Nikkei』。
まず目が行くのは、キービジュアルのWebGL(glsl)で描かれた水の波紋とパーティクルの動きの美しさ。日本経済新聞社のブランドカラーである青と、水の青、パーティクルの白が融合したデザインは、コピーの「メディアの未来を切り拓く」の通り、未来を感じさせます。数年前に公開されたサイトですが、未だにすごいと感じるデザインです。

マウスを動かすと流体の動きがシミュレートされ、軽快に動きます。
パーティクルを使用したアニメーションは多くのWebサイトで実装されていますが、動きが重たく感じることが多いです。それに対してこのサイトは非常に軽快に動いています。
さらに、色が混ざる時の軌跡を水のように見せるため、ゆっくりと混ざり合うよう工夫されています。

このサイトのエンジニアリングを担当された斎藤 健二さんによると、ベクトルの計算により流体シミュレーションしているとのこと。難しそうな数式が並んでいます。流体を自然に見せるため、「誰でも簡単に」とは言えない数式を使われていることが分かります。

さらにすごいと思ったのは、スマートフォンでもPC同様に軽快に動いているところ。通常なら、スマートフォンはパーティクルは諦めてシンプルに画像表示の実装に留まりそうなところを、スマートフォンでもPC同様の動きをつけている。そのパフォーマンスの良さに嫉妬しました。

どのようなインタラクションをし、ユーザー体験を生み出していくか。
力技で実装することができても、処理が重くなってしまうと、動きがぎこちなくなり良いユーザー体験にはなりません。『HACK The Nikkei』のように、心地よいギミックやアニメーションで、気づいたら良いユーザー体験をさせられている、そんなサイトをつくっていきたいです。

SHARE

FEATURE TOP記事ページトップへ