SakuraWi - BLog

WEBエンジニア。聴いたお話をまとめておく倉庫的な。スタックストックスタック!

プレゼン構成について-あいちゃれ2016より


ども、櫻井広大です。
f:id:Saku-Saku:20161128000333j:plain:w300

f:id:Saku-Saku:20161127222748j:plain

先日あいちゃれ2016年に参加しまして、3つの賞をいただくことができました!

www.ict-challenger.jp
ファイナリストとして選出され、またステージ発表にも選ばれました。

結果としては、

  • Yahoo!
  • みんなのウェディング賞
  • プレゼン賞

をいただくことができました!ありがとうございました!
作ったプロダクトが評価されるほど嬉しいことはないです。


さて、今回もアイデア部分やデザイン部分、プレゼン部分を担当して作成してまして、
プレゼンも賞をいただけた、ということですね
どう構成したか、どういう効果を狙ったか、なぜそのデザインにしたのかを記事にして残しておこうと思います。
参考になる部分があれば、ぜひマネしてプレゼンを作ってみてください!
結果が出たりしたらFacebookからでも報告してもらえると泣いて喜びます。



プレゼンを考える

プレゼンを考えるにあたって、大事なことは"来てくれた人にどうなってほしいか"です。
今回のあいちゃれでいうと、作ったプロダクトに対して「いいな、使いたいな、ほしい!」と思ってもらえるといいなと思って作っています。
どんなプロダクトを作ったかを理解してもらうことは当然必要ですね。
これがプレゼン全体を通して伝えたいことになります。
でかい紙の上にメモっておきましょう。「伝えたいこと:」
メモしておくと、プレゼンを考えるときに詰まった際の助け舟になっちゃいます。

伝えるために必要な内容と流れ

次に上記の一番伝えたいこと、どうなってほしいかについて何があれば達成できるかを考えていきます。必要な要素ですね。
一度要素を書き出してみてもいいですが、今回はプレゼンの流れを考えました。
どんな流れで説明していけば、伝わるのか?理解しやすいのか?
プレゼンの大きな軸ですね。

ここで自分がいつも取る手法を書いておきます、名づけて"2人で考えてガッチャンコ大作戦"
チームのメンバーとバラバラに考えて、良い部分を合わせて最強のプレゼン流れを作るという作戦です。

あいちゃれ2016時では、メンバーの鶴田くんと僕でバラバラに考えて発表しあって合わせました。
@ちなみにこの大作戦を考案したきっかけはPakuPakuTodoを作った時です

恥ずかしいですが、実際のメモがこちらです。

僕のメモ
f:id:Saku-Saku:20161127190140j:plain

鶴田くんのメモ
f:id:Saku-Saku:20161127190202j:plain
うん、わかりやすい。笑 わかりやすい人がチームにいると強い。


ここでも大事なポイントをひとつ。
アナログで書こう!という点ですね。
パソコン上で考えない方がいいと思います。
理由は、紙やホワイトボードの""の中で全体が見えるようにして構成することで全体像を把握しながら考えられるから、です。

要素を抽出してみると流れは2人ともほぼ同じでこんな感じですね。

  1. 導入
  2. 問題定義(課題)
  3. 解決方法として、こうやってとって
  4. どう解決しているか
  5. 解決している点、いいとこは何か
  6. デモ
  7. 今後の展開

正直上記の流れは黄金パターンではあると思います。笑

今回の場合はどう解決しているのか、解決している点、デモの順番をどうするかについては軽く議論しました。

プレゼンのスライドの構成

ということで流れができました。
さ、実物としてプレゼンを作ろうということですが、ここでもまだkeynoteパワポは使いません。
プレゼンの流れだけで作り始めちゃだめ!です。

流れを基にどんなスライドを作っていくかを考えます。
よく言われているコツは、

  1. スライド1枚に使う時間は1分ほど
  2. 一枚一枚で言いたいメッセージは何か意識する

は有名ですよね。脳みそに置いておきましょう。

実際に書いたメモはこれ。
f:id:Saku-Saku:20161127191522j:plain

こんな感じになるかなーと。
考えたプレゼンの流れを満たすためにどんなスライドが効果的かを考えつつ構成していきます。
この写真をここでこうだなー、このフレーズはほしい!などなど。
プレゼン中に言いたい言葉もメモ。


僕はスライド構成をアナログでペンで描くようにしています、これは絶対です。
スライドは特に全体を把握しておくことが大事なので紙1枚にまとめてかきます。
どの部分がどれくらいのスライド枚数を割いているかも一目瞭然ですね。

ちなみに、この本でもペンでかけ!!って言っていた気がします。


スライド構成を作ったら、脳みその中で軽くプレゼンしながら流れに変な部分がないかチェックします。

スライド作成

ここまできてスライドを作り始めます。
やっぱ"Keynote"がおすすめですね。幅合わせが楽だったりオブジェクトの移動が超絶楽です!

スライドを作るにあたってデザインをどうしたらいいかわからない人はこの本がおすすめです。
文字と画像をどう配置したら綺麗にみえるかのエッセンスはこの本に詰まっていますよ。

この段階ではデザイン面では完成しきらずに、スライド構成や流れが最低限認識できるもので作成しました。
今回は、結構文字が多めになってしまってました。
このあたりでもしっかり画像を使ったり完成度が高いとなお、良いと思います。

練習

スライドが完成しました。笑

ここから粘り強く何度繰り返せるかが重要なポイントになってきます。
スライドが完成するまでをできるだけ早い状態で終わらせてこの段階にもってきましょう。
本番2日前にこの状態であるとそれなりにいい感じですね。
数時間前に完成となると、経験上厳しいです。
1dayハッカソンとかのプレゼンはめっちゃ難しいのはギリギリの完成になってブラッシュアップの時間があまり取れないからですね。


で、練習なんですが

  • 友達を前に発表してみること
  • 動画を撮ること

をします。

超オススメなのが動画を撮ってみることです。
動画を撮ることによるメリットは

  1. 自分の話し方がわかる(大体の場合キモい)
  2. "えー"、"あー"などの何度も繰り返して言ってしまう余計な言葉を認識できる
  3. 立ち振る舞い、マイクの持ちかたの癖、体の揺れの認識
  4. おもしろいかどうか
  5. スライドがわかりやすいか

などなどいろんな内容が確認できます。
自分のプレゼンを一度も客観視したことがない人は超絶おすすめなので試してみてください。

あいちゃれ2016では友達2人を前に一度リハーサルを行いました。
発表後に自分が感じた違和感あるポイントを紙に書き出し、その後に友達にダメ出しをしてもらいます。
あいちゃれ2016で聞いてくれた2人、ありがとう!いつも的確な意見をくれる人たちです。遠慮なくバンバンがありがたい!

かなり変更点が出てきました。
メモしたのはこんな感じ。スライド番号やページ数もかいてますねー
f:id:Saku-Saku:20161127193723j:plain

実際に出た例をまとめると

  • 課題をプレゼンにどう盛り込むか?抽象的なままの流れでいくか具体的なものにまで落とし込むか?
  • 前半の導入いる?
  • 後半文字ばっかりだね
  • テンポが悪い

などなど。
自分でも発表していていまいちだ・・・と感じていたので、どう構成しなおすかを話し合い。

今回でてきた大きな修正点はこちら。

  • テンポが悪いため、聞いている人が飽きない作りにする
  • 抽象的な課題説明からどのような実装に入ったかの流れで、実装にこだわったポイントの説明の中に具体的な課題を盛り込む

再構成

はい、なんとまだもう一度作り直します。
一度でいいものができるなんてことはありません。

ここで一度作っていたスライドと、反省点や修正点を基に再度構成し直します。
今回はkeynote上でスライドを動かしたりして修正していきました。

ここで今回は前日の0時だったので、流れとスライド構成は完成、ということでデザインをゴリゴリすることに。
結局ここから5時間かけて細かい修正をおこなって完成です。

スライド

では実際のスライドを載せます。
それと一緒に解説ものせていきますね!
「」の中身は発表の言葉的な感じで。


f:id:Saku-Saku:20161127203539j:plain
タイトルでは一目でどんなアプリかを刷り込みたいということでアプリを手に持って使っているような画像にしています。
これでカメラのアプリだということを知ってほしいと思ってました。


f:id:Saku-Saku:20161127203540j:plain
しおみさんや谷口教授に突っ込まれていたスライドですね。
自己紹介を省いて導入に注ぐことを決めていたのでこれにしています。

このスライドから、〇〇といえば〇〇という連想ゲーム的な流れでアプリへの課題まで一気に流れることを狙いました。
テンポよく進めることにフォーカスしていたという感じです。
テンポフォーカスをしていた理由としては発表時間が9分であるということが大きな理由で、アプリの発表で9分って結構長めなんですね。
なので最後まで飽きることなく聞かせる必要がある、と一度目の練習で指摘&感じていました。
ので、スタートダッシュから勢いをつけてそのテンポのまま聞かせ続ける狙いでこういった導入にしていました。
東京から開始したのは、わざわざ滋賀県に遠くから足を運んでもらった企業さんが多いのでありがとうございます、という気持ちを込めて。
あいちゃれならではの部分かなと。

中身は「東京から来てもらってありがとう、ニュースでは雪がふってるとのこと、雪と言えば・・・」

デザイン面では、文字を半分だけ写真にのっけることで一体感を出したつもりです。
乗せないとタイトルのような印象になって、認識が違うと思ったのです。
一枚の画像のような感覚としてスライドに使いたかったので。


f:id:Saku-Saku:20161127203541j:plain
「雪寒いっすよね、春待ち遠しいですよね、春といったら旅行とかいきますよね」

f:id:Saku-Saku:20161127203542j:plain
「旅行と言えば俺!!! なんとワタクシ2016年のなつ・・・」

前2枚と似たデザインにしたかったのですが、暗い画像だったために文字は中にいれちゃいました。

ここらへんはポンポンスライドをおくります。youtuber的な流れかも。

f:id:Saku-Saku:20161127203544j:plain
「NYへ!!!」

ここはタイトル的に文字を使ってます。
NYへ行ったことを知らせることと、自由の女神像の画像に注目してもらうために文字は上に配置。


f:id:Saku-Saku:20161127203545j:plain
〇〇はいいぞ。 を使いたかった。

f:id:Saku-Saku:20161127203546j:plain
ちょっとずつ問題へと入っていきます。
実体験を基にしているので、この前のNYの要素が効いてきているはずです。

「観光地とかで写真おねがいしますよねー海外とかでも!」

f:id:Saku-Saku:20201212020709p:plain

実際の写真を提示していきます。
今時点は「?」と思われてもセーフ。

彼女との写真ということで、リアリティが出るかな、と。

デザイン面では、写真上に文字を配置する際は薄くした長方形をとかを置くことで文字の視認性をあげることができます。
なんかおしゃれっぽくも見えて一石二鳥の手法でございまする。

「実際に撮ってもらったのはこれです」

f:id:Saku-Saku:20161127203548j:plain
問題へ入っていきますね、はい。
不満があるぞ、と。

f:id:Saku-Saku:20161127203553j:plain
f:id:Saku-Saku:20161127203554j:plain
f:id:Saku-Saku:20161127203555j:plain
きれてるじゃねーーーか!!っていう。

顔に近づくあたりはいらんかもですね。すいません。

「自分がこう感じた、けど、ほかの人どうなんだろう?」

f:id:Saku-Saku:20161127203556j:plain
「アンケートも撮りました!9割もの人が不満を!!!」

自分だけの問題から、一気に広めていく狙い。
みんなも問題として感じてますよ!という。
つまり、解決する意味ありますよ!っていう。

Twitterとしても数字があるとやはり説得力がでるかもしれませんね。
問題を解決する理由がありますよ、に数字は強いです。

また、赤色と灰色を使ったことで赤い部分を強調しています。
赤いことで不満感も演出できるかなということで赤です。

ここからいろんな人の経験に訴えていく狙いです。

恋人との例、友人との例、家族の例、など。

f:id:Saku-Saku:20161127203558j:plain
足切れの例、上が入っていない例として。

f:id:Saku-Saku:20161127203559j:plain
ウケ狙いですね、10年前の自分です。


f:id:Saku-Saku:20161127203600j:plain
思い出の写真が切れてるーーーていう。

f:id:Saku-Saku:20161127203601j:plain
あいちゃれ感を演出。笑


f:id:Saku-Saku:20161127203602j:plain
透明化して気持ちを書くデザイン。結構好きなスライドのデザインですね。
前のスライドからの繋ぐ方法として優秀!

この4枚ほどのスライドをまとめて、ようは"良い写真残したかったー"を。

f:id:Saku-Saku:20161127203603j:plain
「それを解決するためのアプリです!!!!」ドン!!!!!

f:id:Saku-Saku:20161127203604j:plain
「それが、こうやってとって!!だ!!!!」


f:id:Saku-Saku:20161127203605j:plain
どういうものかの説明に入ります。
解決策としてのアプリなのでどう解決したのかを。

f:id:Saku-Saku:20161127203606j:plain
まずは一枚撮りますよ、と。

このスライドは結構こだわってます。
手の位置や、手首がどれくらい入っている画像にするか、
文字は上からどれくらいの位置にいれるか、文字は必ず1列にする

など。
画面割合としては上3分の1で文字の場所、
下3分の2が画像、みたいな感じにしてます。

手の形も綺麗に取れるまで、何枚か撮りなおしています。笑



f:id:Saku-Saku:20161127203607j:plain
フィルター化しちゃいますよ、と。

f:id:Saku-Saku:20161127203608j:plain
重ねて撮ったらできてんじゃん!!!!!!
やったぜ!!!!



f:id:Saku-Saku:20161127231120j:plain
www.youtube.com

前半が"こうやってとって"がないとき。
後半があるときですね。

ここで使用シーンを動画として流すことで、どんな時に使えるかのイメージを具体的にわかってもらいます。
動画は結構講評でした。


えりを直します〜っていう流れも笑ってもらえてよかったです。

動画はできるだけ前を向くようにするとか、何しているかがわかりやすいようにするのはこころがけました。
できるだけ動作も大きめに?w



f:id:Saku-Saku:20161127231325j:plain
利用シーンがわかってもらえたところで、アプリのメリットをゴリゴリ推します。
流れを一気に持っていく感じ。

メリットを7つとして設定した理由は、人間は7つ以上のことは覚えにくい、という研究結果から。
つまり、7つ以上のメリットを提示すると覚えきれずに「めっちゃメリットあるんだ」となるはずなのです。
また、テンポ重視ということを忘れてはいけません。ここでもメリット7つをスライド枚数を増やして説明することで、テンポの良さを考えていました。

f:id:Saku-Saku:20161127231326j:plain
良い感じの写真で演出。

f:id:Saku-Saku:20161127231327j:plain
言語の壁を超えて使われるということはこだわったポイントなので説明を。
手にもっている画像を使って、お願いするときっぽくしたつもり。


f:id:Saku-Saku:20161127231328j:plain
写真を頼む側も、頼まれる側にもメリットがあるよ、という説明もしましたね。


f:id:Saku-Saku:20201212030257p:plain
結局言いたかったことの言い直しですね。
良い写真が残せることが、アプリのいいところだよ。っていう。
前半に言っていた内容を再度盛り込むことで、全体の統一感を生みつつ視聴者に刷り込みます。


f:id:Saku-Saku:20161127231330j:plain
一つ前にこういうアプリだ、ということを言っておいたので、もっと広げたメリットを最後の7番目に盛り込みました。

「みんなのスマホに良い写真が残れば、それって幸せな世界につながるよね。」

笑う要素として、スマホの写真を自撮りばっかりにしておいたのですが、気がつきましたか?笑


f:id:Saku-Saku:20161127231331j:plain
www.youtube.com

ここで使い方のデモムービーを。
実際に使う画面はこんな感じで使いますよ!
実機できちんと動作していますよ。という主張も。

デモムービーは使用する一連の流れは最低限に入れています。
起動画面から終了するまでの流れを見せることで使用想定シーンもからめています。

また、背景も使用想定シーンと一緒のものにすることで、さっきの映像でこういう操作が行われていたんだ、と理解しやすい工夫を凝らしてます。

プレゼンターが映っているのも僕として、あ、この人だ感を演出。


f:id:Saku-Saku:20161127231332j:plain
終わりに向かいます。

こだわりポイントの説明。
身近な問題から解決したかった、自分が使いたいアプリを作った。

このアプリがあれば撮るとき、お願いするときも誰かがハッピーになってくれるだろうし、
残った写真がまた、どこかで自分たちをハッピーにしてくれるだろう!


f:id:Saku-Saku:20161127231333j:plain
将来性もあることのアピール。
こういう案も考えていましたっていう。


f:id:Saku-Saku:20161127231334j:plain
理想形。
openCVの搭載についてはメンバーがねばっていてくれたんですが、厳しい部分もありました。


f:id:Saku-Saku:20161127231335j:plain
最後の画面。

最後の画面の印象はとっても大事だとどこかできいていたので、綺麗に見える画像で締めます。
質問タイムとかでこれが映り続けるので、最後のスライドは大切です。

綺麗な画像を使ったりすることで印象操作につながるとおもってます。笑
携帯の写真アプリであった、ということも画像からわかるかな?と。




プレゼンへの準備

今回のプレゼンにかけた時間は大体15時間くらいだと思います。
やっぱりプレゼンを考えるだけでも1日、2日はかかるものですね。
やればやるほど深みにハマる感はありますが。笑

デザインTips

  • 文字サイズ

スライド全体で55pxの文字サイズが多いです。
40px以上を使うことが多いです。
文字が大きいとですね、
文字数を必然的に削る必要がでてきて、より何を伝えたいか、必要な言葉はなにか?を意識できます。

  • 進行バー

ちなみに、各スライドで今どの位置にいるのか?というバーをつけていました。

f:id:Saku-Saku:20161127203606j:plain
下のバーです。
なんとこれが今プレゼンがどれくらいの位置にいるのかを示す指標になっています。

以前立命館大学まつもとゆきひろさんが公演をしていたときにこのような方法を使っていて、いいなと思ったためプレゼンする際には使っています。
数字ではなく、目でみてわかるデザインのためにスライドに自然に盛り込めますし、後半になっても焦る感覚は出てきません。
また、自分が見たときにもペースは大丈夫か、も見やすくてGOODですよ。

今回のバーデザインについては、「ポケモンGO」から真似させてもらいました。
いいな!と思うデザインはメモして残す、使う。
だってすごいデザイナーがデザインしてるはずですから、いいに決まってます!

起動中の画面の進行バーです。ゲンガーが写っているときのこれです。
f:id:Saku-Saku:20161127214510p:plain:w350


  • 文字が1列になるようにしているか

結構文字が変なところで改行されているプレゼンって多いと思うんですが、あれダサいきがするんですよ!読みにくいし!笑
なので、改行するポイントなどはしっかりみてます。

できるだけ1列になるように文字サイズを変えたりもしてます。
変に改行が入る場合は文字を変えることも検討して良いと思います。単語だけにしてしまう、など。
工夫を凝らして見やすいものにしましょう。

f:id:Saku-Saku:20161127203603j:plain
これとか3行すっぽりおさまるようにしました。
あと「を」の文字サイズを下げてます。
改行がはさまないため、かつ、緩急をつけるためです。
他のスライドでも、文字サイズを細かく変えて緩急意識スライドはあります。

  • マイクの持ち方

立ち姿やマイクの持ち方も大事。
目線も大事。

マイクは顎につける感じで、マイクの下あたりを持つとよいです。
これも教えていただいたTipsですね。

f:id:Saku-Saku:20161128003908j:plain
こんな感じね。

あいちゃれの講評

最後の閉会式でも「こうやってとって」のことについて取り上げていただいてうれしかったです。

リア充さをアピったため減点されたのではないか?笑」
という話を出してもらいました。

印象を残すことができていたかな、と嬉しいですね。

Twiiterから

など。ありがとうございます!

一緒に頑張る仲間

今回も学校に残ったりした際に一緒に頑張る友人がいたからこそ、僕もがんばって考えることができました。

コードを書いてくれたメンバー、構成を一緒に考えたメンバー、学校に残ってたときに一緒にご飯食べてくれたメンバー、プレゼンに意見をくれたメンバー、がんばれと言ってくれたメンバー。
仲間がいたからこそ今回も結果として残せたところはあります!!!
ありがとう!!!!


これからもよろしく!!!

プレゼンを楽しむ

プレゼンが怖い、嫌だと思っている人に向けて。


プレゼン力が自分はあるかはともかくとして、プレゼン力は大切です!
就活や発表会、誰かに主張するとき、お見合いなど。笑
伝えたい内容をよりよく伝える力は大事!

プレゼンが苦手だという人はまずは経験値をつみましょう!
慣れは確実に大切です。
とにかく参加してなれましょう!!


そしてプレゼンをするときは楽しむこと!
発表者が楽しそうにしてないと、聞いてる人は楽しくないです。

自分が楽しくプレゼンに臨むときは、仲の良い友達にがんばれ!とか、いいぞ!って言ってもらえると向き合いやすいので、そういう人たちを前日に会うのも良い方法ですよ。


シェアしてもらえるとうれしいです〜
ほな!さいなら〜〜

Special Thanks:西山大河、丸山真治



2年前のプレゼン作成にちょっと触れてる記事
http://saku.app-base.net/conversation.html