デジタルステージの「LiVE for WebLiFE* 2」(以下、LiVE2)は、ビジュアルと動きで魅せる「スペシャルサイト」に特化したホームページ作成ソフトだ。これまではWebの専門知識とデザインスキル、その両方を持っていないと作れなかった美麗で動きのあるサイトが、PowerPointなどのプレゼンテーションを作る感覚でカンタンに作成できる。実際にサイトを作りながら、LiVE2の使い勝手を見ていこう。

インパクトのある“動く”スペシャルサイトが誰でも作れる!

動きがあり、インパクト大なスペシャルサイトがトレンド。パララックスなどの視覚効果をLiVE2のサンプルサイトで確認してみよう

ブログやSNSなど、ソーシャルでの情報発信・拡散は容易になっているが、だからといって「Webサイト」が不要になったわけではない。むしろ、誰かに伝えたいと思わせる、情報の拡散元となるコンテンツや、SNSからの着地先(ランディングページ)は重要になっている。口コミスピードが速い時代だからこそ、感性に訴えかけることが大切になっているのである。

会社の情報を総合的に扱うのは、その会社の「公式サイト」と位置づけられるが、そこで用意される「製品紹介」や「サービス一覧」は、情報を「網羅」することが目的であって、その会社の個々の製品やサービスを十分に紹介しきるには足りない場合がある。そこで、個々の製品やサービスのイメージをより強く訴求するために用意されるのが「スペシャルサイト」だ

新製品のティザーサイト、新規店舗のオープン告知、期間限定のキャンペーンサイト、来たるイベントのカウントダウンサイト……などなど、スペシャルサイトは、特定の製品やサービスに特化し、期間限定のものが多い。公式サイトの1メニューに組み込んでしまうと、表現手法に大きな制限が加わることになる。ゆえに、特別に訴求したいものを独立したスペシャルサイトとして制作し、公式サイトからはバナーなどで目立つように誘導するわけだ。これなら公式サイトのメンテナンスも最小限で済み、スペシャルサイトでは最新の表現技術を最大限活用して、訴求したいものを思い切って作れる。

「スペシャルサイト」については、MdNも特集を組んでいるので要チェック!
http://www.mdn.co.jp/special/digitalstage/201310/

このスペシャルサイトの表現トレンドとしてあるのが「動き」。たとえば「パララックス(視差)」といわれる効果は、画面をスクロールすると手前のコンテンツに対して背景が違うスピードで動いたり、画像が重なって奥行きが感じられるもののことである。このほかにも、文字が流れるようにして現れたりと、さまざまな動き、演出を随所にちりばめ、見る者を「おっ!?」と思わせることで、世界に引き込み、ハートをつかもうとしているのだ。

このようなコンテンツは、一昔前ならFlashが常套手段ではあったが、最近ではHTMLとCSS、そしてJavaScriptを用いて、見るデバイスを選ばずに作成するのが主流だ。本来なら専門知識が必要な、こうしたWebサイトを、誰でもカンタンに作るためのソフトが、LiVE2というわけだ。

プレゼンテーション作成ソフトのような感覚でカンタンにスペシャルサイトが作成できる

9月19日にデジタルステージから発売された「LiVE2」は、スペシャルサイト作成に特化したホームページ制作ソフトで、知識やセンスがなくても、画面全体をフルに使ったスクロール型のスペシャルサイトを構築できるのが大きな特長なのだ。

2012年7月にリリースされた初代「LiVE for WebLiFE*」の後継バージョンで、見たまま編集により、デザイン上で直接編集できるようになったほか、パララックスのスピードの調整、マウスによるウィジェットの移動、3デバイス同期機能によるスマートフォンやタブレット用ページの自動生成などが主な進化ポイントだ。また、独自のホスティングサービス「WebLiFE*サーバー」を使えば、環境を選ばず、個性的で美しいフォントが利用できる「Webフォント」の利用も可能である。

「LiVE for WebLiFE* 2」の新機能や「WebLiFE*サーバー」についてはMdNの特集をチェック!
http://www.mdn.co.jp/special/digitalstage/201310/02.html

「スライド」+「ウィジェット」+「ナビセット」でサイトを構築

スライドを選んで並べるだけで、スクロール式のサイトができる

「LiVE2」で作るサイトは、複数のWebページ(HTMLファイル)が、リンクのクリックにより切り替わるという従来型の構造ではなく、見かけ1ページのコンテンツを、縦または横にスクロールし、コンテンツがダイナミックに移動していくというスタイルだ。

LiVE2では、このようなWebサイトを、「スライド」と呼ばれるテンプレートと、SNSボタンなどのパーツが選べる「ウィジェット」、ナビゲーションバーが簡単に設定できる「ナビセット」の3つを、目的に合わせて自由に選び、カスタマイズすることで構築していく。

デザインの要となるのが「スライド」のテンプレートである。いくつも用意されたスライドテンプレートの中から好きなものを選び、必要に応じてカスタマイズしていくのがサイト構築の基本的な流れだ。現在、あらかじめ画像素材等がデザインされた状態の「デザインテンプレート」は、トップ用16種、メニュー用6種、プレーン9種、アルバム用15種、スライドショー用9種、記事用6種、ソーシャル用6種、ムービー用12種、フォーム用3種、カレンダー用9種、カウントダウン用6種、カスタムタグ用3種と、計100種類を用意。カスタマイズ性が高いシンプルなベーステンプレートは24種類で、合計124種のスライドテンプレートが用意されている。

選びやすいように分類されているものの、目的にあうデザインなら、どのスライドをどの順番で使ってもかまわない。使いやすそうなテンプレートを選び、ドラッグ操作で順番を入れ替えていくだけで、自動的につながった、スクロール式のサイトができあがる。

スライドはデザインテンプレートだけで約100種類用意されている
カスタマイズしやすいベーステンプレートは24種類

あとは、文字を変更し、写真や背景を入れ変えるだけで、簡単にオリジナルのコンテンツができるようになっている。追加機能も豊富で、SNSのボタンウィジェットや、「Google フォーム」を使った申し込み画面のウィジェットなどが用意され、それらの要素をカンタンに追加できる。文字のアニメーション効果や背景のパララックス効果も、ボタンをクリックするだけという簡単さなのだ。極端な話、写真、テキスト、動画、音楽を差し替えるだけで、キャンペーンサイト、ブランドサイト、ポートフォリオ、ティザーサイト、ランディングページなどが作れてしまうのである

ソースレベルでのカスタマイズも可能だ。編集画面ではCSSの細かい変更もサポートしており、テキスト入力時にはHTML編集モードにも切り替えられるため、知識のある人なら、よりこだわった表現もできる。「ウィジェット」のボタンパーツなどもテンプレート化されているので、無料で収録されているWebパーツ専用の画像編集ツール「SiGN Pro」を使って、文字や色などを変更し、オリジナリティを加えることができる。

すでにHTMLやCSSの知識がある人は、スタイルの細かい設定をいじることもできる
Webパーツ専用の画像編集ツール「SiGN Pro」も無料で使える

しかも見逃せないのは、PC用のサイトを制作するだけで、自動的にスマートフォンや、タブレット用のサイトもできあがることだ。モバイル端末の普及により、パソコンを持たないインターネット利用者も増えているため、モバイル用のコンテンツは欠かせない存在になっている。個々に制作するのは非常に手間がかかるが、「LiVE2」があれば、それぞれの画面サイズに合わせて表示されるコンテンツも基本のベース部分は自動的に生成される。モバイル用のページだけの編集も可能で、プレビューを使ってどのように見えるか、サイズに合わせて最適化したものを確認しながら作業が進められる。

画面左上のボタンを切り替えることで、パソコン、スマートフォン、タブレットの見え方を確認しながら編集できる

このように、「LiVE2」を使えば最新の技術を使った表現が可能だが、新しい技術を使うからには対応したWebブラウザが必要になる。

サポートしているWebブラウザは、Windows用のInternet Explorer 9/10/11、Firefox最新版、Google Chrome最新版を、Macintosh用では、Safari 5/6/7、Firefox最新版、Google Chrome最新版のほか、タブレットでは、Android 4.0/4.1/4.2のChrome、iOS 6/7のSafariとなっている。

これら以前のバージョンでは、ある程度動作するものもあるが、意図した表現はできない可能性が高い。従って、誰もが等しく見られなくてはならない公共サイトなどでは使えないわけだが、そのような情報コンテンツの制作は、同社が販売している公式サイト用の制作ツール「BiND for WebLiFE* 6.5」にまかせよう。「LiVE2」は、最新の表現を駆使して、届けたいイメージの具現化を助けてくれるツールなので、目的に合わせて上手に使い分ければいいだろう。

「LiVE2」でスペシャルサイトを作ってみよう!!

それでは、ここからは「LiVE2」を使って実際にスペシャルサイトを制作してみよう。ハッキリ言って、筆者のサイト制作知識は、CSSが主流になる前のテーブルレイアウト時代で途切れている。要するに、最新のサイトデザインはまったくできない。

今回は、写真をメインで「魅せる」ページを作ってみることにした。サイトの概要は以下の通りである。写真はあっても文字情報は極めて少ないため、旧来型のサイト制作方式では、クリックしても飛んだ先がスッキリしすぎて、ボリュームが出せずに困るパターンだと思われる。

まず、「LiVE2」を起動すると、「サイトシアター」という画面が現れる。サイトシアターとは、管理中のサイトやお知らせ、チュートリアルなどが表示される場所だ。画面上の「マイサイト」をクリックすれば、自分で作成したサイトだけを表示できるので、更新時はここから作業を行なう。

初期の「サイトシアター」

続いて、画面右上の「サイトの新規作成」ボタンをクリックすると、いよいよ制作開始だ。「スライドテンプレート一覧」が開いたら、使いたいスライドをクリックして「スライドリスト」に追加する。新しいスライドを追加するときは、「+スライドを追加」をクリックすればOKだ。今回は最初からSNSのボタンがついた「トップ12」と、メニュー紹介用の「アルバム2」、アクセスマップ用に「カスタムタグ2」の3つを組み合わせてみることにした。

スライドを選んだだけで、サイトはすでに「完動」状態だ。スライドショーに対応したスライドは、実際の動きが確認できる。あとはそれぞれのスライドをカスタマイズするのである。デザインを見ながら直接文字の編集ができるので、PowerPointのようなプレゼンテーションソフト感覚で使える。細かい調整が必要なときは、専用の編集画面に入ろう。

とりあえずスライドを選んだだけの状態。すでにサイトとしては動く状態にある。文字等はここから直接編集できる
スライドのサムネイルに表示される、黄色いペンのアイコンをクリックすると、詳細な編集画面が開く

1枚目のスライドの制作(全画面でスライドショー)

トップページ用に選んだスライド「トップ12」は、以下のような変更を施した。

  • 背景のスライド写真を2枚差し替えた
  • 全画面に表示されるスライド写真にもリンクが張れるが、今回は解除
  • 各テキストを打ち直し、黒い文字に白いシャドーをつけるエフェクトを設定したうえで、位置を調整した
  • タイトルについていた青く丸い飾り(タイトルの背景として設定されていた)を削除した
  • 「ウィジェット」を開いて、一覧から「バルーン26」を選択。「SiGN Pro」を起動して赤く塗り直し、文字も打ち直して配置
  • バルーンに設定されていた外部リンクを解除
  • スライドにあらかじめついていた、TwitterのアカウントやFacebookのいいねボタンの設定も確認
  • ナビゲーションがないと不安な方に配慮して、「ナビセットの変更」から「ベーシック5」を選択。ロゴはないので、左右のロゴを削除し、ナビゲーションを自動的に隠す機能を解除

2枚目のスライドの制作(パララックスあり)

メニュー紹介用の「アルバム2」で施した変更は以下の通り。

  • フォトアルバムの写真を入れ替えた
  • タイトルに商品名を入力し、ドリンクだけは説明に種類ごとの価格を入力
  • 編集タブ内を下にスクロールし、スライドタイトルを「MENU」に変更し、スライド本文に説明に差し替え
  • 背景タブを開き、背景(後)と背景(前)にそれぞれ用意していた画像をセット。背景(後)のパララックスをONに
  • プレビュー画面で、メニュー写真全体を表示するために、枠の右下をドラッグして拡大
  • Twitterのウィジェットを削除

3枚目のスライドの制作(地図の表示)

アクセスマップ用の「カスタムタグ2」で施した変更は以下の通り。

  • Googleマップで地図の共有コードを取得し、タグ欄にペーストして差し替え
  • スライドタイトルを黒に変更
  • スライド本文に営業時間や住所を入力し、文字サイズを調整
  • 背景タブを開き、背景(後)の画像を差し替え、配置を変更。あわせて背景(前)を削除

調整と仕上げ、公開まで

スライドのカスタマイズが一通り終了したら、「ブラウザで表示」をクリックして状態を確認しつつ、ナビゲーションメニューの内部リンク先を指定したり、「ページ設定とデザイン」の「サウンドエフェクト」から、ページ全体のBGMを設定したり(mp3ファイルを指定)、サイトのタイトル入力など、細かい調整を行った。調整完了後は、スマートフォン用、タブレット用のページをそれぞれ確認し、同期されていない部分や、見にくい部分を個々に調整した。

素材を差し替えただけで、スペシャルサイトができた!

このようにしてできあがったのがこちらのサイトである。

ご覧のように、3枚のテンプレートをベースに、写真とわずかな文字だけで、BGM、パララックス、画面スペースをフルに使ったスライドショーを含んだWebサイトを作ることができた。話題のパララックス効果も、1度もソースコードを見ることなく設定できている。BGMは、同社が運営する「materials」の音楽素材から選んでいるが、「ナビセット」を配置しただけで、スライドの切り替えボタンだけでなく、BGMのON/OFFもついて、至れり尽せりである。(※)LiVE2の製品登録後や同社のキャンペーン等でポイントを入手し、利用する無料のサービス

気になる制作時間だが、「LiVE2」がどのようなツールであるか理解するための時間や、アイデア出しにかかった時間をのぞけば、実制作に要した時間は、素材の準備を含めて約1日といったところだろうか(写真素材は自分で撮影している)。まだ触り始めだったこともあり、イメージにあったスライドを見つけるまでに少々時間がかかったことと、選んだスライドを自分のイメージに近い状態に変えるための試行錯誤したこと、「SiGN Pro」の使い方に慣れるための時間は必要だったが、慣れてからはかなりスピードアップできた。

最後に、「LiVE2」は簡単にスペシャルサイトが制作できるが、コツのようなものは存在するので、軽く紹介しておこう。

  • 写真を用意するときは、サイトで実際に使う向きとサイズをあらかじめ確認しておいてから用意したい。また、フルスクリーン表示に耐えるため、できれば横1400ピクセル、縦900ピクセル程度のものを用意しておくと安心。
  • 各テンプレートの使い勝手には、メリット、デメリットの両方がある。メリットはもちろんデザインやコーディングに悩まなくていい点だが、選択したテンプレートによっては、パララックスなどの機能と相性が悪いものもある。詰まったら色々なテンプレートを試してみよう。
  • テンプレートのいじりすぎは禁物。テンプレートは、パソコンでの見た目だけでなく、モバイル用の見栄えも考慮され、初期状態でもっとも見栄えのいい状態に設計されているので、あまり凝ったカスタマイズを施そうとすると、表示の互換性にも苦労するかも。

  • カスタマイズに使いやすい「ウィジェット」は便利だが、配置の数や位置によってはWebブラウザごとの見え方にかなり差が出てしまう。結果を確認しながら、ほどほどから始めるのがオススメ。
  • あれもこれもと詰め込み過ぎないことが大事。アニメーションすることが楽しくてやり過ぎてしまうと、うるさい、クドいといってすぐ飽きられてしまう恐れがある。見せたいものを絞り、ここぞというところにアニメーションなどを入れよう。

最新トレンドを取り入れたコンテンツを短期間で作りたい!という方に

最近、友人に「知り合いが独立したので、ホームページを作りたいといわれたんだけど、いくらかかるの?」と聞かれた。これだけの質問で「はい。それはいくらです」と簡単に答えられるものではないのはご存じの通り。なぜならば、人と技術を使った完全オーダーメイド品だからである。見積もりをとった結果、金額によっては尻込みするケースも多いはずだ。そんなときこそ「LiVE2」の出番だ。

「急ぎサイトが必要になったけれど、誰に頼んでいいか分からない」
「見栄えのするサイトは欲しいけれど、素材は少ししかない」
「お金も技術もないけれど、新しい表現は取り入れたい」
「期間限定のサイトを、TwitterやFacebookのボタン付きですぐ用意したい」
「カウントダウンページでイベントを盛り上げたい」
「担当できる人材がいない」
「メンテナンスは自分でやりたい」

「LiVE2」を使えば、限られた時間の中でこのようなニーズを満たすことができるのである。

制作したサイトの公開先として、独自ドメインの使えるサーバーが確保できている場合は、そちらに転送できるが、サーバー契約がまだでも安心。パッケージには、同社が運営する「WebLiFEサーバー」のベーシックコース1年間、またはプレミアムコース3か月間無料の特典がついている。予算、期間、技術、人、サーバーでお悩みの方は、ぜひ「LiVE2」をお試しいただいたい。

(Reported by すずまり)