Show HNで見つけた、ちょっと変わったスライドツール
Hacker NewsのShow HN(自作プロダクトを紹介する投稿形式)に、Bento/Slidesという興味深いツールが投稿されていました。
「PowerPoint一式が1つのHTMLファイルに入っている」という触れ込みで、編集・閲覧・データ・共同編集がすべて1ファイルで完結するとされています。
この記事でわかること
- 単一HTMLファイルにスライド機能を詰め込む設計の狙い
- 公開されていたAI生成ルールから読み解ける「良いスライド」の条件
- 日本のエンジニアがこの発想を自分の仕事に活かせるポイント
課題:スライドツールは「バラバラ」なのが当たり前だった
PowerPointやGoogle Slidesは便利ですが、ファイル形式・編集ソフト・共同編集の仕組みがそれぞれ別のレイヤーで動いています。
データをグラフ化したい時は別ツールで作った画像を貼り、共同編集はクラウド側の機能に依存します。
つまり「編集」「閲覧」「データ」「共同編集」は分業が当たり前で、1つのファイルの中では完結していませんでした。
Bento/Slidesは、この前提そのものを疑うところから始まっているようです。
結論の先出し:1ファイル完結とAI生成ルールという2つの新しさ
Bento/Slidesの新しさは大きく2つあるとみられます。
1つ目は、スライドの編集・表示・データ・共同編集を1つのHTMLファイルに閉じ込めた設計です。たとえるなら、Wordの原稿・印刷用PDF・共同編集の履歴を1つのノートに全部書き込むようなイメージです。
2つ目は、Show HNの本文に紛れ込んでいた、AIにスライドを作らせるための指示文とみられる内容です。ここには「動きのないスライドを作るな」「数字は文字ではなくグラフにしろ」といった、具体的な設計ルールが書かれていました。
詳細解説1:単一HTMLファイルという設計思想
編集・閲覧・データ・共同編集を1ファイルに統合する発想が、Bento/Slidesの土台です。
近年、Webの世界では「単一ファイルで完結するアプリ」を作る流れが少しずつ広がっています。JavaScriptとCSSをすべて1つのHTMLに埋め込み、サーバーがなくてもブラウザだけで動く形です。
Bento/Slidesのタイトルにある「edit+view+data+collab」は、この発想をスライドに応用したものとみられます。ファイルを1つ渡すだけで、相手はそのまま編集も閲覧も共同作業もできる、という状態を目指しているようです。
詳細解説2:公開されたAI生成ルールを読む
この節の結論は、Bento/Slidesがスライド生成をAI任せにする前提で、細かいデザインルールを内部に持っているらしいということです。
Show HNの本文抜粋には、AIにスライドのHTML(またはそれに近いデータ構造)を作らせる際の指示とみられる文章が含まれていました。代表的なルールを整理すると、以下のようになります。
| 要素の種類 | 推奨される表現(元文からの整理) |
|---|---|
| 表紙・フルスライド画像 | フルブリード配置+scrim(暗幕、テキストを読みやすくする半透明レイヤー)+ken-burns風のゆっくりしたズーム/パン |
| 手順・タイムライン・つながり | 線やパスにdash-march(破線が流れるように動くアニメーション)のループ、または要素をmorph(形を変えながら遷移)させる |
| 見出しの数字 | 大きく表示し、countUp(数字がカウントアップして見える演出)を付ける |
| 表紙・章区切り | 必ず1つ以上のアンビエントモーション(常時流れる控えめな動き)を入れ、静止画のまま終わらせない |
| ロゴなど繰り返し出る要素 | id(識別子)をスライドをまたいで固定し、突然出現させず同じ場所でmorphさせる |
さらに、完成前のセルフチェック項目として次のようなものが挙げられていました。
- 文字で書かれた数字は、グラフにすべきではないか
- 同じテーマの連続スライドは、idを共有しtransition:"morph"を使っているか
- 表紙を中心に、ken-burns・ループ・countUpのどれか1つは入っているか
- 掘り下げたい内容は、別スライドではなくstate slide(1枚の中で状態を切り替える表現)の方が向いていないか
- アクセントカラーは1色、フォントは最大2種類、サイドの余白は96pxになっているか
- スピーカーノート(発表者用のメモ)は書かれているか。これはファイル自体に含まれる
これらはBentoというプロダクト固有のルールですが、AIにスライドを作らせる際の「良し悪しの基準」として一般化できそうな内容です。
日本の開発者にとっての意味・使い所
このルール群は、社内向けのAIスライド生成ツールを自作する際のチェックリストとして参考になるとみられます。
日本語圏でも、議事録やレポートをAIでスライド化したいという需要は増えています。その際に「静止画ばかりで単調」「数字が全部テキストで読みにくい」という悩みは共通しているはずです。
Bento/Slidesの指示文にある「表紙には必ず1つ動きを入れる」「数字はテキストではなくチャート化を検討する」といったルールは、そのままプロンプト設計の叩き台にできそうです。
また、単一HTMLファイルで編集・閲覧・共同編集を完結させる発想は、社内ツールや軽量なドキュメント共有の仕組みを作る際のヒントにもなります。サーバー環境を用意せず、ファイル1つ渡せば済む、という気軽さは特に小規模なチームで刺さりやすい部分だと感じます。
まとめ
Bento/Slidesは、スライドを1つのHTMLファイルに閉じ込めるという構造面の新しさと、AIにスライドを作らせるための具体的なデザインルールという2つの見どころがあるプロダクトです。
本記事で紹介したルールはあくまでShow HNの本文抜粋から読み取れる範囲の情報であり、実装の全貌は公開されていません。ただ、AIスライド生成の「作法」を言語化した事例として、一度目を通しておく価値はありそうです。