最近のWebサイトでは、系統立てされたページ構成やブログなどの機能を兼ね備えた"公式サイト"に加えて、サイト訪問者の目を強く惹きつけるデザインや動き、動画、音楽などを組み合わせた"スペシャルサイト"(ランディングページ)と呼ばれるプロモーションのために特化された専用サイトを設けるのがトレンドとなっている。また、検索エンジンからではなく、ネット広告や、Twitter、FacebookといったSNSから、ユーザーがページに辿り着くことが多くなっているため、スペシャルサイトの重要性はますます増してきているといって良いだろう。

初心者でもダイナミックかつインタラクティブなWebサイトを簡単に制作できるソフトウェア「LiVE for WebLiFE 2」

そんなWeb業界の流れを受け、Webやデザインについての専門的な知識のないユーザーでも、プロフェッショナルクオリティーの美しいサイトを構築できる「BiND for WebLiFE 6」でお馴染みのデジタルステージから、プログラミングを一切行わず本格的なjQueryベースのスペシャルサイトが制作できるソフトウェア「LiVE for WebLiFE 2」が登場した。本レポートでは、サイト訪問者を一瞬で釘付けにしてしまう、そんなスペシャルサイトをだれでも簡単に制作できる同ソフトの様々な魅力と使い勝手について、実際のサイト制作の手順を解説しながら紹介していこう。

同ソフトを起動すると、まずWebサイトの管理や編集を行える「サイトシアター」画面が表示される。本画面では、ユーザーが作成した既存のサイト(マイサイト)の管理だけでなく、テンプレートを選んで新たなサイトを作成することもできる。また、管理しているWebサイトが増えてくると操作が品雑になりがちだが、マイサイトにはサイトの作業状態を表すラベルの設定が可能となっており、進捗状況も整理でき便利だ。操作方法を解説したチュートリアルビデオやお知らせが表示されているのも、ソフトを初めて触れる初心者にも心強いだろう。

「LiVE for WebLiFE 2」の起動直後のサイトシアター画面。初期設定では、「スライド編」「編集機能編」「マルチデバイス編」など、3つのチュートリアルビデオへのリンク(YouTube)が、あらかじめ用意されている

基本的なサイト制作の手順は、好みの「スライドテンプレート」を選択し、そのテンプレートを元に編集を行いオリジナルのサイトを作成するという、いたってシンプルなもの。スライドテンプレートは、アルバムや記事など12種類の用途にカテゴライズされた100種以上が用意されており、いずれもプロクリエイターによりデサインされた美しい仕上がりとなっている。

サイトシアター画面の右上にある「サイトの新規作成」ボタンをクリックし、表示された「スライドテンプレート一覧」から、好みのテンプレートを探して選択しよう

次に、スライドテンプレートを選ぶと自動的にページが作成される。表示されたページエディタ画面では、スライドの追加と編集、ウィジェット(100種)やナビセット(12種)の配置、ページ設定などの編集を行える。画面左側には、ページ内のスライドがサムネイルとして表示され、それぞれのサムネイルを選択し、該当するスライドを編集する仕組みだ。こういった編集方法は、一般的なプレゼンテーションソフトなどと相通ずるものがあり、迷わず直感的に操作できるはず。さらに、画面右下には、ページのタイトルや背景などを設定するための「ページ設定とデザイン」ボタンや、ページヘッダー／フッター、サイト共通ヘッダー／フッターを設定する画面を表示する「ヘッダーとフッター」ボタンなどが用意されている。基本的に、ページに関するデザインは、ほぼすべてが本画面に集約されているので、テンプレートを気軽に切り替えながら、納得行くまでコンテンツのブラッシュアップに集中できる。

スライド内の変更したいテキストなどをクリックし、テキストエディタ感覚で行える。ページに新たなスライドを追加する場合は、画面左上の「スライドを追加」をクリックし、テンプレートを選ぶだけの簡単操作

ページにSNS(Facebook／Twitter)との連携や、サウンド、リッチテキスト、ドットナビなどの機能を追加したい場合は、ページエディタ画面の右上にある「ウィジェットの追加」ボタンをクリックし任意の機能を選択する

これらに加えて、「LiVE for WebLiFE 2」ならではの、リッチなサイトデザインを実現するのが、スライドのバックブランドでムービーが流れる「BGムービー」や、凝ったアニメーションエフェクトでサイトにインパクトや遊びを加えられる「BGアニメーション」といった機能。また、よりダイナミックな動きを表現し、スライドのデザインにさらなる躍動感を演出したいなら、多種多様なテキスト演出でスライドタイトルなどの文字に動きを与えられる「モーションテキスト」や、スクロールの際にサイト訪問者の目を強く惹きつけられる背景の「パララックス効果(視差効果)などを活用してみるのも面白い。

「BGムービー」や「BGアニメーション」は、使いすぎるとデザインが煩わしくなるので逆効果。サイトのTOPページや印象的なメッセージを伝えるスライドなど、ココ一番の箇所でのみぜひとも使いたい大技といえるだろう

「パララックス効果」は、スライド設定画面の「背景」タブで、背景として「前」と「後」の2種類を画像を設定しパララックスをONにするだけ。なお、モーションテキストのアニメーションは、フェード、タイプライター、クロスワード、バルーンフロートなど豊富なバリエーションの中から選択可能だ

さらに、同ソフトの大きな魅力となっているのが、ひとつのサイトを作るだけでPC/スマートフォン/タブレットといった3つのデバイスに最適化されたデザインを自動的に作成できることだろう。ページエディタ画面の左上にある「編集モード」から、PC、スマートフォン、タブレットの各モードを選択するだけで、これら3タイプのサイトを同時に生成できる。スマートフォンなどのモバイルデバイスの縦長画面にフィットしたデザインを別途用意することで、モバイルユーザーでもアクセスしやすいスペシャルサイトを構築可能となっている。

「編集モード」切り替えボタンで各デバイス毎のデザインをプレビュー画面で確認できる。スライドの内容を書き換えた際、スライドタイトル・本文やアルバム写真、メニュー、ロゴなどのコンテンツを3デバイスで同期させ共通化できる「3デバイス同期機能」も便利

また、もうひとつ忘れてはならないのが、インターネット上に保存されているフォントデータを用い、Webサイトでも美しいテキスト表示を実現する最新技術「Webフォント」への対応だ。従来のフォント指定では、閲覧者のパソコンのインストールされているフォントにより画面表示されるフォント変化していたが、Webフォントに対応したことでデザイナーの意図したフォントをいつでもどこでも正しく表示できるようになったのが嬉しい! ただし、約300書体のWebフォントを利用するには、同社が提供する「WebLiFEサーバー」との契約が必須だ。

ページエディタ画面の右上にある「F」ボタンをクリックした後、フォントの設定対象となるテキストを選択。Webフォントの一覧(サンプルあり)が表示されるので、任意のフォントを選択し適用をクリックすれば完了だ

ページの編集が完了したら、ページエディタ画面左上の「サイトエディタに戻る」ボタンをクリックして、サイト内の各ページの管理や設定を統括的に行える「サイトエディタ」画面を表示しよう。サイトを構成する各ページがサムネイルで表示されており、「新規ページ」ボタンを選択するとサイトに新しいページを追加することができる。なお、画面左上の「サイトシアターに戻る」をクリックし、ソフトの起動時に表示された「サイトシアター」画面に戻ることも可能だ。 さて、こうして作成したサイトを一般公開する方法だが、それもいたってシンプルで「サイトエディタ」画面右上の公開ボタンをクリックするだけ。あとは、制作したサイトデータが自動的にサーバーにアップロードされる。このときサーバ設定が行われていない場合のみ、データのアップロード先となるサーバなどの設定を促される。「サーバ設定」画面では、サイト名をはじめ、Favicon/WebClipアイコン、サーバーの種類やログイン情報、サイトURLなどを入力できる。同社では、高機能かつ安定したLiVE専用サーバー「WebLiFE サーバー」を提供しており、LiVEを購入すると最大1年間無料で利用できる。「サーバー設定アシスタント」に従って設定を進めるだけで公開できるので、初心者はこちらを利用するのがオススメ！

「サイトエディタ」は、サイト編集の起点となる画面。サイトの管理やページエディタ画面への切り替え、新規ページの追加などが行えるだけでなく、サイドバーには、Google Analyticsによるアクセス解析の結果がグラフと表示されサイト毎のアクセス状況も確認できる

サイドバーに用意された「みんなに知らせる」ボタンをクリックすると、「ソーシャルコネクト」が自動的に起動し、TwitterやFacebook、MixiなどのSNSに同時にサイトの更新情報を一括通知可能となっている

「サイト設定」画面では、同社が提供する「WebLiFEサーバー」に加えて、「一般的なFTPサーバー」へのアップロードの選択可能となった。自身が契約済のサーバーにて、「LiVE for WebLiFE 2」で制作したサイトも公開可能

このように、従来はダイナミックな動きのあるWebサイトを制作するためには、どうしてもjQueryなどのプログラミング知識が必須となっていたが、同ソフトを使えば、多彩なパーツをパズル感覚で組み合わせるだけで、思い通りのサイト作成を行える。しかも、パソコンだけでなく流行のスマートフォン、タブレットといったモバイル端末にも同時に対応が可能。まさに、現在のトレンドにマッチしたスペシャルサイトを誰でも簡単に制作できる。「自分でデザインに優れ注目度の高いサイトを作りたいが、技術も時間も足りない」とお悩みのユーザーにこそ、ぜひオススメしたいWeb制作ソフトウェアだ。