見る人のハートをつかむ"スペシャルWebサイト"を作ろう(前編)

さっそく、実際にWebサイトを作ってみましょう。LiVE2の新規サイトでスライドテンプレートを選ぶと「サイトエディタ」が表示され、さらに1枚目のスライドを選ぶと「ページエディタ」の画面に移動します。ここにはダミーの見出しや本文テキストが用意されていますが、このテキストボックスの表示や位置、フォントサイズや色、背景画像などは自在にカスタマイズできます。


サイトエディタには選択したスライドテンプレートが表示され、ここで［編集］ボタンをクリックすると「ページエディタ」に移動し、個々のページを編集できます	テキストボックス部分をクリックすると黄色い枠で囲まれ、テキストの内容を直接変更できます。スライドの詳細を変更するには、左側のスライドリストから鉛筆アイコンをクリック

鉛筆アイコンをクリックすると、ウインドウがポップアップし、スライドの詳細編集画面となります。ここでは［背景］をクリックして画面を切り替え、［背景(前)］のフォルダアイコンをクリックして用意しておいた画像と差し替えます。［適用］をクリックすると変更がページエディタに反映されます。テキストボックスの表示位置は左下のアイコンで変更します


［背景］をクリックして画面を切り替えた後の画面	テキストボックスの表示位置を変更するには、画面右側のテキストボックス左下隅の黄色い歯車のアイコンをクリックする

続いて、テキストがさまざまな動きを経て整列する「モーションテキスト」の機能について見ていきましょう。アニメーション効果によって伝えたいメッセージの印象も変化しますので、言葉の内容に合った動きを選択するのがポイントです。アニメーションの動作はページエディタのプレビューではなく、Webブラウザで確認する機能を利用しましょう。

ここでは、見出し部分のモーションテキストを設定します。スライド編集画面を再び表示し、今度は［編集］でテキストの文面やフォントを設定します。次に［設定］で［アニメーション］を選び、リストからアニメーション効果を選びます。ここでは左から右に文字が流れる［リボンスプレッド］を選んでみました。


テキスト文面やフォントの設定	ここで選んだ「リボンスプレッド」以外にも、さまざまなモーションが選択できる

設定が完了したら、テキストの動作を確認します。ウインドウ中央上部の［プレビュー］ボタンでテキスト要素のレイアウトは確認できますが、ここでは動きはわかりません。そこで画面右上の［ブラウザで表示］をクリックします。すると、外部のWebブラウザが起動し、見出し部分の文字が流れるように現れ、その後に本文要素が表示されます。