見ている人を楽しませる!「LiVE for WebLiFE*」ではじめるプレゼンテーション型Web作成 - 前編

Web作成の歴史を振り返ると大きな流れを見て取ることができる。テキストエディタでHTMLタグを入力してFTPでアップロードする時代、CGIを用いてフォームや掲示板やチャットをカスタマイズしながら工夫を凝らして設置する時代から多彩なCMSを活用したりと筆者のWebとの関わりも交えて振り返るだけでもいくつかの変遷があった。そしてSNSやWeb2.0という言葉に代表されるような個人が簡単に発信できる時代である。ソーシャル時代におけるWeb作成という現在のテーマにおいて、もっとも重要なことは果たして何であろうか ?

前回、デジタルステージの平野友康氏に紹介していただいた、プレゼンテーション型Webサイトは新しい形のひとつの"型"を示すものであると感じた。ソーシャルの世界では、数多の情報が絶えず流れている。そんな中では、閲覧者を一瞬で惹きつける"プレゼン型"のWebサイトが重要になってくるのだ。同社が提供する「LiVE for WebLiFE*」は、このプレゼンテーション型Webを作成するためのソフトだ。今回発売を前にベータ版を入手する機会を得たので、これを紹介してみよう。

「LiVE for WebLiFE*」とは

プレゼン型Webサイトを作るソフト「LiVE for WebLiFE*」

プレゼンテーション型Webサイトが持ついくつかの側面のうちの一つを実に簡単な言葉で語ってしまうと、最近よく目にする縦か横に長くスクロールさせて、画面いっぱいの表示でアニメーションのように見せるページだ。企業が自社イメージを強く打ち出すブランディングサイト、新製品の広告サイトなどあの"かっこいい～"と思ってしまうWebサイトを挙げることができる。これらのサイトは、JavaScriptやjQueryなどに代表されるプログラミングの知識が必要であり、かつデザイン的にも調和のとれたものであり、一般ユーザーが作成するには非常にハードルが高いものだった。「LiVE for WebLiFE*」は、そういったプレゼンテーション型サイトも手軽に創れてしまうところに大きな特徴がある。

「LiVE for WebLiFE*」の特徴

「LiVE for WebLiFE*」は、従来のWeb作成ソフトとは制作コンセプトがまったく異なる。従来のWeb作成ソフトは、デザインとコードを交互に見ながらパーツを組み合わて、コードを記述していくという制作プロセスを採用する。それに対して、「LiVE for WebLiFE*」では、基本のテンプレートをベースに背景やパーツなどをカスタマイズしながら制作していく。これは同じく同社が世に送り出しているもう一つのWeb制作ソフト「BiND for WebLiFE*」でも同様だ。

テンプレート方式は、プログラムコードやCSSなどの難易度の高い部分を払拭できるので、一般の人にも制作過程がわかりやすく、カスタマイズ感覚で質の高いWebサイトを作成できる。また、テンプレートを元に作成するので仕上がりも速い（図2）。

テンプレートには、標準で「プロフィール」、「レポート」、「ポートフィリオ」、「ティザー」、「コミュニティー」、「ブランディング」などの6つのパターンが備わる。「プロフィール」（図3）は、自己のプロフィールや現在の活動などを載せることに向いたテンプレート。「レポート」（図4）は、テキストや写真、動画を大量にアップするのに適したテンプレートを揃えている。「ポートフィリオ」（図5）は、音楽や映像などの作品をよく見せるための演出効果に力点を置いたものだ。他にもテンプレートも用途に合わせて考え抜かれたテンプレートを用意している。これらはHTML5とCSS3など最新の技術を使いながら作成されている。決め手となるデザインのクオリティの高さも実際に見てもらえれば、伝わるのではないかと思う。

スライドとウィジェット

「LiVE for WebLiFE*」でWebを作成する場合スライドとウィジェットという概念を覚えておくとスムーズに作成工程へと入っていける。個々のテンプレートは、複数のページと"動き"を表すスライドを組み合わせた構成になっており、テンプレートの内容は「サイトエディタ」（図6）で確認できる。キャンパスに表示されているページは、複数のスライドを纏めたものになっている。サムネイルをクリックして「編集」ボタンをクリックすることでスライドの内容を確認できる。

ページを構成しているスライドは、「ページエディタ」（図7）の右サイドにスライドリストとして表示されている。スライドの順番はドラッグ＆ドロップで変更できる。新規にスライドも追加できる。スライドはヘッダー、フッターなどをメニューから編集できる。

また、画像やテキスト、ボタンなどスライド以外の構成要素は、「LiVE for WebLiFE*」ではウィジェットと呼ばれる（図8）。ウィジェットには、Facebookの「いいね」ボタンやTwitterの「つぶやくボタン」や「ティッカー」、「フォローボタン」や「カウントダウン」、「バルーン」や「リッチテキスト」などがある。これらのウィジェットを貼り付けて、カスタマイズしながらページを作成していくのだ。

では次は、実際に「LiVE for WebLiFE*」を使ってどのようにWebサイトを作っていくかを見てみよう。