魅力的なテンプレートを備える「LiVE for WebLiFE*」

閲覧者を楽しませ、引き込む演出をするWebサイトが作れるソフト「LiVE for WebLiFE*」(以下、LiVE)が先日発売された。LiVEは、HTML5やCSS3、jQueryなど最新のWeb技術を持ち合わせていない初心者でも、これらの技術を簡単に扱うことができる仕組みが数多く搭載されている。これで、コードやデザインに長けた者でしか表現できない領域を一般の人々がようやく手にすることができるようになったのだ。

LiVEを使えば、企業サイトやコーポレイトブランドなどでよく見られるあのデザインセンスに優れた動きのあるWebを簡単に個人でも作れるのだ。何か表現したいコンセプトがあれば、それを瞬時に伝えたいWebの形へと変えてくれる。LiVEの開発元であるデジタルステージの平野氏は、これを「プレゼンテーション型Webサイト」と位置付けている。

前回、筆者が趣味にしている登山を中心に、山の魅力を伝えるWebサイト「ハイクで俳句」を作成するコンセプトを示した。今回は、実際作成しながら「LiVE 」の魅力を紹介していこう。

発売されたウェブ制作ソフト「LiVE for WebLiFE*」。サイト作りに役立ちそうな様々なグッズも同梱されている

まずは、今回利用する写真を少しばかり紹介しよう。LiVEは、写真などの素材の良さをダイナミックに臨場感たっぷりにWebサイトへと展開するのに非常に適している。

中央アルプスの代表的な景色の一つにも挙げられる千畳敷から見た「宝剣岳」。 登山道には、岩場や鎖場などもあるが、写真のような絶景が登山の醍醐味を教え てくれる

戦国大名である佐々成政が厳冬期に越中から浜松まで向かう折に、越えていった 逸話"さらさら越え"で有名な「針ノ木峠」。峠から西側にある針ノ木岳には斜面を横切って登る登山用語でいうところのトラバースですすむ。200メートルはあるであろうこのトラバースは、忘れがたい体験

眼下には黒部ダム。空には、立山、剱岳を臨む撮影ポイント。黒部ダムは映画「黒部の太陽」やNHKのドキュメンタリー「プロジェクトX」でも描かれた建設に多大な苦労を強いられたダム。そんなことに思いを馳せながらシャッターを切った。

デジタルカメラで撮影した自慢の写真を、背景やスライドショーなどに大量に利用することでLiVEを最大限に活用することができる。それでは前回、構想を練ったWebサイト「ハイクで俳句」をベースに早速作成してみよう。

ケースに応じて使い分けられる魅力的なテンプレート

INTRODUCTION：(名刺サイト)

PHOTOGRAPH/MOVIE：(総合サイト)

PORTFOLIO：(ポートフォリオサイト)

TEASER SITE：(予告サイト)

COMMUNITY：(コミュニティサイト)

BRANDING：(店舗サイト　使用には別途サーバー契約が必要)

テンプレートへのこだわりは、LiVEの大きな魅力だ。テンプレートはデザインを中心とした見せ方、HTMLやCSSに関連する技術的な細部におよぶまで、練りに練ったものを収録している。また、作り手の使い方に応じて、大きく分けたカテゴライズを提案している。

INTRODUCTION：(名刺サイト)は、"10秒で自分を覚えてもらえる名刺サイト"をテーマに名刺代わりに自分を知ってもらえるWebページを作れるテンプレート。FacebookやTwitterなどのSNSボタンを違和感なく配置し、趣味や活動、自分史と大胆に配置できるのが特徴だ。

PHOTOGRAPH/MOVIE：(総合サイト)では、フルスクリーンの写真や映像を使った雰囲気を思う存分に表現できる構成。高解像度の写真のインパクトが画面全体のムードを作り出す。写真とマッチするBGMやカレンダーを用いたコンテンツなども可能となる総合的な作りにもなっている。

PORTFOLIO：(ポートフォリオサイト)は、スタイリッシュな感覚を与えてくれる。スライドを駆使した作品紹介、アーティストやクリエイターライクな深い世界観、メッセージを引き出してくれる。

TEASER SITE：(予告サイト)は、ティザーサイトという言葉で馴染みのある方もいらっしゃるだろう。新製品やイベントの告知などでもよく使われるパターンだ。TEASER SITEには、「カウントダウンカレンダー」が設置されている。その日までのカウントダウンを常に表示するカウントカレンダーは、"日時"を盛り上げられるツール。

COMMUNITY：(コミュニティサイト)は、TwitterやFacebookなどのウィジェットと写真、そしてスライドを大胆に組み合わせるテンプレート。SNSを中心としたファンを広げるために活用できるテンプレートになる。

BRANDING：(店舗サイト)は、ビジュアルとコピーで商品やサービスのアピールにも適したスライドやウィジェットをレイアウトしている。企業サイトにもそのまま使えるようなブランディングを念頭においたものだ。








さて、起動後、最初に表示されるサイトシアター画面右下の「新規サイト」ボタンをクリックするとテンプレート一覧に表示される。それぞれのテンプレートをクリックすると図1のような説明文が表示されるので、これらを参考にしていくとよいだろう。

LiVEのテンプレートにはパーツを含めたフルデザインが施されたテンプレートと、最低限のレイアウト組み中心に構成される"スケルトン"の2種類がある。LiVEの持ち味をそのままに、手軽に進めていくのであれば前者、よりオリジナリティを前面に作り込むのであれば後者と使い分けられる。初心者に易しいというだけではなく、習熟度とともに継続的にテンプレートをカスタマイズしていける仕組みが提供されているのだ。

今回は、多少アレンジを取り入れるので「総合サイト(スケルトン仕様)」テンプレートを基に利用することにした（図2）。総合サイトは、写真や映像を駆使した"PHOTOGRAPH/MOVIE"を実現するテンプレートで、今回の登山のテーマには、最適だと思った。

図1 トップの「サイトシアター」画面右下の「新規サイト」ボタンをクリックするとテンプレート一覧が表示される

図2 「総合サイト(スケルトン仕様)」テンプレートは「プレーン」、「スライドショー」、「ムービー」の3つのスライドで構成されている。

テンプレートにページを追加する

次は、新規ページをテンプレートに追加する。テンプレートをそのまま使うのではなく、自由にカスタマイズしていける拡張性がLiVEには備えてある。テンプレートをベースに、オリジナルなものへと作り込んでいける点にも言及しておきたい。魅力的なテンプレートを使って、初心者でもカンタンに作るとことができるソフトであると同時に、カスタマイズしようと思えばどれだけでも拡張できてしまうのだ。「総合サイト(スケルトン仕様)」テンプレートは、トップページとその他ページの2ページ構成だ。今回筆者が構想する登山のサイトでは、さらに3ページ追加する必要がある(図3)。

図3 「総合サイト(スケルトン仕様)」テンプレートのページ構成。右下の「新規ページ」ボタンをクリックすることでページを追加できる

追加するページは、「タテスクロール」、「ヨコスクロール」の2つから選べる。大きな矢印で方向を示してあるので、直感的に何を行うかが理解できる。「ハイクで俳句」では、企画に合わせて春がヨコ、夏がタテ、秋がヨコ、冬がタテという構成にする。

図04「追加ページ一覧」ダイアログでタテとヨコの2タイプのスライドを選択できる。「このページを作成」ボタンをクリックしてページを追加する

新たに、ページが追加されると「サイトエディタ」が起動する(図5)。エディタトップのアドレスバーでページ名とファイル名、ページタイトルの設定ができる。今回はページ名とタイトル名は、「夏のハイク」と変更、ファイル名はそのままにする(図6)。

図05 起動した「サイトエディタ」。追加された新規ページのスライドはオールマイティに使える「プレーン」、写真を見せるための「フォトアルバム」、「スライドショー」の3つの構成になっている

図06 メニュー上部にあるアドレスバーをダブルクリックすると「ページ詳細設定」ダイアログが表示される。ページタイトル、ファイル名や他の詳細な設定を行う

同じ作業を繰り返して、「夏」、「秋」、「冬」のページを作成する。トップページと春のページのページ名とタイトル名を記入しておく(図7)。

図7 サイトエディタ上に設置した5ページ

これで今回のWebサイトの基本構成である5ページの作成が完了した。駆け足で進んだが、実に簡単にWebサイトを作り出せた。Webを作ったことのある人ならば経験するであろう、美しいデザイン配置のためのCSSコーディング、ディレクトリ構造の煩わしさや大量のファイルの取り扱いなども含む、悩みの部分が削ぎ落とされた感がある。テンプレートという構造を利用してコンテンツの核の部分、いいたいこと、みせたいこと、思っていることに純粋に邁進できるだろう。ここからは、個々のページを具体的に作成していこう。