パララックス（スクロールエフェクト）を使ったサイトデザインを作って分かったこと

この前、パララックスデザインのサイトを見て興味を持ち、自分でデザインを作ってみました。作ったのは「パララックス」というよりも、もうちょっと曖昧で緩やかな「スクロールエフェクト」のサイトです。

色々と考えた結果こうなりました。この時に考えたことや学んだことをいくつか。

縦に長いサイトで、スクロールすると左から右からオブジェクトが現れるものが典型的なパララックスなデザインです。しかし、縦に長いサイトはスクロールしなければならない量が多く、面倒で不快感があります。

いくらスマートフォンがスクロールに向いたデバイスだとしても、指で大量のスクロールをするのは不快です。指の運動量と、得られた情報量が「割に合わないよ！」ということもあるかもしれません。

パララックスデザインなどで、デフォルトの動作を止めてさせて何か他の動きを付けると、ユーザーが期待する動きと違います。ユーザーの動きを制限し、強制的にこの動作をしなさいと決めつけてしまっています。

私はマウスのホイールの動作にアクションを付けましたが、これだと「ホイールを使いなさい」、ホイールを使うと必ず「1ページずつ」サイトが動く。動きが制限されていて自由ではありません。

パララックスデザインとは関係ないですが、サイト上で右クリックができなくしてあるサイトがよくあると思います。あれを思い浮かべて貰えれば期待した動作を制限されることが不快だと分かると思います。

大量のスクロールもそうですが、情報を素早く得たい人にとっては、サイトのデザインに付き合わされるのが面倒です。この点がパララックスデザインのサイトが嫌厭されている理由かも知れません。

ちょっと昔は Flash を使ったサイトがたくさんありました。Flash を使ってあると、サイトのメニューを開くのも、戻るのも、Flash のコンテンツ内部にあるボタンを押さねばなりませんでした。ユーザーの動きを強く制限してあり、時間が掛かるとともに、動きを理解するのが面倒です。

サイトのデザインをあらかじめある程度決めておき、そこに向かってデザインしないと時間が掛かってしまいます。当然と言えば当然ですが…。

私はこういうデザインを作るのが初めてだったので、パララックスデザインが魅力的なサイトを参考にして作りました。スライドのように1枚1枚を切り替えていくデザイン、縦方向に長くスクロールすることによってアニメーションするデザイン、どっちもやってみたい。

そんな曖昧とした感じでデザインを作り始めたのですが、そうすると HTML の要素の構造をどうするか、CSS をどうするか、どういうエフェクトにするかを同時に考えなくてはなりません。

サイトの全体像を決めておくと、HTML の構造が決まり、エフェクトが決まり、CSS を書けます。コーディングの時間が短くて済みます。

レスポンシブデザインにするか、固定のデザインにするどうかも決めておくと良いでしょう。コードの書き方が変わるので、後から切り替えるのは手間です。

パララックスデザインの作り方を紹介するサイトがたくさんありますが、その多くで「プラグインを使って作ってみましょう」と書かれています。

中には便利なプラグインもあると思いますが、基本的には jQuery さえあれば何とかなります。たくさんあるプラグインからどれを使うか選ぶのも大変だし、プラグインに合わせてコーディングするとそのプラグインがなくてはならなくなってしまうし…。

複雑なアニメーションをするのでなければプラグインは要りません。私は jQuery だけで作ってみました。

プロパティ「position: absolute」「position: relative」を多用することになりますが、これがかなり難しいです。なかなか思ったようになりません。私はそもそも「position: absolute」をあまり使ったことがありませんでした。

「position: absolute」の時、どうやって中央揃えするのかなど分からないこともたくさん。中央揃えもうまくやらないと他の要素にかぶってしまったりします。「left:0; right: 0;」という普通は意味が分からないことも用いる必要があり、これをする効果には驚きでした。

思い描くポジションの設定にするのが一番手間取ったところでした。この上、PC でもスマートフォンなどでも同じように見られるように、レスポンシブデザインにするとなると頭が痛いです。

以前は何かアニメーションをしたいとなると JavaScript で、という感じでしたが、CSS3 では簡単なアニメーションがすぐに作れるのでこれを使わない手はありません。

「@keyframes」で指定して、この状態からあの状態にする、というアニメーションが簡単にできます。私が作ったデザインでも、文字に影を付けて動かすことなどに CSS3 のアニメーションを使っています。簡単です。

CSS3 は思ったよりも色々な表現ができるので、どのようなエフェクトを付けられるかを見てみると驚くかも知れません。エフェクトは過剰になると画面がうるさくなります。うまく使いたいところですね。

結局のところ、色々なエフェクトがあるサイトよりも、シンプルで格好いいデザインの方が私は好きです。パララックスデザインを否定しているのではなく、エフェクトをシンプルにするのです。パララックスデザイン自体は見るのに面白く、ようは使い方です。

シンプルだと見る側にとってはサイトの使い方が分かりやすく、見やすい。サイトの表示も軽い。作る側もコーディングが楽です。複雑なことをするとブラウザ間で動作が違ったりと面倒です。シンプルの方が双方にとって利益があります。

世界のことを知りたい