前編では、デジタルステージの「LiVE for WebLiFE* 2(以下LiVE2)」を使った、スクロール駆動型の「スペシャルWebサイト」の制作方法について、概要といくつかの実例を説明しました。今回は引き続き、見る人に驚きを与えるさまざまな効果について解説します。

まずは、Webブラウザの画面をフル活用した「フォトスライド」機能です。作成方法は非常にシンプルで、あらかじめ用意されたスライドテンプレートに、自分で用意した複数枚の写真を読み込ませるだけです。写真が切り替わる表示方法などは、後からでも自在に変更できます。例えば「ストライプ」という表示方法は、画面一杯を縦方向に写真が並び、マウスオーバーするとアニメーション効果で写真が大きく表示されるというものです。レストランのメニューなど、一画面で多くの情報を提供したい場合に用いると効果的です。これらの操作は簡単なので、写真素材の作り込みに時間を費やすことができるでしょう。

［スライドを追加］ボタンをクリックし、スライドテンプレート一覧から複数の写真を組み合わせるテンプレートを選びます。ここでは［トップ］カテゴリからフォトスライド系のテンプレートを選びました

スライドリストの［鉛筆］メニューをクリックして詳細画面を表示し、［フォトアルバム］の［＋］をクリックして写真を1枚ずつ追加していきます。最初からテンプレートに入っていた写真は削除して構いません。写真を追加し終えたら［適用］をクリックします

写真が短冊上に並ぶレイアウトとなりました。カーソルが乗るとその写真の幅が広く表示されます。このスライド効果を変更したい場合は再びスライドの編集画面を表示し、［設定］画面の［表示スタイル］を現在とは異なるレイアウトに変更します

［ブラウザで表示］をクリックしてWebブラウザで表示させました。ウインドウ画面一杯に写真が広がるインパクトのある表示となりました。右側の［＞］マークをクリックすると、さらに隠れている写真が表示されます

写真ではなく動画を背景にする機能もあり、設定方法はあらかじめ用意された動画から選択するだけです。背景ムービーの素材は、追加テンプレート集を購入すると選択肢が広がります。そのほか、LiVE2では、閲覧するデバイスの種類ごとに背景やコンテンツの表示を自動的に適切なものに切り替えられます。シングルページのWebサイトでありながら、PC、スマートフォン、タブレットという代表的な画面サイズでどのように表示されるのか一目でわかり、多様な閲覧環境に対応しなくてはならないWeb制作者の制作コストを削減できます。

背景を動画にする際は、スライドの編集画面を表示し、［背景］の［BGアニメーション］をクリックし、さらにアニメーション一覧からプリセットの動画を選択します

スライドに動画が反映されました。PC以外での表示確認もできます。左上のアイコンで［スマートフォン］向け表示と［タブレット］向け表示に切り替えて確認できます。それぞれの表示をカスタマイズして変更もできます