TORTERECETTE

猫分儀スミレの開発日記 跡地

パララックス効果についてのメモ

すっごい古い記事です ご注意下さい

当サイトのアバウトページのリニューアルを行なうにあたって、ウェブページにおけるパララックス効果について考察したことのまとめ。




以前制作した、視差効果を説明するためのFlash。
●「PAINT」モードでは全てのオブジェクトが同じ速度で移動するため、全てが同じZ位置に配置されているように見える。結果的に、背景は平面的な書き割りであるかのように感じる。
●「SET」モードでは手前の柵と、奥にあるオブジェクトのスピードに差が生まれ、多少奥行きがあるように見える。しかしスピードの設定が適切ではないため、木や雲などは模型のように小さく見え、背景はまるで作り物のセットであるかのように感じる。
●「REAL」モードでは各オブジェクトのスピードの差が更に大きくなる。木や雲などはより遠ざかって見え、より現実のスケール感に近づいたように感じる。列車の車窓から見る風景とはこんな具合だろうか。





パララックス効果またはパララックススクロールとは、ウェブページをスクロールする時、ページ上の各オブジェクトを異なるスピードで動かすことにより、ある種の擬似的な立体感を生み出すテクニックである。

スクロールという行為は、ページという土台の位置を移動するということである。あるいは、位置が固定のページに対してビューポート(ブラウザの表示範囲)つまり視点が移動しているとも言える。


従来のウェブページでは
ウェブページは平面であり、ページ上の全てのオブジェクトは同じ奥行き(Z位置)上に配置されていると考えられる。

平面的なグラフィックのスクロールに慣れ親しんだユーザは、無意識にウェブページは奥行き「0」の位置、スクリーンの境界面に存在していると認識している。


遠くにあるものはゆっくり
高速で移動する鉄道の車窓から景色を眺めるのを想像していただきたい。
あるいは上記のFlashを触って頂けるとイメージしやすいかもしれない。

視点がX方向またはY方向に移動すると、手前にあるものほど早く動き、遠くにあるものはゆっくり動いて見えるのである。

視点と物体との距離が離れれば離れるほど、物体の動きはゆっくりになり、距離が無限に近づけば、物体が動くスピードは限りなく0に近くなる。あなたが夜の野原をどれだけ歩こうとも月はあなたを追い掛け続けるのである。


ウェブページに奥行きを与える
ユーザのスクロール操作(つまりユーザの視点を動かす行為、具体的にはマウスのくるくるをホイールすること)に忠実に従って移動するウェブページがスクリーン境界面の位置にあるのだとすれば、オブジェクトをユーザのスクロール操作に対しゆっくり追従させれば、そのオブジェクトはスクリーン境界面より奥に存在するように錯覚される。


もちろん、ディスプレイ装置自体は2Dであるから、本物の立体感を感じさせることは出来ず、錯覚を生み出すにはテクニックを要する。

例えば、全てのオブジェクトを一様にゆっくり動かしても、それはスクロール動作が重いようにしか感じられず、ユーザに不快感を与えるだけである。あくまで複数のオブジェクトをバラバラのスピードで動かし、オブジェクト間の奥行きの「差」を感じさせることが立体感を生み出すのに重要である。



具体的なスピード調整
それでは、各オブジェクトを、実際にどのようなスピードで動かせばいいのか?スピードが遅ければ遅いほど奥行きが深くなると言うが、具体的なZ位置とスピードの関係は?

勘でやれというのは簡単だが、どうすれば「適切」な立体感を得られるのか?

結論から言ってしまえば、



n = a - (b / (b + c) * a)

たぶんこんな感じ。

算数苦手><

念の為に解説をすれば、真ん中の板が液晶画面であり、左の変な生き物がユーザであり、リンゴというのが仮想的なオブジェクトの位置である。

ウェブページをaの距離だけスクロールした時、cの(仮想的)奥行きに配置されたリンゴは、スクリーン上ではnの長さ分だけ追従が遅れることになる。

ならば、nの長さだけウェブページ上での位置を逆向きにズラして表示すれば、リンゴがcの距離だけ奥にあるように見える、という寸法である。


ん、ユーザと液晶画面との距離がどうして必要なの?
ユーザの目玉、つまり視点と、ディスプレイ、つまりスクーン境界面の距離。上記の図で言うところのbの長さ。これも実は、立体物の見え方に関わってくる。

端的に言うと、視点が対象物に近ければ近いほど、立体感は強くなる。絵描きさん風に言うと「パースが強くなる」ということである。逆に、対象物が遠くにあればあるほど「奥行きの圧縮」によって立体感は薄くなる。


パースの強弱と奥行きの圧縮の説明
近くで見るとピンの大きさは違って見えるが、遠くから見ればそれぞれのピンの大きさの差は少なくなる。


本来の「パースの強さ」より、パースを強すぎても弱すぎてもダメである。よりリアルな立体感を錯覚させるためには、出来るだけ実際のパースの強さを再現しなければならない。
そのためには、ユーザの視点とディスプレイ境界面との距離を適切に設定しなければならないのである。


ディスプレイとの距離の決め方
とは言っても、ユーザの環境は千差万別であり、厳密には一意に数字を決めることは出来ない。かと言ってユーザとディスプレイとの距離を測るセンサーなんてものは無い。

ならば「正しい」距離というものを仮定し、それに合わせてコンテンツを制作するのが健康的というものである。
某ディスプレイメーカーによると、目が疲れにくい画面との距離とは40cm以上らしい。

コンピュータは正しい姿勢で使いましょう

ディスプレイのドットピッチ(解像度)というのもバラバラだから、解像度によって物理的なサイズが変化するウェブコンテンツにとっては重要である。
一昔前の標準的な液晶ディスプレイは96ピクセル/インチだったが、最近はもっと細かいかもしれない。


最終的にはウェブページ上での距離を求めなければならないから、単位としてはピクセルに統一するのが手っ取り早い。
現実世界のサイズをピクセルで測るというのも妙な感じだが、物理的な距離を40cm以上、モニタ解像度を96ppiと仮定すると、ユーザとウェブページとの距離(先ほどの図で言うb)は約1512ピクセル以上ということになる。
この距離というのはモバイル機器やタブレット機器では変わってくるから、環境によって簡単に数値を変化させられるようなプログラムを作ることが相応しいだろう。

余談だが、「視距離をピクセル値で設定する」というやり方は、CSS3の「3D transform」でのアプローチとも一致する。「-webkit-perspective」というCSSプロパティでは、視距離をpxで設定することで3Dのパースの強さを決定することが出来る。


さて、技術的にどうやってスクロールを検知し、オブジェクトを移動させるかということだが、この辺はCSSなりスクリプトなりを駆使してやりましょうということである。
ここでは具体的な方法は解説しないが、当サイトでは2D transformや「position:absolute」などを臨機応変に使用している。


立体感を得やすいコンテンツ作り
前述したとおり、パララックス効果はあくまで擬似的な立体感を得るものであり、錯覚以上の何ものでもない。気持ちの良い立体感を得るにはテクニックが必要である。疑似体験である以上、設計にも限界があり、無理のあるデザインを行えば立体感は得られない。

スクロールに伴うオブジェクトの移動のスピード「差」によって立体感を得るため、少なくとも2つ以上の異なるスピードを持ったオブジェクトが点在していなければならない。

また、オブジェクト間の奥行きの差がありすぎてもダメである。スピードの「差」が大きすぎると、オブジェクトの動きがバラバラに感じられ、結果として立体的な配置には感じられなくなる。
そんなときは奥行きを小さく設定するか、中間の位置に適当なオブジェクトを挟み込むといいだろう。

例えば、全く動かない「月」の絵を置いても、それは遥か遠くに月が浮かんでいる様には感じられず、単なる「スクロールしても動かない月の背景画像」にしか見えない。


スクロール以外のパララックス効果
初めに記した通り、スクロールとは一種の視点移動を行なう行為であり、擬似的な立体効果を伴わせるのに適した場である。

数年前、マウスカーソルをあちこちに動かすと背景がウニョウニョ動くという「パララックス効果」が流行したが、カーソル移動というのは単なるポインティングであり、視点移動ではない。視差を利用した立体感を得るためにマウスカーソルの移動を基にするのは、全くナンセンスであり効果的とは言えない。

スクロールはウェブ閲覧においてはごくごく自然な操作であり、こうした日常的な行為に特殊効果を組み込むことが、より豊かなユーザ体験となるのである。


パララックス効果とユーザビリティ
ウェブページ上のオブジェクトを移動させるパララックススクロールは、使い方を誤ればユーザビリティに悪影響を与えかねない。

パララックス効果はオブジェクトに奥行きを持たせることになるが、マウスカーソルはスクリーン境界面上に存在するのである。
ユーザがポインティングをする時は通常スクロールが止まっているので、立体感は生じていないはずだが、それにしてもディスプレイの奥の方にあるオブジェクトを、手前にあるカーソルでクリックするのは、場合によっては不自然に感じられるかもしれない。

「奥行きを持たせる」、つまりオブジェクトを「奥に追いやる」という行為は、本来ユーザインタフェースとは無関係な背景要素にこそ許されるのである。ユーザが「触る」情報やGUIコントロールなどに奥行きを与える際は、よほど慎重に設計を行わなければならない。

オブジェクトの移動によってクリック範囲が変わり、物理的にクリック出来なくなる可能性も加味しなければならない。スクロールを調整しながらオブジェクトを射抜くように突くといった、ゲームじみたユーザインタフェースは言語道斷である。

余談だが、このような問題はパララックス効果よりも、むしろ将来に真の3DディスプレイとGUIが融合した際に顕著化するかもしれない。
ニンテンドー3DSは3Dディスプレイとタッチパネルを別々に分けることにより、ユーザビリティ問題を未然に回避している。このチキンめ!


マイナスの奥行き
Z値がマイナス、つまり手前に飛び出すオブジェクトというのも存在しうるが、これも様々な理由により不自然になりかねない。場合によってはユーザに不快感を与えるので、容易に使用するべきではない。
飛び出す3D!みたいな事はいい加減に止めよう。あまりに昭和的で、ダサい。


3D transformとの組み合わせ
CSS3では、ウェブページ上のオブジェクトを立体的に変形させることが可能になる。これとパララックス効果を組み合わせれば、より効果的な立体感を得ることが出来るだろう。
ここでは詳しい手法は解説しないが、ヒントとしては以下の2つのプロパティが重要である。

「-webkit-perspective」
前述した通り、これは視点のZ位置、つまりパースの強さを設定するプロパティである。

「-webkit-perspective-origin」
視点のX、Y位置を設定するプロパティである。この数値をスクロールに合わせて変更し、実際のユーザの視点と合わせることにより、パララックス効果に似た立体感を得ることが出来る。


やりすぎないこと
パララックス効果のようなテクニックはコンピュータの処理速度を低下させるし、複雑でけばけばしい特殊効果はそれだけで目障りかもしれない。大げさなものほど、早く廃れるものである。実務的には、過度の使用は控えなければならないだろう。