わかばTRPGシナリオエディタ – マニュアル

エディタの概要

わかばTRPGシナリオエディタは、TRPGシナリオを作成・編集するためのブラウザベースのWebエディタです。

主な特徴

階層的なアウトライン構造

シナリオを3段階の階層構造（セクション → ブロック → サブブロック）で整理できます。

複雑なシナリオも、見出しを使った階層アウトラインで分かりやすく管理できます。左パネルの目次から、ドラッグ&ドロップで簡単に並び替えも可能です。

豊富な表現力

豊富なブロックや装飾機能を使って、自由にシナリオシートを作成できます。ハンドアウト、NPC紹介、シーン表、エネミーデータなど、TRPGに特化した専用ブロックを用意。テキスト装飾、画像挿入、テーブル、グリッドなど、様々な要素を組み合わせてリッチな表現が可能です。

グラスモーフィズムデザイン

出力されるHTMLは、グラスモーフィズム（磨りガラス調）デザインを採用しています。

ユーザビリティ機能

出力されたHTMLは、様々な環境で閲覧できるよう設計されています。

• ライト/ダークモード対応：目に優しい表示切り替え
• モバイル対応：スマートフォンやタブレットでも見やすいレスポンシブデザイン
• ワンクリックコピー：セッション中の情報共有に便利なコピー機能
• 追従ナビゲーション：常に目次が表示され、目的の箇所にすぐジャンプ

多様な出力形式

• HTML出力：完全なスタイル付きHTMLファイルとして出力
• PDF出力：ブラウザの印刷機能からPDF化も可能
• マークダウン/テキスト出力：他のツールへの取り込みに便利
• マークダウン読込：既存のテキストからシナリオを作成可能

画面構成

エディタは大きく分けて 4つのエリア で構成されています。

ヘッダー（画面上部）

シナリオタイトルの入力と、保存・プレビュー・設定などの主要な操作を行うエリアです。

作成中のシナリオ名を付けたり、完成形を確認したり、テーマカラーや背景画像をカスタマイズしたりできます。

目次（左パネル）

見出しから自動生成される階層目次です。

クリックで該当箇所にジャンプできるほか、ドラッグ&ドロップでセクションやブロックの順序を並び替えることもできます。作業中に邪魔な場合は、折りたたんで非表示にすることも可能です。

キャンバス（中央下）

シナリオの本体を編集するメインエリアです。

テキストを入力したり、画像やテーブルを挿入したり、セクション・ブロック構造を組み立てたりします。編集した内容はリアルタイムで反映されます。

ツールバー（中央上）

テキストの装飾（太字、色、サイズなど）や、要素の追加（画像、テーブル、ボタンなど）を行うツールバーです。

元に戻す/やり直す、検索/置換など、編集作業を効率化する機能も揃っています。

ブロック追加（右パネル）

シナリオの構造を作るブロックを追加するエリアです。

基本構造（セクション、ブロック、サブブロック）のほか、ハンドアウトやNPC紹介、シーン表など、TRPGに特化した専用ブロックを挿入できます。作業中に邪魔な場合は、折りたたんで非表示にすることも可能です。

---

各エリアの詳しい使い方は、以下のセクションで解説します。

基本的な使い方

シナリオ作成の流れ

1. 起動：スタート画面で「最初から」または「続きから」を選択
2. タイトル入力：ヘッダーのタイトル欄にシナリオ名を入力
3. セクション追加：右パネルから「セクション追加」でメイン構造を作成
4. 階層化：セクション内に「ブロック」→「サブブロック」と細分化
5. テキスト編集：キャンバスで内容を記述
6. 装飾：ツールバーで太字・色・サイズなどを装飾
7. 専用ブロック追加：必要に応じてハンドアウト、NPC、シーン表などを挿入
8. 一時保存：Ctrl+S または保存ボタンで保存
9. プレビュー：プレビューボタンで完成形を確認
10. 出力：HTML/PDF形式で出力

3段階の階層構造とは

シナリオを整理するために、以下の3段階の階層を使います。

各種シーン（セクション - H2）
├─ 導入シーン（ブロック - H3）
├─ メインシーン（ブロック - H3）
│  ├─ メイン1 図書室の一幕（サブブロック - H4）
│  └─ メイン2 夜の物音（サブブロック - H4）

• セクション（H2）：一番大きな区切り（例：導入、メイン、クライマックス）
• ブロック（H3）：セクション内の中規模な区切り（例：シーン1、シーン2）
• サブブロック（H4）：さらに細かい区切り（例：場面A、場面B）

この階層構造は左の目次に自動的に反映され、ドラッグ&ドロップで並び替えることができます。

---

ヘッダーの機能

画面上部のヘッダーには、シナリオ全体の操作ボタンが配置されています。

シナリオタイトル入力欄

• 場所：ヘッダー左側
• 説明：編集中のシナリオ名を入力

保存ボタン 💾

• 場所：ヘッダー右側
• ショートカット：Ctrl+S（Mac: ⌘+S）
• 説明：編集内容をブラウザに保存。一応オート保存機能もありますが、作業が終わったら必ず保存しましょう。次回は「続きから」で再開できます

ダーク/ライトモード切り替え 🌙

• 場所：ヘッダー右側
• 説明：エディタのテーマをダーク/ライトモードに切り替え（出力したHTMLにも切り替え機能はあります）

プレビューボタン 👁

• 場所：ヘッダー右側
• 説明：編集中のシナリオがどのように表示されるかを確認できます

設定ボタン ⚙️

• 場所：ヘッダー右側
• 説明：テーマカラー、背景画像、出力設定などを管理
• 詳細：設定とカスタマイズを参照

---

左パネル：目次

左パネルには、自動生成される見出しの階層目次が表示されます。

目次の機能

自動生成

エディタ内の見出し（H2〜H6）から自動的に目次が生成されます。

• セクション（H2）
• ブロック（H3）
• サブブロック（H4）
• それ以下（H5、H6）

階層表示

見出しのレベルに応じて階層的に表示され、自動的に番号が付きます。

1. 各種シーン
  1.1 導入シーン
  1.2 メインシーン
    1.2.1 図書室の一幕
    1.2.2 夜の物音

ジャンプ機能

目次の項目をクリックすると、エディタ内の該当見出しにジャンプします。

ドラッグ&ドロップ並び替え

目次項目をドラッグして、同じ階層内でセクション/ブロック構造を並び替えることができます。

折りたたみボタン

• 場所：目次パネル右上
• 説明：目次パネルを一時的に閉じて編集画面を広げます。画面左端のフローティングボタンで再表示

目次の表示階層設定

設定モーダルで、目次に表示する階層を選択できます。

• h2まで：セクションのみ
• h3まで：ブロックまで
• h4まで：サブブロックまで（デフォルト）
• すべて：h6まですべて表示

---

上のツールバー：装飾と編集

エディタキャンバスの上部に固定表示されるツールバーです。テキストの装飾や要素の追加を行います。

キーボードショートカット表示

ツールバー上部に、便利なショートカットが表示されています。

• Enter：段落分け
• Shift+Enter：改行のみ
• Ctrl/⌘+Enter：親要素を抜ける
• Ctrl/⌘+S：保存

元に戻す/やり直す

元に戻す

• アイコン：左向き矢印
• ショートカット：Ctrl+Z（Mac: ⌘+Z）
• 説明：直前の操作を取り消す

やり直す

• アイコン：右向き矢印
• ショートカット：Ctrl+Y（Mac: ⌘+Y）
• 説明：取り消した操作をやり直す

テキスト装飾ツール

太字

• 説明：選択テキストを太くして目立たせる

斜体

• 説明：選択テキストを斜めにするときに

下線

• 説明：選択テキストをに下線を引くときに

文字色

• 説明：選択テキストに色付け（ダーク/ライトモード両対応）
• カラー選択肢：
• 黒（標準）
• 赤、青、緑、黄、紫、橙、桃
• 見えにくい色（グレー）

背景色

• 説明：選択テキストを背景色変更（ダーク/ライトモード両対応）
• 背景色選択肢：
• なし（透明、デフォルト）
• 赤背景、青背景、緑背景、黄背景、橙背景

文字サイズ拡大/縮小

• 拡大：文字サイズを1サイズ大きく
• 縮小：文字サイズを1サイズ小さく

リンク

• 説明：選択テキストに外部サイトや参考資料へのリンクを貼る
• 使い方：

1. テキストを選択
2. リンクボタンをクリック
3. ページ内の見出しを選択 or URLを入力

書式をクリア

• 機能：装飾を全て取り除いて標準の状態に戻す
• 効果：すべての装飾（太字、色、サイズなど）を除去

テキスト整列ツール

左揃え

• 機能：文字を左端に寄せる（通常のテキスト）

中央揃え

• 機能：文字を中央に寄せる（見出しなどに）

右揃え

• 機能：文字を右端に寄せる（署名などに）

リストツール

箇条書き

• 説明：項目を箇条書きで並べたいときに

番号付きリスト

• 説明：項目を箇条書き（番号付き）で並べたいときに

検索・置換

検索/置換パネル

• アイコン：虫眼鏡
• ショートカット：Ctrl+F（Mac: ⌘+F）
• 説明：特定のテキストを検索したり、一括置換したいときに

検索パネルの使い方：

1. 検索テキスト：検索文字列を入力
2. 置換テキスト：置換先文字列を入力
3. 前を検索/次を検索：マッチした箇所に移動
4. 置換/すべて置換：1つだけまたは全部置換
5. 大文字小文字区別：チェックで区別ON/OFF

要素追加ツール

画像挿入

背景や立ち絵などの画像を配置できます。

使い方：

1. 画像ボタンをクリック：ツールバーの画像ボタンをクリック
2. 画像タイプを選択：モーダルで以下から選択
   横長画像：背景・風景向け
   スクエア画像：アイテム・アイコン向け
   立ち絵：キャラクター向け
3. キャプション表示を選択：
   キャプションなし：画像のみ
   キャプションあり：画像下に説明文を追加
4. 「画像を挿入」ボタンをクリック：空の画像領域が挿入されます

1. 挿入された空の画像領域をクリック：画像選択モーダルが開きます
2. 新しい画像をアップロード：ファイルを選択（最大5MB、JPEG/PNG/GIF/WebP）
3. 既存画像から選択：過去にアップロードした画像がある場合、一覧から選択可能
4. 画像の変更：表示された画像をクリックすると、再度画像選択モーダルが開きます

テーブル挿入

行と列で構成された表形式のデータを配置できます。

使い方：

1. テーブルボタンをクリック：ツールバーのテーブルボタンをクリック
2. サイズを指定：モーダルで以下のいずれかの方法で指定
   方法A：グリッド選択：8×8のグリッドをマウスで選択（デフォルト3×3）
   方法B：カスタム入力：行数（1〜20）と列数（1〜20）を数値で入力
3. 「テーブルを挿入」ボタンをクリック：指定したサイズのテーブルが挿入されます
4. 内容を編集：各セルをクリックして内容を入力

グリッド挿入

横並びのタイル型パネルを配置できます。

使い方：

1. グリッドボタンをクリック：ツールバーのグリッドボタンをクリック
2. アイテム数を指定：モーダルで以下のいずれかの方法で指定
   方法A：アイテム選択：最大20個のアイテムを視覚的に選択（デフォルト4個）
   方法B：カスタム入力：アイテム数（1〜20）を数値で入力
3. 「グリッドを挿入」ボタンをクリック：指定した数のグリッドアイテムが挿入されます

• 内容を編集：各グリッドアイテムをクリックして内容を入力
  ラベルと内容の編集や、アイテムの追加、削除ができます。

ボタン挿入 🔘

リンク付きボタンを配置できます（複数追加可能）。

使い方：

1. ボタンボタンをクリック：ツールバーのボタンボタンをクリック
2. ボタン数を指定：モーダルで以下のいずれかの方法で指定
   方法A：数値選択：1〜6個のボタンを視覚的に選択（デフォルト2個）
   方法B：カスタム入力：ボタン数（1〜6）を数値で入力
3. 「ボタンを挿入」ボタンをクリック：指定した数のボタンが挿入されます

• リンク先を設定：挿入後、各ボタンをクリックしてリンク先URLを設定

水平線挿入 ━

セクション間を区切る横線を配置できます。ボタンをクリックするだけで挿入されます。

特殊ブロック

装飾ブロック

見出し・アイコン・カラーをカスタマイズ可能な装飾ブロックを挿入します。

使い方：

1. テキストブロックボタンをクリック：ツールバーのテキストブロックボタンをクリック
2. プリセットから選択（オプション）：以下のプリセットから選択できます
   概要、処理、描写、情報、判定、指針、注意、補足、GM情報、備考から選択
3. カスタマイズ（オプション）
   見出しラベル：ブロックのタイトルを入力
   アイコン選択：アイコンから選択（本、歯車、コンパスなど）
   カラー選択：青、紫、緑、黄、オレンジ、赤、グレー、テーマカラーなどから選択
   ワンクリックコピー：チェックを入れると、クリックでテキストをコピー可能
   プリセットとして保存（オプション）：カスタマイズした設定を保存して再利用可能
4. 「挿入」ボタンをクリック：カスタマイズしたテキストブロックが挿入されます

セリフ/台詞

描写テキストの中で、キャラクターの台詞を表現する専用ブロックです。

使い方：

1. セリフボタンをクリック：ツールバーのセリフボタンをクリック
2. パターンを選択：モーダルで以下から選択
   テキストのみ：台詞テキストだけのシンプル表示
   テキスト＋名前：キャラクター名付き
   テキスト＋画像：キャラクター立ち絵付き
   フル（画像＋名前）：立ち絵とキャラクター名の両方付き
3. 位置を選択：チャットUI風の表示位置を選択
   左、右から選択
4. 「挿入」ボタンをクリック：台詞ブロックが挿入されます

• 画像・名前を設定：挿入後、クリックして設定

画像：画像部分をクリックして画像選択モーダルを開く
名前：名前部分をクリックしてキャラクター名を編集
特徴：ワンクリックコピー対応

---

右パネル：ブロック追加

右パネルには、シナリオの構造を作るブロックを追加するボタンが配置されています。

基本ブロック

3段階の階層構造（階層アウトライン）で整理できます。作成した階層は左側の目次から並び替えできます。
・フラット：シンプルで読みやすいスタイル
・リッチ：立体感があり強調されたスタイル

セクション追加

• タグ：H2
• 説明：一番大きなセクションを追加。まずはここから

ブロック追加

• タグ：H3
• 説明：セクションの中でさらに細かくブロック分け

サブブロック追加

• タグ：H4
• 説明：ブロック内をさらに細かく分けるときに

作成されたセクションやブロックは、複製、削除などを行えます。

専用ブロック

どの階層にも追加できます。現在いるブロックの階下に挿入され、階層に応じてhタグが自動調整されます。
専用ブロックの詳細は、次のセクション「専用ブロックの使い方」を参照してください。

ハンドアウト

PC用の秘匿情報などの記載に便利なブロックです（ワンクリックコピー対応）。

使い方：

1. ハンドアウトボタンをクリック：右パネルの「ハンドアウト」ボタンをクリック
2. モーダルで設定：
   作成数を選択：1〜10個のハンドアウトを作成できます
   出力要素を選択：必要な要素にチェック
   ・ハンドアウトヘッダー（推奨・使命）
   ・表（表テキスト）
   ・裏（裏テキスト・秘密情報）
   ・ハンドアウトフッター（本当の使命）
3. 「作成」ボタンをクリック：指定した数のハンドアウトが挿入されます
4. 各セクションを編集：挿入されたハンドアウトの各部分をクリックして編集

NPC紹介 👤

NPC紹介をリッチなビジュアルで表現できるブロックです。台詞やステータス情報を載せて表現できます。

使い方：

1. NPC紹介ボタンをクリック：右パネルの「NPC紹介」ボタンをクリック
2. レイアウトを選択：モーダルで以下から選択
   シンプル版：画像とステータスを横並びにコンパクト配置
   詳細版：上部に画像とステータス、下部に詳しい説明を配置
3. 「作成」ボタンをクリック：選択したレイアウトのNPC紹介ブロックが挿入されます
4. 各要素を編集：

• NPC名：見出し部分をクリックして名前を入力
• NPC画像：画像プレースホルダーをクリック
  ・画像選択モーダルが開きます
  ・新規アップロード または 既存画像から選択
• 台詞テキスト：台詞オーバーレイ部分をクリックして編集、エンターで最大三つまで追加可能
• ステータス：既存ステータス：ラベル・値をクリックして編集「+」「-」ボタンでステータスの追加削除
• 説明セクション：キャラクターの説明を追加可能

---

シーン表

ダイスで決定するランダムシーン用のブロックです（ワンクリックコピー対応）。

使い方：

1. シーン表ボタンをクリック：右パネルの「シーン表」ボタンをクリック
2. ダイス種類を選択：モーダルで以下から選択
   ショートカットボタン：よく使うダイスをワンクリック選択
   ・2D6：11シーン（2〜12の範囲）
   ・1D12：12シーン（1〜12の範囲）
   ・1D9：9シーン（1〜9の範囲）
   ・1D6：6シーン（1〜6の範囲）
   自由選択：カスタム入力欄でシーン数を指定（2〜20の範囲）
3. 「作成」ボタンをクリック：指定した数のシーン表が挿入されます
4. 各シーンを編集：
   シーン番号：自動的に設定されます（ダイスの出目に対応）
   シーンテキスト：各シーンの内容をクリックして編集

---

エネミーデータ

敵キャラクターのステータスやGM操作指南を記載するブロックです。

使い方：

1. エネミーデータボタンをクリック：右パネルの「エネミーデータ」ボタンをクリック
2. エネミーブロックが挿入されます：ボタンクリックで即座に挿入
3. 各要素を編集：

• エネミー名：見出し部分をクリックして名前を入力
• キャラクターシートリンク：
  • リンクアイコンをクリック
  • URL入力欄にキャラクターシートのURLを入力
• ステータス：
  • 既存ステータス：ラベル・値をクリックして編集
  • 追加：「+ ステータスを追加」ボタンをクリック
  • 削除：ステータス右の削除ボタンをクリック
• その他情報：
  • 既存情報：テキストをクリックして編集
  • 追加：「+ 情報を追加」ボタンをクリック
  • 削除：セクション右の削除ボタンをクリック

---

TOPIC

サイドストーリー、豆知識、補足情報などを記載するブロックです。

使い方：

1. TOPICボタンをクリック：右パネルの「TOPIC」ボタンをクリック
2. TOPICブロックが挿入されます：ボタンクリックで即座に挿入
3. 各要素を編集：

折りたたみボタン

• 場所：ブロックパネル右上
• 機能：ブロックパネルを一時的に閉じて編集画面を広げます
• 再表示：画面右端のフローティングボタンで再表示

---

設定とカスタマイズ

設定ボタンをクリックすると、設定モーダルが開きます。

テーマ設定

テーマカラー（色相）

• 入力型：スライダー（0〜360）
• 説明：シナリオシート全体の色の雰囲気を変更（見出しなど各所で使われます）

背景画像

• 説明：シナリオシートの背景に画像を設定。背景画像は薄くぼかし効果が適応されます。
• 使い方：画像URLを入力、ファイル選択ボタンでファイルを選択
• 対応形式：JPG、PNG、WebPなど

ロゴ画像

• 機能：シナリオタイトルの代わり、または一緒に表示するロゴ
• 推奨形式：WebP、PNG
• 使い方：

1. 画像URLを入力 または ファイルを選択
2. 表示モードを選択：
   ロゴのみ（横長ロゴ向け）
   ロゴ＋テキスト（正方形に近いロゴ向け）

ファイル操作

シナリオ保存

• 説明：編集内容をjsonファイルとして保存する。ブラウザ保存だけに頼らず定期的な保存をおすすめします。
• ショートカット：Ctrl+S

シナリオ読込

• 説明：以前に保存したシナリオjsonファイルを復元

HTML出力

• 説明：完成したシナリオをHTMLファイルとして出力。印刷でPDF出力もできます

テキスト出力

• 説明：シナリオをテキスト・マークダウン形式で出力
• 使い方：

1. 「テキスト出力」ボタンをクリック
2. 形式を選択（マークダウン形式 / プレーンテキスト）
   マークダウン形式

高度な設定

設定モーダル内の「高度な設定」タブには、より詳細なカスタマイズオプションがあります。

目次設定

目次の表示階層：左サイドバーの目次に表示する見出しレベルを設定

• h2まで表示（セクションのみ）：セクション（H2）のみ
• h3まで表示（ブロックまで）：セクション＋ブロック（H2〜H3）
• h4まで表示（サブブロックまで）：セクション＋ブロック＋サブブロック（H2〜H4）【デフォルト】
• すべて表示：すべての見出しレベル（H2〜H6）

変更は即座に左サイドバーに反映されます。

変数設定

シナリオ内で使用する変数（PC1、HO1など）を定義し、表示ルールを設定できます。HTMLで出力した際に、自動的にココフォリアの変数形式にできます。

主な機能：

1. PC、HO定義：
   PC1、PC2、HO1、HO春 などの識別子を定義
   プレフィックス（PC、HOなど）と値（1〜9または任意の文字）を組み合わせ
   変数の追加・削除が可能
2. 表示ルール設定：
   ハンドアウト・処理テキスト：変数形式（{ID}）または ID のみ
   描写・台詞テキスト：変数形式（{ID}）または ID のみ
   その他テキスト：変数形式（{ID}）または ID のみ
3. キャラクター名割り当て：
   各変数にキャラクター名を割り当て
   例：PC1 → 「ジョニー」、HO1 → 「春」
   テキスト内で変数がキャラクター名に変換される

SNSシェア用設定

作成したHTMLをウェブサーバーなどに配置して公開したときに限りますが、Twitter、Discord等、各種SNSでサイトをシェアした際の表示を設定します。

設定項目：

1. og:title（タイトル）：
   SNSカード表示用のタイトル
   空欄の場合はシナリオタイトルが使用されます
2. og:description（説明文）：
   SNSカード表示用の説明文
   推奨：160文字程度
3. og:image（OGP画像）：
   SNSカード表示用の画像URL
   絶対URL（http:// または https:// で始まる）が必要
   推奨サイズ：1200×630px（横長）
   クリアボタンでURL削除可能
4. Favicon（ファビコン）：
   ブラウザタブアイコン
   URL入力またはファイルアップロード
   推奨サイズ：32×32px または 64×64px（正方形）
   クリアボタンで削除可能

フッター設定

公開したシナリオの下部に表示される制作者情報を設定します。

設定項目：

1. サークル名と作者名
2. 各種リンク：
   対応プラットフォーム：X (Twitter)、Bluesky、Misskey、BOOTH、Instagram、ウェブサイト
   アイコンを選択してURLを入力
   追加ボタンでリンクを保存
   既存リンクの編集・削除が可能

よくある質問

Q1. 保存したシナリオはどこに保存されますか？

A1. ブラウザの IndexedDB というローカルストレージに保存されます。ブラウザのデータを削除したり、クリーナーソフトなどを使った際には消えてしまう可能性があるため、定期的に「HTML出力」でバックアップを取ることをおすすめします。

Q2. スマートフォンやタブレットでも使えますか？

A2. 一応動作しますが、PCでの使用を推奨します。編集機能が多いため、大きな画面での作業が効率的です。

Q3. 作成したシナリオを他の人と共有するには？

A3. 「HTML出力」で出力したファイルを相手に共有してください。PCやスマートフォンを問わず、ファイルを開くと自動的にブラウザが起動し、サイトを閲覧できます。ウェブサイトとしてネットに公開するにはレンタルサーバーを借りる、ドメインを取得するなどの工程が必要になります。

Q4. ワンクリックコピーを設定したい

A4. 特定のブロック（ハンドアウト、シーン表、台詞など）にはワンクリックコピーが自動設定されています。自由に任意のテキストワンクリックコピーに対応させることはできないので、その場合は「装飾ブロック」の機能などをご利用ください。

バージョン履歴

Version 2.0（正式リリース） – 2026年2月15日

正式リリース

わかばTRPGシナリオエディタの公開バージョンです。

---

制作者: furenon
バージョン: 2.0
最終更新: 2026年2月15日