(いわゆる)パララックス演出手法とそのバリエーションについて

(いわゆる)パララックス手法が大流行である。理由の一つにはある種の快感の存在があると思われる。ウェブページ閲覧の際の最も主要な操作である縦方向のページスクロール。この操作に連動した動き、想定外ではあるものの、スクロールとの相関によりあくまで自分が操作している感覚が得られ、こちらの渡邉恵太氏の記事にもあるような自己帰属感を得られる。これが快感の正体ではないかと考える。

(快感なんかなくね? という意見があったので追記) 簡単に言えば、本来マウスを触ってカーソルが動くだけでも面白くて身体拡張感覚由来の快感があったのである。しかし慣れることによって、ホイールを回して画面がスクロールすることはもはや当たり前すぎて身体拡張感覚など得られなくなっている。しかしデフォルトの挙動以外に新たなインタラクションを導入することでこれを再び感じられる。つまり言いたいことは「インタラクションは気持ちいい」ということだけだ。もちろん個人差はあるのだが、この記事はそれを前提に書いてるので、そんな経験ないなという場合は you can stop reading here です。

しかし一方、これらの挙動は想定外であり、つまり言い換えれば目的外である。これは不快感の要因となる。また、(いわゆる)パララックス手法は演出手法であり、あくまで主役はそこで語られるコンテンツである。あくまでコンテンツのデリバリーをサポートするような演出を心がけ、演出自体が悪目立ちして快感と不快感のバランスが崩れるようなことがないように注意したい。

ちなみに単に「パララックス手法」と書かずにいちいち「(いわゆる)パララックス手法」と書いているのは、最近では本来の多重スクロール遠近効果という意味を超えて、上記のようなユーザー操作に追従する演出手法全般をそう呼ぶようになってきており、もはや抗い難い潮流であることを認めざるをえないものの、まだ釈然とはしていないためせめて一矢の抵抗を試みた結果である。

これを踏まえた上で、(いわゆる)パララックス手法には要素としてどのようなものがあるのかを考えてみた。サンプルとしてこちらに挙げられているものをざっと見た。http://www.creativebloq.com/web-design/parallax-scrolling-1131762。急に思い立ってまとめてみたので雑である。が基本自分のためのまとめなので特に問題ない。

イベント発火タイミングコントロール

演出効果のバリエーションの前に、それらの演出効果が発動するタイミングのコントロールについてまず考えたい。これは以下の4つに大別できるだろうか。

特定スクロール量をトリガーに発火
スクロール量に追従して連続変化(ジョグダイヤル式)
表示はスクロールさせずにスクロール量でシーン切り替え(スライド式)
タイマー制御で勝手に動く

スクロールに追従することによる自己帰属感が快感の元だと書いたが、これはあくまで状況が自らのコントロール下にあることを感じられるという前提である。そうでなければ、ユーザーは本来持っているコントロールを奪われたと感じ、不快感が生まれるだろう。

上に述べたうち、a 以外は全てこのダメなパターンである。スクロール操作と演出効果を結びつけた場合、第一にユーザーが(期待|予測|想定)しているのは当然ながら画面スクロールが起こることである。これを完全に裏切る場合、即座にその不快感を超える代替価値を提示しなければならないだろう。そうでなければ一度生まれた不快感を覆すことは難しそうだ。b と c の組み合わせタイプがまさにこれに該当する。スクロール操作の期待を裏切り、かつ即座に代替価値を提示できてないものがほとんどである。例: http://everylastdrop.co.uk/ 期待を裏切る意外性をポジティブに解釈し、その後の時間辺りコストの高い操作に付き合ってくれるのはすでにサイトやブランドに対して相当のロイヤルティを持っているユーザーか、元々好奇心が強く、この手のギミックを体験するのが初めてで、かつその時ヒマであるユーザーだけであろう。d はもうそもそもユーザー操作に追従することによる自己帰属感から来る快感という話から外れてるのでここでは論外である。というかもう動画でええやん的な。

演出手法のバリエーション

上記のイベントタイミングコントロールの話を踏まえ、じゃあそのイベントを契機に発動させる演出効果にはどのようなバリエーションがあるのか、というのをサンプルのサイトをざっと眺めてなるべく小さな単位に分解してみたのが以下である。

シーン変化の演出

連続的なシーン変化:
スクロールに追従して動くオブジェクトの移動速度差による表現
- 背景がページスクロールより遅くスクロールして背景が遠く見える(ホントのパララックス)
- メインの前景オブジェクトが領域外から動いて入ってきていい感じの位置に収まる(前景オブジェクトの相対速度が早い)
  - 最後止まる
  - そのままの変化量を維持してどっかいく

スライド式のシーン切り替え
- 後のシーンが前のシーンにかぶさる
- 後のシーンが前のシーンの下から出てくる
- ワイプ式トランジション (スクロールすると前シーンの下半分が切れて後シーンの下半分が見える) http://www.soleilnoir.net/believein/

オブジェクトの出現・消失の演出

フェードイン・アウト
ズームイン・アウト
ムーブイン・アウト
回転
フィルターによる HSB の色変化
これらの組み合わせ

その他スクロール量に追従した演出

位置固定の(または追従率が著しく低い)要素や背景とスクロール追従要素の重ねあわせ http://lostworldsfairs.com/atlantis/
移動方向の変換:
縦スクロール操作に対して、逆方向・横・斜め・回転・Z軸など異なる方向に運動するオブジェクト
スクロール量に追従したコマアニメ
その他任意アニメーション

その他の演出

背景に動画を使用
ループアニメ適用オブジェクト (ユーザーの操作とは関係しないアニメーション)

以上、宣言通りものすごく雑にまとめた。サンプルもあまり掲示せず言葉で書いただけだが、何となく伝わるだろうか。伝わるといいな。伝わらなくてもいいけど。これを読むだけでは「ふむふむ。ふむ?」という程度の理解しか得られないかもしれないが、一度これを頭に留めてから(いわゆる)パララックス手法を多用したリッチなサイトを見ると、最初はものすごく複雑に見えていた物も、ほとんどが上記の要素の組み合わせで出来ていることに気づくのではないだろうか。

あとは実際に使用する際に、冒頭で述べたように快感・不快感のバランスを崩さず、主役であるコンテンツをうまく引き立てるような演出を心がけたい。可能性は無限である。