jQueryなどのフレームワークを活用することでリッチなUI/UXを実装すること容易となる一方、過去のWebデザインよりもスクリプト重視のエンジニアリングが要求され、WebデザイナーにとってはWebサイト制作の敷居が上がっている。この課題に対するひとつの回答としてデジタルステージが発売した製品が「LiVE for WebLiFE*」（以下、LiVE）。HTMLコードを書かずに高品質なWebデザインを実現できる同社のBiND for WebLiFE*（以下、BiND）と同様、JavaScriptをいっさい書くことなく、いまどきのリッチなHTML5サイトを制作できるツールとして注目の逸品だ。ここでは「LiVE」の機能および操作性などについて、実際にソフトウェアを利用したユーザーの声も交えながら紹介しよう。
Web業界のトレンド
フルスクリーン＆パララックスでブランディング色を前面に打ち出した大塚製薬の「オロナイン公式サイト」（www.otsuka.co.jp/ohn/）
高度化するWebブラウザやスマートフォン・タブレットなど新たなデバイスの台頭により、WebサイトのHTML5化ニーズはますます高まっている。特にプロモーションやブランディングを目的とした特設サイトなどでは、シンプルなメッセージをよりリッチなインターフェイスで提供することにより、先進的かつ洗練されたイメージ訴求を行う傾向にある。言い換えれば、コンテンツにあふれる現在のインターネットの中では、ユーザーの関心を惹きつけるために「メッセージのシンプル化」と「リッチUI/UX」の提供が必須であり、それを実現するのはHTML5という技術である。
情報過多ともいえる現在のインターネット上で、あえて情報量（文字量）を押さえることで、短時間の閲覧でもユーザに適確にメッセージを訴求することができ、なおかつインパクトのある視覚的デザインと動きのある演出で強烈に記憶させる。そういったWebデザインが、現在のWeb業界でのトレンドである。
いま人気のWeb表現手法
前出の「オロナイン公式サイト」（www.otsuka.co.jp/ohn/）では、画面を縦スクロールするにつれ、製品写真が回転するなどのパララックス効果を実装。オーディエンスにスクロールする楽しみを演出している。
ブランディングコンテンツデザインなどの時流となっている、HTML5によるリッチなインターフェイスの実装。そのキーワードは、「フルスクリーン」「パララックス」などだ。
コンテンツ内容に合わせて縦長のデザインでサイドバーを配置するといった、いわゆるコーポレート系サイトデザインではなく、ディスプレイに合わせて横長あるいは縦長をイメージし、ブラウザサイズいっぱいに背景画像を敷くなどしてインパクトのあるデザインを実現する、フルスクリーン表示。そして、ページスクロールに合わせて、適宜表示するコンテンツをダイナミックに切り替えるパララックス効果。いずれもHTML5、CSS3そしてJavaScriptによって開発される。
また、一方でこれらのリッチコンテンツは、PC以外のデバイスとしてスマートフォンやタブレット端末もターゲットとして想定している。特にフルスクリーン表示によって、まるで高品位にデザインされたカタログをめくるようにコンテンツを閲覧するインパクトは、スマートフォンやタブレットでこそ効果的だ。さらにメンテナンス性も向上させることのできるワンソース・マルチデバイス化は、今後ますます重視されるWeb開発技術といえよう。
LiVE for WebLiFE*で豊かなWeb表現を
「LiVE」なら、豊富なテンプレートをベースとして、デザインパーツやリッチなUIパーツを自由に配置していまどきのWebページをデザインできる
Webデザインのトレンドキーワードとしての「フルスクリーン」「パララックス」。これらの機能は、jQueryなどのフレームワークとプラグインを使って実装することも可能だが、従来グラフィックデザインをメインとしてきたWebデザイナーにとっては、表示検証とチューニングなどを考えると難易度の高いクリエイティブワークでもある。そこで、これらのリッチなUI/UXを誰でもが容易に実装できることを目的として開発されたのが「LiVE」だ。
「LiVE」ならフルスクリーンデザインをベースとして、あたかもスライドをデザインするような感覚でWebサイトを簡単にデザインしていくことができる。しかも「パララックス」はもちろん、ページの切り替え効果やソーシャル連携ボタンなども簡易に取り込むことができ、いまどきのWebサイトをごく短時間で完成させることができるのだ。
しかも、制作にあたってはJavaScriptによるプログラミングなどは一切必要なし。豊富なテンプレートを利用することで、HTMLやCSSすら記述する必要はなく、必要なデザインパーツを配置し、ダイアログで色などの設定を行うだけという簡単操作だ。
次ページから実際にソフトウエアを利用してWebサイトを制作したWebデザイナーへのインタビューを通じて、「LiVE」の機能や操作性について紹介していこう。
デジタルステージが販売する「LiVE for WebLiFE*」（ライブ・フォー・ウェブライフ）は、最新のHTML5＋CSS3＋jQueryによるWebサイトをHTMLやJavaScriptなどのコーディングを一切することなく構築できるソフトウエア。高品位かつ豊富なテンプレートを利用でき、Webブラウザいっぱいに表示されるフルスクリーンタイプのWebサイトに、さまざまなページ切替効果やパララックスなどの視覚的効果、複数のサウンドなどを簡単に追加してリッチなUI/UXを実現。プロモーションやブランディングなど「プレゼンテーション」を目的とした特設サイト制作などに最適なWebデザインツールである。
- for Mac&Windows 各2万4800円（税込）
- URL www.digitalstage.jp/live/
