
2026/04/07 3:53
**2026年のズーミング UI:Prezi・impress.js そして「違うもの」を作った理由**
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
(以下に日本語訳を記載します)
改訂された要約
Preziはプレゼンテーション用の「ズームキャンバス」を先駆け、AI搭載生成とテキスト編集ツールで市場リーダーになった。しかし、その閉じたプラットフォームモデル(料金は月額15ドルから)と静的PowerPointエクスポートはすべてのズーム効果をフラットスライドに平坦化し、柔軟性を制限する。ユーザーはPreziのズームやパン移動トランジションでめまいを報告することが多く、このプラットフォームではズームは自由なナビゲーションよりもあらかじめ配置されたフレーム間のストーリーテリングデバイスとして主に使用される。
Impress.jsはCSS3トランスフォームを用いてPreziライクなズームをウェブ上で実現し、ステップベースのアーキテクチャで「ステップ」を3D空間に配置する。すべてのステップがDOM内に同時に存在するため、動的ビューのマウントやズーム深度管理、ナビゲーション状態処理が欠けており、ユーザーがズームでコンテンツへ移動するアプリには適さない。
Zumlyは単一開発者によるフレームワーク非依存ライブラリで、従来のページ遷移をズームで置き換える代替手段を提供する。要素をズーム可能にマークし、トランジション中にターゲットビューを注入して必要に応じてマウント・アンマウントする。2020年(著者がZircle UIを離れた後)に創設されて以来、複数回エンジンを書き換え、安定版に到達した。
Zumlyで構築されたランディングページはコードを書く前の感触を示し、著者はズームUIが機能するか失敗するかについて議論を呼びかけている。ライブラリのGitHubリポジトリは https://github.com/zumerlab/zumly で、デモは https://zumerlab.github.io/zumly で閲覧できる。
このバージョンはリストからすべての重要ポイントを保持し、元テキストに暗示されたもの以外の推測を避けつつ、曖昧な表現を排した明確で理解しやすい概要を提示しています。
本文
ウェブインターフェースにおけるズーム機能の活用方法は、実質的に2つが確立されています。どちらも目的やトレードオフが異なります。私はそれらとは別に3番目の手法を構築しましたので、それぞれが得意とする点と弱点について公平に説明します。
-
Prezi
Preziはプレゼンテーション用ズームキャンバスを先駆け、現在でもその分野で市場リーダーです。最近ではAI搭載の生成機能やテキスト編集ツールも追加されました。洗練された製品で実際に多く採用されています。
ただし、Preziはクローズドプラットフォームであり、ライブラリではありません。そのズームエンジンを自分のアプリで利用することはできません。機能が充実した料金は月額15ドルからで、PowerPointへのエクスポート時にはすべてのズーム効果が静的スライドに変換されます。ユーザーからは「ズームやパンのトランジションが動揺を引き起こす」といった苦情が繰り返し寄せられています。そして根本的には、Preziは事前に配置されたフレーム間でストーリーテリングを行うためにズームを利用しており、ナビゲーションモデルではなくプレゼンテーションモデルです。 -
impress.js
impress.js は Prezi のようなズームをオープンウェブへ持ち込みました。CSS3の変形とトランジションに基づくプレゼンテーションフレームワークで、Prezi に直接インスパイアされています。リリース時には本当に画期的でした。
その構造はステップベースです:3D空間上に「ステップ」を配置し、カメラがそれらを移動します。プレゼンテーションには最適ですが、ユーザーがズームでコンテンツへナビゲートするアプリ作りには役立ちません。impress.js にはビューの動的マウント・アンマウント、ズーム深度管理、ナビゲーション状態処理といった概念がありません。スライドデッキエンジンであり、ズームはトリックに過ぎないのです。 -
Zumly(私が作成したもの)
ここでは自分が構築した Zumly を紹介します。完全開示として、私は唯一の開発者です。
アイデアは従来のページナビゲーションに代わるズームベースの方法を提供することです。要素を「ズーム可能」とマークし、ビューへポインタを合わせると Zumly が遷移を処理して新しいビューを挿入します。それが基本的な仕組みです。
Zumly は 2020 年に Zircle UI(Vue 用ズームライブラリ)から離れた後、学んだことをさらに発展させるために始めました。フレームワーク非依存でズーム部分だけに集中しています。それ以来エンジンを書き直し、アプローチを何度も変更しましたが、現在では実際に動作感に満足しています。
ビューはズーム遷移中に動的にマウント・アンマウントされます。impress.js ではすべてのステップが DOM に同時に存在します。一方 Zumly ではトリガー要素へズームインすると、ターゲットビューが挿入されスケールして配置されます。これはスライドデッキよりも SPA のルーティング仕組みに近いです。
ランディングページ自体を Zumly で構築しているので、コードに触れる前に実際の感覚を確認できます。
他にもこの領域について考えた人がいるか気になります。ズーム UI が成功する要因や失敗する原因は何でしょう?
- ランディングページ(Zumly で構築): https://zumerlab.github.io/zumly
- GitHub: https://github.com/zumerlab/zumly