最近ウェブの世界では、バナーやメニューをクリックさせてさまざまなページに飛ばすスタイルではなく、縦や横に長くスクロールさせて1ページを流れで読ませるサイトが増えている。そんなウェブサイト作りに最適なアプリが「LiVE for WebLiFE*」だ。今回は、MacPeople誌に寄稿するコラムニスト／大学教授・塩澤一洋氏による、写真の魅力を引き出したウェブサイトを作成。LiVEだからできる、紙芝居を見ているかのような魅力的なウェブサイト作りを紹介する。
本記事で作成したウェブサイトは、実際にこちらでご覧いただけます。
1. テンプレートでラクラク制作
LiVEのウェブサイト作りは、「サイトシアター」の「新規サイト」ボタンを押すところからスタート。ポートフォリオ／予告／コミュニティなどのテンプレートから目的に合ったものを選ぼう。スクロールの流れも縦／横の2種類が用意されている
2.「スライド」ごとに編集
LiVEで作るページの内容は、プレゼンテーションアプリのように「スライド」という単位で編集する。伝えたいことを絞り、流れで見せるための仕組みだ。スライドの種類は、写真やムービー、記事などのコンテンツに応じたものが用意されており、迷うことなくページを作れる
3. テキストや画像の編集も可能
LiVEのページ作りは専用エディターを使うので、HTMLタグを打つ必要は一切ない。「スライドエディタ」でテキストを入力すると、ページ内に反映される（左）。画像の登録項目にある鉛筆マークをクリックすると、付属の画像編集アプリ「SiGN Pro」が起動。SiGN Proでは、取り込んだ画像の回転やトリミングなどが可能だ（右）。なおスライドのテキスト編集では、文字の書体や色だけでなく、シャドーやエンボスなどの効果を加えられる。背景画像と文字の色の組み合わせによっては読みづらくなるので、こうしたエフェクトを活用しよう
4. スライドショーの表示も簡単
写真を用意して並べるだけで、スライドショーをページ内に組み込むこともできる。ページ全体でスライドショーを再生するほか、ページを半分に分けて、片方は文字で、片方は写真といったレイアウトも可能だ
5. 遠近感のあるスクロール
手前は速く、奥はゆっくりとスクロールさせる「パララックス」効果の挿入も簡単。最近よく目にするウェブのトレンドだ。スライドの背景画像設定で手前と奥の画像を指定し、「アニメーション」を有効にすればいい。このパララックスを使ったページでは透過画像を使用すると効果的でユニークなデザインになる。透過画像は、付属の「SiGN Pro」でも作成可能だ。「背景色」を選択して「透明度」を「0」にすればいい
6. オリジナルデザインのGoogleカレンダー
LiVEは「Googleカレンダー」を読み込んでスライド内に表示させられる。例えばお店の営業日、イベントの予定などを告知するページを作る際に非常に便利だ
7. 目立たせたいパーツはウィジェットで
目立たせたいパーツはウィジェットで作成するといい。リンクは外部リンクの指定も可能。「所属：ウィンドウに固定」を選べば、スクロールしても動かないように固定位置で表示できる
8. ページにBGMを設定する
テーマ性の高いウェブサイトには、閲覧中にBGMが流れる演出も加えたい。音楽を再生するタイミングは、決まったスライドを閲覧中、クリックしたときのみ、サイト全体――などがあり、用途に合わせて音楽を変えることもできる
9. SNS連携機能も搭載
ウェブサイトにはFacebookやTwitterのリンクを張る、「いいね!」ボタンを用意する、といった次のアクションにつながる仕組みも取り入れたい。LiVEはそうしたSNSとの連携を強化する機能をウィジェットとして豊富に用意している
10. YouTubeの動画も挿入可能
今回のサンプルには用意していないが、ページ内にYouTube動画を挿入することも可能だ。写真を撮影する際、ムービーを撮る人も多いだろう。そうした映像素材を魅力的に見せられるのだ
11. スマホでの閲覧もOK!
LiVEで作成したウェブサイトは最新のHTML 5準拠。レイアウトや画像サイズの調整といったスマートフォンへの最適化作業も自動化されているので、面倒な手間なくPC／モバイルサイトを用意できる ※一部コンテンツは非表示
|
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以上 |
|---|
本記事はアフィリエイトプログラムによる収益を得ている場合があります
