スライド作成ツールを公開しました
プレゼン資料を作るとき、専用アプリを起動してファイルを保存して…という手間を省きたいと思ったことはないでしょうか。「スライド作成」ツールはブラウザだけでスライドを作成・編集し、そのままプレゼンテーションとして発表できるツールです。
ページは「エディター（編集画面）」と「ビューア（発表画面）」の2画面に分かれており、編集した内容はLocalStorageを通じてリアルタイムで発表画面に反映されます。
エディターの機能
複数スライドの管理
左パネルにスライド一覧がサムネイル表示されます。スライドの追加・削除・並び替えが可能で、クリックで編集対象を切り替えられます。
3種類の要素を自由に配置
各スライドにはテキスト・SVG・画像の3種類の要素を自由に配置できます。
| 要素種別 | できること |
|---|---|
| テキスト | フォント・サイズ・色・太さ・配置を設定 |
| SVG | SVGコードを貼り付けまたはファイル読み込み・カラー変更 |
| 画像 | 画像ファイルの読み込み・配置 |
すべての要素に共通して以下の設定が可能です。
| 設定項目 | 内容 |
|---|---|
| X / Y座標 | ピクセル単位で位置指定 |
| 幅・高さ | 数値入力（SVGはアスペクト比ロック対応） |
| 回転 | 0〜360度スライダー |
| 透明度 | 0〜100%スライダー |
| Z-index | 重ね順を数値で指定 |
テキスト要素の設定
- フォント：5種類（Noto Sans JP・Inter・Noto Serif JP・M PLUS 1p・Zen Kaku Gothic New）
- フォントウェイト：300〜900の7段階
- フォントサイズ：スライダーで調整
- 文字色：カラーピッカー
- テキスト配置：左・中央・右
背景設定
スライドごとに背景を設定できます。
- 無地：単色カラーピッカーで指定
- グラデーション：方向と色を設定
- 画像：背景画像を読み込み
データの活用機能
CSVからグラフを自動生成
CSVファイルを読み込むと、データをもとにグラフSVGを自動生成してスライドに追加できます。
| グラフ種別 | 向いているデータ |
|---|---|
| 折れ線グラフ | 時系列の推移・トレンド |
| 棒グラフ | 項目間の比較 |
| 円グラフ | 構成比・シェア |
| 面グラフ | 累積・割合の推移 |
CSVからテーブルを生成
CSVを読み込んでHTMLテーブルに変換し、テキスト要素としてスライドに追加することもできます。
画像のSVGトレース
画像ファイルを読み込むとSVGパスに変換（トレース）してスライド上に配置できます。
Undo / Redo で安心して編集
編集操作はすべて履歴に記録され、何度でも元に戻せます。
| 操作 | ショートカット |
|---|---|
| 元に戻す（Undo） | Cmd / Ctrl + Z |
| やり直す（Redo） | Cmd / Ctrl + Shift + Z |
ビューア（発表画面）の操作
発表画面ではキーボードだけでスライドを操作できます。
| キー | 動作 |
|---|---|
| → / Space / Enter | 次のスライドへ進む |
| ← / Backspace | 前のスライドへ戻る |
| F | フルスクリーン表示 |
| Esc | フルスクリーム解除 |
ウィンドウサイズに合わせて自動的にスケーリングされるため、大型モニターでもラップトップでも崩れずに表示されます。
データのエクスポート・インポート
作成したスライドデッキはJSONファイルとしてエクスポートできます。インポートも対応しているため、別のデバイスや他のメンバーとデッキを共有することも可能です。
こんな方におすすめ
- 社内会議や勉強会の資料をサクッと作りたい方
- 外出先でスライドを急遽作成・発表する必要がある方
- CSVデータをそのままグラフ付きスライドにしたい方
- インストール不要のプレゼンツールを探している方