パワポのおすすめフリー素材サイトはこちら▶︎

PowerPointでペンで一文字ずつ書くアニメーションの作り方

スポンサーリンク

PowerPointで手に持ったペンで文字が書かれていく軌跡に沿って、一文字ずつ文字が表示されるアニメーションの作り方をご紹介します。

ペンを持った手の素材はイラストAC、効果音はパワポのサウンドを使用します。

After Effectsでの動画作成はハードルが高いですが、パワポなら簡単に作れます。

スポンサーリンク
スポンサーリンク

文字を一文字ずつ表示する

新規プレゼンテーションのスライドサイズ「ワイド画面(16:9)」で作成を進めます。その他のスライドサイズで作る場合は、適宜調整が必要になります。

まずは、文字を一文字ずつ表示させるアニメーションを作ります。

一文字ずつ表示したい文字を用意します。作例のフォントは「たぬき油性マジック」を「66pt」で使用しています。テキストボックスは「Ctrl + E」キーで中央揃えにします。

フォント「たぬき油性マジック」のダウンロード方法は、次の記事で解説しています。

パワポで使える!かわいいフォント12選(手書き風・マジックペン)
PowerPointで使える「かわいいフォント」をまとめました。手書き風、マジックペン風、POP体、…

テキストボックスを選択した状態で「アニメーション」タブ →「アニメーション」グループ →「開始:フェード」を選択します。

続いて「アニメーション」グループ右下の起動ツールをクリックします。

「フェード」ダイアログボックスが開くので、「効果」タブ →「サウンド:矢」「テキストの動作:文字単位で表示」「100%文字間で遅延」に設定します。

  • ペンで書く効果音を「矢」のサウンドで表現しています。

続いて、「タイミング」タブ →「開始:直前の動作と同じ」「遅延:0.5秒」「継続時間:0.2秒」に設定し、「OK」をクリックします。

  • 開始から「0.5秒」後に「0.2秒」間隔で一文字ずつ表示させる設定にしています。

設定ができたら「プレビュー」ボタンを押して動作を確認しましょう。上図の動画はアニメーションGIFで書き出しているためサウンドは鳴りません。

  • スライドショー画面でプレビューするとテキストの動作が早すぎて効果音がうまく鳴りませんが、mp4で書き出すと問題なく流れるようになります。スライドショーのみで使用する場合は「サウンドなし」のままにしましょう。

ペンを持った手を文字に沿って動かす

文字を一文字ずつ表示させるアニメーションの上にペンを持った手のアニメーションを重ねます。

ペンを持った手のイラストを挿入します。

上図のイラストは下記リンクから無料でダウンロードできます。ダウンロード形式は背景が透過されているPNG画像を選択しましょう。

「イラストAC」に無料で登録する方法は、次の記事で解説しています。メールアドレスのみで登録できるのでおすすめです。

パワポで使うフリー素材は写真AC・イラストACがおすすめ!
PowerPointで使う写真やイラストのフリー素材をお探しなら、無料でダウンロードできる写真AC・…

手のイラストの余分な余白をトリミングしてサイズを調整し、ペン先を文字の先頭あたりに配置します。

画像をトリミングする方法は、次の記事で解説しています。

PowerPointで写真の足りない余白を埋める方法
PowerPointでスライドサイズに足りない写真の余白を埋める方法をご紹介します。スライド全体を写…

手のイラストを選択した状態で「アニメーション」タブ →「アニメーションの詳細設定」グループ →「アニメーションの追加」→「その他のアニメーションの軌跡効果」をクリックします。

「アニメーションの軌跡効果の追加」ダイアログボックスが開くので「線と曲線」の中から「波線」を選択し、「OK」をクリックします。

手のイラストにアニメーションが追加されました。

続いて、アニメーションの軌跡(波型の点線)をクリックしてプレースホルダーを表示させます。

プレースホルダー右中央のサイズ調整ハンドルをドラッグし、アニメーションの終点である半透明の手のイラストのペン先を上図のように文字の終わり辺りまで移動します。

さらに、プレースホルダー下中央のサイズ調整ハンドルをドラッグし、アニメーションの軌跡の高さを上図のように縮めます。

続いてアニメーションの軌跡を選択した状態で、「アニメーション」グループ右下の起動ツールをクリックします。

「波線」ダイアログボックスが開くので、「効果」タブ →「滑らかに開始:0秒」「滑らかに終了:0秒」に設定します。

続いて、「タイミング」タブ →「開始:直前の動作と同じ」「遅延:0.5秒」「継続時間:2.4秒」に設定し、「OK」をクリックします。

手のイラストも文字と同じように開始から「0.5秒」後にアニメーションがスタートする設定にしています。

  • 波線の継続時間の算出方法は、テキストボックスの文字数にフェードのアニメーションで設定した継続時間0.2秒を掛け合わせます。作例の場合は「”文字を書くアニメーション”の12文字×0.2=2.4秒」になります。

設定ができたら「プレビュー」ボタンを押して動作を確認しましょう。

スポンサーリンク

ペンを持った手をスライドアウトさせる

最後に手のイラストが画面の端で止まった状態から、スライド外へスライドアウトさせるアニメーションを追加します。

手のイラストを選択した状態で「アニメーション」タブ →「アニメーションの詳細設定」グループ →「アニメーションの追加」→「終了:スライドアウト」を選択します。

続いて手のイラストを選択した状態で、「アニメーション」グループ右下の起動ツールをクリックします。

「スライドアウト」ダイアログボックスが開くので、「効果」タブ →「方向:右下へ」に設定します。

続いて、「タイミング」タブ →「開始:直前の動作の後」「遅延:0.25秒」「継続時間:0.25秒」に設定し、「OK」をクリックします。

スライドアウトの設定ができました。「アニメーションウィンドウ」でタイムラインが上図の状態になっていることを確認しましょう。

「アニメーションウィンドウ」は「アニメーション」タブ →「アニメーションの詳細設定」グループ →「アニメーションウィンドウ」をクリックして表示します。

設定ができたら「プレビュー」ボタンを押して動作を確認しましょう。

ペンで一文字ずつ書くアニメーションの完成です。

おつかれさまでした!

うまく動きましたか?

YouTubeで効果音付きの動画を見よう!