Gosuke Miyashita about feed

Peitho発表者ツールのタイマー詳細

5 July 2026

前回の記事 で自作プレゼンツール Peitho の発表者ツールを紹介した。スライドとスピーカーノートが並んで、タイマーやアジェンダも出る、というよくある構成のやつ。

Peithoの発表者ツール

前回の記事ではひと通りのパーツを軽く紹介する形にしたけど、発表者ツールをつくるにあたって一番手をかけたのがタイマーまわりなので、今回はタイマーだけに絞って書く。

そもそもPeithoをつくりはじめた理由のひとつが、これまで使ってきたプレゼンツールで、タイマーが使いやすいと思ったことが一度もなかったから。経過時間は出るけど残り時間が出ない、逆に残り時間しか出ない、超過してるのかどうかが色や表示ではっきりわからない、発表のペース(スライドの進み具合と時間の進み具合のバランス)が視覚的に見えない、みたいな不満がずっとあった。

発表中はスクリーンが後方にあることが多いので、そちらを見ると聴衆から顔を背ける形になってしまうし、あまり見ないようにしたい。なので手元の発表者ツールに、今どのスライドで、何分経っていて、あと何分残っていて、ペースは間に合っているのか、といった発表中に把握しておきたい情報がすべて載っているようにしたい。


経過・計画・超過の表示

タイマー

タイマーには経過時間、計画時間、超過時間を並べて出している。

発表の予定時間はデッキのfrontmatterに書く。 time: 5m のような書き方で、 90s1h30m のように秒や時分の表記も使える。この値がタイマーの計画時間になる。

経過時間は大きく出る。ここが一番よく見る数字。その横に計画時間が「 / MM:SS 」の形で小さく出るので、経過と計画を並べて見比べれば、あとどれくらい残っているかがすぐわかる。予定時間を超えると、超過時間が +MM:SS のように追加で出る。

超過時間が出ているタイマー


残り時間で色が変わるタイマー

タイマーは残り時間に応じて色が変わる。

残り1分と超過は同じ赤なので、色だけでは区別がつかない。ただ超過中は +MM:SS が併記されるので、そこを見れば「まだ残ってる赤」なのか「すでに押してる赤」なのかは判別できる。また、次に説明するトラッカーの色でも判別できる。

残り時間ごとのタイマーの色


かめ🐢とうさぎ🐰のトラッカー

タイマーの下に細長い帯が伸びていて、そこにかめ🐢とうさぎ🐰が並んで動く。

トラッカー

かめは経過時間を、うさぎはスライドの進捗を表している。うさぎがかめより前に出ていれば「スライドの方が時間より進んでいる」ということで余裕あり、かめに追い越されていれば「時間の方がスライドより進んでいる」ということで遅れ気味、というのがひと目でわかる。

この形態のトラッカーはおそらく Rabbit 発祥で、他のプレゼンツールでも見かけることがある(かめとうさぎが別のキャラクターになっているものもある)。自分もGoogle SlidesとChrome拡張を組み合わせて使ってみたことがある。ただ、これらはメインスクリーンの方に表示されるので、発表者ツールを見てもペースがわからない、メインスクリーンの方を振り返らないと確認できない、というのが不満だった。なのでPeithoでは発表者ツール側にトラッカーを置いている。

タイマーの数字とスライド番号を頭の中で突き合わせて「今のペースで大丈夫か」を計算する、というのを発表中にやりたくない。かめとうさぎの位置関係だけでそれが読み取れる。

そして超過するとトラッカーの色が変わる。前のセクションで書いたタイマーの赤(残り1分と超過が同じ赤)を、トラッカーの色の変化と合わせて見ることで「すでに押している」がはっきりわかるようになっている。

超過時のトラッカー


超過したセクションが赤くなるアジェンダ

前回の記事でも触れたセクション別の時間を並べたアジェンダ。ここでも超過を色で表現している。

超過中のセクションが赤くなっているアジェンダ

トラッカーは全体としてペースが遅れているか進んでいるかしかわからない。デッキ全体をセクションで区切ってセクションごとの遅れ・進み具合を判別できるようにしたのがこのアジェンダで、トラッカーを補完する位置付けになっている。

各セクションには計画時間・実績時間・その差分が並んでいて、実績が計画を超えたら行が赤くなる。終わったセクションだけでなく、発表中のセクションも計画時間を超えた瞬間から赤くなるので、進行中にオーバーしていることがその場でわかる。


参考: