このページの本文へ

見て楽しい、インタラクティブに動くウェブページ!

LiVE for WebLiFE*で感動を伝えるウェブサイト作り

2012年08月31日 11時00分更新

文● 中筋義人、MacPeople編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

最近ウェブの世界では、バナーやメニューをクリックさせてさまざまなページに飛ばすスタイルではなく、縦や横に長くスクロールさせて1ページを流れで読ませるサイトが増えている。そんなウェブサイト作りに最適なアプリが「LiVE for WebLiFE*」だ。今回は、MacPeople誌に寄稿するコラムニスト/大学教授・塩澤一洋氏による、写真の魅力を引き出したウェブサイトを作成。LiVEだからできる、紙芝居を見ているかのような魅力的なウェブサイト作りを紹介する。

LiVE Image


本記事で作成したウェブサイトは、実際にこちらでご覧いただけます。


1. テンプレートでラクラク制作

LiVE LiVE
LiVEのウェブサイト作りは、「サイトシアター」の「新規サイト」ボタンを押すところからスタート。ポートフォリオ/予告/コミュニティなどのテンプレートから目的に合ったものを選ぼう。スクロールの流れも縦/横の2種類が用意されている

2.「スライド」ごとに編集

LiVE LiVEで作るページの内容は、プレゼンテーションアプリのように「スライド」という単位で編集する。伝えたいことを絞り、流れで見せるための仕組みだ。スライドの種類は、写真やムービー、記事などのコンテンツに応じたものが用意されており、迷うことなくページを作れる

3. テキストや画像の編集も可能

LiVE LiVE
LiVEのページ作りは専用エディターを使うので、HTMLタグを打つ必要は一切ない。「スライドエディタ」でテキストを入力すると、ページ内に反映される(左)。画像の登録項目にある鉛筆マークをクリックすると、付属の画像編集アプリ「SiGN Pro」が起動。SiGN Proでは、取り込んだ画像の回転やトリミングなどが可能だ(右)。なおスライドのテキスト編集では、文字の書体や色だけでなく、シャドーやエンボスなどの効果を加えられる。背景画像と文字の色の組み合わせによっては読みづらくなるので、こうしたエフェクトを活用しよう

4. スライドショーの表示も簡単

LiVE 写真を用意して並べるだけで、スライドショーをページ内に組み込むこともできる。ページ全体でスライドショーを再生するほか、ページを半分に分けて、片方は文字で、片方は写真といったレイアウトも可能だ

5. 遠近感のあるスクロール

LiVE LiVE
手前は速く、奥はゆっくりとスクロールさせる「パララックス」効果の挿入も簡単。最近よく目にするウェブのトレンドだ。スライドの背景画像設定で手前と奥の画像を指定し、「アニメーション」を有効にすればいい。このパララックスを使ったページでは透過画像を使用すると効果的でユニークなデザインになる。透過画像は、付属の「SiGN Pro」でも作成可能だ。「背景色」を選択して「透明度」を「0」にすればいい

6. オリジナルデザインのGoogleカレンダー

LiVE LiVE
LiVEは「Googleカレンダー」を読み込んでスライド内に表示させられる。例えばお店の営業日、イベントの予定などを告知するページを作る際に非常に便利だ

7. 目立たせたいパーツはウィジェットで

LiVE 目立たせたいパーツはウィジェットで作成するといい。リンクは外部リンクの指定も可能。「所属:ウィンドウに固定」を選べば、スクロールしても動かないように固定位置で表示できる

8. ページにBGMを設定する

LiVE テーマ性の高いウェブサイトには、閲覧中にBGMが流れる演出も加えたい。音楽を再生するタイミングは、決まったスライドを閲覧中、クリックしたときのみ、サイト全体――などがあり、用途に合わせて音楽を変えることもできる

9. SNS連携機能も搭載

LiVE ウェブサイトにはFacebookやTwitterのリンクを張る、「いいね!」ボタンを用意する、といった次のアクションにつながる仕組みも取り入れたい。LiVEはそうしたSNSとの連携を強化する機能をウィジェットとして豊富に用意している

10. YouTubeの動画も挿入可能

LiVE 今回のサンプルには用意していないが、ページ内にYouTube動画を挿入することも可能だ。写真を撮影する際、ムービーを撮る人も多いだろう。そうした映像素材を魅力的に見せられるのだ

11. スマホでの閲覧もOK!

LiVE LiVE
LiVEで作成したウェブサイトは最新のHTML 5準拠。レイアウトや画像サイズの調整といったスマートフォンへの最適化作業も自動化されているので、面倒な手間なくPC/モバイルサイトを用意できる ※一部コンテンツは非表示

LiVE jQueryベースのウェブ製作ソフト
LiVE for WebLiFE*

開発/販売元●(株)デジタルステージ
価格●2万4800円
http://www.digitalstage.jp/live/

対応システム●OS X 10.6以上(Mountain Lion対応予定)、Windows XP SP3/同Vista SP3/同7 SP1/
対応機種●Core 2 Duo 2.0GHz以上のCPUを搭載したマシン
対応ブラウザー●マック版のSafari 5.1.7以上、ウィンドウズ版のInternet Explorer 8以上、マック/ウィンドウズ版のChrome 19以上とFirefox 12以上

カテゴリートップへ

注目ニュース

ASCII.jp特設サイト

  • 電撃オンライン - 電撃の総合ゲーム情報&雑誌情報サイト!
  • 電撃ホビーWEB - 電撃のホビー雑誌・書籍&ホビーニュースサイト
  • 電撃文庫 - 電撃文庫&電撃文庫MAGAZINEの公式サイト
  • 電撃屋.com - 電撃のアイテムを集めた公式ショッピングサイト!
  • アスキー・メディアワークス
  • 角川アスキー総合研究所
  • アスキーカード
  • アスキーの本と雑誌

ASCII.jpメール デジタルMac/iPodマガジン

ASCII.jp RSS2.0 配信中

ピックアップ

富士通パソコンFMVの直販サイト富士通 WEB MART