LiVEではじめる、スペシャルサイトの作り方

chapter

01

スペシャルサイ トを作るために

lesson

1

theme special

こんなときに L i V E 2

新製品やニューアルバムのプロモーション、イベントやキャンペーンの告知など、Web 上で注目を 集めたいときに作る、いつものサイトとは違う「スペシャルサイト」。LiVE 2 はそんなスペシャルサ イトを作るためのアプリです。まずは LiVE 2 でどんなスペシャルサイトが作れるのかを見ていきま しょう。

point

01

飲食店のキャンペーンページ

▶ http://live2.digitalstage.jp/model/site_002/

せっかくのキャンペーンですから、Web 上でも「特別」であることを伝えたいものです。いつものお店のページ とは違った特別なページも、LiVE2 を使えばすばやく作ることができます。

カレンダーでイベントを案内

スペシャルメニューのインデックス

飲 食 店 の 5 周 年 特 別メニューキャン ペーンのサイト。 特 別メニューの 内 容 やそれにこめた想いを伝えます。イベン トカレンダーを使って予 約 の 申し込 み につなげることもできます。

010

How to make the at trac tive website begun by LiVE

トップでごあいさつ

chapter

01

lesson 1

スペシャルサイトを作るために

point

02

オンラインショップのランディングページ

こんなときに L i V E 2

▶ http://live2.digitalstage.jp/model/site_003/

「ランディングページ」とは、本来のトップページへ導くためのページのことです。普通オンラインショップのトップと いえば、商品の一覧や決済方法の手順などが並ぶ機能的なものが多いですが、その前に商品の魅力を伝えるランディ ングページを挟むことで、今一番売りたい商品をアピールすることができます。

商品ラインナップを紹介

購入ページへ誘導

蜂 蜜 のオンラインショップのランディングペー ウィジェットを 4 隅に配置したトップページ

ジ。 本 来のトップ ページの前に表 示して、テ レビの CM のように商品の魅力を伝えます。

L i V E 2 で 作るスペシャルサイトは スライド方 式 LiVE2 で作るスペシャルサイトは、 縦または横に並んだスライドが 画 面に次々と表 示されるスライド方 式です。 スクロールしながら見ていく普 通の Web ページとは見 方が 異なるので、それだけでも印 象に残りやすくなります。さらにスライドショーやフォトアルバムなどの特 別な機 能を 持つスライドを組み合わせれば、その印象は数倍に強まります。

011

point

03

会社のブランディングサイト

▶ http://live2.digitalstage.jp/model/site_001/

新たにイメージを一新するブランドを立ち上げても、通常サイトの 1 ページに載せただけでは目立ちません。雰 囲気を合わせたスペシャルサイトを公開してブランドイメージをアピールしましょう。

スタイリッシュなトップページ

眼鏡を「 eyewear（アイウェア）」というコンセプトで捉え直し、 新ブランド「 TONES 」をアピールするために作成したスペシャ ルサイト。ブランドイメージに合わせて全 面スタイリッシュにまと

ラインナップとコンセプト

めます。

point

04

イベントのティザーサイト

▶ http://live2.digitalstage.jp/model/site_004/

「ティザーサイト」とは、新製品やイベントの情報を断片的に公開して、見る人の興味を魅きつけるプロモーショ ン用のサイトのことです。LiVE2 のスライドは少ない情報を使って印象付けるのに最適です。

カウントダウン付きトップページ

イベント紹介

「 THE GREEN FIELD DAY 」というイベントのティザーサイ ト。 開催日までのカウントダウンが期待を盛り上げます。

012

How to make the at trac tive website begun by LiVE

chapter

01

lesson 1 こんなときに L i V E 2

スペシャルサイトを作るために

point

05

ミュージシャンのポートフォリオ

▶ http://live2.digitalstage.jp/model/site_005/

ミュージシャンやイラストレーター、カメラマンの方にお勧めしたいのがポートフォリオサイトです。LiVE2 なら BGM やフォトアルバム、ムービーアルバム入りのスペシャルサイトも簡単に作成できます。

ライブ動画を再生

試聴可能なディスコグラフィー

サイトを開いた時 点で BGM が再 生され、その他にも試 聴 用のプレーヤーや、ライブの様 子を撮 影したムービー BGM が流れるトップページ

アルバムなどが 盛り込まれたミュージシャンのポートフォ リオサイトです。

最 新 の W e b 表 現＆技 術 をサ ポート LiVE2 のスペシャルサイトは見た目が 華やかなだけではありません。 Web のトレンドである、パララックスや BG アニメーションなどの演出、 スマートフォン・タブレットなどのモバイルデバイス最 適 化にも対 応して います。またサイトの内 部では、Web デザイナーの間で標 準 的な技 術となりつつある「 jQuery 」 や、 最 新の 「 HTML5 」「 CSS3 」を 使用し、「 動的な表現 」を実 現しています。

013

chapter

01

スペシャルサイ トを作るために

lesson

6

theme construc tion

ストーリー に 沿って L i V E サイトを 作ろう

実際にスペシャルサイトを作るまでのワークフローをイメージしてみましょう。最初にゴール（サイ トの目的）を決め、それに合わせてここまでに説明したストーリー、グラフィック、キャッチコピー を考えていきます。具体的な LiVE 2 の使い方は chapter3 以降で説明するので、ここでは大まか なイメージをつかんでください。

point

01

ゴールを決める

最初に決めるのはゴール、すなわちスペシャルサイトの最終目的です。例として「蜂蜜の半額キャンペーン」 について考えてみましょう。このスペシャルサイトのゴールは、当然「蜂蜜の半額キャンペーンで商品を購 入してもらうこと」です。ただし、副次的なゴールとして「キャンペーン対象以外の商品も買ってもらう」 ことは期待してもいいかもしれません。その他にも副次的なものは色々と考えられますが、あまり欲張りす ぎてサイト内容がぶれてしまっては本末転倒です。

蜂蜜半額キャンペーンの

キャンペーン対象以外の

購入ページへ誘導したい

商品も買ってほしい

メインのゴール

世田谷養蜂場を

口コミで情報を広めたい

多くの人に知ってほしい 蜂蜜のおいしさを

その他のゴール候補

022

知ってほしい

How to make the at trac tive website begun by LiVE

chapter

01

スペシャルサイトを作るために

point

02

lesson 6 ストーリーに沿って L i V E サイトを作ろう

ストーリーを考える

「半額キャンペーンで購入してもらう」というゴールを達 成するために、必要なスライドを案出し、並べる順番を検討し ましょう。最初に伝えるべきなのは商品の魅力です。この商品の場合は、第一に「おいしい」こと、第二に「自然志向」 であることを訴えます。第三者の声を使うのも有効な手段です。商品への興味が高まってきたところで、ラインナップ などの情報を伝えます。そして最後にキャンペーンを具体的に説明し、購入ページへの移動ボタンを見せます。

商品の魅力を伝えて 購入意欲を高める

ゴール！ ラインナップなど 商品の詳しい情報を 伝える

point

03

キャッチコピーを考える

商品 対象に合わせてキャッチコピーなどのテキストを考えましょう。今回の商品の 特 徴やターゲット層を考えると、あ まりひねらず、わかりやすくやわらかい表現が望ましいでしょう。また、購入者の感想などの第三者の言葉は客観的な 印象を与えるので、商品の魅力を補強するのに有効です。

023

chapter

03

section

L i V E でスペシャルサイ トを作ってみよう

001

ストーリー に合 わ せてスライドを挿 入しよう

最初のスライドを挿入してサイトを作成し、追加のスライドを挿入します。 この章では「 秋 祭り」を案内するサイトを作りながら、LiV E 2 の 使い方をマスターしましょう。本来 は 5 枚 以 上のスライドを使いたいところですが、今 回はサンプルなので「トップスライド」 「祭りの 魅力を伝えるスライド」 「場所や日時を伝えるスライド」の 3 つのスライドで構成します。

01 1枚目のスライドを追加する 1

［サイトの新規作成］をクリック

LiVE2 を起動すると最初にサイトシアターが表示さ れます。サイトシアターではサイトの新規作成や、 作成済みサイトのバックアップ・削除などを行うこと ができます。

2

サイトが作成され、ページエディ タの「スライドテンプレート一 覧」が表示される

12 のカテゴリーに分類された多数のスライドがある ので、そこからもっともイメージに近いものを選択し ます。今回は「ベーステンプレート」の「プレーン」 の中から選びました。

3

038

テンプレートのタイプを選び、

4

How to make the at trac tive website begun by LiVE

挿入したいスライドをクリック

chapter

03

sec tion 0 01 ストーリーに合わせてスライドを挿入しよう

L i V E でスペシャルサイトを作ってみよう 5

1 枚目のスライドが挿入された

新規サイトとページが自動的に作 成され、ページ編集用の「ページ エディタ」画面が表示されます。

02 2枚目以降のスライドを挿入する 1

ページエディタの［スライドを追 加］をクリック

2

スライドを選択

3

2 枚目、3 枚目のスライドを挿入

039

chapter

03

section

L i V E でスペシャルサイ トを作ってみよう

004

スライドのレイアウトを 調 整しよう

大まかに調整してからスライドエディタでレイアウトを調整します。 スライドタイトルなどのテキストや記 事、スライドショーの写 真などスライドの内容にあたるものが 配置されている部分を、 「コンテンツ領 域 」といいます。コンテンツ領 域の大まかなサイズとレイア ウトを「見たまま編集」で整えておき、 「スライドエディタ」で細かい設 定を行います。

01 コンテンツ領域の構造 幅

スライド全体 マージン（ボーダーの外） ボーダー（枠線） パディング（ボーダーの内）

スライドタイトル 高さ

スライド本文スライド本文スライド本文スライ ド本文スライド本文スライド本文スライド本文 スライド本文スライド本文スライド本文

スライドタイトルのマージン スライドタイトルのパディング スライド本文のマージン スライド本文のパディング コンテンツ領域やスライドタイトルなどには、ボーダーの外 側の「マージン」と、内側の「パディング」の 2 種類の 間隔を設定できます。なお、ボーダーを表示できるのは、 コンテンツ領域とスライド全体のみです。

02 「見たまま編集」で大まかに調整する 1

コンテンツ領域の下端を 上へドラッグ

コンテンツ領域の端をドラッグすると、サイズ を変更できます。また、スライドタイトルかスラ イド本文にマウスポインタを合わせると、その サイズが表示されます。

044

How to make the at trac tive website begun by LiVE

chapter

03

sec tion 0 04

L i V E でスペシャルサイトを作ってみよう

スライドのレイアウトを調整しよう

2

コンテンツ領域が狭まった

3

レイアウト調整ボタンをクリック

4

目的の位置をクリック

コンテンツ領域は、四隅や中央など 9 カ所のいず れかの位置に配置できます。そこから少しずらした い場合は、マージンやパディングを調整します。

5

コンテンツ領域が下揃えになった

045

chapter

04

section

魅きつけるグラフィックを作ろう

004

複 数 の 写 真を 組 み合 わ せる

スライドの背景に写 真を並べて飾ろう 複数の写真を組み合わせるコラージュ画像も、SiGN Pro を使えば簡単に作ることができます。コラージュ 画像の作成では、画像レイヤーではなく、シェイプレイヤーに画像を読み込むと、レイヤー内に写真の任意の 場所を表示させることができるので便利です。

01 1枚目の写真を読み込む 1

SiGN Pro を起動して［シェイプレイヤー］ を新規作成する

ここでは仕上がりサイズを 900 × 400 に設定しています。

2 3

6

画像を選択

7

図形が作成された ［角丸や円でマスク］の■をクリック

4

図形が四角形になった

5

［画像選択］をクリック

［開く］をクリック 8

図形内に写真が読み込まれた

シェイプレイヤーを 使う意 味 ここでは画 像レイヤーではなく、シェイプレイヤーに画 像を読み込んでいます。シェイプレイヤーに画 像を読み込むと、枠となる図 形とは別に、画 像だけ を拡 大 / 縮 小したり、 シェイプレイヤー内で画 像を移 動したりできるので、 画 像の 任 意の 位 置だけをシェイプレイヤーの枠 内に表 示させることができます。

072

How to make the at trac tive website begun by LiVE

chapter

04

sec tion 0 04

魅きつけるグラフィックを作ろう

複 数の写真を組み合わせる

02 レイヤーを複製する 1

シェイプレイヤーの大きさや位 置を調整する

2

画像の大きさや位置を調整する

シェイプレイヤーの大きさや位置はメイン編集モード で、 シェイプレイヤー内の画像の大きさや位置はシェ イプ編集モードで、それぞれ調整できます。

3

［レイヤー操作］のアイコンをク リック

4

5

［複製］アイコンをクリック

同じ画像が読み込まれたシェイ プレイヤーが複製された

6

同様の手順の繰り返して 3 つの レイヤーにする

7

各レイヤーをドラッグ & ドロップ して並べる

8

P.68 と同様の手順で、それぞ れのレイヤーに画像を読み込む

073

chapter

04

section

魅きつけるグラフィックを作ろう

005

オリジナル のウィジェットを 作ろう

図形や写 真を使ってウィジェットをデザインする ウィジェットは、あらかじめ用意されているものだけでなく、オリジナルのウィジェットを作ってスライドに配置でき ます。ここでは SiGN Pro を使って、図形や写真を多用したオリジナルウィジェットを作る方法を解説します。

01 ウィジェットのサイズを決める 1

ウィジェット一覧を表示

2

［リッチテキスト］を選択

3

［リッチテキスト］のテンプレート をクリック

4

［設定］をクリック

5

［幅］と［高さ］にウィジェットの表示サイズを

6

［背景］の鉛筆アイコンをクリック

ピクセル単位で指定

7 8

SiGN Pro が起動した ［幅×高さ］でウィジェット設定 画面で指定したものと同じサイ ズを指定する

074

How to make the at trac tive website begun by LiVE

chapter

04

sec tion 0 05 オリジナルのウィジェットを作ろう

魅きつけるグラフィックを作ろう

02 図形の色を変える 1 2 3

シェイプレイヤーを作る ［背景色］の色のアイコンをクリック 目的の色をクリック

4

図形の色が変わった

03 図形を回転する 1

シェイプレイヤーの大きさや位

2

シェイプレイヤー右下の回転ハ

置を変更（P.66 参照） ンドルをドラッグ

3

ドラッグした方向にシェイプレイ ヤーが回転した

図形だけでなく、画像レイヤー、テキストレイヤー、 スタンプレイヤーも同様の手順で回転させることが できます。

4

同様の手順で他のシェイプレイ ヤーを作成

075

chapter

05

さまざまな演 出 効 果とサウンドで盛り上げよう

section

001

サイトを 彩 る演 出テクニックをマスターしよう

LiVE2 では写真やウィジェットを駆使して、美しく機能性の高いサイトを作ることができますが、さらなる演出 効果を追加できます。サイトの表示時に BGM やオープニングムービーを再生したり、写真やイラストを立体 的に見せたりして、サイトをより華やかに彩りましょう。

サウンドの再生 「サウンドエフェクト」を利用すれば、サイトの表示時に BGM を再生したり、ボタンなどのクリック時に 音を鳴らしたりできます。また、BGM の再生をコントロールできるウィジェットも用意されています。

サウンドウィジェットを配置すれば、訪問者が任意 に BGM をオン / オフできます。

写真の活用 写真はスライドごとに背景として設定できるだけでなく、ページ全体にまたがって表示されるように設定 することもできます。また、重なり合う複数の写真ごとにスクロール速度を変えることで生じる「視差（パ ララックス） 」を利用して、遠近感や立体感、ユニークな視覚効果を加えることができます。

「ページ背景」に写真を設定すると、すべてのスライドを見 てはじめて写真の全体像がわかるような演出が可能です。

094

How to make the at trac tive website begun by LiVE

chapter

05

sec tion 0 01

さまざまな演出効果とサウンドで盛り上げよう

サイトを彩る演出テクニックをマスターしよう

ムービーによる演出 映像によって動きを伝えることは、写真とはまた違ったインパクトを訪問者に与えます。LiVE2 で作ることがで きるスライドには、YouTube や Vimeo で公開されているムービーを配置してそのまま再生できるほか、サイト へのアクセス時に自動再生されるオープニングムービーなども設定可能です。また、スライドの背景にインタラ クティブな動きを加える「BG アニメーション」、指定日時までのカウントダウンをアニメーション表示する「カウ ントダウンスライド / ウィジェット」なども利用できます。

スライドでYouTubeのムービー再生

BGアニメーションで背景が動く

YouTube や Vimeo のムービーをスライドに埋め込むことができます。

丸い図形が背景内で飛び跳ねる、美しいパノラマ夜景が自動スク

再生 / 一時停止、音量調整などのコントロールも可能です。

ロールするといった動きのある背景アニメーション、ムービーが全 17 種類用意されています。

オープニングムービーでドラマティックに演出

イベント告知やティザー広告に使いたいカウントダウン

YouTube や Vimeo に投稿された任意のムービーを、サイトを表示

デジタル時計型のカウントダウンバナーを設置して、任意の日時まで

する前に自動再生できます。

のカウントダウンスライドを簡単に作ることができます。

個性的なフォントでひと味違うサイトに 閲覧者の環境を問わず、指定したとおりのフォ ントで、スライドのタイトルや本文を表示できる 「Web フォント」を利用できます。LiVE2 には、 美しい Web フォントが多数収録されているので、 テキストも個性豊かに演出することができます。

Web フォントをプレビューしながら選べる「TYPE for WebLiFE*」 を搭載しています。Web フォントの利用には、WebLiFE* サーバー への登録が必要です。

095

chapter

06

section

人 集

001

スマホ 、タブレットに最 適 化したサイトを作ろう

PC 版

簡単

最適化

作

「3 デバイス編集モード」を利用すると、スマートフォンやタブレット端末の画面サイズに合わせた画像サイズ や文字サイズのスライドを作ることができます。スライドの作成方法は PC 版サイトの場合と同様で、PC・スマー トフォン・タブレット向けスライド間でタイトルや本文などのテキストを「同期」できるので、PC 版サイトのスラ イドを作っておけば、他のデバイス向けスライドにも内容を簡単に流用できます。なお、初期設定では「同期」 は有効になっているので、PC 版で作成したスライドの枚数や種類、ウィジェットなどはスマートフォン・タブレッ ト版スライドに自動的に反映されます。

01 スマホ・タブレット編集モードに切り替える 1

PC 版のスライドを作成しておく

2

スマートフォンのアイコンをクリック

3

スマホ編集モードに切り替わった

4

タブレットのアイコンをクリックするとタ ブレット編集モードに切り替わる

PC 版スライドからスライドの枚数、種類、ウィジェットは引き 継がれますが、タイトルや本文、背景画像などは引き継がれ ません。

スライド数 や 順 番 は 共 通 スマホ・タブレッ ト編 集モードでは、P C 版と同じ枚 数 、並 び順、 種 類のスライ ドが作 成されます。P C 、 スマホ、 タブレッ トのいずれかの 編 集モードでスライドを追 加すると、同じ 種 類のスライ ドが 他の編 集モードにも追 加されます。

124

How to make the at trac tive website begun by LiVE

chapter

06

sec tion 0 01 スマホ、タブレットに最 適化したサイトを作ろう

スペシャルサイトに人を集めよう

02 PC版のテキストを同期する 1 2

PC 版の編集モードに切り替える 同期するスライドの鉛筆アイコンを クリック

3

同期アイコンをクリック

同期 ON

4

同期 OFF

［はい］をクリック

ウィジェットの 同 期 ウィジェッ トの設 定 画 面の同 期アイコンをクリックすることで、同じ位 置にあるスマートフォン、タブレッ トのスライ ドに同じウィジェッ トが 配 置さ れるようになります。ただし、 同期されるのはウィジェッ トの種 類のみで、

5

［適用］をクリック

6

［閉じる］をクリック

ウィジェッ トの内容や表 示 位 置などの設 定は同期されません。

125

part

付録

Appendix

01

スライドテンプレート一 覧

LiVE 2 で利用できるスライドテンプレートをチェックしよう LiVE 2 には、トップページ向け、フォトアルバム向けなどの用途に応じて選ぶことのできる美しいデザインの スライドテンプレートが、12 系統、90 種類以上収録されています。ここでは、すべてのスライドテンプレート を紹介しているので、サイト制作の際に参考にしてください。

デザインテンプレート トップ トップページに適したデザインされたスライド トップ1

トップ2

トップ3

トップ4

トップ5

トップ6

トップ7

トップ8

144

How to make the at trac tive website begun by LiVE

A p p e n di x

par t 01

付録

スライドテンプレート一覧

トップ9

トップ10

トップ11

トップ12

トップ13

トップ14

トップ15

トップ16

メニュー ページを移動するためのグローバルメニューが配置されているスライド メニュー1

メニュー2

メニュー3

メニュー4

メニュー5

メニュー6

145

part

付録

Appendix

02

ウィジェット一 覧

ウィジェットでスライドを華やかに、機能的に スライドを彩るバナーやロゴ、サイト内を快適に閲覧するためのナビゲーションなど、スライドとは独立して配置 できるウィジェットは、その内容や役割別に 8 系統、全 100 種類以上、LiVE 2 に収録されています。 本 付録を参考にしてウィジェットを選び、サイトのアレンジと利便性向上に役立ててください。

Facebook Facebook ページと連携する「いいね！」ボタンや Likebox

154

いいね！ボタン1

いいね！ボタン2

いいね！ボタン3

いいね！ボタン4

いいね！ボタン5

いいね！ボタン6

いいね！ボタン7

いいね！ボタン8

いいね！ボタン9

いいね！ボタン10

いいね！ボタン11

いいね！ボタン12

いいね！ボタン13

Likebox1

How to make the at trac tive website begun by LiVE

Facebookコメント

Facebookコメント

Facebook Like Box

A p p e n di x

par t 02

付録

ウィジェット一覧

Facebook Like Box

ツイッター つぶやきを Twitter と連携するウィジェット つぶやくボタン1

つぶやくボタン2

つぶやくボタン3

つぶやくボタン4

つぶやくボタン5

つぶやくボタン6

つぶやくボタン7

つぶやくボタン8

つぶやくボタン9

つぶやくボタン10

つぶやくボタン11

つぶやくボタン12

つぶやくボタン13

つぶやくボタン14

155