ブロックエディタ操作ガイド（図解）

このページでは、kaedevn エディタのブロック操作を画像付きで解説します。各ブロックの見た目・設定項目・操作方法をスクリーンショットで確認できます。

エディタ画面の全体像

エディタは 3 つのエリアで構成されています。

• 左サイドバー（ページ構成） — ページ一覧とブロックのアウトライン表示
• 中央（ブロック一覧） — シナリオを構成するブロックカードが縦に並ぶ
• 右パネル（プロパティ / プレビュー） — 選択中ブロックの詳細編集やプレビュー表示

上部のタブ（ブロック / キャラ / アセット / フロー / レイアウト / 設定）で表示モードを切り替えます。

---

ブロックをクリックしたとき（右パネル）

ブロックカードをクリックすると、画面右側に プロパティ（上部）と プレビュー（下部）の 2 つのパネルが表示されます。何も選択していない場合は「ブロックを選択してください」と表示されます。

プロパティパネル（上部）

選択中のブロックの設定項目が表示され、その場で編集できます。各ブロックのスクリーンショットで右パネルの内容を確認できます。

プレビューパネル（下部）

16:9 のアスペクト比で、選択中のブロック時点の画面を表示します。背景・キャラ・テキストなど、その時点での見た目を、選択ブロックまで累積した状態でスナップショット描画します。リロードボタンで再描画できます。

---

START ブロック

各ページの先頭に 1 つだけ 自動配置されるブロックです。編集・削除・移動・複製はすべて不可。グレーのバッジで表示されます。

START ブロックの下にシナリオの本体（背景・テキスト・キャラなど）を配置していきます。

---

背景ブロック（BG）

背景画像が設定されると、サムネイル と アセット名 がカード上に表示されます。緑の「背景」バッジで識別できます。

• サムネイル — 設定中の背景画像のプレビュー
• アセット名 — ファイル名またはスラッグ
• 「変更」ボタン — 別の画像に差し替えるときに押す
• 「削除」ボタン — ブロックを削除
• ↑↓ ボタン — ブロックの並び順を変更

画像選択モーダル

「変更」ボタンを押すと画像選択モーダルが開きます。

• プロジェクトアセット: 自分でアップロードした画像
• 公式アセット: kaedevn が提供する素材集（テキスト検索・タグフィルタ・AI 検索に対応）
• サムネイルをクリックすると即座に反映されます

---

テキストブロック

テキストブロックは通常、本文の先頭行だけが見えるコンパクトな状態で表示されます（紫の「テキスト」バッジ＋本文プレビュー）。カード全体をクリックすると展開され、テキスト入力エリアとオプション設定が表示されます。

• テキストエリア — セリフやナレーションを入力。複数行対応
• フレームカラー — テキスト枠の色を変更できる（カラーピッカー）
• 「リセット」ボタン — フレームカラーをデフォルトに戻す
• 「閉じる」ボタン — 編集を終えてカードを折りたたむ
• 「削除」ボタン — ブロックを削除

---

キャラブロック（CH）

キャラクターの立ち絵を表示・切り替えるブロックです。青の「キャラ」バッジで識別できます。

• 表情サムネイル — 現在の表情差分の画像
• キャラクター名 — 設定中のキャラ名
• 表情名 / ID — 表情差分の識別名
• 位置 — L（左）/ C（中央）/ R（右）
• 表示状態 — 「表示」または「非表示」
• 「+ 新規作成」ボタン — 新しいキャラクターを追加

キャラクターと表情は、あらかじめ「キャラ」タブで登録しておく必要があります。

---

演出ブロック（FX）

画面揺れやフラッシュなどの視覚演出を追加するブロックです。すべての設定がインライン（1行）で完結します。オレンジの「FX」バッジで識別できます。

• エフェクト選択 — ドロップダウンで種類を選択
• 強度 — 1〜5 の数値（デフォルト: 3）。フェード系と flash は強度を持たないため非表示
• 時間(ms) — 持続時間。100〜5000ms（デフォルト: 500）。vignette / blur は時間経過で自動解除

エフェクト一覧

• shake — 画面を振動させる（強度・時間あり）
• flash — 白いフラッシュ（時間のみ）
• fade_black — 画面を黒くフェードアウト（時間のみ）
• black_in — 黒からフェードイン（時間のみ）
• fade_white — 画面を白くフェードアウト（時間のみ）
• white_in — 白からフェードイン（時間のみ）
• vignette — 画面周囲を暗くする（強度・時間あり / 時間経過で解除）
• blur — 画面をぼかす（強度・時間あり / 時間経過で解除）

---

ブロック追加メニュー

ブロック一覧の下部にある「+ ブロック追加」ボタンを押すと、各種ブロックがグリッド表示されます。

• 基本 — テキスト、キャラ、背景、OVL
• 制御 — 選択肢、変数、IF 文、ジャンプ
• 演出 — FX、フィルター、フィルター重ね掛け、色調補正、カメラ、パーティクル、斬撃
• キャラ拡張 — Live2D、VRM

追加したいブロックをクリックすると、一覧の末尾に新しいカードが追加されます。

---

選択肢ブロック（Choice）

プレイヤーに分岐選択を提示するブロックです。黄色の「選択肢」バッジで識別できます。

• 選択肢テキスト — 各選択肢に表示するテキストを入力
• 表示条件（オプション） — 特定の変数条件を満たすときだけ選択肢を表示（例: affection >= 3）
• 実行内容 — 選択時に実行するアクション（変数操作・セリフなど）
• 「+ 選択肢を追加」ボタン — 新しい選択肢を追加
• 「削除」ボタン — 個別の選択肢を削除

右パネルには選択肢テキストの一覧が表示されます。選択肢の編集はブロックカード上で直接行います。

---

IF文ブロック（条件分岐）

変数の値に応じて処理を分岐するブロックです。水色の「IF文」バッジで識別できます。

• 条件 — 変数名・比較演算子・値を設定
• then ブロック — 条件が真のときに実行するブロック群
• else ブロック — 条件が偽のときに実行するブロック群（省略可）

条件が未設定の場合、オレンジ色の警告ボーダーが表示されます。

---

変数ブロック（Set Variable）

変数の値を設定・演算するブロックです。紺色の「変数」バッジで識別できます。すべての設定がインライン（1行）で完結します。

• 変数名 — 対象の変数名（例: gold, hasKey）
• 演算子 — =（代入）, +（加算）, -（減算）
• 値 — 設定する値

左サイドバーの「変数一覧」に、プロジェクト内で使われている変数名が自動表示されます。

---

ジャンプブロック（Jump）

別のページへ移動するブロックです。琥珀色の「ジャンプ」バッジで識別できます。

• ジャンプ先 — ドロップダウンでページを選択
• 未選択時 — 警告マーク（!）が表示される

シナリオの分岐やルート切り替え、エンディング後のタイトル戻りなどに使用します。

---

カメラブロック（Camera）

画面のカメラワーク（ズーム・パン）を制御するブロックです。スカイブルーの「カメラ」バッジで識別できます。

• X / Y — カメラの移動位置（スライダー）
• Z（ズーム） — 拡大率。1.0 が等倍
• 時間 (ms) — アニメーション時間
• イージング — Ease In/Out などのイージング関数
• シェイク強度 — 画面振動の強さ（0 で無効）
• リセット — 初期位置に戻すチェックボックス

---

オーバーレイブロック（OVL）

背景の上にレイヤーとして重ねる画像を配置するブロックです。フクシアの「OVL」バッジで識別できます。

• 画像選択 — 「変更」ボタンで画像を選択
• 表示状態 — チェックボックスで表示 / 非表示を切り替え
• 未選択時 — 「画像未選択」と警告マーク（!）が表示される

雨・雪・光線などのエフェクトや、UI フレームの重ね表示に使用します。

---

フィルターブロック（Screen Filter）

画面全体にフィルター効果をかけるブロックです。紫の「フィルター」バッジで識別できます。すべての設定がインライン（1行）で完結します。

• フィルター種類 — セピア / モノクロ / ブラーなどをドロップダウンで選択
• 既定 — プリセット設定（「既定」ボタン）

回想シーン（セピア）、夢の中（ブラー）、モノクロ演出などに使用します。

---

Live2D キャラブロック

⚠️ アセットは固定・テスト中: 現在は同梱の公式サンプルのみ利用可能で、独自モデルの取り込みには未対応です。動作・UI は検証中のため、リリース対象外として扱っています。

Live2D モデルを表示するブロックです。静止画キャラクターでは表現できない、まばたき・呼吸・リップシンクなどの自然な動きを演出できます。公式フリーサンプル 6〜7 種類が同梱されています。

• モデル選択 — 使用する Live2D モデルを選択
• モーショングループ — Idle / TapBody など、再生するモーション
• モーションインデックス — グループ内の複数モーションを切り替え
• 位置・サイズ — X（0〜1280）/ Y（0〜720）座標とスケール（0.05〜0.5）をスライダーで調整
• visible — 一時的に非表示にできる切り替え

---

VRM 3D キャラブロック

⚠️ アセットは固定・テスト中: 現在は同梱の VRM モデルのみ利用可能で、独自モデルの取り込みには未対応です。動作・UI は検証中のため、リリース対象外として扱っています。

VRM 形式の 3D キャラクターモデルをシーンに配置するブロックです。VRM 1.0 / 0.x の両方に対応し、14 種類の表情アニメーション、髪・スカートの自然な揺れ、アニメ調のトゥーン表現をブロックひとつで利用できます。

主なプロパティ:

• モデル選択（modelId） — 使用する VRM モデルを選択（例: hero）
• 位置（pos） — L（左）/ C（中央）/ R（右）でキャラ配置
• 表情（expression） — neutral / happy / angry / sad / relaxed / surprised ほか計 14 種
• ポーズ（pose） — aPose（A ポーズ）/ idle（アイドル）
• Y 軸回転（rotY） — 度単位で左右に回転
• X / Y / スケール — 位置と大きさの微調整（スライダー）
• フェード時間（fadeMs） — 登場時のフェードイン時間（ミリ秒）
• visible — 表示/非表示トグル

エディタのライブプレビュー: プロパティパネルのスライダー（X/Y/S・表情・Y 軸回転）を操作すると、エディタ画面内の VRM プレビューがその場で追従します。スライダー操作のたびにモデルを再読み込みする必要はありません。

---

パーティクルブロック

戦闘・演出系のパーティクルエフェクトを追加するブロックです（雪・桜などの環境系は Screen Filter 側にあります）。

• プリセット — バトル系（fire_sparks / ice_crystal / explosion / heal）とガチャ系（gacha_burst / gacha_rainbow / gacha_stars）の 7 種から選択
• 位置 (x / y) — 発生位置
• 大きさ (s) — 粒子サイズ倍率（0.1〜5.0）
• 範囲 (range) — 発生範囲倍率（shape の radius / width / height に乗算、0.1〜5.0）
• 強度 (intensity) — 発生量（1〜3）
• 持続時間 — エフェクトの再生時間（ミリ秒）
• 追加エミッター — 同時に複数プリセットを発火（例: 爆発 + 火の粉）

---

斬撃ブロック（Slash）

剣戟・斬撃の軌跡を 1 振りぶん再生します。三日月スプライトを指定角度方向へ振り抜き、残像を残します。パーティクルとは別ライフサイクル。

• 位置 (x / y) — 弧の中心
• 角度 (angle) — 振りの中心角（度）。0 = 右水平、-30 = 斜め下右、90 = 下
• 振り幅 (length) — 弧の長さ（px）
• 振り抜き時間 (duration) — 1 振りの時間（ms）
• 太さ (width) — 三日月スプライトの scale 倍率
• 色 (color) — #RRGGBB 形式
• 合成モード — normal / add

---

フィルターブロック — 46 種のフィルター

画面全体にフィルターをかけるブロックです。1 枚の背景画像から、朝・夕・夜・雨・紅葉・冬・回想・ホラーなど多彩なシーンを演出できます。

8 カテゴリ・46 種のフィルター:

• 強度スライダー — フィルターの適用度合いを 0〜1 で調整

---

フィルター重ね掛け（Filter Mix）

スクリーンフィルターを 2 スロット固定（ベース層 + 動き層）で重ね掛けするブロックです。「夜 + 雨」「紅葉 + 哀愁」のような複合的な雰囲気を作れます。

• スロット 1（ベース層） — 色調・雰囲気・季節感・レトロなど画面全体のトーンを決めるフィルター
• スロット 2（動き層） — 雨・雪・桜・蛍などの天候・パーティクル系（粒の動きが入るフィルター）
• 同種フィルターの衝突（例: 夜 + 朝）を防ぐため、スロット 2 に置けるのは動き系のみ。組み合わせは UI 側で許容セットを誘導します

---

色調補正ブロック

画面全体の色味をスライダーで微調整するブロックです。フィルタープリセットでは表現できない細かい調整に使います。

• 明るさ — 画面を明るく / 暗くする
• コントラスト — 明暗の差を強める / 弱める
• 彩度 — 色の鮮やかさを調整（0 でモノクロ）
• 色温度 — 暖色（プラス）/ 寒色（マイナス）に寄せる

---

このページのスクリーンショットは UI 変更があったときに撮り直されます。