starnote*
Menu
  • Home
  • About
    • About this site
    • About the author
    • Contact
  • Travel
  • Photo
  • Gadget
    • Apple
      • Mac
      • iPhone
      • iPad
    • Sony
    • Camera
    • Android
  • Goods
  • Academic
    • My Research
    • Doctor Course
    • Pharmacist
  • Lifestyle
    • Essay
    • Column
    • House
    • Blog
    • Music
Series
2018年まとめ 2019年まとめ 2020年まとめ BATTABI CX-5 Featured FUJINON XF18-55mmF2.8-4 R LM OIS FUJINON XF23mmF2 R WR iPhone 12 Pro Max My Research PRESSo Recommendation SIGMA 24-70mm F2.8 DG DN Art Sony A7III X-T200 ゆるゆる名古屋旅 わたしたちと鎌倉 アメリカと薬学 年末まとめ 週刊すたのじん 週末台湾 長崎ランタンフェスティバル2019
Categories
  • Academic
    • My Research
  • Android
    • dtab
  • App
    • iOS App
    • Mac App
    • Web App
  • Apple
    • Apple Music
    • iPad
    • iPhone
    • Mac
  • Blog
    • Adsense / Affiliate
    • Blog Design
    • Weekly / Monthly
  • Books
  • Case
    • iPad Case
    • iPhone Case
    • Mac Case
  • Column
    • Blog Writing
    • Career
    • Doctor Course
  • Design
  • Drug Development
  • Essay
  • Gadget
    • iPad Gadget
    • Mac Gadget
    • TV Gadget
  • Goods
    • Goods for Gadgets
    • IKEA
    • MUJI
    • Stationery
  • House
  • Lifestyle
    • Car
  • Movie / Drama
    • Foreign Drama
  • Music
    • Album
    • Headphone
    • Live
    • Music Note
    • Speaker
  • Net
    • Mobile Router
    • WiMAX
  • Opinion
  • Photograph
    • Camera
    • Eyefi
    • FlashAir
    • Photo Management
  • Qualification
    • Pharmacist
  • Skill-Up
  • Sony
    • Action Cam
    • Speaker
    • Xperia
  • Travel
    • America
    • Café
    • Drive! on cube
    • Fukuoka
    • Kamakura
    • Kobe
    • Kumamoto
    • Kyoto
    • Nagasaki
    • Nagoya
    • Oita
    • Saga
    • Sakura Week
    • Taiwan
    • Tokyo
  • Vlog
  • Web Services
    • Evernote
Archives
  • 2021年1月 (6)
  • 2020年12月 (11)
  • 2020年11月 (9)
  • 2020年10月 (6)
  • 2020年9月 (9)
  • 2020年8月 (9)
  • 2020年7月 (10)
  • 2020年6月 (7)
  • 2020年5月 (8)
  • 2020年4月 (8)
  • 2020年3月 (11)
  • 2020年2月 (3)
  • 2020年1月 (9)
  • 2019年12月 (11)
  • 2019年11月 (8)
  • 2019年10月 (8)
  • 2019年9月 (16)
  • 2019年8月 (17)
  • 2019年7月 (21)
  • 2019年6月 (17)
  • 2019年5月 (17)
  • 2019年4月 (21)
  • 2019年3月 (32)
  • 2019年2月 (28)
  • 2019年1月 (31)
  • 2018年12月 (26)
  • 2018年11月 (10)
  • 2018年10月 (6)
  • 2018年9月 (8)
  • 2018年8月 (5)
  • 2018年7月 (8)
  • 2018年6月 (6)
  • 2018年5月 (11)
  • 2018年4月 (12)
  • 2018年3月 (9)
  • 2018年1月 (8)
  • 2017年12月 (6)
  • 2017年11月 (6)
  • 2017年10月 (1)
  • 2017年9月 (1)
  • 2017年8月 (7)
  • 2017年7月 (5)
  • 2017年6月 (9)
  • 2017年5月 (8)
  • 2017年4月 (4)
  • 2017年3月 (10)
  • 2017年2月 (5)
  • 2017年1月 (9)
  • 2016年12月 (9)
  • 2016年11月 (7)
  • 2016年10月 (4)
  • 2016年9月 (3)
  • 2016年8月 (4)
  • 2016年7月 (6)
  • 2016年5月 (8)
  • 2016年4月 (3)
  • 2016年3月 (3)
  • 2015年7月 (2)
Apple Music
starnote*
starnote*
  • Home
  • About
    • About this site
    • About the author
    • Contact
  • Travel
  • Photo
  • Gadget
    • Apple
      • Mac
      • iPhone
      • iPad
    • Sony
    • Camera
    • Android
  • Goods
  • Academic
    • My Research
    • Doctor Course
    • Pharmacist
  • Lifestyle
    • Essay
    • Column
    • House
    • Blog
    • Music
  • Academic
  • Design

Keynoteのアニメーションを使いこなして、理解の深まるスライドを作ろう。

  • 2019-02-19
  • Yusuke Miura

イメージしているのは、「iPhoneやAndroidのユーザーインターフェイス」のような心地よさ。

この記事では、Keynoteで作る自然なアニメーションについて、3つ解説しています。いずれも、プレゼンの理解を深めるのに貢献するようなアニメーションです。


Keynoteのアニメーションを使いこなす

プレゼンのときに余計なアニメーションを使いまくるとウザがられますが、自然なアニメーションを適切な場面で使うことで、視覚的ノイズが減り、聴衆の理解が深まると考えます。

そのためには、標準の設定をそのまま使うのではなく、いくつかカスタマイズして最適化を施したり、複数のアニメーションを組み合わせたりして、より自然な動きを演出することも必要です。

今回は、Keynoteでのアニメーションについて、僕がよく使っているものを3つ紹介します。詳しい設定方法も解説するので、この記事に書いてあることを実践すれば、すぐに作ることができると思います。

紹介するアニメーションは以下の3つです。

  • スライドオーバー
  • トランジション後の要素移動
  • ポップアップ

上から順番に読むことを想定していますが、一応目次も置いておきますね。

もくじ

  • 1 Keynoteのアニメーションを使いこなす
  • 2 スライドオーバー
    • 2.1 「スライドオーバー」をつくる
  • 3 トランジション後の要素移動
    • 3.1 「トランジション後の要素移動」をつくる
  • 4 ポップアップ
    • 4.1 「ポップアップ」をつくる
  • 5 最後に
    • 5.1 関連記事はこちら

この記事に出てくるスライドは、ブログに合わせて「3,200×2,000px」という変則的なサイズで作っています。

通常のプレゼン用に4:3でスライドを作ると「1,024×768px」になると思うので、記事中で出てくる座標は適宜スケールを合わせて換算してください。


スライドオーバー

このように、補足資料の書類などを提示するときに使います。下からスライドオーバーするので、書類の下を切って上部2/3くらいを表示するといいでしょう。

書類全体を表示したいときは後述する「ポップアップ」を使ってみてください。下を切らずに書類全体をスライドオーバーさせると間抜けな印象になってしまうので。

以下、つくりかたです。


「スライドオーバー」をつくる

ここでスライドオーバーさせるのは青い図形です。スライドの外に配置し、左右方向は中央揃えしておいてください。(スライドの下に見切れているやつです)


上に重ねる青い図形にはドロップシャドウをつけましょう。「層の重なりは影で表現する」というのが最近のデザインの共通認識になっているからです。

【マテリアルデザイン】重なり順の考え方とコンポーネントの高度早見表
サルワカ | サルでも分かる図解説明マガジン サルワカ | サルでも分かる図解説明マガジン

→ 【マテリアルデザイン】重なり順の考え方とコンポーネントの高度早見表

僕は柔らかいドロップシャドウが好きなので、ぼかしを大きめにして不透明度を下げています。オフセット(図形からのズレ)は0ptでOKです。


青い図形の座標を確認しておきます。「配置」タブの「位置」を見ると【X 600pt:Y 2200pt】とありますが、これが座標です。


右上の「アニメーション」ボタンをクリックし、その下の「アクション」タブを選択します。そのあと「移動」というアニメーションを追加してください。

追加すると以下のような画面になります。(「ビルドの順番」という小さなウインドウは右下のボタンから表示することができます)


設定するのは「継続時間」と「位置」です。

まずは「継続時間」を0.50秒にしました。デフォルトの1.50秒はちょっと遅いかなと思うので、お好みでどうぞ。

また、位置に関しては先ほど確認した元の座標【X 600pt:Y 2200pt】を使います。

下から垂直に持ち上げるので、X座標は動かさずに600ptのままとします。Y座標は持ち上げる高さの分だけ変化させてください。

今回は【X 600pt:Y 140pt】としました。ここまでで下から上へのスライドオーバーは完成です。


青い図形を表示させたあと本編に戻る場合は、逆方向のアニメーションを追加しておくといいでしょう。

下にある「アクションを追加」ボタンから「移動」を選択して、継続時間を0.50秒、位置を元の座標【X 600pt:Y 2200pt】にします。


再生するとこんな感じです。


トランジション後の要素移動

次のスライドで片方の図形だけ入れ替える、というようなシチュエーションで使います。上のような感じで、サイズに合わせて中央に揃えるようなアニメーションです。


「トランジション後の要素移動」をつくる

1枚目には、左に青い図形、右にオレンジ色の図形が並んでいます。


2枚目では、青い図形を緑のものに入れ替えました。オレンジ色の図形は1枚目と同じ座標に配置しておきます。


オレンジ色の図形の座標を確認しておきましょう。【X 2104pt:Y 500pt】となっています。


2枚目のオレンジ色の図形に対してアニメーションを追加します。

スライドオーバーのときと同じように、「アクション」タブの「移動」というアニメーションを追加してください。継続時間は0.50秒で。

この場合は図形を左側に動かすので、Y座標は変更せずに500ptのままにします。X座標のみを動かして、左右の図形のバランスのいい位置を探ってください。ここでは【X 1750pt:Y 500pt】としました。

さらに、右下の「ビルドの順番」というボタンをクリックして小さなウインドウを出します。そのウインドウの中に「開始」「遅れ」という項目がありますが、

  • 開始 —— トランジションの後
  • 遅れ —— 0.50秒

このように設定すると、2枚目のスライドに進めたときに自動でアニメーションが実行されます。移動の開始を0.5秒遅らせるくらいが自然かなと思いますが、お好みで調節してください。


完成形がこんな感じです。


ポップアップ

スライド本編に書くほどの内容ではないけれど、補足として示しておきたい情報があるときに使います。クリックするとポップアップを表示し、もう一度クリックすると消えるようなアニメーションを作ります。


「ポップアップ」をつくる

こちらが本編のスライド。


その上に、白または黒で、スライド全体を覆うような四角形を配置します(ここではわかりやすいように青にしています)。

不透明度は80%くらいにしてください。下の本編が透けて見えないとポップアップ感がないし、逆に薄すぎると本編の文字がノイズになります。


さらにその上にポップアップさせたいものを配置します。

  • 角丸四角形に大きめのドロップシャドウをつけたもの —— ここではオレンジ色の図形
  • 文字、イラスト、写真など —— ここでは「ポップアップ」という文字

これらをグループ化してください。そうしないと、まとめてアニメーションを適用することができません。

角丸四角形にドロップシャドウをつける理由は先ほどと同じで、「層の重なりは影で表現する」というメソッドから。

【マテリアルデザイン】重なり順の考え方とコンポーネントの高度早見表
サルワカ | サルでも分かる図解説明マガジン サルワカ | サルでも分かる図解説明マガジン

→ 【マテリアルデザイン】重なり順の考え方とコンポーネントの高度早見表


このように配置すると、「本編スライド」「半透明な四角形」「ポップアップさせるグループ」という3層構造になります。


ここからはアニメーションを追加します。

半透明な四角形には「イン」タブから「ディゾルブ」というアニメーションを追加してください。継続時間は0.50秒にしましょう。


ポップアップさせるグループには「イン」タブから「フェードとスケール」というアニメーションを。こちらも継続時間を0.50秒にしてください。


ポップアップを消すのは「アウト」タブから設定します。インと同じように、半透明な四角形には「ディゾルブ」を0.50秒で。


ポップアップグループには「フェードとスケール」を0.50秒で。


ここで「ビルドの順番」をクリックすると、このような順番で並んでいるかと思います。

  1. 半透明な四角形 —— イン —— ディゾルブ
  2. ポップアップグループ —— イン —— フェードとスケール
  3. 半透明な四角形 —— アウト —— ディゾルブ
  4. ポップアップグループ —— アウト —— フェードとスケール

1番の「半透明な四角形 —— イン —— ディゾルブ」の設定はそのままOKです。つまり「クリック時に開始」で「遅れ0秒」。


2番の「ポップアップグループ —— イン —— フェードとスケール」には、

  • 開始 —— ビルド1と同時
  • 遅れ —— 0秒

このように設定してください。そうすると、1回のクリックで1番と2番が同時に実行されます。


アウトにも同じように設定します。

3番の「半透明な四角形 —— アウト —— ディゾルブ」の設定はそのままでOKで、「クリック時に開始」かつ「遅れ0秒」。


4番の「ポップアップグループ —— アウト —— フェードとスケール」には、

  • 開始 —— ビルド3と同時
  • 遅れ —— 0秒

このように設定します。


再生して以下のように表示されたら成功です。


最後に

このように、自然なアニメーションをスライドに取り入れることで、余計なノイズを減らして聴衆の理解を深めることができます。

ノイズを減らすことが目的なので、そこには心地よさが必要です。そのために僕は、デザインのプロが研究し尽くしている「iPhoneやAndroidのユーザーインターフェイス」をモデルにしました。

こんな感じなので、日々使っているスマートフォンのアニメーションを観察することで、それをプレゼンのスライドにも取り入れることができると思います。ぜひオリジナルのものも作ってみてください。

質問があればTwitterやLINE@から。お気軽にどうぞ!


関連記事はこちら

0
0
0
0
0
Previous Article
  • Academic

博士課程の4年間を振り返る|どのような流れで進むのかまとめました。

  • 2019-02-18
  • Yusuke Miura
View Post
Next Article
  • Academic
  • Column
  • Doctor Course

口頭発表の質疑応答でよくあるダメなパターンを克服しよう。

  • 2019-02-21
  • Yusuke Miura
View Post
You may also like:
View Post
  • Academic
  • Column
  • Lifestyle

時間を読んでノーストレスライフを送る

  • 2020-03-18
  • Yusuke Miura
View Post
  • Academic

薬学部の研究室を選ぶ前に伝えたいこと

  • 2019-09-25
  • Yusuke Miura
View Post
  • Blog
  • Column
  • Design

ブログの名刺をリニューアルした理由と、個人としての名刺を持つ意味について。

  • 2019-08-24
  • Yusuke Miura
View Post
  • Blog
  • Blog Design
  • Design

ブログのデザインをリニューアルしました

  • 2019-08-13
  • Yusuke Miura
View Post
  • Academic
  • My Research

超音波応答性DDSによる能動的な薬物送達について|MY RESEARCH 03

  • 2019-08-06
  • Yusuke Miura
View Post
  • Academic

博士課程に進学して失ったもの

  • 2019-07-30
  • Yusuke Miura
View Post
  • Academic
  • Opinion

「薬学部は忙しい」に反論したい。

  • 2019-07-25
  • Yusuke Miura
View Post
  • Academic
  • Column

6年制薬学部を卒業して博士課程に進学する、という戦略。

  • 2019-07-20
  • Yusuke Miura
Apple Music
Follow Me!
Twitter
YouTube
Pinterest
about
Yusuke Miura, PhD
薬学部6年制課程を卒業後、そのまま博士課程に進学。2019年3月に「博士(薬学)」の学位を取得しました。Macとカメラとクルマを愛する1988年生まれのミレニアル世代です。僕自身はとても飽きっぽい性格なので、自分にひとつの軸を通したくてこのサイトを運営しています。
MORE INFO
Shuffle Posts!
  • 1日1食のススメ|自分に必要なエネルギーから逆算して、適度な量の食事を。
    • 2019-04-08
  • 購入から3週間、iPhone 11 Proで撮った写真たち。
    • 2019-10-13
  • macOS High Sierraでは、Time Machineサーバーの機能がOS標準機能として組み込まれました。設定方法を解説します。
    • 2017-11-11
  • 第102回薬剤師国家試験を受験する皆さん! 誘惑の多い年末年始の過ごし方が合否を左右することになりますよ!
    • 2016-12-29
  • 調子の悪いiMacの代替としてMacBook Pro 2016を買ったものの、やっぱり新しいiMacを欲している自分がいる。
    • 2017-08-14
  • オリジナルTシャツを簡単に作れる「Oh Yeah! Design & Buy」でTシャツを作ってみたよ。[PR]
    • 2017-02-26
  • ある休日、福岡にて。
    • 2018-09-24
  • フィルムカメラ入門|準備編|モルトを貼り替える。
    • 2019-05-18
  • 週刊すたのじん #003|引っ越す準備を着々と。
    • 2019-01-27
  • ゴールデンウィーク後半に長崎から東京に車で向かうと22時間かかった話
    • 2019-05-05
Follow Me!
Twitter
YouTube
Pinterest
about
Yusuke Miura, PhD
薬学部6年制課程を卒業後、そのまま博士課程に進学。2019年3月に「博士(薬学)」の学位を取得しました。Macとカメラとクルマを愛する1988年生まれのミレニアル世代です。僕自身はとても飽きっぽい性格なので、自分にひとつの軸を通したくてこのサイトを運営しています。
MORE INFO
Tweets by info_starnote
Categories
  • Academic (49)
    • My Research (3)
  • Android (3)
    • dtab (3)
  • App (10)
    • iOS App (3)
    • Mac App (6)
    • Web App (1)
  • Apple (71)
    • Apple Music (3)
    • iPad (18)
    • iPhone (25)
    • Mac (31)
  • Blog (82)
    • Adsense / Affiliate (1)
    • Blog Design (4)
    • Weekly / Monthly (58)
  • Books (4)
  • Case (9)
    • iPad Case (2)
    • iPhone Case (6)
    • Mac Case (1)
  • Column (92)
    • Blog Writing (26)
    • Career (5)
    • Doctor Course (15)
  • Design (12)
  • Drug Development (1)
  • Essay (20)
  • Gadget (91)
    • iPad Gadget (5)
    • Mac Gadget (2)
    • TV Gadget (1)
  • Goods (56)
    • Goods for Gadgets (4)
    • IKEA (8)
    • MUJI (5)
    • Stationery (5)
  • House (36)
  • Lifestyle (111)
    • Car (41)
  • Movie / Drama (2)
    • Foreign Drama (2)
  • Music (24)
    • Album (3)
    • Headphone (12)
    • Live (1)
    • Music Note (3)
    • Speaker (3)
  • Net (4)
    • Mobile Router (2)
    • WiMAX (1)
  • Opinion (11)
  • Photograph (62)
    • Camera (20)
    • Eyefi (4)
    • FlashAir (1)
    • Photo Management (4)
  • Qualification (8)
    • Pharmacist (8)
  • Skill-Up (1)
  • Sony (6)
    • Action Cam (3)
    • Speaker (1)
    • Xperia (1)
  • Travel (119)
    • America (12)
    • Café (14)
    • Drive! on cube (13)
    • Fukuoka (2)
    • Kamakura (8)
    • Kobe (2)
    • Kumamoto (2)
    • Kyoto (6)
    • Nagasaki (23)
    • Nagoya (6)
    • Oita (2)
    • Saga (4)
    • Sakura Week (5)
    • Taiwan (10)
    • Tokyo (2)
  • Vlog (8)
  • Web Services (4)
    • Evernote (1)
Series
2018年まとめ 2019年まとめ 2020年まとめ BATTABI CX-5 Featured FUJINON XF18-55mmF2.8-4 R LM OIS FUJINON XF23mmF2 R WR iPhone 12 Pro Max My Research PRESSo Recommendation SIGMA 24-70mm F2.8 DG DN Art Sony A7III X-T200 ゆるゆる名古屋旅 わたしたちと鎌倉 アメリカと薬学 年末まとめ 週刊すたのじん 週末台湾 長崎ランタンフェスティバル2019
Latest Posts
  • MHLのポーチにガジェットを詰めて、そのまま持ち歩いても、バックパックに入れても
    • 2021-01-18
  • SIGMA 24-70mm F2.8 DG DN Art|大晦日の鹿島神宮
    • 2021-01-12
  • 普段使いのカメラは、もうiPhoneで十分かもしれない
    • 2021-01-11
  • 期待を込めたMacBook Airの、実際のところ(2020年M1モデル)
    • 2021-01-08
  • EarFun Air|高コスパな完全ワイヤレスイヤホンをレビュー [PR]
    • 2021-01-03
  • 2021年も、気負わずマイペースでゆるりと進みたい
    • 2021-01-01
  • 2020年の「旅」ベスト|車での旅ばかりの年でした
    • 2020-12-31
starnote*
© 2015-2021 Yusuke Miura All rights reserved.

Input your search keywords and press Enter.