見る人のハートをつかむ"スペシャルWebサイト"を作ろう(前編)

1枚目のスライドが出来上がったら、2枚目以降のスライドを追加していきましょう。作成された複数のスライドは1つのWebページ内に縦方向に連続して配置され、各スライドはスクロール操作によって紙芝居のように切り替わっていきます。

このスライド画面の切り替えの際の演出効果としてユニークなのが、人間の目の錯覚を利用した「パララックス(視差)効果」です。原理的な説明をするとやや難しくなってしまいますが、80年代の名作シューティングゲーム「ゼビウス」をご存じの方であれば、その仕組みはすんなりわかるかもしれません。ゼビウスは森や砂漠といったステージが縦方向にスクロールし、その上空を自分が操作する戦闘機や敵のキャラクターが動きます。背景となる風景と戦闘機はどちらも2次元の画像ですが、同じ画面上をそれぞれが別の速度で動くことによって、あたかも空中に浮遊しているかのように見えるのです。このように、動きのズレによって画面に立体感が生まれ、奥行きを感じるのがパララックスの基本原理です。

説明は長くなりましたが、LiVE2でこれを実現するには、スライドの詳細設定画面にある［背景］の設定から2枚の画像を指定して、パララックス効果を有効にするだけで大丈夫です。ただし、前景となる画像は背景よりも小さいか、PNG形式など透明度が設定できる画像形式でないと、この効果は生まれません。製品版にあらかじめ用意されている素材を利用して動きを確認し、仕組みを理解できたら画像編集ソフトなどでオリジナルの素材作成にチャレンジしてみるのもよいでしょう。

では、実際の操作に移ります。左側のスライドリストから［スライドを追加］をクリックして、新たにテンプレートを選びます。先ほどと同様にテキストや背景などを編集していきますが、ここでパララックス効果を追加します。スライドの詳細編集画面で［編集］を選び、背景となる写真を［背景(後)］に指定し、［背景(前)］には透過PNG画像を指定して［パララックス］のボタンを［ON］にします。背景との動きの差は［スピード］のスライドで調節します。

先ほどのモーションテキストの際と同様に、［ブラウザで表示］でWebブラウザで動きの確認をします。1枚目のスライドから2枚目のスライドへスクロール操作で移動すると、背景画像の前面に無数の白い図形が浮かび上がり動きます。重ね合わせた2枚の画像の動きがわずかにズレることで、透明感と奥行きが表現できるのです。

ひとつ注意したいのは、パララックス効果をあまり大胆に使いすぎると訪問者は煩わしく感じてしまうこともありますので、あくまでさりげなく利用することでスライドに動きと奥行きを演出するのがコツです。LiVE2では前バージョンよりも細かくパララックスのスピードの調整などができるので、アニメーションの動きを自分のイメージに限りなく近付けられます。

前編での機能解説はここまで。後編では、フォトスライド機能やWebフォント、ソーシャル連携機能などLiVE2のさまざまな応用機能について解説します。