12周年記念パーティ開催! 2024/5/10(金) 19:00

セミナーやLTで話してわかったこと 前編 発表ための準備とマインドセット

セミナーやLTなど、人前で話す機会があるエンジニアが、その経験を座談会形式で話します。前編となる今回は、資料の作り方や具体的なツール、マインド的な準備についてです。

発行

  • 高津戸 壮
  • 小山田 晃浩
  • 外村 奈津子
  • 山田 敬美
  • 丸山 陽子
  • 杉浦 有右嗣
  • 矢倉 眞隆
セミナーやLTで話してわかったこと シリーズの記事一覧

はじめに

この座談会では、エンジニアがセミナーやLT*で発表することについて、資料のつくり方やそのほかの準備、そして「人前で話す」ということを通じて感じたことを話していきます。その「トーク術」は人それぞれであり、まだまだ苦手な部分があると感じているエンジニアもいましたが、一つの経験談としてお役立てください。(進行:編集、丸山陽子)

*注:LT(エルティー)と登壇

Lightenning Talks(ライトニング・トークス)の略で、セミナーや勉強会で行われる短時間の発表のことです。時間はさまざまに設定されますが、オーソドックスな形式では持ち時間は5分です。本稿では、数十分から1時間程度の長めのものは「登壇」とし、LTとは分けて話します。

登壇やLTは好きですか? 嫌いですか?

——まず、みなさんどんなところで発表をしたことがあるのか、経験を教えてください。それと、発表自体が好きか嫌いかも教えていただけるといいですね。

小山田 晃浩:初めて人前で話したのはかなり昔で、8、9年前ですかね。Apple Store銀座で開かれたCSS Nite*で発表しました。その頃は、プレゼンも一応できましたけど、下手だし、すぐ緊張しちゃうような状態でした。

*注:CSS Nite

Web制作に関わる方のためのセミナーイベントです。すでに10年以上の歴史があります。ピクセルグリッドのエンジニアが登壇することも多く、ベストセッションに選出されることもあります。

——人前で話すのは好きですか? 嫌いですか?

小山田:好きですね。自分は技術関係の本を書いたりすることもあったんですけど、本を書くのって完全にひとりの仕事ですし、出版したあとに、そんなに多くのフィードバックが来ることもないんですよ。

LTや登壇みたいに人前で話すと、来てくれた人と話す機会があるんです。その人は似たような技術に興味を持っていることが多いので、次に繋がる人間関係がつくれるんです。それから、発表は自分がやっていることをタイムリーに話せるのも好きですね。

杉浦 有右嗣:僕はLTしかやったことがないんです。去年はLTが6回くらいかな。2ヶ月に1回くらいLTしていることになりますね。好きか嫌いかでいうと、どちらでもないです。嫌いではないので、頼まれたらやります(笑)。

矢倉 眞隆:最近でいうと、去年は長めの話が1本、中くらいのが2本です。長めというのは40分〜1時間くらい、中くらいというのは20〜30分くらいの感覚ですね。人と会話するのは好きなんですけど、一方的に「発表する」っていうのは、そんなに好きではないかなあ。「話す」ことは好きですけど、「お話する」のは好きじゃない。

高津戸 壮:僕もよもつ(小山田)とたぶん同じで、Apple Store 銀座でCSS3の話をしたのが初めてですね。

話すこと自体は別に嫌いではないのですが、準備が大変なので、そこがネックですね。今は話すとボーナスが出る*ので、やってます(笑)。会社のブランティング的にも重要な意味があるとは思います。

*注:セミナー登壇ボーナス

2015年11月からピクセルグリッドに導入された制度です。参加者が100人以上のオープンなイベントやセミナーで登壇すると、会社からボーナスが支給されます。

山田 敬美:私は2年に1回くらいしかしゃべらないです。いちばん最初は私もCSS Niteで、2009年にHTML5について話しました。そのあと、2014年にJS Girlsという女性エンジニアのためのJavaScriptのイベントでJavaScriptの学び方についての話をして、最近では、CSS NiteでSassのMixinや、游ゴシックの指定について話したりしました。

どれもイベントの主催者からお声がけいただいたもので、自分から進んで発表したということはないですね。

——好きですか?嫌いですか?

山田:好き嫌いというより、すごく苦手ではあるんですけど、登壇ボーナスがあるので、最近は……ちょっと前向き(笑)。

全員:(爆笑)

山田:でも準備が大変で、いつもギリギリまでつらい思いをしています。

発表準備中に悪夢

——では、準備のお話が出たので、みなさんどんな準備をするのか教えていただけますか? 印象としては、かなり練る人もいるし、最初の段階の構成で、そのまますっと進めてしまう人もいるように思うのですが。

小山田:自分の場合は、自分から「このテーマでやりたい」というよりも、先方から「こんなテーマでお願いできませんか」と依頼が来ることが多いんですね。

すると、テーマを聞いたときに、「こんなかんじで話せるかな」と脳内で話の構成を考えてしまいます。それが依頼してくれた人の要望にマッチしそうだったら「じゃあ、やります」ということでお答えします。

——え、もうその場で考えてしまうんですか?

小山田:いや、本当にもう「ざっくり」ですよ。自分がどんなテーマを持ってたかな? くらい。ただ、そういう過程を経てお返事するので「できます」って言ったときには、自分の中で話すべきことは、もやっとできあがっています。あとは、準備期間に、その「もや」を形にします。

——じゃあ、あんまり準備はつらくないんです?

小山田:そうで……いや、つらいですよ(笑)。あのねぇ、発表の週になると夢を見るんです。

高津戸・山田:(笑)。

小山田:当日だけど、プレゼンの資料ができてない、っていう夢なんですよ。特にCSS Niteとかね(笑)。

山田:実際に当日できないということはあったんですか?

小山田:それはないですけど。心配で心配で、深層心理ではそこまで追い詰められているんです。で、夢から覚めたときに「あ、ちゃんとやらないとな」って思って、頑張ります。

LTと登壇の準備の違い

——LTと登壇では、準備も違いますかね。

高津戸:LTと、長めの発表は違いますよね。

小山田:そうですね。LTなら頑張れば1日でできてしまう。

高津戸:LTはそもそも話す時間が短いから、いろいろ考えて盛り込むと、かえって話す時間がなくなってしまいますね。

山田:LTってどういう話の流れにしたらいいかわからないんですよ。オチを求められているふうな雰囲気を感じます。長い発表って真面目な話でいいのかなあって思うんですけど、LTって発表者がみんな笑いを入れてくるから、入れないといけないのかなと思って。

高津戸:いやあ、笑いって(笑)。

——LTをよくやっているりぃさん(杉浦)、どうですか?

杉浦:笑いなんて考えたこともなかった(笑)。

山田:え、でも以前発表したVanilla.jsについてのLTは、AngularのカンファレンスなのにVanilla.jsの話ってところがそもそもネタ感あったり。

杉浦:あれは登壇依頼されたときに、「Angularの話しなくてもいいです」って言われたから……(笑)。他のもそんなに意識してつくってない。適当にやったらいいんじゃね、って思います。

高津戸:別に笑わそうとしなくてもいいんじゃないかな。たとえば『CSSのこういうプロパティ紹介します』で。あまり笑いって求められている気がしないけど。

矢倉:LTって場をあっためるために使うからね。たとえば、懇親会の頭とか、それから長めのセッションの間の息抜きとかね。ちょっとリラックスしたものを出すって目的で使われることが多いから。でもだからといって、それをスピーカーに求めているかというと、そういうわけではないと思いますね。

全員:ああ。

資料をつくって理解を深める

矢倉:僕の場合はニッチなトピックを「この人だったら、なんか知ってるんちゃうか」って依頼されることが多いです。お願いされたら、まず興味があるか、ないかを考えます。興味がないことに対して、長い時間をかけて資料をつくるのはつらいですからね。

——難易度が高そうですね。

矢倉:みんなが知らないであろうことについて、これはどういうものだよと説明することが多いので、だいたいテンプレートが決まっていると言えば、決まっているんですよ。大枠でいうと、

  1. 今から話すものはこんなものです
  2. なんでこんなものがあるんや
  3. これまではこうやってきました
  4. それはうまくいかないので、こういうふうになりました
  5. 始まったばかりなのですが、現状はこういうかんじです
  6. これからはこうなっていくでしょう (終わり)

こんなのがフレームワークとしてはあるので、それにしたがって苦しみながら準備を進めていく……っていったらかっこいいけれど、実際の発表は、このとおりには進んでいないですね(笑)。

——資料は「調べながら」つくっていくんですね。

矢倉:発表することに対して、基本的な知識はありますけれど、うーん、なんていうんだろ「技術的不寛容社会」なので(苦笑)、あまり間違いはしたくないなというのはありますね。自分が記憶しているものをあまり信じてません。

それから、僕はこれからの技術を話すことが多いので、間違いとか、不正確なことを伝えて、初めて聞く人の認識を歪めてしまうのはいややなって思っています。僕は自分のオピニオンを伝えたいっていう気持ちはあまりないんですよ。あくまで技術を説明するというかんじなので。

高津戸:僕も、登壇が決まった時点では、そのテーマについての理解は100%ではないです。初めはMarkdown形式で箇条書きでまとめてから、スライドにするんですけれど、その作業の中で「あれ、これってどうだったかな?」ってことがたくさん出てきます。それをきちんとしておかないと、人前で話せないんです。そうやって、調べ直して自分の中で理解を深めながら、ひとつの話として完成させる。それが時間がかかるんです。

——たとえば30分くらいの発表だと、準備にどれくらいの時間がかかるんですか。

高津戸:ものによりますね。構成がふわっとしているものは時間がかかりますね。何をどう話そうかなあって考えて、時間がかかります。ちょこちょこ空いた時間にやっていると、一ヶ月くらいはかかるかもしれません。

——大変ですね。

高津戸:そういう作業も自分の中で深い理解が得られるのは、いいところだと思います。話すときは、自分でもわかってないと「こうです」とは言えないし、間違ってたら、つっこまれますしね。自分の知識のレベルアップにはなるなと思います。

資料をつくりながら構成を練る

山田:私はよもつさん(小山田)みたく、頭の中で構成を組み立てることができないので、スライドを作りながらではないと考えられないですね。

——書きながら考えていくタイプなんですね。

山田:最近は游ゴシックの話をしたんですけれど、ベースはCodeGridで記事*として書いていたので、いつもよりは簡単に準備ができると思っていました。ただ、もうちょっと一般的な話にする必要があると思ったので、検証もイチからやり直したり、内容も考え直したりして、結局準備は大変でした。ベースがあったとしても、人前で発表できる状態まで持っていくのはやっぱり大変です。

*注:游ゴシックの記事

山田が執筆した游ゴシックの記事は、「ピクセルグリッドのフォント選定と実装のプロセス 第3回 フォントの実装」です。

——発表のためにWebアプリサンプルをつくったり、ほかのエンジニアと2人で発表したときは、寸劇としてアレンジしたりと、発表のフォーマットを工夫していますよね? どうやって思いつくのですか?

山田:ありましたね、寸劇! 記憶から抹消されていました(笑)。スライドを作りながら話す内容を妄想していると、自然とこういう表現をしたいなというのが浮かんできて、それを練り込んでいく感じです。

高津戸:おもしろくしたい?

山田:会場がシーンとなっている中で話すのって、つらくて。でもウケを狙ってしゃべると、すべるんですよ(笑)。狙わないんだけど、ちょっとだけ小ネタを、気付くか気付かないかくらいで入れていくのが好きですね。

——寸劇を思いついたのは?

山田:ちょっと記憶が定かではないんですけど……おそらく、私がひとりでやる予定だった講演に、技術的な知識のサポートでげこたん(坂巻)が入ってくれることになったんです。ただ、2人になると、当然、講演料も2人分かかるじゃないですか。なので、2人でやる意味のあるものにしなくちゃいけない!と思いました。勝手に私が使命感に燃えたんですけど……。

——なるほど。

山田:でも、ふざけているように見えたのか、有料イベントだったのもあって、アンケートでは何人かの方が少し怒っていらっしゃいましたね。

矢倉:そういう属性は、考えなければいけないときはありそうですね。

高津戸:聴く側がお金を払うとなると、いろいろ違ってきますよね。

資料制作おすすめツールは?

——スライドの作り方やツールをお聞きしたいのですけど、そもそもどんなツールを使って作っています?

小山田:「Keynote」が使える場合であれば、Keynoteにしてます。いい感じにアニメーションしてくれるマジックムーブっていう、CSSでいうトランジションみたいな機能があるんですけど、この機能が強力で気に入ってます。

高津戸:僕は「reveal.js」っていう、有名なフレームワークを使ってます。

矢倉:HTMLベースでスライドが作れるやつですよね。

高津戸:そうです。最近はMarkdownを読み込んでスライドにする機能が便利だなと思ってます。さっき話に出たように、Markdownで構成をつくっているので、それに見出しをつけていくと、そのままスライドになってくれるんです。そこに画像を足していけば完成していきます。

高津戸:スライドというと、ページ間のアニメーションとか、おもしろい画像をふんだんに使っている人もいるんですけど、僕はそこまでする気力がなくて(笑)。

杉浦:僕も同じようにMarkdownで書けるのがほしくて、探した結果、別の「cleaver」というやつを使ってます。これはHTMLの中にMarkdownを書くのではなくて、Markdownのファイルに対してコマンドを打つと、HTMLができるやつです。

本当に最低限の機能でいいやっていう人には、いいかもしれないです。書くときにファイルのwatchもできるので、それさえできればいい。

これを元にスライドをつくって、あとはモバイルでも見られるように、タップするとページ送りをするっていうJSを自分で書いて、自分のスライド用のリポジトリに上げてます。

こんなツールも使ってます

座談会に参加していなかったエンジニアも含め、スライドを作るのに使っているツールはほかにこんなものがあります。

  • Talkie(中島):スライドをHTMLとMarkdownで作るツール。背景のカスタマイズが簡単に行えるほか、自動的に文字を適切なサイズにしてくれる。ページごとにNoteを書ける機能もある。
  • DZSlides(矢倉):HTML製のスライドテンプレート。機能は最小限だが、CSSやJavaScriptのコードも1枚のHTMLファイルにあるので、とにかく手軽なのが気に入っている。

(後編に続く)

高津戸 壮
PixelGrid Inc.
テクニカルディレクター

Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。数多くのWebサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。 著書に『改訂版 Webデザイナーのための jQuery入門』(技術評論社、2014年11月14日)がある。 CSS Nite 2011ベストセッションにおいて、全170セッションの中から、ベスト10セッションに、CSS Nite 2013ベストセッションでは、全278セッション中、ベスト20セッションに選出。

小山田 晃浩
PixelGrid Inc.
フロントエンド・エンジニア

2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2021年まで10連続でMicrosoft MVP(Developer Technologies)を受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』(共著:エクスナレッジ、2011年3月12日)や『CSS3デザイン プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。

外村 奈津子
PixelGrid Inc.
編集

情報出版社に在籍中、Mac雑誌、中高年向けフリーペーパー、コラムサイト運営、健康食雑誌、グラフィック・Web技術書籍編集、IT系ニュースサイトの編集記者を経験。その後フリーランスのエディター/ライターとして独立。2011年4月より株式会社ピクセルグリッドへ入社。ピクセルグリッドが提供するフロントエンド技術情報を提供するサービス「CodeGrid」の編集を担当している。

山田 敬美
フロントエンド・エンジニア

Web制作会社、自社サービス運営会社などでサービス企画、マークアップ・エンジニアの経験を積むも、退職して1年間専門学校に通う。プログラミングの基礎を学んだのち、2013年4月、ピクセルグリッドのフロントエンド・エンジニアとして入社。CSSの設計を得意とするが、JavaScriptも好き。2019年、退社。 著書に『Sass入門 ~より効率的なCSSコーディング』(共著:技術評論社、2012年10月19日)や『CSS3デザインブック 仕事で絶対に使うプロのテクニック』(共著:MDN、2012年3月21日)などがある。

丸山 陽子
PixelGrid Inc.
編集

Mac雑誌の編集者を経験後、フリーランスのエディター/ライターとして独立。パソコン系雑誌やデジタルカメラ雑誌、iPhone/iPadの初心者向け書籍などの編集や執筆に携わる。2015年にピクセルグリッドへ入社し、「CodeGrid」の編集を担当する。

杉浦 有右嗣
PixelGrid Inc.
シニアエンジニア

SIerとしてシステム開発の上流工程を経験した後、大手インターネット企業でモバイルブラウザ向けソーシャルゲーム開発を数多く経験した。2015年にピクセルグリッドへ入社し、フロントエンド・エンジニアとして数々のWebアプリ制作を手掛ける。2018年に大手通信会社に転職し、低遅延配信の技術やプロトコルを使ったプラットフォームの開発と運用に携わっていたが、2020年ピクセルグリッドに再び入社。プライベートでのOSS公開やコントリビュート経験を活かしながら、実務ではクライアントにとって、ちょうどいいエンジニアリングを日々探求している。

矢倉 眞隆
PixelGrid Inc.
フロントエンド・エンジニア

2016年10月にピクセルグリッドへ入社。Web標準技術やブラウザの実装動向に明るく、イベントでの講演や雑誌・オンラインメディアへの原稿執筆、書籍の監修・監訳などを数多く経験。 Google Developer Expertとしても活動中。

この記事についてのご意見・ご感想 この記事をXにポストする

全記事アクセス+月4回配信、月額880円(税込)

CodeGridを購読する

初めてお申し込みの方には、30日間無料でお使いいただけます