このノートは自然の動きや光を参照しながらWebの画面における変化の扱い方を整理したものです。そもそも動きとは必要であるかという問いと共に光や形、ユーザーの操作、画面を見る時間を含めて何がどのように変わるかを考察します。
自然を参照するのは自然の動きが正しいからという訳ではなく変化の原因と結果を連続して観察できるからです。操作の速さが優先される画面では直線的な切り替えや即時の応答を選びます。ここで扱うのは動きや光が空間、状態、視線の移動を伝える場面です。特定の値を一般化するのではなく制作時に何を残し何を削ったかを書いていきます。
Webの画面では形や色、位置を自由に変えられますが、自然にある重さや抵抗は最初から存在しません。何の影響も受けずに動きを加えるとそれぞれの要素が勝手に変化しているようにも見えます。そのため動きがなぜ始まり、どこへ伝わり、どのように収まるのかを念頭におく必要があります。その判断をする際に以前に見た自然の動きや光を思い出すことがあります。
光の向きが変われば影も動き見る位置が変われば反射も変わります。自然の中では一つの変化が単独で起こるのではなく周囲との関係によって現れます。この因果の見えやすさを判断の手がかりにしています。
その入口として最初に思い浮かんだのは水中から見上げた水面でした。幼い頃から素潜りが好きでよく伊豆へ行きます。水中へ入るだけでも良いのですが特に好きなのは深く潜って水面を見上げることです。暑い昼間に水中から見る水面は光が屈折してきらきらと乱反射していてかなり忙しい一方、水中にいる自分の身体やその周囲に広がる景色はどこか静かです。耳に入る音も少なく、浮かんでいる泡の動きや自分の息の間だけが近くにあります。光は忙しいのに全体としては静かで、その両方が同時にあることに惹かれます。
夜になると水面の表情は一変し、昼間の透明感は見えにくくなって暗い面にわずかな光が反射します。その起伏だけを見ていると水ではなく遠くまで続く山脈や荒廃した大地のように見え、同じ水面なのに別の場所へ連れていかれるような感じがします。
同じ水面が時間と見る位置によって光にも鏡にも風景にもなるのを見て、自然から受け取っているのは形というよりこの変化の捉え方なのだと思います。
水面
陸から見れば水面は水と空気を分ける平らな境界に見えます。ただ水中から見上げるとその境界は頭上を覆う一つの面になります。空はすぐそこにありそうで、実際にはその面の向こう側にあります。
水面は光を通しながら反射し、揺れるたびに水中と水上の景色を細かく分解してつなぎ直します。形があるように見えてもその形を固定している線はありません。見ているあいだに境界そのものが動いているので、止まっている絵として覚えるのが難しいです。
写真に撮れば水面は一枚のテクスチャーとして止まりますが、実際に見ていた印象にはその前後の時間が含まれています。光が集まった場所はすぐに崩れて別の場所に同じようで少し違う形が現れます。同じ模様が繰り返されているようで、じつは一度として同じ配置には戻りません。
この体験は前のノートで触れたギブソンの『生態学的視覚論』にもつながります。ギブソンが扱うテクスチャーは表面を飾る模様ではなく、密度や連続の変化から面の傾きや奥行き、周囲との距離を知るための情報です。見る側が動けば光の配列も変わり自分がどちらへ動いているのかも分かります。
テクスチャーに惹かれるのは細かな模様が好きだからだけではありません。見えている形が定まらなくてもその変化から面や奥行きを感じられ、テクスチャーが物の表面ではなく環境と自分の間にある情報として見えることに惹かれます。Webの3Dでも一色の面を置くだけでは向きや距離が分かりにくいことがあり、テクスチャーの密度、反射像の歪み、霧によるコントラストの低下は奥行きを読む手がかりになります。後述するaircordのAboutでもスクロールで視点が動くとロゴと反射の位置関係や水面の見え方が変わります。その連続から水上と水中のどちらにいるのかを判断できます。
UIでも要素の間隔や重なりは装飾だけではなく、どこまでが同じまとまりで何が手前にあるのかを知る情報になります。テクスチャーを使うとは模様を加えることではなく面と視点の関係を伝えることだと考えています。
変化
水の動きには原因とその後があり、風が水面へ触れれば動きが生まれて岸へ近づけば地形の影響を受けます。生まれた動きは周囲へ伝わり、別の波と重なり、形を崩しながら消えていきます。水面のすべてが同じ距離、同じ速度で動くわけではなく、近い波は早く大きく遠い揺れは遅く小さく届きます。
Webで自然らしい動きをつくろうとするとランダムな値やノイズを加えることがあり、それである程度均一さは減らせますが不規則であれば自然に見えるという話でもありません。重要なのは何が動きを始めたのか、どこへ伝わり、何に抵抗され、どう収まるかです。
例えば一つの要素が動いた後に周囲が少し遅れて反応し、同じ変化が離れるほど弱くなり、勢いよく始まったものが抵抗を受けて最後は小さく揺れながら止まります。個別の形よりこの前後関係に自然らしさが現れます。Webではユーザーの操作や状態の変化が原因になり、その値を複数の要素へ渡せば変化が伝わります。途中に遅れや減衰を設けると抵抗が生まれ、入力が止まった後に目標値へ近づけば動きが収まります。
物理計算をすれば自然になるわけでもなく実際の水をそのまま画面へ持ち込めば情報としては細かすぎる可能性があります。何を見せたいのかに合わせて関係を残し変化を整理する必要があります。
またWebで変化をつくるときは見た目だけでなく負荷も選択の条件になります。細かな計算やテクスチャーの参照を増やせば情報は増えますが、その差が表現の役割に寄与しなければ処理だけが残ります。重い表現を避けるという話ではありません。何を伝えるためにどこまで処理を使うかを見た目と一緒に判断します。
水面をどこまでつくるか
aircordのAboutページを制作したときにもこの判断を行いました。ファーストビューに3Dのロゴと水面を置きスクロールに合わせて視点が水中へ移る構成になっています。ここで優先したのはロゴの存在とスクロール後に続く本文で、水面は空間を示す背景であって単独の見せ場ではありません。水面へ残す情報と処理を見た目と負荷の両方から判断しました。
1の試作版では水面の質感を強く出していました。法線テクスチャーを異なる縮尺と速度で4回重ね屈折、フレネル、反射光を加えることで水面であることは分かりやすくなります。ただ細かな揺れがロゴの反射を崩し続けるため水面の動きがロゴより先に見えるようになりました。スクロール後には本文も重なるため細かな動きが残り続けると読む対象とも競合します。
負荷の面でも試作版は法線の合成に4回、反射光のきらめきの判定に2回、法線テクスチャーを水面の各ピクセルで参照しています。さらにフレネルと反射光の計算も加わるため現行版よりGPUの処理が増える構成です。水面は画面の広い範囲を占め操作が止まった後も動きます。水面だけを見せるページであればこの処理を残す選択もありますが、このAboutページでは背景の細かな質感に対して負荷を使い続ける必要はないと判断しました。ただし実機ごとのフレームレートを計測して比較したものではなく、ここで確認できるのは実装上の処理量が多いという範囲です。
2の現行版では法線テクスチャーの参照とフレネル、反射光の計算を外し、大きな歪みと反射を残しています。水を正確に見せることよりロゴ、反射、本文の優先順位を保ちながら処理も減らすことを選びました。
ここでは二案を並べロゴを認識する前に水面へ視線が向くか、スクロール後に本文と動きが同時に主張するかを見ます。同時に水面を伝えるための情報量と処理量が役割に見合っているかも確認します。水面だと分かる一方でロゴや本文より先には目に入らず、そのために必要以上の処理を使わないことをカットラインにしました。見た目と負荷を分けず、背景として残す表現を決めています。
ただしこの判断はユーザーテストによって優位性を確認したものではありません。Aboutページの視覚的な優先順位と実際のスクロール状態を並べて決めた制作時の判断です。別の目的や情報量で同じ結果になるとは限りませんし、動きへの感覚差やアクセシビリティはこの比較だけでは評価できず別に確認が必要です。
スクロールの入力は0から1までの潜水量へ置き換え、その値をカメラの角度、ロゴの位置、回転、縮尺、透明度へ伝えます。変化の強さや速度はデモのGUIから確認して調整できますが、値そのものは表示領域や情報量によって変わります。
スクロールが止まるとカメラとロゴは目標位置へ収まり、その後も水面だけは小さな反復を続けます。ここではスクロールへ応答する変化と操作がなくても続く変化を分けています。前者は操作による状態の変化を伝え、後者は水面を静止した背景ではなく時間を持つ環境として残します。操作がない間にも動かすのはその継続が空間を伝える場合に限り役割がなければ止めます。
現行版へ移るときに削ったのは水らしさそのものではなく、スクロールによる入力と画面の変化を伝えるために必要な水らしさだけを残しました。
水を見続ける
水面について考えていて思い出すのが箱根のポーラ美術館で見たロニ・ホーンの展覧会です。「水の中にあなたを見るとき、あなたの中に水を感じる？」というタイトルの展覧会で、テムズ川の水面を撮った写真、水鏡のようなガラスの彫刻、アイスランドの温泉で撮影したポートレートなどが並んでいました。
中でも《静かな水（テムズ川、例として）》はテムズ川の水面を繰り返し撮影した15点の写真と言葉による作品です。同じ川の表面を追っていますが色、反射、流れは一枚ごとに異なり、水を撮っているはずなのにすべてが同じ水には見えません。一つの対象に固執してその表面に現れる差を見続け、新しいモチーフへ移るのではなく同じものがどこまで別の姿になるのかを追う態度が印象に残っています。
特に記憶に残るのはロニ・ホーン自身が水をめぐる散文詩を読む《水と言う》です。映像はまだ明るい時間から始まり、朗読が続く間に周囲は少しずつ暗くなっていきます。大きな出来事は起きませんが、同じ場所で声を聞き続けているといつの間にか夜になっています。読み方は淡々としていても弱くはなく、むしろ同じ強さで言葉を重ね続けることに力を感じます。詩は水を一つの意味へまとめず色や形、暗さ、恐ろしさ、魅力の間を行き来します。水から離れたように感じる言葉もしばらくするとまた水へ戻り、その反復から潮の満ち引きのようなものを感じました。
画面の中で大きく動いているものはありませんが、光が変わり、声が続き、言葉が離れては戻る時間全体が水の動きになっていました。
夜の水面を見て山脈のようだと感じたこともこの展覧会を思い出した理由かもしれません。ポーラ美術館の作品解説でも《ゴールド・フィールド》の表面について波立つ水面と山脈のような風景の両方を想起させると説明されています。水は水として見えている時間より光、鏡、ガラス、地形のように見えている時間の方が長いのかもしれません。それでも動き方を見ると水だと分かり、形や色が変わっても変化の仕方が対象を残しています。
光によって見えるもの
ここまで水を見てきましたがその表情をつくっていたのは光でもあります。光にも形はなく、何かに当たり、反射し、遮られることで初めてその存在が分かります。
水中から見た光は水面の小さな傾きによって細かく形を変えます。夜の水面では限られた光が引き伸ばされて暗い面の起伏を浮かび上がらせます。霧や空気中の粒子があれば本来は見えない光の経路まで形を持ちます。暗い場所では光の量が少ないのではなく、当たる面と当たらない面の差がはっきりします。
光そのものを装飾として置くより光によって何が見えるようになったのかに興味があります。同じ物体でも光が変われば表面の硬さや奥行き、周囲との距離が変わって見えます。Webで光を扱う場合もグローを足せば光になるわけではありません。明るい場所には暗い場所が伴い、反射する面のそばには光を受けない面もあり、その差によって空間や素材が分かります。
光を加える範囲
少し趣旨が違うかもしれませんが、光について思い出すのは阿寒湖の森で体験したKAMUY LUMINAです。阿寒摩周国立公園にある湖畔の森を約1.2km歩き、阿寒のアイヌ文化に根付いた物語を8つのゾーンにわたる光、音、プロジェクションとリズムスティックによるインタラクションでたどります。
実際の森を歩くので体験は映像の中だけで完結せず、暗い道を進む時間や次の場面へ着くまでの距離も含まれます。足元の感触や息の白さ、木の間から漏れるわずかな光まで含めて場面が切り替わっていきます。見るだけではなく歩く、止まる、リズムを返すという身体の動きによって時間が進みます。
光が当たると木の幹や葉が現れ周囲の暗さによって距離が分かり、音は森の奥行きから聞こえます。プロジェクションが消えた後にも森は残り次の場面までは暗い道を歩きます。木や地面は演出のためにつくられたセットではなく以前からそこにあったもので、演出も森を別のものへ置き換えてはいません。
Moment Factoryは阿寒湖のアイヌコミュニティや環境省と協働し動植物への影響を抑える技術を検討したと説明しています。阿寒のアイヌ文化を物語の中心に置き、光や音もその土地にある木、地面、距離へ作用しています。
特に印象に残っているリズムスティックは物語の声が手元から流れるため、案内の道具であり物語へ参加するためのUIにもなっています。同じ場所で見知らぬ人と杖を振る場面では協力を強く求められなくても共通の時間が生まれ、案内、参加、他者との同期を一つの道具が担います。ここで重要なのは森へどれだけ多くの表現を加えたかではなく、光を当てる場所と何も映さない場所を分け暗さや歩く時間を残していることです。
展示では作品側がつくる時間に身を置きますがWebでは進む速さをユーザーが決めます。aircordでは展示の時間を再現せず変化の進行をスクロールへ結びました。ロニ・ホーンやKAMUY LUMINAの体験がデザインに直接つながるわけではありませんが、変化を移動量だけで捉えず何が残るかまで考えるためのひとつの参照です。実際の判断は画面ごとの目的へ戻します。
何を残すか
自然からは形や色、質感など多くのものを参照します。このノートで着目したのはそれらが時間の中でどのように変わるかです。ここで見ているのは何が変化を始めてどこへ伝わり、何に抵抗されてどのように収まり、何が見えるようになって変化の後に何が残るかという点です。
この変化を画面へ置き換えるときは次の五つがひとつの指標になります。
- 何が変化を始めるか
- どの要素まで伝えるか
- どこに遅れや抵抗を置くか
- どの状態で収めるか
- その変化が読む情報や操作と競合しないか
状態の変化を理解するために途中の時間が必要なら前後の関係を残し、目的地が明らかで途中の変化が情報を持たないなら即時に切り替えます。連続させるかどうかは心地よさというよりもその時間が情報になっているかが主軸です。必要な関係を残し役割のない変化を削る判断まで含めて、動きはデザインの一部になります。
UIはスクロールや入力がどの状態を変えいつ収まったかを伝える手がかりになります。Webの3Dでは反射、明暗、視点移動の変化から面の向きや距離を理解する手がかりになります。この二つについては今後のノートでそれぞれ考えてみようと思います。