2003年の憧れをWebの背景に。Flashの世界的名作「Walking Things」へのオマージュと、デザインに遊び心を込める理由

当社リアルトのWebサイトを訪れた際、背景で動き回る小さな生命体のような存在に気づいた方はいるでしょうか？

実はあれ、ただの背景デザインではありません。 2003年、Webの世界を熱狂させていた「Flash」全盛期の名作ジェネラティブ・アートへの、深いリスペクトと情熱を込めたオマージュなのです。

今回は、トップページの背景に隠された開発の裏側と、私たちがモノづくりで大切にしている「遊び心」について少しお話しさせてください。

原点となった作品：J. Tarbell氏の『Walking Things』

私がクリエイターとして駆け出しだった頃、画面越しに見て心を奪われた一つのプログラムがありました。

ジェネラティブ・アートの先駆者である jtarbell（ジェレッド・ターベル）氏が2003年3月に発表した『Walking Things』という作品です。

── J. Tarbell 氏による原文（2003年3月）

"Walking Things is an environment that generates small, walking computational organisms. Each walking thing is built up from totally random conditions. Appearance, behavior, and walking characteristics are all assigned from a range enabling effective, functional mobility.

Click on a walking thing to permutate its characteristics.

The Flash MX programming environment is perfectly suited for building these types of creatures. Each bug is composed of a set of smaller parts which some, in turn, are composed of even smaller parts. This hierarchical assembly makes programming the behavior of the bug very simple.

All walking things use a 3 x 3 gait, where only three legs are moving at any given time. Each walking thing has a head that maintains direction and destination. A walking thing always walks towards its destination until reaching it, then resets.

The walking thing uses a crude system of 'dragging along' its center of gravity. A limitation in the turn radius is also imposed.

Currently, the walking things are completely unaware of each other. This might be an interesting place to start modifications."

── jtarbell, march 2003

── 上記の日本語訳

『Walking Things は、歩行する小さな計算生命体を生成する環境です。それぞれの「Walking Thing」は完全なランダム条件から作られており、外見、振る舞い、そして歩行特性はすべて、効果的で機能的な移動を可能にする範囲の中で割り当てられています。

Walking Thing をクリックすると、その特性を変化させることができます。

Flash MX のプログラミング環境は、この種の生物を構築するのに完璧に適しています。それぞれの虫（バグ）は一連の小さなパーツで構成されており、その一部はさらに小さなパーツから構成されています。この階層的な組み立てにより、虫の行動プログラミングが非常にシンプルになっています。

すべての Walking Thing は「3×3 歩進法（三脚歩行）」を使用しており、常に3本の脚だけが動いています。それぞれの Walking Thing には方向と目的地を保持する頭部があり、目的地に到達するまで常にそこへ向かって歩き、到達するとリセットされます。

Walking Thing は、重心を「引きずる」ような簡易的なシステムを使用しています。また、旋回半径にも制限が設けられています。

現在、Walking Thing たちはお互いをまったく認識していません。このあたりは、修正を加えてみるのに面白い出発点になるかもしれません。』

ランダムなパラメーターから生成され、独自の足取りで目的地に向かって歩き続ける不完全で愛おしい小さな生命体たち。当時、Flashでこんなにも滑らかで生き生きとした表現ができるのかと、心底ワクワクしたのを今でも鮮明に覚えています。

「いつか自分も、見る人を一瞬で惹きつけるようなアイデアとプログラミングを融合させたクリエイティブを作りたい」──それが、私のエンジニアとしての原点の一つでした。

20年の時を経て、現代のWeb（HTML5/JavaScript）で再構築する

時代は流れてFlashは役目を終えましたが、あの時感じた「技術で表現を生み出す楽しさ」は、今も私たちの根底に息づいています。

今回、リアルトのトップページを構築するにあたり、あの『Walking Things』のロジックや美学をオマージュし、現代のWeb技術（Canvas / JavaScript）を使って自社サイトの背景として一から再構築・実装しました。

サイトを開くたびに、少しずつ異なる形や動きを持ったプログラムが自律的に動き回ります。

タップすると毎回異なるパーツで再構築され新しい生命体が生まれます。そして衝突せずに動きます。角をもった生命体は他の生命体を跳ね飛ばすようにしています。

一見すると、ビジネスのWebサイトには「なくても困らない機能」かもしれません。しかし、こうした「技術的な探求心」や「目に見える数字以上のこだわり」こそが、Webサイトやアプリに独自の魅力や愛着をもたらすと私たちは考えています。

「遊び心」と「確かな技術」で、現場の課題を形に

私たちリアルトは、単に言われた通りの仕様書をこなすだけの会社ではありません。

今回ご紹介した背景の仕掛けのように、

• 「どうすれば使う人がワクワクするか？」

• 「どうすれば複雑な課題を、美しく直感的な形に落とし込めるか？」

を常に考え、デザインとシステムの両面から柔軟にアプローチすることを強みとしています。

「頭の中にぼんやりとした構想はあるけれど、どう形にすればいいかわからない」 「自社らしい遊び心や、使いやすさにこだわったシステムを作りたい」

そんな想いをお持ちの経営者様や事業責任者様、ぜひ一度、曖昧な構想のまま私たちにご相談ください。対話を通じて課題を一つひとつ整理し、現場で本当に愛されるWebサイトやアプリを、確かな技術とデザインで共につくりあげます。