わかばTRPGシナリオエディタ 使い方
はじめに
TRPGシナリオシートエディターは、お洒落で読みやすいシナリオシートを簡単に作成できる、Webエディターです。私がほしい機能を詰め込んで誠意制作中となります。
このエディターの特徴
1. ブロック積み上げ方式の直感的な編集
セクション、ブロック、サブブロックを積み木のように組み合わせてシナリオを構築。それらは並び替えも可能で、構造化された美しいシナリオシートが自然と出来上がります。
2. グラスモーフィズムデザイン
モダンなグラスモーフィズム（すりガラス風）のデザインを採用。完成したHTMLはどんなシナリオにも合わせやすいスマートで洗練された見た目になります。
3. 自動生成サイドバー＆スクロール箇所ハイライト機能
見出しから自動的に目次を生成し、現在読んでいる箇所をハイライト表示。長いシナリオでも迷子にならず、スムーズに目的の情報にアクセスできます。
4. 完全レスポンシブ対応
PC、タブレット、スマートフォン、あらゆるデバイスで美しく表示。セッション中にスマホで確認する際も、読みやすいレイアウトで表示されます。
エディターの特徴を深掘り
ブロック積み上げ方式とは？
このエディターでは、シナリオを「ブロック」という単位で管理します。
階層構造：
セクション (大見出し・章)
└ ブロック (中見出し)
└ サブブロック (小見出し)例えば、こんな風に構築します：
セクション「導入」
├ ブロック「事件の発生」
│ ├ サブブロック「第一発見者の証言」
│ └ サブブロック「現場の様子」
└ ブロック「PCたちの招集」
セクション「調査パート」
├ ブロック「聞き込み調査」
└ ブロック「現場検証」
セクション「シナリオ概要」
├ ブロック「このシナリオの狙い」
│ ├ サブブロック「シナリオの遊び方」
│ ├ サブブロック「こんな人にオススメ」
└ ブロック「背景・真相」この方式の利点：
- 構造が一目瞭然: シナリオ全体の流れが視覚的に理解できる
- 再配置が簡単: ドラッグ&ドロップで順序変更
- コピー機能: 複製ボタンで同じ構造のブロックを瞬時に作成
グラスモーフィズムデザイン
完成したシナリオシートは、以下の視覚効果で彩られます：
- 半透明のパネル: 背景が透けて見えるすりガラス効果
- 繊細な影: 要素が浮いているような立体感
- カスタマイズ可能なテーマカラー: 色相スライダーで自由に変更可能
プレイヤーにとって「読みやすい」「読みたくなる」というビジュアルを目指しています。
自動生成サイドバーとスクロールスパイ機能
自動目次生成
- h2（セクション）、h3（ブロック）、h4（サブブロック）から自動的に目次を作成
- クリックでその箇所へ瞬時にジャンプ
- 目次の深さは設定で調整可能（h2のみ、h3まで、h4まで）
スクロールスパイ
- 現在スクロール中の見出しをサイドバーでハイライト表示
- 「今、シナリオのどこを読んでいるか」が常に分かる
- 長大なシナリオでも現在位置を見失わない
レスポンシブ対応の実力
PC
- サイドバーとメインコンテンツを横並びで表示
スマートフォン
- 縦スクロール最適化レイアウト
- ボタンやテキストサイズを自動調整
- タッチ操作に最適化
基本的な使い方
画面構成
ヘッダーエリア（画面上部）
- プロジェクトタイトル入力欄
- 保存ボタン
- ダークモード切替
- プレビューボタン
- 設定ボタン
サイドバー（画面左側）
- 自動生成された目次
- クリックでセクションへジャンプ
メインエリア（画面中央）
- シナリオ編集エリア
- ブロックを積み上げていく場所
ツールパネル（画面右側）
- テキスト装飾ツールバー
- 専用レイアウト挿入パネル
フローティングボタン
- 左下：サイドバーの開閉
- 右下：ツールパネルの開閉
基本操作
1. 新規プロジェクトの作成
- 設定ボタンをクリック
- 「シナリオ読込」から「白紙の状態」または「テンプレート」を選択
2. セクションの追加
- 右側パネルの「セクション追加」ボタンをクリック
- セクションタイトルを入力
3. テキストの入力
- セクション内の編集可能エリアをクリック
- 自由にテキストを入力
4. 保存
- ヘッダーの保存ボタンをクリック（またはCtrl+S）
- ブラウザ内のデータベース（IndexedDB）に自動保存
5. HTML出力
- 設定ボタン → 「HTML出力」
- 完成したシナリオシートがダウンロードされます
ブロックの種類と使い方
基本ブロック
セクション（大見出し）
- 使用場面：章、大きなシーン区切り
- 見出しレベル：h2
- 追加方法：ツールパネル > 「セクション追加」
ブロック（中見出し）
- 使用場面：セクション内の小区分
- 見出しレベル：h3
- 追加方法：ツールパネル > 「ブロック追加」
サブブロック（小見出し）
- 使用場面：ブロック内のさらに細かい区分
- 見出しレベル：h4
- 追加方法：ツールパネル > 「サブブロック追加」
装飾付きサブブロック
- 通常のサブブロックに背景色と枠線を追加
- 重要な情報を目立たせたい時に使用
専用レイアウト（特殊ブロック）
ハンドアウトブロック
- PCのハンドアウトなどの情報を記載
- ヘッダー要素（推奨：推奨職業・流派）
- 表情報（公開情報）
- 裏情報（秘匿情報）
- フッター要素（本当の使命など）
- 表/裏の要素はクリックするとテキストコピー可能
NPCプロフィールブロック
- キャラクター紹介専用レイアウト
- 2つのレイアウトから選択：
- シンプル版：短文で表現できる紹介文
- 詳細版：キャラの背景までがっつり書く紹介文
- 画像プレースホルダーをクリックで画像挿入
シーン表ブロック
- ランダムシーン用のダイス表
- シーン数を選択（2〜12）
- 各シーンに番号と内容を記載
- シーン表の内容はクリックでコピーできる
敵データブロック
- 敵キャラクターのステータス記載用
- データグリッド形式で見やすく整理
トピックブロック
- ちょっと本編から外れた何かしらの情報や余談など
- 目立つ枠と背景色
キーボードショートカット
編集操作
- Ctrl+S: プロジェクトを保存 ← ブラウザ機能に負けて機能してません
- Ctrl+Enter: 現在のブロックから抜ける（親要素に移動）入れ子になったブロック内で編集中、一つ上の階層に移動したい時に使用 例：サブブロック内で編集中 → Ctrl+Enter → ブロックレベルに移動
- Shift+Enter: ブロック内で改行（段落を分けずに改行）
文字装飾のショートカット
- Ctrl+B: 太字
- Ctrl+I: 斜体
- Ctrl+U: 下線
テキスト装飾機能
文字装飾
- 太字（Ctrl+B）: 重要な単語を強調
- 斜体（Ctrl+I）: 読み仮名、外来語
- 下線（Ctrl+U）: 重要箇所にアンダーライン
- 文字色: カラーピッカーで自由に設定
- 背景色: ハイライト効果
- フォントサイズ: 大/小ボタンで調整
整列
- 左揃え: 通常の文章
- 中央揃え: 見出し、キャプション
- 右揃え: 署名、日付
リスト
- 箇条書きリスト: 項目の列挙
- 番号付きリスト: 手順、順序のある説明
その他
- リンク挿入: 外部資料へのリンク
- 水平線: セクション区切り
- 装飾クリア: すべての書式を削除
画像の挿入
画像の種類
横長画像
- 推奨サイズ：1920×1080pxなど
- 使用場面：シーン描写、風景
縦長画像
- 推奨サイズ：1080×1920px程度
- 使用場面：立ち絵、キャラクター
正方形画像
- 推奨サイズ：1080×1080px
- 使用場面：アイコン、小物
挿入方法
- ツールパネル > 「画像」セクション
- 画像タイプを選択（横長/縦長/正方形）
- プレースホルダー（「）が挿入される
- プレースホルダーをクリック
- 画像ファイルを選択 or URLを入力
画像の差し替え
- 挿入済み画像をクリック
- 「画像を変更」で別の画像に差し替え可能
プロジェクト管理
保存
自動保存
- ブラウザ内のデータベース（IndexedDB）に保存
- プロジェクトデータ、画像など、すべてがブラウザ内に保存されます
- ページを閉じても内容は保持されます
- 注：現在のプロジェクトIDや設定値など、小さなデータのみlocalStorageに保存
手動保存
- 保存ボタンクリック or Ctrl+S
- 確認メッセージが表示されます
プロジェクトファイル
シナリオ保存（.json）
- 設定 > 「シナリオ保存」
- プロジェクト全体をJSONファイルでエクスポート
- 他のPCでの編集、バックアップに
シナリオ読込
- 設定 > 「シナリオ読込」
- 保存したJSONファイルを読み込み
- テンプレートからの開始も可能
テーマカスタマイズ
テーマカラー変更
- 設定ボタンをクリック
- 「テーマカラー」セクション
- 色相スライダーを左右に動かす
- シナリオシート全体の配色が変化
色相の範囲：
- 0°：赤
- 60°：黄色
- 120°：緑
- 180°：シアン
- 240°：青（デフォルト）
- 300°：マゼンタ
背景画像の設定
- 設定ボタンをクリック
- 「背景画像」セクション
- 画像URLを入力 or ファイルを選択
- 完成したHTMLの背景に適用されます
推奨設定：
- 画像サイズ：1920×1080px以上
- ファイル形式：JPG, PNG
- 明るさ：やや暗めの画像推奨（テキストが読みやすくなる）
ダークモード
- ヘッダーのダークモード切替ボタンをクリック
- エディター画面の明るさを切り替え
- 夜間の作業や、目に優しい環境で編集可能
出力機能
HTML出力
使い方：
- 設定 > 「HTML出力」
- シナリオシート.htmlがダウンロードされます
- ブラウザで開いて確認
出力されるHTML の特徴：
- グラスモーフィズムデザイン
- 自動生成サイドバー
- スクロールスパイ機能
- レスポンシブ対応
完成したHTMLの配布方法：
- Webサーバーに配置
- HTMLファイルをBOOTHなどのプラットフォームで配布
テキスト出力
使い方：
- 設定 > 「テキスト出力」
- 形式を選択：
- マークダウン形式
- プレーンテキスト形式
用途：
- テキストベースのツールへのコピー
- マークダウン対応ツールへの取り込み
- 検索・置換作業
便利な機能
複製ボタン
各ブロックの右上に表示される「複製」ボタン：
- ブロック全体を瞬時にコピー
- ID も自動的に再生成される
- 画像も含めて完全複製
活用例：
- 同じ構造のNPCを複数作成
- ハンドアウトのテンプレート化
- 繰り返し使う構造の効率化
削除ボタン
各ブロックの右上に表示される「削除」ボタン：
- ブロック全体を削除
- 親のブロックを削除した場合、子ブロックも削除
検索・置換
- Ctrl+Fで検索パネルを表示
- キーワード検索
- 一括置換
よくある質問（FAQ）
Q: データはどこに保存されますか？
A: ブラウザ内のデータベース（IndexedDB）に保存されます。プロジェクトの本体データや画像は、すべてIndexedDBで管理されています。ブラウザのデータを削除すると消えるため、定期的に「シナリオ保存」でJSONファイルをエクスポートしてバックアップすることを推奨します。
Q: 複数のシナリオを管理できますか？
A: 各シナリオを別々のJSONファイルとして保存し、必要に応じて読み込むことで管理できます。
Q: HTMLを編集したいのですが？
A: 出力されたHTMLはテキストエディタで自由に編集可能です。ただし、再度当エディターで読み込むことはできません。当エディタで再編集を行う場合はシナリオ保存機能を使ってJSONファイルとして残しておいてください。
Q: 画像のサイズ制限は？
A: ブラウザの制限に依存しますが、1ファイル5MB以下を推奨します。大きすぎる画像があると書き出したHTMLファイルサイズも大きくなります。一応アップロード時にエンコードをかけて圧縮はしています。
Q: スマホでも編集できますか？
A: 閲覧は最適化されていますが、編集作業はPCを推奨します
