Bento：1つのHTMLファイルに全機能詰め込んだPowerPoint代替ツールの使い方
Bento：1つのHTMLファイルに全機能詰め込んだPowerPoint代替ツールの使い方
PowerPoint・Google Slidesの代替として登場した「Bento」は、エディタ・ビューア・コラボレーション機能をすべて1つのHTMLファイルに内包したプレゼンツール。インストール不要・クラウド不要・オフライン完結で、1,200超スターを獲得した注目のWebアプリです。
GitHubで急上昇中の nyblnet/bento をご紹介します。スター数 1242★ を獲得し、Web分野で注目されているツールです。
Bentoとは？1ファイルで完結するPowerPoint代替プレゼンツール
「Bento」はTypeScriptで構築された560KBのHTMLファイル1つで完結するプレゼンテーションツールです。PowerPointのようなスライド作成・編集・発表機能に加え、E2EE（AES-GCM）によるリアルタイムコラボレーション、Keynoteスタイルのモーフトランジション、依存ライブラリなしのチャートエンジンを搭載しています。ドキュメントデータはファイル内のプレーンなJSONブロックに保存され、AI agentからも編集可能な設計です。2026年7月にHackerNewsでShow HNとして公開後急速に注目を集めています。
こんな人におすすめ:
- エンジニア向け: AIエージェントとの連携・オフライン環境での利用・ロックインなしのデータ保持を重視するエンジニアに最適
- 非エンジニア向け: インストール不要・クラウドアカウント不要でブラウザだけでプレゼン資料を作成・共有したい方に向いています
主な機能・特徴
- 560KBのHTMLファイル1つにエディタ・ビューア・発表者モード・コラボ機能を内包する
- AES-GCMによるE2EEリアルタイムコラボレーション（キーはファイル内に保存・サーバー非依存）
- スライド間でIDが一致する要素が自動モーフアニメーションするKenote風モーフ発表を実現する
- 依存ライブラリなしのチャートエンジン（棒・折れ線・円・散布図）を内蔵する
- ドキュメントをプレーンJSONで保持しAIエージェント（Claude Code・Cursor等）が直接編集できる
Bentoのインストール・始め方
ブラウザでそのまま試す（最速30秒）
最も簡単な方法はブラウザで直接試すことです:
- bento.page/slides をブラウザで開く
- そのままスライドを編集できます（インストール・ログイン不要）
ローカルHTMLファイルとして保存する
ローカルに保存する場合:
# GitHubリリースからダウンロード
curl -L https://github.com/nyblnet/bento/releases/latest/download/Bento_Slides.bento.html -o Bento_Slides.bento.html
# ブラウザで開く
open Bento_Slides.bento.html
Claude Code で AI スライド生成をする
Claude Codeで使う場合はプラグインをインストールします:
/plugin marketplace add nyblnet/bento
これで/edit-slidesコマンドからAIがスライドを直接編集できるようになります。
活用事例
- フリーランスデザイナーがクライアントにBentoファイルを送付し、受け取った側がブラウザのみで表示・コラボ編集するシーン
- フロントエンドエンジニアがClaude Codeのbento-slidesスキルを使い、AIにスライド内容を自動生成させるワークフロー
BentoとGoogle Slides / PowerPointとの違い・なぜ今このツールか
Google SlidesやPowerPointはクラウドまたはソフトウェアへの依存が前提です。サービスが終了すれば編集ができなくなり、オフライン環境では機能が制限されます。Bentoは「ファイル自体がソフトウェア」という設計思想を採用し、2026年に作ったファイルが2036年も同じブラウザで開ける永続性を実現しています。
Reveal.jsやImpress.jsなどの既存HTML系プレゼンツールと比べると、Bentoはリアルタイムコラボレーション・自己保存・モーフアニメーションをすべて単一ファイルに内包する点が特徴的です。また、ドキュメントがプレーンJSONのため、AIエージェントとの統合が極めてシンプルです（Claude CodeやCursorがファイルを直接編集できます）。
2026年7月のShow HN投稿後に急速にスターを獲得しており、「ローカルファースト + AI連携」というトレンドにマッチしたタイミングで公開された点も注目の要因です。
こんな人に向いている
プライバシー重視のビジネスパーソン・フリーランス: 機密性の高いプレゼン資料をクラウドにアップロードしたくない方に最適です。Bentoのコラボ機能はE2EEで、サーバーは暗号文しか見ません。ファイルを送れば相手はブラウザのみで参加できます。
フロントエンドエンジニア: TypeScriptで書かれたシングルファイルWebアプリのアーキテクチャ（CRDT実装・E2EEコラボ・自己書き換えHTML）を学べる優れたリファレンスです。slides/src/model.tsのドキュメントモデル設計が特に参考になります。
AIエージェント活用者: ドキュメントがプレーンJSONのため、Claude Code・Cursor・Aiderなどのエージェントがスライド内容を直接生成・編集できます。/plugin marketplace add nyblnet/bentoでClaude Codeに統合すると、AIが自動でスライドを作成するワークフローが実現します。
使う前に知っておきたいこと
- モバイル対応: 表示・発表はモバイルでも動作しますが、編集はデスクトップ向けの設計です
- コラボ時のundo: ライブコラボ中のundoはスナップショットベースのため、他ユーザーの同時編集がロールバックされる場合があります
- RBAC未実装: プレゼンスの名前はクレームのみ（認証なし）。エンタープライズ向けの本人確認には別途設計が必要
- ファイルサイズ: 画像・フォントを多用するとファイルが大きくなる可能性があります
- ライセンス: MIT（© 2026 The Bento/Suite authors）。Reveal.js・Moveable・Selecto（MIT）、フォント（OFL）が内包されています
関連ツール・おすすめサービス
- Vercel — Bentoのデモサイトやカスタムプレゼンホスティングのデプロイに使えるプラットフォーム
- DigitalOcean — 自社コラボリレーサーバー（blind relay）をセルフホストする場合のクラウド選択肢
まとめ
BentoはPowerPoint・Google Slidesに対する「ファイルが全てを持つ」という哲学的な答えです。特にプライバシーやオフライン環境・AI連携を重視するエンジニアにとって魅力的な選択肢です。560KBのHTMLファイルをダウンロードするだけで今すぐ試せます。
この技術を学ぶ
Web・フロントエンド開発に興味を持った方には、UdemyのWebアプリケーション開発コースもおすすめです。
- 🎓 関連するWebコース一覧 — セール時（最大90%OFF）を狙うとお得です
関連記事
この記事が役に立ったらシェアしてください