2012年当時、CSS3は手品のように感じられるほど新しいものでした。グラデーション、角丸、トランスフォームがようやくすべてのブラウザに搭載されたばかりで、私たちはそれがどこまで行けるのかを知りたかったのです。そこで、それらを使って絵を描きました。スーパーヒーローのシリーズ（Superman、Batman、Wolverine、Spider-Man、Iron Man、Hulk）、続いてR2-D2、そしてドンキーコングJR.のGame & Watch。画像もcanvasも使わず、ボックス、ボーダー、グラデーションを何かに見えるまで重ねただけです。
ヒーローはそれぞれ約1日、R2-D2は4日かかりました。Game & Watchは1週間。レスポンシブにしたい誘惑に勝てなかったからです。
今年、私たちはその8点すべてに立ち返りました。自分たちへの課題はシンプルでした。同じ題材を、14年の時を隔てて、懐かしさによる割り引きなしで。それぞれをまったく異なる2つの手法で作り直し、3つのバージョンすべてをThen & nowで並べて見られるようにしました。
2つのリメイク、2つのルールブック
レンダリング版はオリジナルの直系の子孫です。純粋なHTML & CSSで、今も画像、SVG、canvasは使いません。変わったのは、そのルールを取り巻くすべてです。現代のCSSには、本物の色の混合ができる重ねたグラデーション、有機的なシルエットのためのclip-path、ブレンドモード、柔らかな光のためのフィルター、ひとつの値でキャラクター全体を動かせるカスタムプロパティがあります。2012年のヒーローは平面的な切り絵でした。2026年のヒーローには、彫刻的な光、質感のあるスーツ、そして天候があります。
3D版はルールブックを捨てます。各作品はBlenderのPython APIを使ってコードで造形し、ひとつのモデルファイルとして書き出し、ブラウザ上でthree.jsによってリアルタイムにライティングしています。ドラッグで回転でき、どの作品も長押しすると何かが起こります。
同じ題材を、14年の時を隔てて、懐かしさによる割り引きなしで。
どの作品にも動きがある
眺めるだけの絵ではもったいないと感じたので、各リメイクには遊べるアイデアをひとつずつ入れました：
- Supermanのヒートビジョンはポインターを追いかけ、当たった場所を焼き焦がします。
- Batmanは雨の屋上で待っています。長押しすると、バットシグナルが雲を照らします。
- Wolverineの爪が、効果音とともに飛び出します。
- Spider-Manがウェブを放ちます。
- Iron Manがリパルサーとユニビームをチャージし、フェイスプレートが開いて中のトニーが現れます。
- Hulkは長押しするまでは落ち着いていますが、押すと咆哮します。
- R2-D2はビープ音を鳴らし、3D版ではホログラムを投影します。
- Game & Watchは遊べます。オリジナルのワイドスクリーン、Game Boy、キーホルダー型のMini Classicという3つのデバイスで、ひとつの液晶ゲームを。
どれも小さなことですが、それがイラストとソフトウェアの違いであり、私たちがつくっているのはソフトウェアです。
14年で変わったこと
正直に言えば、変わったのはCSSそのものよりも、私たちの仕事の進め方です。2012年には、すべてのグラデーションが当て推量で、見た目が正しくなるまで更新しては微調整していました。2026年には、ディテールのどこが間違っているかを見て、その理由を説明し、原因を直すことができました。Spider-Manのレンズが中心からずれて見えたとき、原因は描き方ではありませんでした。片方のレンズがもう片方の鏡像コピーで、中心からずれた支点を軸に反転されていたのです。修正は数値ひとつでした。
3D作品は、同じ教訓をより大きなスケールで教えてくれました。コードだけで顔を造形するのは難しく、最初の頭部は粗いものでした。それと格闘する代わりに、Blender Studioが無料で公開しているCC0の人体ベースメッシュから始め、スクリプトで各キャラクターへと形を整えました。手も同様です。その過程についてはBlenderとコードでスーパーヒーローを造形するで詳しく書いています。
すべてを並べる博物館の棚
2つの手法で8作品となると見るものが多いため、Then & nowの冒頭は博物館の棚にしました。8つの3D作品すべてが、ゆっくり回るターンテーブルの上で、それぞれスポットライトを浴びた小さな彫像として並びます。彫像はフルモデルの軽量版で、ページが落ち着いてから読み込まれるため、スクロールするまでほとんど負荷がかかりません。どれかをクリックすると、その行へ直接移動し、2012年のオリジナルが2つのリメイクと並んでいます。
秘密もあります。コードを知っているなら、試してみてください。
なぜわざわざやるのか
ラボは昔から、必要になる前に試す場所でした。2012年のヒーローは、クライアントワークでその技術を使う何年も前に、CSSに何ができるかを教えてくれました。2026年のリメイクは、プロシージャルな3D、リアルタイムのライティング、そしてスマートフォンでも素早く読み込まれるインタラクティブな作品づくりについて、同じことを教えてくれました。次にクライアントが動くものを必要としたとき、私たちはすでにその限界を知っているはずです。
すべての作品を見るか、3DのSupermanから始めて長押ししてみてください。