MacのKeynoteでプレゼンする際に気をつけていること

先日の WordCamp KOBE では、Mac の「Keynote」というプレゼンテーションソフトを使ってプレゼンしたのですが、その際「なつきさんは iPhone をタップしながらプレゼンしてる?」など気になるツイートがあったため、どうやってプレゼンしていたかここで回答させていただきます。

Keynote は、Apple 社製のプレゼンテーションソフトで、Steve Jobs 氏が Mac や iPhone などの新製品の発表の際に使用していることでも有名です。
Mac 版と iPad 版がありますが、ここでは Mac 版について書いています。
どちらも、App Store でダウンロード版を購入 するか、Amazon などで購入できる iWork パッケージ からインストールすることができます。

iWork '09

PowerPoint との違い

プレゼンテーションソフトといえば Microsoft の PowerPoint が有名で Mac 版もありますが、個人的には Keynote の方がシンプルで、センスの良いプレゼンを作りやすいように感じます。

テンプレート

Keynoteサンプル: お茶を愉しむ

Keynoteサンプル:  きのこ vs たけのこ

Keynote には、豊富な美しいテンプレートが多数収録されています。
フォントサイズも適度に大きく、スクリーンから離れた方からも見やすいようになっています。

エフェクト

Keynoteエフェクト: Coming Soon

Keynoteエフェクト: Coming Soon

Keynote には、豊富な美しいエフェクトが多数収録されています。
あまり使い過ぎると見づらくなったり、エフェクトに気を取られて話に集中できなくなりそうですが、ここぞという所で使うと良いかもしれません。

発表者ディスプレイ

発表者ディスプレイ

ディスプレイをミラーリングしていない場合(プロジェクタと手元のPCで別々のものを映している場合)であれば、手元のPCには「発表者ディスプレイ」という発表者用に「次のスライド」や「経過時間」「現在時刻」「ノート(カンペ)」などを映すことができます。

標準では、「現在のスライド」と「次のスライド」が大きく、ノートの欄が5行分くらいしかありませんが、配置は自由に変えることができるので、私は↑の画像のようにしています。

※発表者ディスプレイと同じような機能は PowerPoint にもあり、設定でオンにすることもできます。
 個人的には Keynote の発表者ディスプレイの方が見やすいと感じています。

iPhone による遠隔操作やノートのチェック

iPhone、Mac、Keynote はどれも Apple の製品なので、どれもシームレスにつながります。
例えば、Keynote がインストールされていない Mac でも QuickLook という機能で Keynote ファイルの内容を見れたりとか。

iPhone には Apple 純正の Remote というアプリがあり、これを使うと Keynote を遠隔操作したり、ノート(カンペ)を見たりできます。

iPhone Remoteアプリ

iPhone Remote アプリ 横画面

私は、WordCamp KOBE のプレゼンの時は縦画面にして、右から左に画面をスワイプすることで次のスライドに移動したり、ノートを見たりしていました。

※縦画面と横画面は iPhone の角度によって自動で変わるのではなく、設定で切り替える方式ですのでご注意ください。

Remote を使用するには Mac と iPhone が同じ無線 LAN ネットワークに接続されている必要がありますが、会場には無線 LAN 設備がありませんでした。
その場合、Mac を直接操作したり Mac の「発表者ディスプレイ」に書かれたノートを読み上げても良いのですが、発表者用のテーブルが低く、少しかがむ必要があったため、なんとかして iPhone で操作できないかと考えました。

そこで、急遽 WiMAX モバイル端末を使って無線 LAN ネットワークを立てることにしました。

Remote で Keynote を遠隔操作するには、とにかく「無線 LAN ネットワークに接続」されていればOKで、その無線 LAN ネットワークがインターネットに接続されている必要はありません。
会場は WiMAX がほぼ圏外になっていましたが、このように WiMAX 端末をルータにすることで iPhone から Keynote を安定して操作することができました。

※プレゼン直前にスタッフ控え室に走っていたのは WiMAX 端末を取りに戻っていたためです…ご迷惑をおかけしました。

追記

WiMAX 端末などがなくても、Mac 側でアドホックモードを設定すれば iPhone から Remote アプリを使ってKeynote を操作できるそうです。

Mac OS XとiPhoneのアドホック接続

Microsoft のプレゼンと Apple のプレゼンの違い

PowerPoint を使った一般的なプレゼンと Keynote によるプレゼンの違いを説明するには、実際に Microsoft の新製品や新サービスのプレゼンと Apple の WWDC のプレゼンを見比べるのが非常に分かりやすいと思います。

Bill Gates氏のプレゼン

Apple WWDC 2010 Keynote

違いがお分かりでしょうか…
おそらく、どちらが Microsoft のプレゼンでどちらが Apple のプレゼンだというキャプションは不要だと思います。

これらのプレゼンを見比べると、すぐに気づくことがいくつかあるはずです。

文字の量

↑の2つのスライドを見て、真っ先に気づく違いは「文字の量」だと思います。
Bill Gates 氏 は「Silverlight はさまざまな OS やブラウザをサポートしている」ということを伝えたくて1つのスライドに色々なロゴや文字をぎっしり詰め込んだのだと思いますが、果たしてこれを全て読んだり、メモを取れる方は会場にいらっしゃるのでしょうか…
(写真でも、細かい文字は潰れています。)

対して、Jobs 氏のスライドは極力不要な文字を削ぎ落していることが分かります。
細かい情報はスライドに書くのではなく、口頭で伝えます。

ロゴの扱い

Microsoft presentation

Apple WWDC 2010 Keynote

Steve Jobs

ここでお話したいことは「ロゴの数」ではなく「ロゴの背景」です。
Microsoft のスライドでは、ロゴの背景は白いままで、よく見ると変な位置で切り抜かれているロゴもあります。
対して、Apple のスライドでは、背景は綺麗に透過しています。

一般企業の方が作られた PowerPoint プレゼンテーションでは、ロゴを背景白のまま貼りつけるのはもちろん、なぜか横にビローンと伸ばしたスライドも散見されました。

こういったスライドに出てくるロゴは、大抵は大切な取引先企業のロゴのはずです。
それを適当に切り抜いたり、縦横比を変えても良いのでしょうか…
(大抵の大企業には「ロゴの利用ガイドライン」や「ロゴの表示規定」というものがあり、適当な位置で切り抜いたり縦横比を変えたりすることは禁止されているはずです。)

Webコーディングスクール 体験レッスン受付中

私が Keynote でプレゼンする際に気をつけていること

最初にロゴの利用ガイドラインを確認してからテーマを選ぶ

スライドで他社のロゴを一切使用しない場合は適当に見やすいテーマを選んで良いと思いますが、もしロゴを使用しなければならないばあいは最初にロゴの利用ガイドラインを確認します。

例えば、「Microsoft ロゴ ガイドライン」などのキーワードでググると マイクロソフトコーポレートロゴ使用ガイドライン というページを見つけることができます。
そこにはこう書かれています。

正しくロゴを配置するため、ロゴとそれ以外の部分との最低限の間隔を確保しなければなりません。最低でも本ロゴの「M」の高さと同じ長さの余白を、ロゴの全側面にとってください。

なるほど、ロゴの周りは 1em 分のスペースを空けなければいけないそうです。
つまり、以下のような例はNGとなります。

Example

白抜きのロゴが用意できて、そのロゴが黒背景での使用が認めれられていれば白抜きのロゴを使用すれば良いのですが、そうは行かない場合はスライドを白背景のものに変更したほうが良いでしょう。

しかし、黒背景の持ち味も活かしたい…という場合、以下のように背景の上に白いボックスを作るという方法もあります。
この上にロゴや黒文字を配置すれば、ロゴ規定にも触れず、読みやすく、黒背景の持ち味も生かせるはずです。

Example

ちなみに私は、テーマは白や黒で少しだけグラデーションの付いたシンプルなものを選ぶことが多いのですが、それはロゴの扱いやすさの他に、背景よりもプレゼンの内容に集中していただきたいからです。

文字は大きめ、1スライド5行以下

Keynote のテンプレートは、初期状態で適度なフォントサイズ・文字量になるように計算されています。
通常のフォントサイズで行間を調整しない場合、6行が限界なはずです。
私の場合は多少余裕を持って、タイトル+5行に収まるように調整しています。

Keynoteスライド: タイトル+本文5行

下部20%には極力大切なことは書かない

例えば、以下のようなスライドがあったとします。
自分のPCで見るときは大丈夫でも…↓

結論: A案でいきましょう!

実際の会場ではこうなっているかもしれません。↓

結論: A案でいきましょう!

文字を少し濃くし、コントラストを強くする

Keynote のテンプレート見た目の美しさを優先しているためか、文字の色が薄いものが多いように感じます。
WWDC(Apple の新製品発表会)のように、真っ暗な部屋で高価なプロジェクタを使ってプレゼンする場合はそれで問題ないと思いますが、いつもそういう場所でプレゼンできるとは限りません。

もしかしたら部屋が意外と明るかったり、プロジェクタのコントラストが弱かったり…
また、視力の弱い方もいらっしゃるかもしれません。

なので、私は文字の色は少し濃いめにしています。
やり方は、マスタースライド内のチェックが入っているものをクリックし、

マスタースライド内のチェックが入っているものをクリック

少し濃いめの色を選びます。

少し濃いめの色を選ぶ

見出しの文字詰めに気を配る

「 ま た 文 字 詰 め か 」とつっこまれそうですが一応。
例えば、CSS Nite 主催者の鷹野さんのプレゼン資料は文字詰めがとても美しいと思いますが、なんとイラレ(Adobe Illustrator)で文字詰めしたものを Keynote に貼りつけているらしいです…

最も美しく作ろうと思うとそれが良いと思います…が、イラレで編集して貼り付ける方式だと制作に時間がかかることや、急な修正が大変(プレゼン直前に作り直すことがよくある)なので、私は Keynote 上で文字詰めしています。

実は、Keynote には標準で文字間調整機能がついています。
パレットの「テキスト>間隔>文字のスライダー」をドラッグして調整することもできますが、それだと時間がかかるのと微調整しづらいので、私はショートカットキーを登録しています。

Macには、標準で「個々のアプリケーションごとにショートカットキーを割り当てる機能」がついています。
「システム環境設定>キーボード>キーボードショートカット>アプリケーション>+>アプリケーション:」でKeynote を選択し、「メニュータイトル」に「ゆるく」と入力して「キーボードショートカット」のところで option キーと → キーを入力します。
同様に、「きつく」と入力し option キーと ← キーを割り当てます。
ついでに、「スライドショーをリハーサル」に command + Shift + P を割り当てておくと練習の際便利です。

キーボードショートカットの割り当て

そして、詰めたい文字を選択し、option + ← キーを連打することで文字詰めできます。

まあ、普通はここまでやらなくてもいい気がしますが、WordCamp のプレゼンでは文字詰めの話もしていたので一応…

デモンストレーションは、予め録画したものを貼りつけておく

例えば、WebアプリケーションやECサイトの遷移などを見せたい場合、実際にブラウザで挙動を見せるのが1番ですが、プレゼン会場で安定したネット回線に接続できるとは限りません。

また、プレゼン時間が限られている場合、実際にブラウザを操作していると思ったより時間が流れてしまい、最後までプレゼンできないかもしれません。

また、これは最も大切な事ですが、自分のPCでプレゼンできるとは限りません。
(プロジェクタにうまく接続できなかったり、接続しても認識されなかったりするかもしれません。)

なので、私は予めブラウザで動かしているところを動画でキャプチャし、Keynote に貼りつけておきます。

Mac には、標準で動画でキャプチャできるアプリケーションが付属しています。
LaunchPad または アプリケーションフォルダ から「QuickTime Player」を起動し、メニューの「ファイル>新規画面収録」で録画ボタンを押すだけです。
画面の一部だけをキャプチャすることもできるので、ブラウザ部分だけをキャプチャすることも簡単にできます。

制限時間より少し早めに終わるように内容を調整する

先日の WordCamp KOBE では1人あたりの持ち時間は20分でしたので、黙読で練習するときは15分に収まるようスライドの内容を調整します。
これは人によると思いますが、私は会場では聴衆の様子を確認したりアドリブが入ったりで大抵黙読で練習している時より少し長くなってしまうので…

詳しい資料を先に配布しない

プレゼン前に紙の資料などを配布してしまうと、多くの方はどうしてもそちらを読んでしまい、プレゼンに集中できなくなってしまうと思います。
なので、私はプレゼン前に資料を配布することはまずしません。

Web系の勉強会だと「詳しい資料はネットで公開します」という形でフォローしますが、もしネットに疎い方相手にお話するのであれば、紙の資料を配布するのはプレゼン終わって部屋の電気つけてからが良いと思います。

バックアップを準備する

先日の WordCamp では Mac をつないでもうまく映らないプロジェクタや、逆に Windows PC をつないでもうまく映らず、Mac でしかプレゼンできない場面がありました。

実は、私は十分なバックアップを準備しておらず、他の方がうまくプロジェクタに接続できていないのを見てかなり冷や汗をかきました…

今度からは、もし自分の Mac でプレゼンできず、ネットにも繋げなかった時のことを考えて Keynote で制作したプレゼン資料は PDF や PNG 画像等の形式で書きだしておき、Webにアップロードすることはもちろん USB メモリにも入れ、万一の際は他の方の Windows PC でもプレゼンできるようにしておこうと思いました。

さらに大切なプレゼンであれば、小型のプロジェクタ を持っていくという手もあるかもしれません。

まとめ: ワクワクするプレゼンをしよう

前述した Microsoft のプレゼンと Apple のプレゼンの1番の違いは「ワクワクするかどうか」ではないかと思います。

例えば、初代 iPod nano が発表された日、SONY も新しい Walkman を発表しました。
しかし、そのプレゼンは極めて対照的だったことがとても印象に残っています。

SONY のプレゼンでは、綺麗なお姉さん(おそらく Walkman には何の思い入れもない)が新しい Walkman を持っているところを新聞や雑誌の記者たちがカメラで撮影したあと、重役っぽい方が下を向いて、紙の資料を見ながらボソボソと何か言っているシーンがニュース番組で放送されていました。

対して、Apple のプレゼンでは Jobs 氏が壇上に上がり「今日は大胆な発表をしよう。ジーンズのポケットのさらに内側にあるこの小さなポケットは一体何に使うのか今まで分からなかったが、このポケットはこれを入れるためにあったんだ。」と言って、初代 iPod nano を取り出したシーン は世界中のメディアで報道されました。

どちらの製品も、今までの製品にはない魅力があったはずですし、製品のサイズにも理由があったはずです。
それを最も良く見せるにはどうすれば良いか?
少なくとも、紙の資料をボソボソ読むよりもよりよい方法があったはずです。

「多くのプレゼンは、スライドに細かい文字がたくさん書かれていて、講演者がスライドに書かれているものを読み上げるだけになっている…」という話を聞くことがありますが、それはプレゼンの中心が「資料」になっているのではないでしょうか。

資料を見せたり読み上げるだけなら、今はわざわざ同じ部屋に集まる必要はありません。
Webページやグループウェアでの情報共有で十分なはずです。

では、「わざわざ同じ部屋に(場合によっては遠方から時間をかけてまで)集まるのはなぜか?」と考えると、「人(講演者)」のことを知りたいという気持ちや、みんなで集まって新しい情報を共有できる「ワクワク感」を感じたいからではないかと思います。

ということは、プレゼンの主役は「資料」ではなく「人」や「ワクワク感」であるべきではないかと思います。

WordCamp KOBE でのユニークなプレゼン

WordCamp KOBE では、魅力あるプレゼンがいくつもありました。
そのうち、いくつか紹介させていただきたいと思います。

WordBench 鹿児島のLT(西村州平さん)

会場では「元気ですかー!!」の掛け声でマイクを潰したことで話題になっていましたが、プレゼン資料もその勢いを伝える素敵なものになっています。

ザラッとしたアナログテイストの背景の上に極太のゴシック体を斜めに配置したり、文字間をくっつけたりと、下手すると可読性が下がってしまう恐れがある組み方ですが、プレゼンの勢いに合っていて、かつ可読性が下がらないようスライド毎に微調整されているのが凄いです…私もこんなプレゼンできるようになりたいです。

WordPress × スマートフォンサイト(瀬口理恵さん)

こちらも Keynote によるプレゼンテーションですが、背景は標準の Keynote テーマではなく素材を Photoshop で 1024 x 768px に縮小して Keynote に貼りつけているのだそうです。
女性向けにデザインのお話などする際は、こういう背景のほうが魅力が伝わるかもしれませんね。

ハイパフォーマンス WordPress サイト入門(をかもとさん)

こちらは Keynote ではなく、最近 Web技術系の勉強会で増えてきている HTML5 + JavaScript によるプレゼンテーションです。
キーボードの → キーで次のスライドに進みます。

ブラウザがあればどこからでも、Windows でも Mac でも見れることや、サンプルソースをコピーしやすいなど色々と便利ですね。

補足

Keynote に最初から入っているテンプレートはきちんと日本語化されておらず、そのまま使うとフォントがおかしくなる場合があります。
詳しくは下記ページをご覧下さい。

Keynoteでデフォルトテンプレートを使うときには、マスターで日本語フォントを指定すること – DTP Transit

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。
Index