live ではじめる、魅せるweb サイトの作り方

27

Upload: digitalstage-ltd

Post on 19-Feb-2016

223 views

Category:

Documents


2 download

DESCRIPTION

基本操作から応用テクニックを網羅したLiVE 公式ガイドブック仕掛けの詰ったWeb サイトをLiVE でかんたん作成!

TRANSCRIPT

Page 1: LiVE ではじめる、魅せるWeb サイトの作り方
Page 2: LiVE ではじめる、魅せるWeb サイトの作り方

010

LiVEを知ろう

001

LiVEの基礎知識

CHAPTE

R1

LiVEを知ろう

001

CHAPTE

R

001

section.

LiVEの基礎知識LiVEのコンセプトを理解すれば、このソフトが持つ可能性を最大限に引き出すことができます。

Web サイトで、自分の「想い」をより直観的・印象的に伝えるには、どうしたらいいでしょうか? 最近のWeb表現では、クリック操作でページ遷移させながら多くの情報を見せるのではなく、情報をひとつのページに集約し、スクロールさせながら流れで見せる手法が増えてきました。

LiVE は、読む人にスクロールさせる

ここではまず、LiVE というソフトがどんなソフトで、どんな魅力を持っているのか見てみましょう。

スライドをスクロールさせて見せることで、従来のWebページとは異なる動きのあるサイトを生み出します。

「スライド」というひとつの解答

010

LiVEを知ろう

001

LiVEの基礎知識

CHAPTE

R1

LiVEを知ろう

001

CHAPTE

R

001

section.

LiVEの基礎知識LiVEのコンセプトを理解すれば、このソフトが持つ可能性を最大限に引き出すことができます。

Web サイトで、自分の「想い」をより直観的・印象的に伝えるには、どうしたらいいでしょうか? 最近のWeb表現では、クリック操作でページ遷移させながら多くの情報を見せるのではなく、情報をひとつのページに集約し、スクロールさせながら流れで見せる手法が増えてきました。

LiVE は、読む人にスクロールさせる

ここではまず、LiVE というソフトがどんなソフトで、どんな魅力を持っているのか見てみましょう。

スライドをスクロールさせて見せることで、従来のWebページとは異なる動きのあるサイトを生み出します。

「スライド」というひとつの解答

Page 3: LiVE ではじめる、魅せるWeb サイトの作り方

011

LiVEを知ろう

001

LiVEの基礎知識

1CH

APTE

R

盛り込める情報が制限されることが、逆にメッセージを強める効果を生みます。

●新製品の予告カウントダウン機能などを利用して、製品の発売日を盛り上げることができます。

●イベントの告知や集客活動パーティやコンサートなど、広く出席者を募りたい場合の告知に効果を発揮します。

●サークル活動、コミュニティの紹介所属するスポーツチームやバンドなどの紹介やメンバー募集に利用できます。Facebookや Twitterと連携して、応援してくれる人との交流も可能です。

●自己紹介SNSや他のサイトなどに散らばっている自分の情報をまとめてみましょう。自分のアピールの場としてうまく活用できれば、転職活動にも役立ちそうです。

●ポートフォリオフォトグラファーやデザイナー、ミュージシャンなどの職業なら、LiVEを使って作品をカタログ的に紹介できるサイトを制作してみましょう。

●企画の提案従来はPCで行っていたプレゼンテーションを、Webに移行しましょう。客先に出向かなくても、URLを知らせるだけで素早くアクセス。PowerPointをWeb 化するよりもずっと効果的なスライドが作成できます。

LiVEはこんなサイトが向いている!

ワンテーマに絞ってメッセージを印象的に伝える

写真素材があればすぐにサイトを作成できる

011

LiVEを知ろう

001

LiVEの基礎知識

1CH

APTE

R

盛り込める情報が制限されることが、逆にメッセージを強める効果を生みます。

●新製品の予告カウントダウン機能などを利用して、製品の発売日を盛り上げることができます。

●イベントの告知や集客活動パーティやコンサートなど、広く出席者を募りたい場合の告知に効果を発揮します。

●サークル活動、コミュニティの紹介所属するスポーツチームやバンドなどの紹介やメンバー募集に利用できます。Facebookや Twitterと連携して、応援してくれる人との交流も可能です。

●自己紹介SNSや他のサイトなどに散らばっている自分の情報をまとめてみましょう。自分のアピールの場としてうまく活用できれば、転職活動にも役立ちそうです。

●ポートフォリオフォトグラファーやデザイナー、ミュージシャンなどの職業なら、LiVEを使って作品をカタログ的に紹介できるサイトを制作してみましょう。

●企画の提案従来はPCで行っていたプレゼンテーションを、Webに移行しましょう。客先に出向かなくても、URLを知らせるだけで素早くアクセス。PowerPointをWeb 化するよりもずっと効果的なスライドが作成できます。

LiVEはこんなサイトが向いている!

ワンテーマに絞ってメッセージを印象的に伝える

写真素材があればすぐにサイトを作成できる

Page 4: LiVE ではじめる、魅せるWeb サイトの作り方

012

LiVEを知ろう

002

スライドとウィジェット

CHAPTE

R1

LiVEを知ろう

002

CHAPTE

R

002

section.

スライドとウィジェットLiVEで作るサイトの構成要素を説明します。

ページ

スライド①

スライド②

スライド③

スライド④

スライド⑤

スライド①

スライド②

スライド③

スライド④

スライド⑤

ページ

スライド①

スライド②

スライド③

スライド④

スライド⑤

サイト

ページ

1つのページは、スライドを切り替えて表示します。ページの集合をサイトと呼びます。

スライド・ページ・サイトの関係

012

LiVEを知ろう

002

スライドとウィジェット

CHAPTE

R1

LiVEを知ろう

002

CHAPTE

R

002

section.

スライドとウィジェットLiVEで作るサイトの構成要素を説明します。

ページ

スライド①

スライド②

スライド③

スライド④

スライド⑤

スライド①

スライド②

スライド③

スライド④

スライド⑤

ページ

スライド①

スライド②

スライド③

スライド④

スライド⑤

サイト

ページ

1つのページは、スライドを切り替えて表示します。ページの集合をサイトと呼びます。

スライド・ページ・サイトの関係

Page 5: LiVE ではじめる、魅せるWeb サイトの作り方

013

LiVEを知ろう

002

スライドとウィジェット

1CH

APTE

R

LiVEで作成したサイトは、そのままで iPhoneや Android携帯などのスマートフォンにも対応します。レイアウトやアニメーションは若干簡略化されますが(※)、見る分には支障はありません。※ サウンド効果、スライドショーなどの複雑なトランジション効果、パララックス効果、オープニングムービーなどが含まれます。

スマートフォンにも対応

ウィジェットでさらに表現力をアップ

ドットナビウィジェット

方向ナビウィジェット

バルーンウィジェット

Facebookウィジェット

2

3

1

4

リッチテキストウィジェット

5

013

LiVEを知ろう

002

スライドとウィジェット

1CH

APTE

R

LiVEで作成したサイトは、そのままで iPhoneや Android携帯などのスマートフォンにも対応します。レイアウトやアニメーションは若干簡略化されますが(※)、見る分には支障はありません。※ サウンド効果、スライドショーなどの複雑なトランジション効果、パララックス効果、オープニングムービーなどが含まれます。

スマートフォンにも対応

ウィジェットでさらに表現力をアップ

ドットナビウィジェット

方向ナビウィジェット

バルーンウィジェット

Facebookウィジェット

2

3

1

4

リッチテキストウィジェット

5

Page 6: LiVE ではじめる、魅せるWeb サイトの作り方

016

LiVEを知ろう

004

豊富なテンプレートを確認しよう

CHAPTE

R1

LiVEを知ろう

004

CHAPTE

R

□□□□■□□□□■□□□□■□□□□□□□■□□□□■□□□□■□□□□■□□□□■□□□□■□□□□■□□□□004

section.

ベーシックサイトのテンプレート

ブランクサイトのテンプレート(上級者向け)

豊富なテンプレートを確認しよう収録されているテンプレートや拡張機能であるプレミアム機能を紹介します。

もっともベーシックなパターン。デザインもシンプルで飾りが少ないので、「とりあえず」作ってみたいという場合にも対応できます。

LiVEはテンプレートから編集するのが基本なので、全くの白紙からサイトを作り上げるのは、意外と難しいものです。ただし熟達してくれば、自由自在です。

016

LiVEを知ろう

004

豊富なテンプレートを確認しよう

CHAPTE

R1

LiVEを知ろう

004

CHAPTE

R□□□□■□□□□■□□□□■□□□□□□□■□□□□■□□□□■□□□□■□□□□■□□□□■□□□□■□□□□004

section.

ベーシックサイトのテンプレート

ブランクサイトのテンプレート(上級者向け)

豊富なテンプレートを確認しよう収録されているテンプレートや拡張機能であるプレミアム機能を紹介します。

もっともベーシックなパターン。デザインもシンプルで飾りが少ないので、「とりあえず」作ってみたいという場合にも対応できます。

LiVEはテンプレートから編集するのが基本なので、全くの白紙からサイトを作り上げるのは、意外と難しいものです。ただし熟達してくれば、自由自在です。

Page 7: LiVE ではじめる、魅せるWeb サイトの作り方

017

LiVEを知ろう

004

豊富なテンプレートを確認しよう

1CH

APTE

R

名刺サイトのテンプレート

総合サイトのテンプレート

SNSなどで自分の情報が情報が分散してしまっている人も多いでしょう。ここをベースに「ネットの自分」と「リアルの自分」をまとめるのにもも便利です。

施設や組織の紹介に便利です。カレンダーでスケジュールを告知したり、フォトレポートを掲載したりと、一般のWebサイトとはひと味違ったサイトが素早く作れます。

017

LiVEを知ろう

004

豊富なテンプレートを確認しよう

1CH

APTE

R

名刺サイトのテンプレート

総合サイトのテンプレート

SNSなどで自分の情報が情報が分散してしまっている人も多いでしょう。ここをベースに「ネットの自分」と「リアルの自分」をまとめるのにもも便利です。

施設や組織の紹介に便利です。カレンダーでスケジュールを告知したり、フォトレポートを掲載したりと、一般のWebサイトとはひと味違ったサイトが素早く作れます。

Page 8: LiVE ではじめる、魅せるWeb サイトの作り方

050

スライド編集を極めよう

022

スライドをデザインするには?

4CH

APTE

R

022

section.

2つの背景を設定する

スライドをデザインするには?3つの背景画像を組み合わせ、タイトルや本文のレイアウトを調整してみましょう。

スライドの鉛筆アイコンをクリック [背景]タブをクリック

2つの背景を設定

1

ここでは青空の写真の上に、輪郭部分で切り抜いた犬の写真(PNG形式)を重ねています。背景の設定方法についてはP.42を参照してください。

2

3

[配置]で[左下]を選択 [適用]をクリック4 5

Page 9: LiVE ではじめる、魅せるWeb サイトの作り方

1 12/10/10 16:08

051

スライド編集を極めよう

022

スライドをデザインするには?

4CH

APTE

R

FINISH!!

背景画像の配置方法を選択します

[色選択]を選ぶと、背景を単色で塗りつぶすことができます

ONにすると2つの背景画像がずれて動くようになり、遠近感が表現されます

背景画像をスライドサイズに合わせて拡大/縮小します

スライド切り替え時に背景が動かなくなります

その他の背景の設定

背景色

背景アニメーション配置

ストレッチ

背景を固定

5

21

4

3

2つの背景が重ねて配置された

3

3 4

5

1 2

Page 10: LiVE ではじめる、魅せるWeb サイトの作り方

10-11 10-11

056

スライド編集を極めよう

024

本文中に画像を挿入するには?

4CH

APTE

R

024

section.

画像を挿入する

本文中に画像を挿入するには?LiVEではタイトルや本文のテキスト中に画像を挿入できます。

スライド編集画面を表示

[画像]をクリック

1

2

フォルダアイコンをクリック

ファイルを選択 [開く]をクリック

3

4 5

画像はカーソルが表示されている位置に挿入されます。

056

スライド編集を極めよう

024

本文中に画像を挿入するには?

4CH

APTE

R

024

section.

画像を挿入する

本文中に画像を挿入するには?LiVEではタイトルや本文のテキスト中に画像を挿入できます。

スライド編集画面を表示

[画像]をクリック

1

2

フォルダアイコンをクリック

ファイルを選択 [開く]をクリック

3

4 5

画像はカーソルが表示されている位置に挿入されます。

Page 11: LiVE ではじめる、魅せるWeb サイトの作り方

12/10/10 16:0812/10/10 16:08

057

スライド編集を極めよう

024

本文中に画像を挿入するには?

4CH

APTE

R

FINISH!!

写真が読み込まれた

写真が挿入された

同様に写真を挿入

[適用]をクリック

本文中に画像が挿入された

[小]をクリック

[適用]をクリック

6

9

9

10

11

7

8

写真のサイズは[大][中][小]のいずれかをクリックして調整することができます。元の大きさのまま使いたい場合は[オリジナル]をクリックします。

057

スライド編集を極めよう

024

本文中に画像を挿入するには?

4CH

APTE

R

FINISH!!

写真が読み込まれた

写真が挿入された

同様に写真を挿入

[適用]をクリック

本文中に画像が挿入された

[小]をクリック

[適用]をクリック

6

9

9

10

11

7

8

写真のサイズは[大][中][小]のいずれかをクリックして調整することができます。元の大きさのまま使いたい場合は[オリジナル]をクリックします。

Page 12: LiVE ではじめる、魅せるWeb サイトの作り方

12-13 12-13

070

スライド編集を極めよう

029

タブを使ってたくさんの文章を掲載するには?

4CH

APTE

R

029

section.

記事スライドを編集する

タブを使ってたくさんの文章を掲載するには?記事スライドには複数の記事を登録して、切り替えながら表示させることができます。

記事スライドを挿入

編集したい記事を選択

鉛筆アイコンをクリック

1

3

2

スライドの挿入についてはP. 37を参照してください。

あらかじめ数件のダミー記事が登録されています。[+][-]ボタンをクリックすると、記事を追加・削除することができます。

070

スライド編集を極めよう

029

タブを使ってたくさんの文章を掲載するには?

4CH

APTE

R

029

section.

記事スライドを編集する

タブを使ってたくさんの文章を掲載するには?記事スライドには複数の記事を登録して、切り替えながら表示させることができます。

記事スライドを挿入

編集したい記事を選択

鉛筆アイコンをクリック

1

3

2

スライドの挿入についてはP. 37を参照してください。

あらかじめ数件のダミー記事が登録されています。[+][-]ボタンをクリックすると、記事を追加・削除することができます。

Page 13: LiVE ではじめる、魅せるWeb サイトの作り方

12/10/10 16:0912/10/10 16:09

071

スライド編集を極めよう

029

タブを使ってたくさんの文章を掲載するには?

4CH

APTE

R

FINISH!!

記事の日付を設定

記事本文を入力

4

5

他の記事を入力

記事タイトルをクリック 記事が切り替わった

[適用]をクリック

6

7

98

071

スライド編集を極めよう

029

タブを使ってたくさんの文章を掲載するには?

4CH

APTE

R

FINISH!!

記事の日付を設定

記事本文を入力

4

5

他の記事を入力

記事タイトルをクリック 記事が切り替わった

[適用]をクリック

6

7

98

Page 14: LiVE ではじめる、魅せるWeb サイトの作り方

16-17 16-17

080

ウィジェットを極めよう

032

ウィジェットの種類を知ろう

5CH

APTE

R

032

section.

ウィジェットの紹介

ウィジェットの種類を知ろうLiVEには9つのカテゴリに分けられた、たくさんのウィジェットが用意されています。

Facebookウィジェット

バルーンウィジェット

ツイッターウィジェット1

3

2

Facebook の「いいね!ボタン」「Like box」「Facebookコメント」を配置するウィジェットです。

「つぶやくボタン」「ティッカー」「フォローボタン」を配置するウィジェットです。

バルーンと呼ばれる画像を表示するウィジェットです。リンクを設定できます。

080

ウィジェットを極めよう

032

ウィジェットの種類を知ろう

5CH

APTE

R

032

section.

ウィジェットの紹介

ウィジェットの種類を知ろうLiVEには9つのカテゴリに分けられた、たくさんのウィジェットが用意されています。

Facebookウィジェット

バルーンウィジェット

ツイッターウィジェット1

3

2

Facebook の「いいね!ボタン」「Like box」「Facebookコメント」を配置するウィジェットです。

「つぶやくボタン」「ティッカー」「フォローボタン」を配置するウィジェットです。

バルーンと呼ばれる画像を表示するウィジェットです。リンクを設定できます。

Page 15: LiVE ではじめる、魅せるWeb サイトの作り方

12/10/10 16:1012/10/10 16:10

081

ウィジェットを極めよう

032

ウィジェットの種類を知ろう

5CH

APTE

R

カウントダウンウィジェット4 リッチテキストウィジェット5

指定した日時までのカウンターを表示するウィジェットです。カウント終了後に指定したURLにジャンプさせることができます。

自由にテキストや画像を配置できるウィジェットです。工夫次第で色々な用途に利用できます。

サウンドウィジェット6 方向ナビウィジェット7

BGMや効果音を設定している場合、その再生をオン/オフすることができます。

前後のスライドや、最初のスライドに切り替えます。

ドットナビウィジェット8 その他のウィジェット9

スライドの数をドットやボックスで表し、クリックしてスライドを切り替えられるウィジェットです。

その他のウィジェットには、スライドの切り替えを自動的に行う「スライドショーウィジェット」が分類されています。

081

ウィジェットを極めよう

032

ウィジェットの種類を知ろう

5CH

APTE

R

カウントダウンウィジェット4 リッチテキストウィジェット5

指定した日時までのカウンターを表示するウィジェットです。カウント終了後に指定したURLにジャンプさせることができます。

自由にテキストや画像を配置できるウィジェットです。工夫次第で色々な用途に利用できます。

サウンドウィジェット6 方向ナビウィジェット7

BGMや効果音を設定している場合、その再生をオン/オフすることができます。

前後のスライドや、最初のスライドに切り替えます。

ドットナビウィジェット8 その他のウィジェット9

スライドの数をドットやボックスで表し、クリックしてスライドを切り替えられるウィジェットです。

その他のウィジェットには、スライドの切り替えを自動的に行う「スライドショーウィジェット」が分類されています。

Page 16: LiVE ではじめる、魅せるWeb サイトの作り方

50-51

092

ウィジェットを極めよう

038

好きな場所にテキストや画像を配置したい

5CH

APTE

R

038

section.

背景を使って囲みを作る

好きな場所にテキストや画像を配置したいリッチテキストウィジェットを使えば、テキストや画像を任意の場所に配置できます。

リッチテキストウィジェットを配置する

[設定]をクリック

1

2

Inspectorを閉じていた場合は、スライド上のウィジェットをクリックし、表示される鉛筆アイコンをクリックして再表示します。

Page 17: LiVE ではじめる、魅せるWeb サイトの作り方

12/10/10 16:19

093

ウィジェットを極めよう

038

好きな場所にテキストや画像を配置したい

5CH

APTE

R

[背景]のフォルダアイコンをクリック

3

画像ファイルを選択

[開く]をクリック

背景色を選択

[適用]をクリック

背景画像と背景色が設定された

4

5

6

7

8

付属素材の背景画像を利用しています(P.33)。

ここで背景に設定した画像は枠線のみのものなので、合わせて背景色を設定しています。

背景画像とウィジェットのサイズが合っていないため、罫が切れたり塗りがはみ出したりしています。

Page 18: LiVE ではじめる、魅せるWeb サイトの作り方

56-57 56-57

112

SiGN Proで画像を編集しよう

046

SiGN Proとは?

6CH

APTE

R

046

section.

SiGN Proのメイン編集モード

SiGN Proとは?SiGN Proは写真や図形を組み合わせて見出しを作る画像編集ツールです。

1

ツールバー1

レイヤータグ5新規レイヤー2

2

3

レイヤー操作3 完了/キャンセル6

6

5

4

複製/削除4 起動時に表示される「メイン編集モード」では、レイヤーの新規追加、各レイヤーの移動・変形、仕上がりサイズの設定などの操作を行うことができます。右下の[完了]をクリックすると、LiVEに戻ります。

112

SiGN Proで画像を編集しよう

046

SiGN Proとは?

6CH

APTE

R

046

section.

SiGN Proのメイン編集モード

SiGN Proとは?SiGN Proは写真や図形を組み合わせて見出しを作る画像編集ツールです。

1

ツールバー1

レイヤータグ5新規レイヤー2

2

3

レイヤー操作3 完了/キャンセル6

6

5

4

複製/削除4 起動時に表示される「メイン編集モード」では、レイヤーの新規追加、各レイヤーの移動・変形、仕上がりサイズの設定などの操作を行うことができます。右下の[完了]をクリックすると、LiVEに戻ります。

Page 19: LiVE ではじめる、魅せるWeb サイトの作り方

12/10/10 16:2112/10/10 16:21

113

SiGN Proで画像を編集しよう

046

SiGN Proとは?

6CH

APTE

R

スライドの背景画像などが設定済みの状態で鉛筆アイコンをクリックすると、画像を読み込んだ状態でSiGN Proが起動します。この状態では、画像のサイズなどを編集することができます(P.124 参照)。

配置済みの画像を編集する

レイヤー編集モードのツールバー

SiGN Proを起動する

画像編集1

鉛筆アイコンをクリック1

SiGN Proが起動した2

シェイプ編集2

テキスト編集3

スタンプ編集4

SiGN Proはスライド編集画面の背景、Inspector の背景、スライドタイトル・本文の画像挿入、リッチテキストウィジェットの画像挿入などから起動することができます。

113

SiGN Proで画像を編集しよう

046

SiGN Proとは?

6CH

APTE

R

スライドの背景画像などが設定済みの状態で鉛筆アイコンをクリックすると、画像を読み込んだ状態でSiGN Proが起動します。この状態では、画像のサイズなどを編集することができます(P.124 参照)。

配置済みの画像を編集する

レイヤー編集モードのツールバー

SiGN Proを起動する

画像編集1

鉛筆アイコンをクリック1

SiGN Proが起動した2

シェイプ編集2

テキスト編集3

スタンプ編集4

SiGN Proはスライド編集画面の背景、Inspector の背景、スライドタイトル・本文の画像挿入、リッチテキストウィジェットの画像挿入などから起動することができます。

Page 20: LiVE ではじめる、魅せるWeb サイトの作り方

70-71 70-71

130

SiGN Proで画像を編集しよう

052

吹き出し画像を作るには?

6CH

APTE

R

052

section.

リッチテキストウィジェットを作成する

吹き出し画像を作るには?スタンプレイヤーを利用すれば、吹き出しや矢印を簡単に作ることができます。

リッチテキストウィジェットを作成

[設定]タブをクリック

[背景]の[-]をクリック

画像削除後に鉛筆アイコンをクリック

1

2

3

4

リッチテキストウィジェットについてはP.92を参照してください。

画像を削除する際に確認メッセージが表示されるので、[はい]をクリックします。

130

SiGN Proで画像を編集しよう

052

吹き出し画像を作るには?

6CH

APTE

R

052

section.

リッチテキストウィジェットを作成する

吹き出し画像を作るには?スタンプレイヤーを利用すれば、吹き出しや矢印を簡単に作ることができます。

リッチテキストウィジェットを作成

[設定]タブをクリック

[背景]の[-]をクリック

画像削除後に鉛筆アイコンをクリック

1

2

3

4

リッチテキストウィジェットについてはP.92を参照してください。

画像を削除する際に確認メッセージが表示されるので、[はい]をクリックします。

Page 21: LiVE ではじめる、魅せるWeb サイトの作り方

12/10/10 16:2312/10/10 16:23

131

SiGN Proで画像を編集しよう

052

吹き出し画像を作るには?

6CH

APTE

R

[新規レイヤー]のスタンプアイコンをクリック

ここをクリック

色を選択

スタンプの色が変更された

[完了]をクリック

1

2

3

4

5

[スタンプ選択]をクリックすると、矢印などの形を選ぶことができます(P.99 参照)。

スタンプレイヤーを追加する

131

SiGN Proで画像を編集しよう

052

吹き出し画像を作るには?

6CH

APTE

R

[新規レイヤー]のスタンプアイコンをクリック

ここをクリック

色を選択

スタンプの色が変更された

[完了]をクリック

1

2

3

4

5

[スタンプ選択]をクリックすると、矢印などの形を選ぶことができます(P.99 参照)。

スタンプレイヤーを追加する

Page 22: LiVE ではじめる、魅せるWeb サイトの作り方

80-81 80-81

152

サイトを管理しよう

061

サイトをアップロードするには?

8CH

APTE

R

061

section.

一般的なFTPサーバー用の設定を行う

サイトをアップロードするには?サイト公開設定を行ってからアップロードを実行します。

サイトエディタを表示

[サイト設定]をクリック

1

2

[サーバーの種類]をクリック

[一般的なFTPサーバー]を選択

[はい]をクリック

3

4

5

152

サイトを管理しよう

061

サイトをアップロードするには?

8CH

APTE

R

061

section.

一般的なFTPサーバー用の設定を行う

サイトをアップロードするには?サイト公開設定を行ってからアップロードを実行します。

サイトエディタを表示

[サイト設定]をクリック

1

2

[サーバーの種類]をクリック

[一般的なFTPサーバー]を選択

[はい]をクリック

3

4

5

Page 23: LiVE ではじめる、魅せるWeb サイトの作り方

12/10/10 16:2512/10/10 16:25

153

サイトを管理しよう

061

サイトをアップロードするには?

8CH

APTE

R

サイト設定画面ではWeb ページが利用するアイコンを設定できます。Faviconはブラウザのブックマークなどに表示される小さなアイコンのことです。また、WebClipアイコンはiPhone のホーム画面に登録した際に利用されるアイコンのことです。

FaviconとWebClipアイコン

サイトをアップロードする

必要な情報を入力

[テスト開始]をクリックして設定に誤りがないか確認

[適用]をクリック

6

7

8

各設定項目の内容は以下のとおりです。(1)サイトURL:アップロードされたWeb ページに

アクセスするためのURL(2)FTPホスト:FTPサーバーのアドレス(3)ユーザーID:FTPサーバーのユーザー名(4)パスワード:FTPサーバーのパスワード(5)サーバーディレクトリ:アップロードするフォルダ(6)オプションを設定する:FTPのポート番号が標

準と異なる場合はここをクリックして設定(7)モバイル画像を生成:スマートフォンなどで利用

するサイズの小さい画像を生成する

[公開]をクリック

[はい]をクリック

[はい]をクリック

1

2

3

153

サイトを管理しよう

061

サイトをアップロードするには?

8CH

APTE

R

サイト設定画面ではWeb ページが利用するアイコンを設定できます。Faviconはブラウザのブックマークなどに表示される小さなアイコンのことです。また、WebClipアイコンはiPhone のホーム画面に登録した際に利用されるアイコンのことです。

FaviconとWebClipアイコン

サイトをアップロードする

必要な情報を入力

[テスト開始]をクリックして設定に誤りがないか確認

[適用]をクリック

6

7

8

各設定項目の内容は以下のとおりです。(1)サイトURL:アップロードされたWeb ページに

アクセスするためのURL(2)FTPホスト:FTPサーバーのアドレス(3)ユーザーID:FTPサーバーのユーザー名(4)パスワード:FTPサーバーのパスワード(5)サーバーディレクトリ:アップロードするフォルダ(6)オプションを設定する:FTPのポート番号が標

準と異なる場合はここをクリックして設定(7)モバイル画像を生成:スマートフォンなどで利用

するサイズの小さい画像を生成する

[公開]をクリック

[はい]をクリック

[はい]をクリック

1

2

3

Page 24: LiVE ではじめる、魅せるWeb サイトの作り方

92-93

158

サイトを管理しよう

064

サイトのアクセス数を調べるには?

8CH

APTE

R

064

section.

Googleアナリティクスの設定を行う

Google

サイトのアクセス数を調べるには?Googleアナリティクスの設定を行います。

Googleアナリティクスのページを表示

[アナリティクスにアクセス]をクリック

Googleアカウントのメールアドレスとパスワードを入力

[ログイン]をクリック

[Sign up]をクリック

1

2

3

4

5

「http://www.google.com/intl/ja/analytics/」をブラウザで表示して設定を開始します。

Page 25: LiVE ではじめる、魅せるWeb サイトの作り方

12/10/10 16:27

159

サイトを管理しよう

064

サイトのアクセス数を調べるには?

8CH

APTE

R

Googleアナリティクスに再ログインした際に右図のような画面が表示されることがあります。その場合は、アカウント名や対象サイトなどを選択してください。

プロパティ名の選択

アカウント名(氏名など)を入力

解析するサイトのURLを入力

タイムゾーンから[Japan]を選択

[Japan]を選択

利用規約を確認してチェックを付ける

[Create Account]をクリック

[Settings]をクリック

[Lanuages]から[日本語]を選択

[Save User settings]をクリック

6

7

8

9

10

11

12

13

14

アカウント名を選択

対象のサイトを選択

プロパティ名を選択

1

2

3

Page 26: LiVE ではじめる、魅せるWeb サイトの作り方

112-113 112-113

178

LiVEをさらに使いこなそう

070

行間を狭めたり広げたりするには?

9CH

APTE

R

070

section.

行間を設定する

行間を狭めたり広げたりするには?プレミアム機能を利用するとスライドの行間を調整できるようになります。

FINISH!!

鉛筆アイコンをクリック

[設定]をクリック

[スタイルの詳細設定]をクリック

1

2

3

オンにして値を設定4

[適用]をクリックタイトルの行間が広く、本文の行間が狭くなった

56

178

LiVEをさらに使いこなそう

070

行間を狭めたり広げたりするには?

9CH

APTE

R

070

section.

行間を設定する

行間を狭めたり広げたりするには?プレミアム機能を利用するとスライドの行間を調整できるようになります。

FINISH!!

鉛筆アイコンをクリック

[設定]をクリック

[スタイルの詳細設定]をクリック

1

2

3

オンにして値を設定4

[適用]をクリックタイトルの行間が広く、本文の行間が狭くなった

56

Page 27: LiVE ではじめる、魅せるWeb サイトの作り方

12/10/10 16:3112/10/10 16:31

179

LiVEをさらに使いこなそう

071

スライド中の文字位置を調整するには?

9CH

APTE

R

071

section.

パディングを調整する

スライド中の文字位置を調整するには?文字の表示エリアなどを調整するパディングを設定します。

FINISH!!

鉛筆アイコンをクリック

[設定]をクリック

[スタイルの詳細設定]をクリック

1

2

3

オンにしてスライド本文のパディングを設定

オンにして全体のパディングを設定

5

4

[適用]をクリック

本文エリアの左に余白ができた

6

7

179

LiVEをさらに使いこなそう

071

スライド中の文字位置を調整するには?

9CH

APTE

R

071

section.

パディングを調整する

スライド中の文字位置を調整するには?文字の表示エリアなどを調整するパディングを設定します。

FINISH!!

鉛筆アイコンをクリック

[設定]をクリック

[スタイルの詳細設定]をクリック

1

2

3

オンにしてスライド本文のパディングを設定

オンにして全体のパディングを設定

5

4

[適用]をクリック

本文エリアの左に余白ができた

6

7