FRONTEND CONFERENCE 2018で登壇しました（プレゼンテーション内容の作成プロセス）

　先日、2018/11/24(土)にグランフロント大阪にて開催されました、FRONTEND CONFERENCE 2018にて、登壇の機会をいただきました。

　30分という時間でのプレゼンテーションだったのですが、これくらいの長めの時間でプレゼンテーションする機会がとても久しぶりだったので、資料・講演内容準備にあたってのプロセスを記録したいと思います。

概要についてまず確認

　まず、イベントの概要について、確認をしました。

* このイベントに来場する対象者
* 過去に同じイベントが開催されているか
* イベントの規模

　このイベントは、フロントエンドエンジニア、デザイナーがメインで、今年で3回目となるイベント。その中でもこのセッションは、フロントエンドエンジニアを対象としていました。
　規模については、開催場所がグランフロントのTower-CのRoom02にて開催されるということで、規模はMAXで100人弱くらいかなと想定。

講演の目的の設定

　次に、登壇側と聴講側のそれぞれに、このセッションに対する目的を設定しました。

　今回、このイベントには、所属している会社がスポンサーとして協賛した流れでセッションもさせていただく事になりました。
そのため、会社のことを知ってもらうということが登壇側の目的としてあります。

　ただ、聴講者は就職説明会でもないので、会社のアピールを聞きたいわけではありません。
　そこで、社内のフロントエンド開発のプロセスであれば興味があるのではないかと考え、こちらとしても反応が見れるため、開発プロセスについてアウトプットするということを目的にしました。

アウトラインの作成

　だいたいの方向性が決まってきたところで伝えたいことをざっと書いていきました。今回はマークダウン形式で記載しました。

・自己紹介
・会社紹介
・スクラムでのフロントエンド開発
　・スクラム
　・プロジェクトの体制
　・開発対象
　・プロセス(ツール)
　・プロセス(進め方)
　・スクラム要素
　・失敗談
・フロントエンドエンジニア の定義や人物像
　・社内での定義
　・人物像

スライドの作成

　今回は、初めて keynote を使いました。
　背景は、目が疲れないようにと思って黒にしました。
文字は完全な白も使いつつ、背景が黒だとコントラストが強くなってしまうので、そこまで目立たなくていいところは若干グレー寄りに色を変えてたりします。

　資料をアップすることを考えていたので、全部大きいフォントにするつもりはありませんでしたが、1スライドにあまり複数のトピックを載せないようにするのは心がけました。

　アニメーションについては、説明する際に効果的になりそうな部分と、セクションの切れ目で入れました。
　セクションの最後にそのセクションのまとめ的なスライドを入れていたのですが、このスライドに切り替わるときにアニメーションさせることで、「切れ目」を演出したつもりです。

　あと、今回はスライドノートを全部書きました。喋りのプロではないので、時間通りに、伝えたいことをもれなく伝えるために、基本の台本は必要だと思ったからです。

リハーサル

　主に時間内にしゃべれるかどうかという点と、想定質問の洗い出しの目的で行いました。
　今回はプロセス的な話になるので、エンジニアよりPMとかディレクターの方が聞きたい内容になっているということがわかったので、聴講者であるフロントエンドエンジニアを意識した内容にブラッシュアップしていくことにしました。
　それが、プロセス内における、フロントエンドエンジニアがやる役割だったり、実例だったりする部分です。
　最後に前日に、一通り喋ってみて、スライドノートの微調整を行いました。

本番

スライドノートを見ながらではあるので、若干辛いんですが、できるだけ聴講者に目線を向けて、反応を見て喋りました。

余談

　冒頭の淀川コナンのくだりは、当日思いつきでやりましたが、ニックネームで覚えてもらうというのは印象に残るのでよいなと思いました。
　ただ、見切り発車でやってしまうと、そのキャラを引きずらないといけないので気をつけたほうがよさそうです。

以上、今回のプレゼンテーションができるまでのプロセスの記録でした。