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

1枚の写真、わずか数分の短編映像に心奪われる体験をしたことはありませんか?シンプルで印象的なビジュアルイメージは、時として大量の情報よりも的確に伝えるべきメッセージを相手に届ける効果があります。そして、雑多な情報にあふれるインターネットの世界でも同様に、人々の印象に残る特別なWebサイト表現が求められており、先進的なWebデザインの典型的な試みのひとつが、スクロール駆動型のWebサイトです。これは写真やイラスト、映像などのコンテンツを1ページにまとめ、スクロール操作によって画面全体の表示内容を切り替えるWebサイトを指します。

手法としては2010年頃に登場し、2013年末現在では、企業のプロモーションサイトや海外アーティストのイベント特設サイトなどの「スペシャルWebサイト」を中心に普及し始めています。例として、アップルの「Mac Pro」の製品ページ(2013年12月13日現在)を見ると、どのようなものか具体的にイメージできるでしょう。テキストがアニメーションで動いたり背景画像がスクロール操作にあわせて変化したりと、訪問者を驚かせるような演出により、新商品で伝えたい内容を余すことなく表現しています。

「スペシャルWebサイト」を自分で作るには、HTML5やCSS3、JavaScriptなど高度な制作技術が必要で、プロのWebクリエイターではない多くの人にとっては非常にハードルが高いものです。しかし、今では専門知識がなくてもスペシャルWebサイトを手軽に作れるデジタルステージの「LiVE for WebLiFE* 2(以下LiVE2)」というソフトが登場しているため、一番重要な「見てくれる人に伝えたいあなたのメッセージや、感動を与えるビジュアルイメージ」を伝える素材作りに専念できます。今回はこのソフトを使った「スペシャルWebサイト」の作り方を見ていきましょう。

LiVE2体験版で全体的なイメージをつかむ

まずは、お使いのMacまたはWindowsにLiVE2の体験版をダウンロードしてインストールし、どのようなWebサイトが作成できるのか、全体的なイメージをつかみましょう。白紙の状態からいきなりWebサイトを作るのではなく、あらかじめ用意された「スライドテンプレート」からイメージに近いレイアウトを選び、そこに掲載したいテキストや写真、映像などの素材を当てはめていくというのが大きな流れです。

次ページからは、具体的なテクニックを紹介します。