絵や文字がかかれていく手描き風アニメの作り方｜パワーポイント小技

パワーポイントでできる、手書き風の演出方法をご紹介します。

ここでの「手書き風」とは、まるでその場で字や絵を描いているかのような表現方法です。

簡単なサンプルを用意しましたのでご覧ください。

１つ１つのオブジェクトにアニメーションをつけて順番に動かす事で、このような手描き風の演出が可能になります。

慣れないうちは設定に手間取る事があるかもしれませんが、やり方が分かれば様々なオブジェクトに応用する事ができ、フォトムービーやプレゼンスライドの可愛いアクセントになること間違いなしです◎

という事でPowerPointでフォトムービー講座【第10回目】は、

字を書いているような表現方法

絵が描かれていく演出方法

サンプル動画のアニメーションの詳細

について詳しく図解していきます。

PC初心者の方向けに図解していきますので、頑張って素敵なスライドを作りましょう！

パワポでフォトムービー

パワーポイントで感動的なフォトムービーを作る｜作り方講座 全10回

[sitecard subtitle=パワポでフォトムービー url=https://mau-memo.com/powerpoint/ target=][sitecard subtitle=パワポでフォトムービー url=https[…]

字を書いているような表現方法

サンプル動画のタイトルに使用した、「鉛筆で字を書いているような表現方法」について図解します。

まず用意しなければならないのが「鉛筆の画像」です。

インターネットで検索すればたくさん出てくるので、お好みのものをPCに保存させてもらうのが手っ取り早いのですが、パワーポイントの描画機能を使って描いてもＯＫ◎

スライドにテキストとえんぴつの画像を挿入

画面左側のスライド一覧で、スライドを追加したい場所を右クリック→新しいスライドを追加。

スライド内の余分な枠(プレースホルダー)は全て削除しておきましょう。

ここでは背景を青い画用紙のテクスチャに設定してあります。

新しいスライドを追加する方法はこちらで詳しく図解しています。

新しいスライドを追加

PowerPointでフォトムービー 動画の入れ方と自動再生

パワーポイントでフォトムービーを作ろう【第6回目】です。 感動的なスライドショーを作るには、フォトムービーの途中に動画を挿入するのも効果的です。 スマホが普及し、画像だけではなく動画として[…]

背景の設定についてはこちらで詳しく図解しています。

背景の設定

パワーポイントの背景設定｜色の効果とプレゼンやスライドショーで見やすいおすすめ色

PowerPointを使ったフォトムービーの作り方、今回は背景の設定についてご説明していきます。 背景は、例えば真っ黒だと厳かな雰囲気、ドットやストライプなどの柄はポップな雰囲気、真っ白ならば神聖な雰囲気など、スラ[…]

新しいスライドを追加したら、挿入タブ→テキストボックス→横書きテキストボックスの描画をクリック。

テキストボックスに文字を入力します。

※サンプル動画内のタイトルはフリーフォント「はなぞめフォント」ですが、ここではPCにデフォルトで入っている教科書体を使用しています。

次に、えんぴつの画像を追加します。

挿入タブ→画像から使用する画像を選択してください。

手書き風アニメーションを作るので、えんぴつの先を一番最初に書く部分(ここでは手の1画目)に配置しておきましょう。

えんぴつにアニメーションをつける

えんぴつの画像にアニメーションをつけていきます。

一番最初に書く部分にえんぴつの先が置かれている事を確認したら、えんぴつの画像を選択し、アニメーションタブを開きましょう。

アニメーションの軌跡からユーザー設定パスを選択します。

選択したら軌跡作成画面になるので、今えんぴつの先が置いてある部分(ここでは手の1画目はじめ)にカーソルを置き、左クリックを押したまま文字をなぞっていきます。

最後(ここではンの2画目おわり)まで来たらダブルクリックで確定します。

えんぴつが動く軌跡を描けたら、元のえんぴつ画像とは別に薄いえんぴつの画像が2か所に表示されます。

これは、軌跡の最初と終わりを示すものです。

パソコンのキーボード「↑↓→←」を押すとこの軌跡が動くので、２つの薄い鉛筆の先を、それぞれテキストの最初の部分と最後の部分に合うように位置を調整しましょう。

 テキストにアニメーションをつける

文字(ここでは「手書き風アニメーション」)に左から徐々に現れるアニメーションをつけていきます。

テキストを選択し、アニメーションタブ→開始アニメーション「ワイプ」を選択。

効果のオプション→左からを設定しておきます。

これでえんぴつの画像とテキストにアニメーションがつきました。

アニメーションウインドウでタイミング設定

２つのオブジェクトにアニメーションがついたので、それらの発動タイミングを設定していきます。

アニメーションタブ→アニメーションウインドウを表示させておきましょう。

サンプル動画と同様の動作をつける場合は、タイミングをこのように設定します。

• えんぴつの画像
  開始：直前の動作と同時
  継続時間：4秒
  遅延：なし
• テキスト「手書き風アニメーション」
  開始：直前の動作と同時
  継続時間：3.8秒
  遅延：0.2秒

画面右上のタイミング設定欄に数値(秒数)を入れるか、アニメーションウインドウのオブジェクトをダブルクリックし、タイミングタブを開いて数値(秒数)を入れましょう。

ざっくりで良いならアニメーションウインドウのタイムバーを手動で伸縮させてもＯＫです。

絵が描かれていく演出方法

次に、絵が描かれていく演出方法をご紹介します。

例えばサンプル動画のにこにこマークの場合、輪郭や目、口など全てのパーツにアニメーションの設定を施します。

パーツはイラスト作成専門ソフトを使って作成すると美しく仕上がりますが、ここでは手っ取り早くパワーポイントの描画機能を使って描いていきます。

パワーポイントでイラスト描画

タッチタブか挿入タブ→図形から描きたいパーツ(オートシェイプと呼びます)を選択します。

曲線、円などを利用し、マウスのクリックとドラッグで絵を描いていきます。

Shiftを押しながらドラッグすると、正方形、真円などが描けます。

パーツに描画アニメーションをつける

描いたイラストのパーツ１つ１つに開始アニメーションを適用していきます。

パーツ選択→アニメーションの追加という手順で、描かれていく順番に設定していきましょう。

使用する開始アニメーションの種類は

• 円に近い形のパーツは「ワイプ」
• 直線に近い形のパーツは「ホイール」

で表現できます。

パーツの形によってどの開始アニメーションが手書き風に見えるかを確認しながら設定していきましょう。

サンプル動画では、

輪郭を選択→開始アニメーション「ホイール」

左目を選択→開始アニメーション「ワイプ(効果のオプション：左から)」

右目を選択→開始アニメーション「ワイプ(効果のオプション：左から)」

…という感じで、描画する順番にアニメーションをつけています。

パーツに動作アニメーションをつける

様々な図形で出来上がったイラストは、そのイラストを構成する全てのパーツを同時に動かすよう設定を施す必要があります。

「目だけ動かしたい」などの場合はそのパーツにのみに動作をつけてくださいね。

イラスト構成パーツに一括でアニメーションを設定するには、アニメーションウインドウにある全ての構成パーツを選択します。

下図のように、一番上の「りんかく」から一番下の「口」まで全てを選択する場合、まず「りんかく」を左クリックで選択し、Shiftキーを押しながら一番下の「口」を左クリックすればＯＫです。

いくつか点々と選択したい場合は、Ctrlキーを押しながら左クリックで選択していきましょう。

スライド画面のイラストパーツを同じように選択していっても良いですが、パーツが混み合っていたりすると分かりづらいかもしれません。

選択されたオブジェクトはオレンジ色になります。

この状態でアニメーションの追加をクリックし、つけたい動作のアニメーションを選択しましょう。

強調アニメーションかアニメーションの軌跡からお好みのものを選びます。

下図はサンプル動画のちょうちょと顔のスライドに適用されたアニメーションで、描画されたイラストが動きだす、という設定です。

ちょうちょはアニメーションの軌跡ユーザー設定パス(左から右へゆらゆら移動する軌跡)、顔はアニメーションの軌跡８の字横を設定しています。

アニメーションの詳細はこちらで図解しています。

アニメーションについて

パワーポイント ズーム&フェード｜アニメーションで画面切り替え

写真から写真への切り替え効果は、フォトムービーにかかせない効果です。 今回は、このサンプル動画のような、フォトムービーでよく見かけるズーム＆フェードのアニメーションを利用した切り替え方法をご紹介したいと思います。[…]

♦枠2♦

開始アニメーションホイール

開始：直前の動作の後
継続時間：2秒
遅延：なし

♦テキスト「おめでとう」♦

開始アニメーションワイプ(左から)

開始：直前の動作の後
継続時間：5秒
遅延：なし

♦左目♦

開始アニメーションホイール

開始：直前の動作の後
継続時間：0.5秒
遅延：なし

♦右目♦

開始アニメーションホイール

開始：直前の動作の後
継続時間：0.5秒
遅延：なし

♦口♦

開始アニメーションワイプ(左から)

開始：直前の動作の後
継続時間：1秒
遅延：なし

 

その他の細かい設定

・背景写真にアート効果「線画」
・画面切り替えは「パン」

終わりに

パワーポイントでできる、手書き文字とイラスト描画の表現方法の図解でした。

 

プレゼン用ソフトのパワーポイントは、ワードやエクセルと違って常用している方が少ないと思いますが、扱いに慣れてくると、自分のこだわりをじゅうぶん発揮できるようになります。

 

機能をフルに使って、素敵なフォトムービーを作ってみてくださいね。

 

最後までお読みいただきありがとうございました！

 

前回

パワーポイントの背景設定｜色の効果とプレゼンやスライドショーで見やすいおすすめ色

PowerPointを使ったフォトムービーの作り方、今回は背景の設定についてご説明していきます。 背景は、例えば真っ黒だと厳かな雰囲気、ドットやストライプなどの柄はポップな雰囲気、真っ白ならば神聖な雰囲気など、スラ[…]

パワポでフォトムービー講座まとめ

パワーポイントで感動的なフォトムービーを作る｜作り方講座 全10回

[sitecard subtitle=パワポでフォトムービー url=https://mau-memo.com/powerpoint/ target=][sitecard subtitle=パワポでフォトムービー url=https[…]

①超基本のスライドショー作成
②アニメーション付き文字を入れよう
③ズーム＆フェードで素敵に切り替え
④アニメーションのコピペで楽々設定
⑤出来たスライドを閲覧用に変換
⑥スライドショーに動画を入れよう
⑦1枚のスライドで複数の写真を見せる
⑧映画のようなスタッフロール
⑨背景を入れて印象的に仕上げよう