• このエントリーをはてなブックマークに追加
  • チェック
  • Clip to Evernote

jQueryをふんだんに使ったスペシャルサイトが手軽に制作できる「LiVE for WebLiFE* 2」に注目!!

写真やグラフィック、サウンドエフェクトを多用したリッチなインターフェイスのWebサイトを簡単に実現できる「LiVE for WebLiFE*」。2012年の登場以来、プログラミングを一切することなく、デザインや演出にのみ注力することができるため、JavaScriptなど苦手なWebデザイナーも低コスト・短納期で高品位なWebサイトを制作できるとあって、多くのユーザーから高い支持を得ている。
そのLiVE for WebLiFE*が、さらなる機能拡充と使い勝手の向上を図り、バージョン2がこの9月にいよいよ登場。“プロモーションやキャンペーンなどに特化したスペシャルサイトをスピーディに制作できる!”そんなWebデザイナーの強い味方であるLiVE for WebLiFE*を、サンプルサイトを交えながら紹介していこう。

LiVE for WebLiFE* 2

LiVE for WebLiFE* 2とは

LiVE for WebLiFE*は、スライドショーやパララックス効果など、写真やグラフィックを効果的に活用した演出性の高いWebサイトを簡単に実現できるWebオーサリングソフト。その技術的ベースとなっているのが、HTML5とCSS3、そしてjQueryである。といってもJavaScriptプログラミングはおろか、HTMLすらコーディングする必要はなく、LiVE for WebLiFE*に搭載されている専用インターフェイスで写真やエフェクト、キャッチ—なボタンやウィジェットなどを選ぶだけで、リッチなインターフェイスを誰でもが簡単に実装することが可能だ。 LiVE for WebLiFE*では、ウィンドウに表示される一画面をスライドと呼び、複数のスライドを並べていく感覚でWebページを構築していくことができるため、高品位なデザインや演出が求められるスクロール型のスペシャルサイト制作に最適なツールなのである。 さらに、LiVE for WebLiFE*で制作したWebサイトはPCだけでなく、タブレットやスマートフォンなどのタッチデバイスにも対応。ワンソース・マルチデバイスにより、高品位なスペシャルサイトを低コスト・短納期で構築することができてしまう。

スペシャルサイトの重要性

「つきぬけ爽快!スプライトブランドサイト」(https://c.cocacola.co.jp/sprite/
ページスクロールに応じてコンテンツがダイナミックに変化するパララックス効果は、ユーザーに与えるインパクトも大きい

  • メッセージをスピーディかつ強く訴求するには、膨大なテキスト情報よりビデオ映像のほうがスペシャルサイトとして効果的

  • 各種SNSへの連携ボタンを設置することで口コミによる情報波及を狙うのも、スペシャルサイトの重要な仕掛けのひとつ

インターネットを通じて情報アクセスするのが当たり前という今、商品やサービスのプロモーションなどに対して、ユーザーはメディアとWebが連動した企画を当然のごとく期待し、Webへとアクセスする。しかも、WebアクセスするデバイスはPCだけでなく、スマートフォンを中心としたタッチデバイスも台頭している時代だ。
そんな状況においては、PC向けに多く制作されてきたテキスト情報盛りだくさんの従来型情報コンテンツではなく、情報は必要最低限に抑えつつ、写真や動きの演出を強調したリッチインターフェイスによるスペシャルサイトの重要性が再認識されている。特にブランドサイトやキャンペーンコンテンツでは、画像や動画などを効果的に活用し、フルスクリーンで表現されるケースが多い。
こういったスペシャルサイトの多くは、HTML5+CSS3+JavaScriptによる実装が必要で、大企業がコストをかけて展開する…というのが一般的。しかし、スペシャルサイトの制作に特化したWebオーサリングソフトであるLiVE for WebLiFE* 2があれば、高い演出性を有したスペシャルサイトを低コスト・短納期で実現することができるのである。
LiVE for WebLiFE* 2を利用すれば、潤沢な予算をもつ大企業でなくても、中小企業や個人事業主が自社製品やサービスを効果的にプロモーションするためのスペシャルコンテンツを用意することができ、自社サイトやランディングページなどを通じて、大企業にも劣らないWebプロモーションを展開することが可能だ。

スペシャルサイトと通常サイトを比較してみよう

では、ここで一般的なコーポレートサイトに見られる情報コンテンツと、効果的な演出を施したスペシャルコンテンツを比較して見てみよう。
テキストや写真・図版などの画像を静的にコーディングした従来型のWebサイトは、まさに情報コンテンツであり、商品やサービスの詳細な情報を欲しているユーザーにとって充足感のあるコンテンツであるが、言ってみれば、すでにその商品やサービスに関するある程度の知識があり、さらなる情報を求めるという目的型アクセスに対応するものだ。
これに対してスペシャルコンテンツは、新しい商品やサービスに関する情報をスピーディに波及させるという目的に適している。CMや紙媒体などのメディアと連動せずとも、インターネット上での口コミや検索エンジンからのランディングページとして、ブランディングやプロモーションを目的としたコンテンツを展開したい場合は、こういったスペシャルサイトを展開することで、ユーザーによりインパクトを与え、メッセージを強く押し出すことができる。
ここに、通常のHTMLでつくったサンプルWebサイトと、LiVE for WebLiFE* 2で制作したサンプルWebサイトを用意した。東京湾クルージングのティザーサイトという設定だ。情報の伝え方はもちろん、見たときのインパクトはスペシャルサイトのほうが上だということがわかるだろう。

● HTMLで制作したWebサイト

パッと見はふつうのWebサイトだが、少々寂しい印象を受ける。ティザーサイトなので文字量が少なく、動きも乏しいのが原因か

サンプルサイトはこちら

● LiVE for WebLiFE* 2で制作したWebサイト

写真を大きく見せているほか、動画なども使うことで文字数が少なくても強く印象に残るティザーサイトとなっている

サンプルサイトはこちら

ここがポイント!1

トップページ背景にはインパクトのある動画を使用。またクルージングの開催日時に合わせて雪を降らせたり、カウントダウンウィジェットを設置しました。これらはすべて簡単に設定できます。

ここがポイント!2

スライドに使ったキャプションやフォント、サイズ、ウエイトなどはCSSでカスタマイズ。さらに、写真をスライドさせる「<」「>」ボタンの位置をCSSで設定。CSSタグがカスタマイズできるので、自分好みのテクニックを取り入れられます。

ここがポイント!3

Googleマップも、テンプレートを使うことで手軽に挿入可能。また全ページ共通でソーシャルボタンを配置していますが、あらかじめ用意されたウィジェットから選ぶだけでOKです。ページに奥行きをもたらすパララックス効果も、複数のpng画像を重ねて設定するだけ。動くスピードの調整も可能です。

LiVE for WebLiFE* 2

LiVE for WebLiFE* 2

●OS:
【Mac版】Mac OS X 10.6/10.7/10.8(サーバー版を除く)
  • ※OS X 10.9には発売後対応予定
  • ※日本語版での動作のみ対応
  • ※Mac OS Xの動作が保証されているApple純正Macのみ対応
【Windows版】Windows 8(32bit/64bit対応 ただし64bit版OSでは32bitモードで動作)/Windows 7 SP1 (32bit/64bit対応 ただし64bit版OSでは32bitモードで動作)/Windows Vista SP2(64bit版とサーバー版を除く)/Windows XP SP3(64bit版、サーバー版、Media Center Edition、Tablet PC Editionを除く)
  • ※Windows 8.1には発売後対応予定
  • ※日本語版での動作のみ対応
●CPU:
Intel Core 2 Duo 2.0GHz以上のフロセッサ(または同等のスぺックのプロセッサ)
●必要メモリ:
2GB以上(4GB以上推奨)
●ディスプレイ:
1280×768ピクセル以上のモニタ(1440×900ピクセル以上を推奨)
●ハードディスク:
10GB以上のディスク空き容量
●標準価格:
1万9800円

[URL] www.digitalstage.jp/live/