もう時間オーバーしない、必ず時間ピッタリに終わるLT用スライド(reveal.js)

皆さんライトニングトークはご存知でしょうか??
イベントやセミナーで、5分という短い時間の中で、笑いや、感動や、人のためになるような、内容を発表する洗礼されたセッションのことです。

私は様々な方の考えが聞けるので、ライトニングトーク大会が大好きです。
しかし5分という短い時間のためか、話している途中で時間が来てしまい、セッションを打ち切られる方を何度も見てきました。

そんな方に是非、このライトニングトーク用テンプレートを使用してほしいと思います。

 

まずは、デモを見てください。

 

 

 特徴

 

  • 設定した秒数で、自動にスライドが切り替わるので、時間オーバーになりません
  • レスポンシブ対応なので、会場のスクリーンサイズも気にならない
  • HTMLとCSSで出来ているので、Webに関わる皆さんは簡単に使いこなせる

 

例えば5分のライトニングトークだったとします。
5分は、300秒ですので、60枚スライドを用意して、5秒おきにスライドが1枚切り替われば、5分ぴったりにライトニングトークを終えることができます。

5分ピッタリに終わるライトニングトーク素敵ですよね!!

 

 

使い方

 

このテンプレートはreveal.jsを元に作成しました。
詳しい使い方や、オリジナルのソースコードはこちらを参照ください。

 

  1. LT用のスライドをダウンロードし、解凍します。
  2. index.htmlがスライド用のファイルになります、まずindex.htmlを開きます。
  3. 1ページ何秒でスライドを切り替えるか設定します。
    // autoスライドの時間、ミリ秒で指定
    Reveal.configure({ autoSlide: 3000 });
    

    現在3000ミリ秒(3秒)になっています。
     

  4. スライドを追加します。
    <section>
         <h1>タイトル</h1>
        <h2>コンテンツ</h2>
    </section>
    

    <section>〜</section>までが、1枚のスライドになります。
    自動計算で、現在のページ数、トータルのページ数を表示します。
     

  5. スライドの背景画像を指定する
    <section data-background="img.png">
    

    背景画像を指定するには、sectionに、data-background要素を追加します。
     

  6. プログラムなどのソースコードを表示する
    <pre>
       <code class="coffeescript">
       <?php // コード〜 ?>
       </code>
    </pre>
    

    preタグでソースコードを囲みます。
     

  7. その他レイアウトを変更する
    その他、タイトルや、コンテンツなどのスタイルを変更したい場合は、「css/reveal.css」を修正します。

    例えばタイトル(h1)のフォントサイズを変更したい場合は84行目付近の下記を修正します。

    .reveal h1 { font-size: 3.77em; }

簡単な使いかたですが、以上です。
この他にも様々なアニメーションや、リスト表示などのスタイルが用意されています。詳しくはオリジナルのソースコードreveal.jsを参照ください。

このスライド使ってみると分かると思うんですが、1枚5秒などで設定するため、必ず一度はアワアワ慌てる時がきます。
笑いを取るスライドを差し込まなくても、自然と笑いが起きます。CPIスタッフブログの筆者もそうですが、寡黙な人間でも笑いを起こすことができます!

 

 

このエントリーをはてなブックマークに追加

関連タグ:

この記事をシェアする

次へ
前へ