ユーザーインターフェース
ナビゲーションバー
再生モードで、ページの左下隅にマウスを移動すると、ナビゲーションバーが表示されます。 
✨ グローバルレイヤー を使用してナビゲーションバーを拡張できます。
ナビゲーション操作
| キーボードショートカット | ナビゲーションバーのボタン | 説明 |
|---|---|---|
| f | 全画面表示の切り替え | |
| right / space | 次のアニメーションまたはスライド | |
| left | 前のアニメーションまたはスライド | |
| up | - | 前のスライド |
| down | - | 次のスライド |
| o | クイックオーバービュー の切り替え | |
| d | ダークモードの切り替え | |
| - | カメラビュー の切り替え | |
| - | ✨ 録画 を開始 | |
| - | プレゼンターモード に入る | |
| - | ✨ 統合エディター の切り替え | |
| - | ブラウザエクスポーター に入る | |
| - | PDF をダウンロード。✨ ビルド時の PDF 生成 を参照 | |
| - | スライドについての情報を表示 | |
| - | その他のオプション | |
| g | - | goto... を表示 |
ショートカットを設定 できます。
クイックオーバービュー
o を押すか、ナビゲーションバーの ボタンをクリックすると、スライドのオーバービューが表示され、簡単にスライド間をジャンプできます。
プレゼンターモード
プレゼンターモードに入るには、ナビゲーションパネルの ボタンをクリックするか、http://localhost:<port>/presenter にアクセスします。
プレゼンテーション中は、2 つのブラウザウィンドウを開くことをお勧めします。1 つはプレイモード (観客用)、もう 1 つはプレゼンターモード (自分用)。その後、最初の画面を観客と共有し、2 番目の画面を自分用に保持できます。
プレゼンターモードでスライドをナビゲートするたびに、他のすべての開かれたページは自動的にこのナビゲーションに従い、プレゼンターと同期を保ちます。
発表者レイアウト
v0.50.0 以降で利用可能
発表者ビューでは、ナビゲーションバーのレイアウト切り替えボタン をクリックして切り替えられる、3 つの異なるレイアウトが用意されています:
- レイアウト 1 (デフォルト): 現在のスライドが上部に大きく表示され、下部にノートと次のスライドのプレビューが表示されます
- レイアウト 2: 左側にノートパネル、右側に現在のスライドと次のスライドが縦に積み重なって表示されます
- レイアウト 3: 左側にノートと現在のスライド、右側に次のスライドのプレビューが大きく表示されます 各レイアウトは異なる画面サイズやプレゼンテーションの好みに最適化されています。
スクリーンミラー
v0.50.0 以降で利用可能
発表者ビューでは、メインのスライド領域を「スクリーンミラー」モードに切り替えることができます。これにより、別のモニターやウィンドウをキャプチャして発表者ビューに直接表示できます。
「スクリーンミラー」オプションを発表者ビューのセグメントコントロールでクリックし、ミラーリングしたい画面やウィンドウを選択します。これは、プロジェクターや外部ディスプレイで観客が正確に何を見ているかを確認したい場合に便利です（例：ライブコーディングやライブデモ）。
スライドオーバービュー
v0.48.0 以降で利用可能
クイックオーバービューパネル を開いてから右上の をクリックするか、http://localhost:<port>/overview に直接アクセスしてすべてのスライドのオーバービューを確認できます。
オーバービューページは、すべてのスライドの線形リストを提供し、横にすべてのノートがあります。ノートをダブルクリックしてノートを直接編集し、クリックスライダーをドラッグしてスライド内のステップをプレビューできます。
ノートエディター
v0.52.0 以降で利用可能
Slidev は http://localhost:<port>/notes-edit でバッチノートエディタを提供しており、すべてのスライドのノートを単一のテキストエリアで編集できます。
各スライドのノートは --- #[slide-number] マーカーで区切られています。変更はデバウンス付きで自動的に保存されます。
これは、スライドを切り替えることなく、すべてのスピーカーノートを一箇所で書いたり確認したりしたい場合に便利です。
描画 UI
参照:
録画 UI
参照:
ブラウザエクスポーター
参照:
設定
ナビゲーションバーの ボタンをクリックして、追加の設定にアクセスします。
CSS フィルター
v0.50.0 以降で利用可能
異なるプロジェクターやディスプレイでプレゼンテーションを行う際、色が予想と異なる場合があります。Slidev はリアルタイムで表示を調整できる CSS フィルターコントロールを提供しています:
- 反転: すべての色を反転
- 明るさ: 全体の明るさを調整 (0.5 - 1.5)
- コントラスト: コントラストレベルを調整 (0.5 - 1.5)
- 彩度: 色の彩度を調整 (0.5 - 1.5)
- セピア: セピア調の効果を追加
- 色相回転: 色相を度単位でシフト (-180 から 180)
これらの設定はローカルに保存され、セッション間で持続します。フィルターが有効な場合、設定ボタンにドットのインジケーターが表示されます。
非アクティブ時のカーソル非表示
v0.50.0 以降で利用可能
有効にすると、プレゼンテーション中に一定期間操作がないとカーソルが自動的に非表示になります。これにより、観客にとってすっきりとした表示が提供されます。
スライドスケール
ビューポートに合わせてスライドを拡大縮小する「フィット」モードと、スライドをネイティブ解像度で表示する「1:1」モードから選択できます。
ウェイクロック
有効にすると、プレゼンテーション中に画面が暗くなったりロックされたりするのを防ぎます。Wake Lock API のブラウザサポートが必要です。
グローバルレイヤー
プレゼンテーション全体またはスライドごとに、スライドの下または上にカスタム UI を追加できます。