Hiroshi KOI.
Design Engineer.
.log は、Flashを起点に始まった nulldesign.jp の、もう一つの側面を記録した個人プロジェクトである。2013年頃、Flashでの表現を続けていた制作者が、iPhoneの台頭とともに変化し始めたWebの技術環境に向き合い、JavaScriptを学ぶために制作した。企画、デザイン、実装、公開までを一人で手がけ、3か月から半年ほどにわたり継続的に制作した実験や習作を、ログとして残している。
nulldesign.jpという屋号は、もともとFlash作品のために用意したものだった。.logの「another side of nulldesign.jp」という言葉には、その名義が本来担っていた表現とは異なる方向を探る、という意味が込められている。Flashを始める以前からフロントエンドの領域には飽きを感じており、再びその領域を深く扱うことになるとは考えていなかった。だからこそ本作は、正面から掲げる活動ではなく、あくまで片手間の学習と実験の場として、表側のnulldesign.jpと分けられた。
当時のWebにおけるJavaScriptは、フォームの入力チェックや文字列操作など、補助的な用途で使われることが多かった。JavaScriptによってインタラクティブな表現をつくるという発想は、まだ一般的ではなかった。.logでは、そうした当時のマークアップエンジニアの役割や作法とは異なる立場から、JavaScriptと向き合う方法を試している。目指したのは、ページを機能的に補うためのコードではなく、触れ、動かし、見続けることのできるWebコンテンツだった。
掲載されているのは、特定のデータセットを扱う作品ではない。その時々に思いついた断片や、Flashの時代に相談・引き合いを受けた表現をJavaScriptへ移植しながら考えたものが中心である。画像、図形、動き、空間、タイポグラフィなど、扱う題材は一定ではない。一つひとつの完成度をそろえるポートフォリオではなく、技術と表現を往復する学習の軌跡として、異なる試行を並べている。Canvasを用いた表現も、その過程で取り入れられた。
開発はフレームワークを使わないバニラ環境で行い、レンタルサーバで公開した。重要な前提の一つは、スマートフォンでも見られ、扱えることだった。マウス操作を前提とする従来のWebに対し、スマートフォンではフリックをはじめとする直接的な操作が中心になる。.logでは、画面の向こうにあるWebを、指先で触れられるものとして設計することを試みた。これは単なる表示領域の対応ではなく、インタラクションの考え方そのものを変える実験でもあった。
このサイトは積極的に外部公開するための作品集ではなく、自己学習と社内共有、そして評価のための場として機能していた。当時、社内のエンジニアからは驚きの反応が続いたという。.logは、Webの技術的な変化に追随するための記録であると同時に、Flash以後の表現を自分の手で探り直した時間のアーカイブである。
metrogram は、東京の地下鉄を走る列車と、その運行が生み出す人の流れを、二次元の画面上に可視化する自主制作プロジェクトである。2014年の秋に制作し、同年9月に公開した。企画、デザイン、データ収集・整備、実装、公開まで、すべてを一人で手がけている。
着想の背景には、社内の先達がFlashを使って制作していた地下鉄の2D表現があった。「作ろうと思えば作れる」という感覚は以前からあった一方、私的な時間で取り組むには、路線や時刻表を扱う作業は重い。関心を抱きながらも、制作に踏み出せずにいた。2014年9月には交通に関するオープンデータの公開が予定されていたが、本作は、その公開によって初めて実現したように見られることを避けたかった。そこで、既存のWeb上の情報をたどり、自らデータを収集するところから制作を始めた。
作品の核にあるのは、日常的に利用していても全体像を把握しにくい東京の地下鉄を、一つの画面で眺める体験である。路線、駅、時刻表をもとに列車の位置を再現し、各駅停車、急行、特急などの種別によって、わずかに異なる表現を与えた。直接的な人流データを用いたわけではない。しかし、異なる速度や停車パターンをもつ列車が路線網を行き交う様子からは、都市のなかで人々が移動する気配が立ち上がる。この細かな差異に気づき、記事で取り上げたWebメディアもあり、制作者にとって印象的な反応となった。
技術面では、Canvasを使ったことがなかったため、その習作として制作した。開発環境にはフレームワークを用いず、バニラJavaScriptを選択。データを画面上で扱う仕組みも含め、軽量で直接的な構成を目指した。公開にはレンタルサーバを利用している。作品のデータは2014年9月時点の情報に基づくため、現在の地下鉄の状況を正確に再現するものではない。リアルタイムの運行情報を示すサービスではなく、あらかじめ収集・整備した情報から、都市交通の時間的な構造を映し出すシミュレーションである。
後に制作した3D版の方が大きく取り上げられた一方で、制作者自身は2D版により強い愛着を持っている。三次元化によって表現の幅は広がるが、人間が一度に受け取れる情報量には限りがある。ディスプレイ上では、情報が多すぎないことが、かえって対象の動きやリズムを捉えやすくする場合がある。metrogramは、地下鉄の複雑さをすべて説明するための作品ではない。必要な要素だけを静かに配置し、都市の流れを眺めるための視点をつくる試みである。
metrogram3D は、東京の地下鉄を走る列車と、その周囲に生まれる人の流れを、三次元空間で眺めるための自主制作プロジェクトである。2014年の冬、一人で企画、デザイン、データ整備、実装までを手がけた。
出発点となったのは、先行して制作していた2D版の metrogram だった。路線図の上で列車の動きを可視化したこの作品に対し、metrogram3Dでは「軸を一つ増やす」という割り切りを置いた。二次元で扱っていた時間と位置の関係を、奥行きをもつ空間へと展開する。技術的な挑戦を目的にしながらも、既存の表現をむやみに複雑化するのではなく、見慣れた地下鉄の運行を別の視点から見せることを目指した。
東京の地下鉄を選んだ理由は、都市の日常を支える巨大で精密なシステムが、地上からはほとんど見えない場所で絶えず動いていることにある。駅と駅を結ぶ路線、時刻表に沿って移動する列車、それに伴って生じる人の気配。それらをひとつの視野に収めることで、個々の利用者には捉えにくい都市のリズムを浮かび上がらせようとした。
本作が扱うのは、Web上で公開されていた地下鉄の時刻表を手作業で移植・編集したデータである。データの出所や構造は2D版と共通しており、現在地を取得するリアルタイムデータではない。あらかじめ整えた時刻表をもとに、指定された時刻の列車位置を再現するシミュレーションとして設計している。後年のオープンデータを前提とした制作ではなく、必要な情報を自ら読み取り、表現のためのデータへと組み替えることから始まった。
実装にはWebGLとThree.jsを用いた。Three.jsの習作として取り組み、時刻表データはJavaScriptとして編集・利用している。固定JSONとして切り出す選択肢もあったが、データを扱う処理も含めてJavaScriptで完結させる方針を採った。開発環境はフレームワークに依存しないバニラJavaScript、公開先はレンタルサーバである。当時、勤務先でWebGLの研究開発領域が設けられたことも、時間外にこの技術へ取り組むテーマとして本作を選ぶ後押しになった。
metrogram3Dが目指したのは、情報を受け取るためのWebコンテンツではない。操作や更新を求めるのではなく、スクリーンセーバのように、ただ流して眺めていられること。都市の見えない運行を静かに可視化し、Web上に「見るためだけの時間」をつくることが、この作品の中心にある。
SkyNet は、日本上空を行き交う航空機の動きを可視化する自主制作プロジェクトである。2018〜2019年頃に制作し、企画、デザイン、データの取得・整備、実装、公開までを一人で担当した。アクセスした時点のフライトスケジュールをもとに、空の状況をシミュレーションとして立ち上げる。
制作の直接的な契機は、WebGLへの復帰だった。制作者は当時、研究開発部門でUnityを中心としたデジタル体験の制作に携わっていたが、Webの部署へ戻ることになった。WebGLの感覚を取り戻すためのリハビリテーションとして、何をつくるべきかを考えるなかでオープンデータを調べ、航空便のスケジュールを取得できることを知った。地上の交通に続き、今度は空を扱うことに関心が向いた。
本作では、JALとANAの航空データを利用している。日ごとのフライトスケジュールを取得できることに加え、リアルタイム情報も利用可能であったことが、作品の可能性を感じさせた。あらかじめ与えられた時刻表を再生するだけではなく、取得時点に応じて変化する状況を扱えることが、空を題材にする理由の一つとなった。画面上では、航空便の動きを通して、ふだん目にすることのない日本上空の交通の密度や広がりを捉えることができる。
一方で、空だけを示されても、見る人は位置関係を直感的に把握しにくい。そこで、日本の海岸線データを取得し、線分として描画している。海岸線全体を一つのMeshとして構成することで、細部までかたちを保ちながら、航空機と地上の位置関係を明確にした。情報を増やすための地図ではなく、空の動きを読むための基準として、地形の輪郭を置く設計である。
技術にはWebGLとThree.jsを用いた。レンタルサーバ上で公開し、フレームワークは使用していない。前作と同じ手法を単に繰り返すことを避けるため、本作では時間速度を操作する機能と、ポストプロセッシングをどこまで重ねられるかという実験を組み込んだ。時間を加速・減速して眺めることで、個々の便の移動だけでなく、空全体の流れを異なる密度で観察できる。視覚効果のレイヤーもまた、データを説明するだけでなく、情報を体験として成立させるための試みだった。
SkyNetは、時間と空間を扱う可視化の延長にある作品でもある。その一方で、同じ発想を重ねると、どうしても一人の思考の枠内でパターン化してしまうことも制作を通して意識された。類似した相談や制作機会が増えていくなかで、同じ問いに同じ表現で応じるのではなく、異なる出目を生み出す必要がある。本作は、航空データの可視化であると同時に、その次の表現を探すための実験でもあった。