テキストの効果は、イメージ広告や AMP HTML 広告ではサポートされていません。
Google Web Designer では、テキスト要素にアニメーション効果を追加できます。たとえば、一度に 1 文字ずつ表示するタイプライター型の効果を追加できます。テキストの効果は、[テキストの効果] パネルで設定します（このパネルが表示されない場合は、[ウィンドウ] メニューから開きます）。
テキスト効果を追加する
テキスト要素にテキスト効果を追加する手順は次のとおりです。
- タイムライン内でテキスト効果のアニメーションを開始するポイントを選択します。
- 効果を適用するテキスト要素を選択します（テキスト効果は一度に 1 つの要素にのみ適用できます）。
- [テキストの効果] パネルで、[効果] プルダウンから目的の効果を選択します。
- [追加]
ボタンをクリックします。
- パネルでテキスト効果のプロパティを調整します（各効果のプロパティの説明については、以下をご覧ください）。
ボタンをクリックします。詳細モードのタイムラインで、テキスト要素レイヤの下にテキスト効果のレイヤが追加されます。
要素レイヤとは異なり、テキスト効果レイヤはループ処理や可視性処理をサポートしていません。また、関連するテキスト要素レイヤには常にアタッチされているため、個別にテキストの並べ替え、ロック、非表示を設定することはできません。また、テキストレイヤの表示範囲も共有できません。
同じテキスト要素に複数のテキスト効果を連続して追加できますが、同時に適用することはできません。つまり、タイムライン内で重複した状態で効果を適用することはできません。
テキスト効果をプレビューする
[テキストの効果] パネルを使用する場合
テキスト効果が [テキストの効果] パネルの上部にあるプレビュー ペインにどのように表示されるかを確認できます。「テキスト効果」という単語は、現在のテキスト効果のプロパティ セットを使用してアニメーション表示されます（テキスト効果がまだ追加されていない場合は、選択した効果のデフォルト プロパティが使用されます）。次のプレビュー コントロールを使用します。
-
再生
- テキスト効果のプレビューを再生します。
-
ループ
- 再生中のプレビューを連続的にループします。
-
一時停止
- 再生中のプレビューを一時停止します。
ステージ上
テキスト効果がステージに表示され、アニメーション タイムライン内の現在の時間が反映されます。タイムライン上で [再生] ボタン を押すと、テキスト効果のアニメーションがステージ上の他の要素とともにプレビューされます。
テキストツールを使用してテキスト効果が適用されたテキスト要素のコンテンツを編集すると、テキスト全体を確認できるように、効果が一時的に無効になります。
テキスト効果を管理する
クイックモードのタイムラインを使用する際にテキスト効果を追加することはできますが、既存の効果を管理するには、詳細モードのタイムラインに切り替える必要があります。
テキスト効果のタイミングを調整する
デフォルトでは、タイムラインで、現在のプレイヘッドの位置にテキスト効果が追加され再生時間が 2 秒間に設定されます。テキスト効果の開始時間と再生時間を変更できます。
-
[テキストの効果] パネルで時間を変更するには: [時間] 欄に新しい値を秒単位で入力するか、スライダーをドラッグします。
-
タイムラインの期間を変更するには: テキスト効果スパンの左端または右端にカーソルを合わせて、バーを表示し、タイムラインに沿って端をドラッグします。左端をドラッグすると、効果の開始時間も変更されます。
-
再生時間を変更せずに開始時間を変更するには: テキスト効果スパン全体をタイムライン内の目的の位置にドラッグします。
テキスト効果のプロパティを編集する
各効果はカスタマイズできます。
- タイムラインでテキストの効果を選択します。
- [テキストの効果] パネルでプロパティを調整します。
テキスト効果のアニメーションの長さとイージングを編集できます。ほとんどの効果は、文字、単語、行ごとにアニメーション化するよう構成できます。さらに、文字、単語、線のクラスタ化も可能です。
各効果で利用可能なプロパティについては、効果の一覧をご覧ください。
別のテキスト効果に切り替える
テキストに適用する効果の種類を変更できます。
- タイムラインでテキストの効果を選択します。
- [テキストの効果] パネルの [効果] プルダウンで別の効果を選択します。
テキスト効果を削除する
テキスト効果を削除するには、次のいずれかの方法を使用します。
- タイムラインでテキスト効果を右クリックし、ポップアップ メニューから [削除] を選択します。
- タイムラインでテキスト効果を選択し、Delete キーを押します。
効果
各効果は、プロパティを調整してカスタマイズできます。
テキストにぼかしが入った後、フォーカスされます。
ぼかしのプロパティ
| 時間 | アニメーション効果全体の完了に要する時間（秒）。 |
|---|---|
| イージング | アニメーションの加速と減速の仕組み。詳細については、イージングをご覧ください。 |
| ぼかし | ぼかしの最大半径（ピクセル単位） |
| 不透明度 | テキストの開始不透明度（%）。[リバース] チェックボックスをオンにした場合は、この項目で終了時の不透明度を設定します。 |
| 速度 | 前の文字、単語、行のアニメーション化が開始されてから、次の文字、単語、行のアニメーション化が開始されるまでの時間。たとえば、1 文字ずつの効果に 0.25 を指定すると、文字の 1/4 のアニメーション化が完了した後、次の文字のアニメーション化が開始されます。 |
| シーケンス |
テキスト全体を表示する間の効果の進捗方法を選択します。
[一括] 以外を選択した場合は、一連の文字、単語、行を組み合わせてアニメーション化することもできます。グループ化の規模またはグループの合計数を指定します。
|
| 順序をランダム化 | デフォルトでは、文字、単語、行の各グループは、左から右、上から下にアニメーション化されます。アニメーションの順序をシャッフルする場合は、このオプションを選択します。ランダム化すると、順序に影響を与えるようにテキストまたはテキスト効果のプロパティが変更されるまで、順序は保持されます。このオプションの選択を解除して再選択すると、順序が再度シャッフルされます。 |
| リバース | アニメーション効果を逆方向に再生し、ぼかしを入れたテキストで終了します。 |
テキストは上から（z 軸に沿って）所定の位置に配置されます。
プロパティの減少
| 時間 | アニメーション効果全体の完了に要する時間（秒）。 |
|---|---|
| イージング | アニメーションの加速と減速の仕組み。詳細については、イージングをご覧ください。 |
| オフセット | z 軸に沿ったテキストの移動距離（ピクセル単位）。 |
| 不透明度 | テキストの開始不透明度（%）。[リバース] チェックボックスをオンにした場合は、この項目で終了時の不透明度を設定します。 |
| 速度 | 前の文字、単語、行のアニメーション化が開始されてから、次の文字、単語、行のアニメーション化が開始されるまでの時間。たとえば、1 文字ずつの効果に 0.25 を指定すると、文字の 1/4 のアニメーション化が完了した後、次の文字のアニメーション化が開始されます。 |
| シーケンス |
テキスト全体を表示する間の効果の進捗方法を選択します。
[一括] 以外を選択した場合は、一連の文字、単語、行を組み合わせてアニメーション化することもできます。グループ化の規模またはグループの合計数を指定します。
|
| 順序をランダム化 | デフォルトでは、文字、単語、行の各グループは、左から右、上から下にアニメーション化されます。アニメーションの順序をシャッフルする場合は、このオプションを選択します。ランダム化すると、順序に影響を与えるようにテキストまたはテキスト効果のプロパティが変更されるまで、順序は保持されます。このオプションの選択を解除して再選択すると、順序が再度シャッフルされます。 |
| リバース | アニメーション効果を逆方向に再生し、テキストがサーフェスから離れて上方向に移動します。 |
テキストは線形グラデーション マスクを使用して表示されます。
グラデーションのプロパティ
| 時間 | アニメーション効果全体の完了に要する時間（秒）。 |
|---|---|
| イージング | アニメーションの加速と減速の仕組み。詳細については、イージングをご覧ください。 |
| 角度 | グラデーションの角度（度）。 |
| 不透明度 | グラデーション マスクの不透明度。 |
| 速度 | 前の文字、単語、行のアニメーション化が開始されてから、次の文字、単語、行のアニメーション化が開始されるまでの時間。たとえば、1 文字ずつの効果に 0.25 を指定すると、文字の 1/4 のアニメーション化が完了した後、次の文字のアニメーション化が開始されます。 |
| シーケンス |
テキスト全体を表示する間の効果の進捗方法を選択します。
[一括] 以外を選択した場合は、一連の文字、単語、行を組み合わせてアニメーション化することもできます。グループ化の規模またはグループの合計数を指定します。
|
| 順序をランダム化 | デフォルトでは、文字、単語、行の各グループは、左から右、上から下にアニメーション化されます。アニメーションの順序をシャッフルする場合は、このオプションを選択します。ランダム化すると、順序に影響を与えるようにテキストまたはテキスト効果のプロパティが変更されるまで、順序は保持されます。このオプションの選択を解除して再選択すると、順序が再度シャッフルされます。 |
| リバース | アニメーション効果を逆方向に再生して、テキストをグラデーション マスクで隠します。 |
テキストが平坦な状態になるまで、x 軸に沿って垂直方向に反転します。
反転プロパティ
| 時間 | アニメーション効果全体の完了に要する時間（秒）。 |
|---|---|
| イージング | アニメーションの加速と減速の仕組み。詳細については、イージングをご覧ください。 |
| 方向 |
回転軸を配置する場所を選択します。
|
| 回転 | テキストの回転距離（度）。 |
| 不透明度 | テキストの開始不透明度（%）。[リバース] チェックボックスをオンにした場合は、この項目で終了時の不透明度を設定します。 |
| 速度 | 前の文字、単語、行のアニメーション化が開始されてから、次の文字、単語、行のアニメーション化が開始されるまでの時間。たとえば、1 文字ずつの効果に 0.25 を指定すると、文字の 1/4 のアニメーション化が完了した後、次の文字のアニメーション化が開始されます。 |
| シーケンス |
テキスト全体を表示する間の効果の進捗方法を選択します。
[一括] 以外を選択した場合は、一連の文字、単語、行を組み合わせてアニメーション化することもできます。グループ化の規模またはグループの合計数を指定します。
|
| 順序をランダム化 | デフォルトでは、文字、単語、行の各グループは、左から右、上から下にアニメーション化されます。アニメーションの順序をシャッフルする場合は、このオプションを選択します。ランダム化すると、順序に影響を与えるようにテキストまたはテキスト効果のプロパティが変更されるまで、順序は保持されます。このオプションの選択を解除して再選択すると、順序が再度シャッフルされます。 |
| リバース | アニメーション効果を逆方向に再生し、テキストが回転して終了します。 |
テキストが所定の位置まで縦方向に移動します。
整列プロパティ
| 時間 | アニメーション効果全体の完了に要する時間（秒）。 |
|---|---|
| イージング | アニメーションの加速と減速の仕組み。詳細については、イージングをご覧ください。 |
| 方向 |
テキストの移動開始時点の位置を選択します。
|
| オフセット | Y 軸に沿ったテキストの移動距離（ピクセル単位）。 |
| 不透明度 | テキストの開始不透明度（%）。[リバース] チェックボックスをオンにした場合は、この項目で終了時の不透明度を設定します。 |
| 速度 | 前の文字、単語、行のアニメーション化が開始されてから、次の文字、単語、行のアニメーション化が開始されるまでの時間。たとえば、1 文字ずつの効果に 0.25 を指定すると、文字の 1/4 のアニメーション化が完了した後、次の文字のアニメーション化が開始されます。 |
| シーケンス |
テキスト全体を表示する間の効果の進捗方法を選択します。
[一括] 以外を選択した場合は、一連の文字、単語、行を組み合わせてアニメーション化することもできます。グループ化の規模またはグループの合計数を指定します。
|
| 順序をランダム化 | デフォルトでは、文字、単語、行の各グループは、左から右、上から下にアニメーション化されます。アニメーションの順序をシャッフルする場合は、このオプションを選択します。ランダム化すると、順序に影響を与えるようにテキストまたはテキスト効果のプロパティが変更されるまで、順序は保持されます。このオプションの選択を解除して再選択すると、順序が再度シャッフルされます。 |
| リバース | アニメーション効果を逆方向に再生し、テキストが配置されている位置から離れた場所に移動します。 |
直線状態になるまで、テキストが Z 軸に沿って回転します。
ロールのプロパティ
| 時間 | アニメーション効果全体の完了に要する時間（秒）。 |
|---|---|
| イージング | アニメーションの加速と減速の仕組み。詳細については、イージングをご覧ください。 |
| 方向 |
回転軸を配置する場所を選択します。
|
| 回転 | テキストの回転距離（度）。 |
| 不透明度 | テキストの開始不透明度（%）。[リバース] チェックボックスをオンにした場合は、この項目で終了時の不透明度を設定します。 |
| 速度 | 前の文字、単語、行のアニメーション化が開始されてから、次の文字、単語、行のアニメーション化が開始されるまでの時間。たとえば、1 文字ずつの効果に 0.25 を指定すると、文字の 1/4 のアニメーション化が完了した後、次の文字のアニメーション化が開始されます。 |
| シーケンス |
テキスト全体を表示する間の効果の進捗方法を選択します。
[一括] 以外を選択した場合は、一連の文字、単語、行を組み合わせてアニメーション化することもできます。グループ化の規模またはグループの合計数を指定します。
|
| 順序をランダム化 | デフォルトでは、文字、単語、行の各グループは、左から右、上から下にアニメーション化されます。アニメーションの順序をシャッフルする場合は、このオプションを選択します。ランダム化すると、順序に影響を与えるようにテキストまたはテキスト効果のプロパティが変更されるまで、順序は保持されます。このオプションの選択を解除して再選択すると、順序が再度シャッフルされます。 |
| リバース | アニメーション効果を逆方向に再生し、テキストが回転して終了します。 |
垂直方向にスクロールしてテキストがビュー内に移動した後、ビューの外部に移動します。
スクロールのプロパティ
| 時間 | アニメーション効果全体の完了に要する時間（秒）。 |
|---|---|
| イージング | アニメーションの加速と減速の仕組み。詳細については、イージングをご覧ください。 |
| タイプ |
選択:
|
テキスト コンテナの外側からスライドしているように、テキストが所定の位置にスライドします。
スライドのプロパティ
| 時間 | アニメーション効果全体の完了に要する時間（秒）。 |
|---|---|
| イージング | アニメーションの加速と減速の仕組み。詳細については、イージングをご覧ください。 |
| 方向 |
テキストの移動開始時点の位置を選択します。
|
| 不透明度 | テキストの開始不透明度（%）。[リバース] チェックボックスをオンにした場合は、この項目で終了時の不透明度を設定します。 |
| 速度 | 前の文字、単語、行のアニメーション化が開始されてから、次の文字、単語、行のアニメーション化が開始されるまでの時間。たとえば、1 文字ずつの効果に 0.25 を指定すると、文字の 1/4 のアニメーション化が完了した後、次の文字のアニメーション化が開始されます。 |
| シーケンス |
テキスト全体を表示する間の効果の進捗方法を選択します。
[一括] 以外を選択した場合は、一連の文字、単語、行を組み合わせてアニメーション化することもできます。グループ化の規模またはグループの合計数を指定します。
|
| 順序をランダム化 | デフォルトでは、文字、単語、行の各グループは、左から右、上から下にアニメーション化されます。アニメーションの順序をシャッフルする場合は、このオプションを選択します。ランダム化すると、順序に影響を与えるようにテキストまたはテキスト効果のプロパティが変更されるまで、順序は保持されます。このオプションの選択を解除して再選択すると、順序が再度シャッフルされます。 |
| リバース | アニメーション効果を逆方向に再生し、テキストをコンテナの外部にスライドします。 |
テキストは、平らになるまで Y 軸に沿って回転します。
スピン プロパティ
| 時間 | アニメーション効果全体の完了に要する時間（秒）。 |
|---|---|
| イージング | アニメーションの加速と減速の仕組み。詳細については、イージングをご覧ください。 |
| 方向 |
回転軸を配置する場所を選択します。
|
| 回転 | テキストの回転距離（度）。 |
| 不透明度 | テキストの開始不透明度（%）。[リバース] チェックボックスをオンにした場合は、この項目で終了時の不透明度を設定します。 |
| 速度 | 前の文字、単語、行のアニメーション化が開始されてから、次の文字、単語、行のアニメーション化が開始されるまでの時間。たとえば、1 文字ずつの効果に 0.25 を指定すると、文字の 1/4 のアニメーション化が完了した後、次の文字のアニメーション化が開始されます。 |
| シーケンス |
テキスト全体を表示する間の効果の進捗方法を選択します。
[一括] 以外を選択した場合は、一連の文字、単語、行を組み合わせてアニメーション化することもできます。グループ化の規模またはグループの合計数を指定します。
|
| 順序をランダム化 | デフォルトでは、文字、単語、行の各グループは、左から右、上から下にアニメーション化されます。アニメーションの順序をシャッフルする場合は、このオプションを選択します。ランダム化すると、順序に影響を与えるようにテキストまたはテキスト効果のプロパティが変更されるまで、順序は保持されます。このオプションの選択を解除して再選択すると、順序が再度シャッフルされます。 |
| リバース | アニメーション効果を逆方向に再生し、テキストが回転して終了します。 |
テキストが水平方向に移動します。
拡散のプロパティ
| 時間 | アニメーション効果全体の完了に要する時間（秒）。 |
|---|---|
| イージング | アニメーションの加速と減速の仕組み。詳細については、イージングをご覧ください。 |
| 方向 |
テキストの移動開始時点の位置を選択します。
|
| オフセット | x 軸に沿ったテキストの移動距離（ピクセル単位）。 |
| 不透明度 | テキストの開始不透明度（%）。[リバース] チェックボックスをオンにした場合は、この項目で終了時の不透明度を設定します。 |
| 速度 | 前の文字、単語、行のアニメーション化が開始されてから、次の文字、単語、行のアニメーション化が開始されるまでの時間。たとえば、1 文字ずつの効果に 0.25 を指定すると、文字の 1/4 のアニメーション化が完了した後、次の文字のアニメーション化が開始されます。 |
| シーケンス |
テキスト全体を表示する間の効果の進捗方法を選択します。
[一括] 以外を選択した場合は、一連の文字、単語、行を組み合わせてアニメーション化することもできます。グループ化の規模またはグループの合計数を指定します。
|
| 順序をランダム化 | デフォルトでは、文字、単語、行の各グループは、左から右、上から下にアニメーション化されます。アニメーションの順序をシャッフルする場合は、このオプションを選択します。ランダム化すると、順序に影響を与えるようにテキストまたはテキスト効果のプロパティが変更されるまで、順序は保持されます。このオプションの選択を解除して再選択すると、順序が再度シャッフルされます。 |
| リバース | アニメーション効果を逆方向に再生し、テキストが配置されている位置から離れた場所に移動します。 |
テキストは一度に 1 つ表示されます。
ぼかしのプロパティ
| 時間 | アニメーション効果全体の完了に要する時間（秒）。 |
|---|---|
| イージング | アニメーションの加速と減速の仕組み。詳細については、イージングをご覧ください。 |
| 不透明度 | テキストの開始不透明度（%）。[リバース] チェックボックスをオンにした場合は、この項目で終了時の不透明度を設定します。 |
| 速度 | 前の文字、単語、行のアニメーション化が開始されてから、次の文字、単語、行のアニメーション化が開始されるまでの時間。たとえば、1 文字ずつの効果に 0.25 を指定すると、文字の 1/4 のアニメーション化が完了した後、次の文字のアニメーション化が開始されます。 |
| フェード イン | テキストが表示されたときにフェードインするように設定する場合は、このチェックボックスをオンにします。 |
| シーケンス |
テキスト全体を表示する間の効果の進捗方法を選択します。
文字、単語、行のグループを組み合わせてアニメーション化することも可能です。グループ化の規模またはグループの合計数を指定します。
|
| 順序をランダム化 | デフォルトでは、文字、単語、行の各グループは、左から右、上から下にアニメーション化されます。アニメーションの順序をシャッフルする場合は、このオプションを選択します。ランダム化すると、順序に影響を与えるようにテキストまたはテキスト効果のプロパティが変更されるまで、順序は保持されます。このオプションの選択を解除して再選択すると、順序が再度シャッフルされます。 |
| リバース | アニメーション効果を逆方向に再生し、テキストを非表示にします。 |
テキストのサイズが拡大されます。
ズームのプロパティ
| 時間 | アニメーション効果全体の完了に要する時間（秒）。 |
|---|---|
| イージング | アニメーションの加速と減速の仕組み。詳細については、イージングをご覧ください。 |
| スケーリング | テキストを拡大する最大量をパーセンテージで示します。100% を超える値の場合、テキストはその後通常のサイズに縮小されます。 |
| 不透明度 | テキストの開始不透明度（%）。[リバース] チェックボックスをオンにした場合は、この項目で終了時の不透明度を設定します。 |
| 速度 | 前の文字、単語、行のアニメーション化が開始されてから、次の文字、単語、行のアニメーション化が開始されるまでの時間。たとえば、1 文字ずつの効果に 0.25 を指定すると、文字の 1/4 のアニメーション化が完了した後、次の文字のアニメーション化が開始されます。 |
| シーケンス |
テキスト全体を表示する間の効果の進捗方法を選択します。
[一括] 以外を選択した場合は、一連の文字、単語、行を組み合わせてアニメーション化することもできます。グループ化の規模またはグループの合計数を指定します。
|
| 順序をランダム化 | デフォルトでは、文字、単語、行の各グループは、左から右、上から下にアニメーション化されます。アニメーションの順序をシャッフルする場合は、このオプションを選択します。ランダム化すると、順序に影響を与えるようにテキストまたはテキスト効果のプロパティが変更されるまで、順序は保持されます。このオプションの選択を解除して再選択すると、順序が再度シャッフルされます。 |
| リバース | アニメーション効果を逆方向に再生し、テキストが縮小され最終的に消失します。 |
テキスト効果のイージング
イージングは、テキスト効果のアニメーションが進行する際の加速または減速に影響します。デフォルトでは、イージングは線形であり、テキスト効果全体で一定の速度に設定されます。[テキストの効果] パネルの [イージング] プルダウンで、イージングを次のいずれかのプリセットに変更できます。
リニア |
アニメーションは一定速度で実行されます。 |
イーズイン |
アニメーションは、低速で始まり高速で終わります。 |
高速でイーズイン |
アニメーションは低速で開始し、中程度の速度で終了します。 |
低速でイーズイン |
アニメーションがごく低速で開始し、短時間で終了します。 |
イーズインアウト |
アニメーションは、最初と最後は低速ですが、中盤は高速です。 |
イーズアウト |
アニメーションは、高速で始まりだんだん速度を落とします。 |
高速でイーズアウト |
アニメーションは、非常に高速で開始し徐々に減速して終了します。 |
低速でイーズアウト |
アニメーションは、中速で開始し徐々に減速して終了します。 |
Google Web Designer でこれらのイージング オプションを可視化するには、[イージング オプション...] を選択して [イージング] ダイアログを開きます。
カスタム イージング
プリセット オプションのいずれかを使用する代わりに、テキスト効果のイージングをカスタマイズできます。
- タイムラインでテキストの効果を選択します。
- [テキストの効果] パネルの [イージング] プルダウンで、[イージング オプション...] を選択します。
- [イージング] ダイアログで、[カスタム] を選択します。
- 次のいずれかの方法を使用して、イージングを変更します。
- コントロール ハンドルをドラッグして、イージング カーブの形状を調整します。コントロール ハンドルの角度で、カーブの高さを調整でき、コントロール ハンドルの長さで、加速または減速の強さを調整できます。
- [3 次ベジェ] フィールドに、目的とするベジェ曲線の
cubic-bezier()関数表記を入力します。無効な値を入力すると、フィールドに赤色の下線が表示されます。
- [適用] をクリックします。