Art-5: 環境・ステージビジュアルデザイン
4 テーマ ビジュアル早見（SVG）
全ダンジョンテーマのビジュアル比較。詳細コンセプトアートは Art-Concept 参照。
Data Grid
Neon Arcade
Glitch Core
Void Rift
方向性
Minecraft Dungeons 風のボクセル環境 × シンセウェーブネオン
環境レイヤー（ロビー・ダンジョン）は 1x1x1 のブロック（キューブ） を基本単位としたタイル構成で構築する。キャラクターレイヤー（FF7ローポリ）とは異なる系統だが、フラットシェーディング・ネオンアクセント・トップダウン55度俯瞰カメラによって統一感を保つ。
2層構造の再確認（Art-1）
- キャラクター層: FF7ローポリ（3頭身デフォルメ、手続き的アニメーション）
- 環境層: Minecraft Dungeonsボクセル（1x1x1ブロック、InstancedMesh）
本ドキュメントは 環境層 のビジュアル仕様を扱う。
ブロック基本仕様
ブロックサイズ・単位
| 要素 | 値 | 備考 |
|---|---|---|
| ブロックの1辺 | 1.0 unit | Minecraft Dungeonsと同じく 1x1x1 |
| 標準部屋サイズ | 6x6 〜 18x18 ブロック | dungeon.md 準拠 |
| 標準天井高 | 4 ブロック（4.0 units） | 俯瞰のため視認性優先 |
| 壁厚 | 1 ブロック（壁は実体） | 外側は発光エッジで装飾 |
| キャラクター基準身長 | 1.8 units（約2ブロック） | 3頭身デフォルメの都合 |
ブロックのバリエーション（全テーマ共通の構造）
| カテゴリ | 役割 | 特性 |
|---|---|---|
| Base Block | 床・壁の大部分を構成 | テーマの基調色、フラット塗り |
| Accent Block | 要所に混ぜてパターンを作る | 基調色の明度違い or 彩度違い |
| Special Block | 破壊可能・仕掛け | テーマ固有のメカニカル意匠 |
| Neon-lit Block | 発光ブロック（ライン・看板） | MeshBasicMaterial + Bloom対応 |
Three.js実装の核
全ブロックは共通の BoxGeometry(1, 1, 1) を 1 つだけ生成し、InstancedMesh に色・位置・回転をバインドして描画する。 DrawCallはテーマあたり 4〜6（Base / Accent / Special / Neon / Destructible / Prop）に収まることを目標とする。
ロビー空間
ロビーは帰還・編成・ミッション選択を行うハブ空間。落ち着いた夕暮れムードで、プレイヤーの休憩所としての印象を持たせる。
全体レイアウト
┌─────────────────────────────────────────────┐
│ │
│ 🌌 背景: 深紫シンセ空 🌌 │
│ │
│ ╭─ Customize Zone ─╮ │
│ │ 🪞 鏡 / 装備棚 │ │
│ │ アバター確認 │ │
│ ╰──────────────────╯ │
│ │
│ ⬢ Central Plaza (中央広場) ⬢ │
│ ・浮遊パーティクル │
│ ・ホログラムのゲームロゴ │
│ │
│ 🟣 Mission 🌈 Vibeverse 🔴 Revenge │
│ Portal Portal Portal │
│ （左） （中央奥） （右・条件付） │
│ │
│ 📊 Stats Terminal（自分の戦績ホログラム） │
│ │
└─────────────────────────────────────────────┘
サイズ: 30x30 units（約30x30ブロック）ロビーのブロックパレット
| ブロック | HEX | 用途 | マテリアル |
|---|---|---|---|
| Base (床タイル) | #2d1b4e | メインの床ブロック | MeshLambertMaterial |
| Accent (床ライン) | #4a2d7a | 床模様・区画境界 | MeshLambertMaterial |
| Wall (腰壁) | #1a0b2e | ロビー外周の腰壁 | MeshLambertMaterial |
| Neon-lit (床光帯) | #ff4dff | 床に走るネオンライン | MeshBasicMaterial + Bloom |
| Neon-lit (縁取り) | #00e5ff | プラットフォーム縁 | MeshBasicMaterial + Bloom |
| Prop (ホログラム台座) | #7a5cff | Stats Terminal等の基部 | MeshLambertMaterial |
エリア構成
| エリア | 位置 | 主な要素 |
|---|---|---|
| Central Plaza | 中央 (0, 0) | ホログラムロゴ、浮遊パーティクル、集合ポイント |
| Customize Zone | 左奥 (-8, -6) | 装備棚（ブロック柱 + 浮遊武器アイコン）、鏡（反射シェーダの代わりに青いパネル） |
| Mission Portal | 手前左 (-6, 6) | 紫色のリフト（後述） |
| Vibeverse Portal | 中央奥 (0, -10) | 虹色のリフト（後述） |
| Revenge Portal | 手前右 (6, 6) | 赤色のリフト（条件達成時のみ出現） |
| Stats Terminal | 右奥 (8, -6) | ホログラムパネルで戦績表示 |
Ambient Props（雰囲気オブジェクト）
| プロップ | ビジュアル | 実装 |
|---|---|---|
| 浮遊パーティクル | 小さなシアン/マゼンタの粒が上昇 | THREE.Points + gradient texture |
| ホログラムロゴ | 半透明の「Rift Survivors」文字が回転 | Plane + AlphaBlend + ワイヤーフレーム |
| データストリーム | 壁に沿って 0/1 の文字列が下から上へ流れる | カスタムシェーダ or CanvasTexture |
| ネオンサイン看板 | 各ポータル上方に浮かぶピクトグラム | MeshBasicMaterial + Bloom |
| 床スキャンライン | 床を周期的に走る横スキャン光 | シェーダで時間経過と共に移動 |
ロビー背景（スカイ）
- 空は 深紫グラデーション背景（
#1a0b2e→#3d1a5e） - 地平線付近に薄いシアンライン（シンセウェーブ定番の格子遠近）
- 星は小さな白点を
THREE.Pointsで約200個配置
ダンジョン4テーマ
各テーマは dungeon.md の解放条件 に準じて出現する。
| テーマ | 解放条件 | 基調色 | ムード |
|---|---|---|---|
| Data Grid | 初期 | 青緑 × シアン | 静謐・サイバー |
| Neon Arcade | 6F〜10F帯 | ピンク × マゼンタ | 賑やか・レトロ |
| Glitch Core | 11F〜14F帯 | パープル × 黒（紫/緑破損） | 不穏・破壊的 |
| Void Rift | 15Fボスフロア | 白 × 青（漆黒背景） | 神秘・浮遊 |
ブロックパレット俯瞰
テーマ1: Data Grid（データグリッド）
コンセプト: デジタル空間。格子状の回路パターンが床・壁を走り、シアンの発光が脈打つ。Minecraft Dungeonsの「End」ステージにサイバー色を重ねたイメージ。
ブロックパレット
| 種別 | ブロック名 | HEX | 用途 | マテリアル |
|---|---|---|---|---|
| Base | Grid Floor | #0d3b4a | 床全般 | MeshLambertMaterial (roughness未指定、フラット) |
| Accent | Circuit Tile | #1a6b7a | 回路模様の混在タイル | MeshLambertMaterial |
| Wall | Data Wall | #0a2a38 | 壁ブロック | MeshLambertMaterial |
| Neon-lit | Line Strip | #00e5ff | 床・壁を走る青緑ライン | MeshBasicMaterial + Bloom |
| Special | Numeric Panel | #4affc9 | 数字/コードが流れるパネル | CanvasTexture + emissive |
| Destructible | Data Cache | #2fe6b8 | データモニュメント（破壊可） | MeshLambertMaterial + クラック頂点カラー |
床・壁・天井マテリアル
| 面 | ベース色 | 発光 | 特徴 |
|---|---|---|---|
| 床 | #0d3b4a | グリッドラインのみ #00e5ff 発光 | 2x2 ブロックごとに十字の回路パターン |
| 壁 | #0a2a38 | 縦方向のライトストリップ #00e5ff | 一定間隔でNumeric Panelを埋め込み |
| 天井 | 非描画（俯瞰カメラのため省略） | — | 遠景は霧で暗転 |
プロップ
- データモニュメント: 1x1x3 の浮遊する発光柱。中央に
#4affc9のコア。破壊でEXPジェム。 - エネルギーピラー: 2x2x4 のブロック塔。上部から
#00e5ffの光輪。 - 浮遊コード粒子:
THREE.Pointsで「0」「1」「HEX」文字の sprite が上昇。
テーマ2: Neon Arcade（ネオンアーケード）
コンセプト: 80年代アーケードゲームセンター。アーケード筐体・ネオン看板・ピンク/紫のフロア。Minecraft Dungeonsの賑やかな街区にシンセウェーブを重ねる。
ブロックパレット
| 種別 | ブロック名 | HEX | 用途 | マテリアル |
|---|---|---|---|---|
| Base | Arcade Floor | #2d0a4e | 床（チェッカー柄の暗部） | MeshLambertMaterial |
| Base2 | Arcade Floor Light | #4e1a7a | 床（チェッカー柄の明部） | MeshLambertMaterial |
| Accent | Purple Wall | #6a1b9a | 壁基調 | MeshLambertMaterial |
| Neon-lit | Pink Sign | #ff2dd4 | ネオン看板ライン | MeshBasicMaterial + Bloom |
| Neon-lit2 | Cyan Accent | #00e5ff | 補色アクセント | MeshBasicMaterial + Bloom |
| Special | Arcade Cabinet | #ffe600 画面部 | アーケード筐体（1x1x2） | CanvasTexture（古典ゲーム画面） |
| Destructible | Crate | #8d4e1a | 破壊可能な木箱 | MeshLambertMaterial |
床・壁・天井マテリアル
| 面 | ベース色 | 発光 | 特徴 |
|---|---|---|---|
| 床 | #2d0a4e / #4e1a7a | 縁取り #ff2dd4 | 2x2ブロックチェッカーパターン、縁にピンクライン |
| 壁 | #6a1b9a | ネオンサインが埋め込み | 高さ3〜4ブロック、上端にシアンライン |
| 天井 | 非描画 | — | 代わりに背景にピンク/シアン斜め格子 |
プロップ
- アーケード筐体: 1x1x2 ブロック、前面にアニメ画面テクスチャ（簡易ドット絵）
- ネオンサイン: 壁掛けの浮遊文字（「PLAY」「HI-SCORE」など）
- 破壊可能クレート: 1x1x1 の木箱、破壊でコイン/ジェム
- 電撃トラップ床: 通電時
#ffe600→#ff2dd4の明滅（dungeon.md 環境ハザード参照）
テーマ3: Glitch Core（グリッチコア）
コンセプト: 崩壊・バグった世界。破損ブロック、浮遊する欠片、紫の侵食ライン。Minecraft Dungeonsの「Creepy Crypt」にグリッチノイズとエラー表示を重ねる。グリッチ属性 = パープル/バイオレット（docs/gameplay/combat.md:192 準拠）。
ブロックパレット
| 種別 | ブロック名 | HEX | 用途 | マテリアル |
|---|---|---|---|---|
| Base | Corrupted Floor | #0f0a2e | 床（欠けあり）、Deep Violet | MeshLambertMaterial |
| Accent | Broken Tile | #2d1b4e | 崩壊した床の境界 | MeshLambertMaterial |
| Wall | Glitch Wall | #0a0520 | 壁基調（紫黒） | MeshLambertMaterial |
| Neon-lit | Corruption Line | #a855f7 | グリッチ属性の侵食ライン | MeshBasicMaterial + Bloom |
| Neon-lit2 | Glitch Violet | #9d00ff | バグ表現ライン | MeshBasicMaterial + Bloom |
| Special | Unstable Floor | #c77dff | 不安定床（崩壊ギミック）、明るい紫 | MeshLambertMaterial + 点滅 |
| Floating | Debris Shard | #4c1d95 | 浮遊する欠片（0.3x0.3x0.3） | MeshLambertMaterial |
床・壁・天井マテリアル
| 面 | ベース色 | 発光 | 特徴 |
|---|---|---|---|
| 床 | #0f0a2e | クラックに沿って #a855f7 | 一部のブロックが欠落して奈落が見える |
| 壁 | #0a0520 | 縦に #9d00ff のグリッチストライプ | ランダムに欠けた壁、破損面から紫光 |
| 天井 | 非描画 | — | 背景は深紫グラデーション #0a0520 → #2d1b4e |
プロップ
- 浮遊する欠片: 小さなブロック（0.3 scale）が宙に漂い、回転する
- 不安定床: 踏むと3秒で崩壊、1秒前からひび割れエフェクト
- グリッチテキスト: 壁に「ERROR」「CORRUPT」などの紫テキストが走る
- 破損モニュメント: かつてのデータモニュメントが砕けた残骸
グリッチエフェクト演出
ChromaticAberrationを強めに（通常の1.5倍）- ブロック全体がランダムに1フレーム瞬時にオフセット（シェーダで時間ベース）
EffectComposerに時間変動の RGB シフトを追加
テーマ4: Void Rift（ヴォイドリフト）
コンセプト: 虚空の裂け目。浮遊する岩ブロック、漆黒の床、白と青の星空背景。Minecraft Dungeonsの「End」に近いが、より抽象的で神秘的。
ブロックパレット
| 種別 | ブロック名 | HEX | 用途 | マテリアル |
|---|---|---|---|---|
| Base | Void Stone | #05050f | 床基調（ほぼ黒） | MeshLambertMaterial |
| Accent | Floating Rock | #1a2040 | 浮遊岩ブロック | MeshLambertMaterial |
| Edge | Rift Edge | #4da6ff | 床端の青い縁光 | MeshBasicMaterial + Bloom |
| Neon-lit | Star Light | #ffffff | 白の発光点 | MeshBasicMaterial + Bloom |
| Special | Rift Crack | #8f6cff | 次元亀裂（床出現攻撃） | カスタムシェーダ（うねり） |
| Destructible | Void Crystal | #a3d9ff | 破壊可能な青水晶 | MeshLambertMaterial + emissive |
床・壁・天井マテリアル
| 面 | ベース色 | 発光 | 特徴 |
|---|---|---|---|
| 床 | #05050f | 縁 #4da6ff | 島状に浮かぶ不規則な床、周囲は奈落 |
| 壁 | なし（空間が抜けている） | — | 壁の代わりに Void（漆黒 + 星空） |
| 天井 | 星空ドーム | 白点 #ffffff | 遠景に薄青のネビュラグラデーション |
プロップ
- 浮遊岩ブロック: 2〜4ブロックの塊が宙に漂う（移動パターンは sin 波）
- Void Crystal: 1x1x2 の青い水晶柱、破壊でEXP
- 次元亀裂: 床に出現する楕円の
#8f6cffエフェクト（1.5秒後に攻撃発動） - 背景の星:
THREE.Points3000個、奥行きに応じた大きさ
ポータルオブジェクト
ロビーおよびダンジョン内に配置される 4 種類のポータル。すべて 2x2 ブロックの台座 + 中央に2.5x3.0 のリフト面 で構成する。
ポータル共通構造
╔═══════════╗
║ リフト面 ║ ← 2.5 x 3.0 の平面、シェーダでうねる
║ (shader) ║
╠═══════════╣
║ 台座 ║ ← 2 x 1 x 2 のブロック（4ブロック）
╚═══════════╝
↑ 浮遊パーティクルがリフト面から上昇| 要素 | 実装 |
|---|---|
| 台座 | InstancedMeshのブロック4個（テーマ色） |
| リフト面 | PlaneGeometry(2.5, 3.0) + カスタムフラグメントシェーダ |
| 浮遊粒子 | THREE.Points 50〜100個、上昇+ゆらぎ |
| 光源 | PointLight 1基（減衰強め、距離4.0） |
ポータル色別仕様
| ポータル | コア色 | 外縁色 | 粒子色 | 用途 |
|---|---|---|---|---|
| Mission Portal（紫リフト） | #a855f7 | #6a1b9a | #d8b4fe | ミッション開始 |
| Vibeverse Portal（レインボー） | グラデ #ff2d75→#ffd400→#00ff88→#00f0ff→#a855f7（HSL hue 4秒周期） | #ffffff | 全色混在 | 外部ゲームへ遷移（docs/art/color-script.md 定義と整合） |
| Escape Portal（シアン渦） | #00e5ff | #4da6ff | #a3f5ff | ダンジョン脱出 |
| Revenge Portal（赤リフト） | #ff1744 | #8b0000 | #ff6b6b | 前回シードで再挑戦 |
ポータル個別デザイン詳細
Mission Portal（ミッションポータル）
- リフト面: 紫のうねり、中央に白い渦
- 台座: ロビーの Prop ブロック（
#7a5cff）4個 - アニメーション: リフト面が時間経過でうねる（shader:
sin(uv.x*5 + time)） - 接近時: リフト面が明るくなり、粒子が増量
Vibeverse Portal（Vibeverseポータル）
- リフト面: 虹色グラデーション（HSL で hue を時間回転）
- 台座: 白
#ffffffのブロック4個 + 縁に金色#ffe600 - アニメーション: 虹色の回転、粒子が全色ランダム
- 外観: 他のポータルより一回り大きい（2.5x2.5 台座）
Escape Portal（脱出ポータル）
- リフト面: シアン渦巻き（
shader: atan(uv.y, uv.x)で回転） - 台座: テーマ色で自動合わせ（例: Data Gridではシアン強調）
- アニメーション: 中心に向かって吸い込まれる動き
- 出現タイミング: ミッション目標達成時に部屋中央にスポーン
Revenge Portal（リベンジポータル）
- リフト面: 赤いうねりに黒いノイズ（ボス戦警告色と統一。グリッチ属性とは別系統）
- 台座: 黒
#0a0a0f+ 赤ライン#ff1744 - アニメーション: グリッチ効果（1秒ごとに画面が一瞬歪む）
- 出現条件: 前回死亡時のみロビー右側に生成
Three.js 実装方針
InstancedMesh による環境描画
描画戦略の核
環境レイヤーは 1部屋あたり200〜500ブロック を配置する。これを個別のMeshにすると数百DrawCallになるため、ブロック種別ごとに InstancedMesh を1つに集約する。
typescript
// ブロック種別ごとに InstancedMesh を生成
interface BlockInstance {
type: 'base' | 'accent' | 'wall' | 'neon' | 'special' | 'destructible';
mesh: THREE.InstancedMesh;
maxCount: number;
}
function createThemeInstancedMeshes(theme: DungeonTheme): BlockInstance[] {
const geometry = new THREE.BoxGeometry(1, 1, 1);
const instances: BlockInstance[] = [];
for (const type of Object.keys(theme.palette)) {
const material = type === 'neon'
? new THREE.MeshBasicMaterial({ color: theme.palette[type] })
: new THREE.MeshLambertMaterial({ color: theme.palette[type], flatShading: true });
const mesh = new THREE.InstancedMesh(geometry, material, 2000);
mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
instances.push({ type, mesh, maxCount: 2000 });
}
return instances;
}
// ブロック配置
function placeBlock(instance: BlockInstance, index: number, x: number, y: number, z: number) {
const matrix = new THREE.Matrix4().setPosition(x, y, z);
instance.mesh.setMatrixAt(index, matrix);
instance.mesh.instanceMatrix.needsUpdate = true;
}テーマ別タイルアトラス
各テーマのテクスチャは テーマごとに分離された独立アトラス として管理し、ダンジョン突入時に 遅延ロード する（docs/art/style-guide.md の遅延ロード戦略・ロード予算に準拠）。ロビーではいずれのダンジョンテクスチャも読み込まず、ロビー表示後バックグラウンドで先読みを開始する。
| アトラス | サイズ | 内容 | ロードタイミング |
|---|---|---|---|
data-grid.png | 256x256 | 床/壁/Special/Destructible | ロビー表示後（バックグラウンド） |
neon-arcade.png | 256x256 | 同上 | 同上 |
glitch-core.png | 256x256 | 同上 | 同上 |
void-rift.png | 256x256 | 同上 | 同上 |
各アトラス内は 64x64 のタイルを 4x4=16枚 配置。数字・回路・ドット絵・グリッチなど。現在のダンジョンテーマに対応する1枚のみを GPU に常駐させ、他テーマは texture.dispose() で解放する。
ブロックバリアントと頂点カラー
同じ InstancedMesh 内でも色をわずかにばらつかせるため、instance color attribute を活用して単調さを軽減する。
typescript
const color = new THREE.Color(themeBaseColor);
const variant = 0.95 + Math.random() * 0.1; // ±5%の明度揺らぎ
color.multiplyScalar(variant);
mesh.setColorAt(index, color);
mesh.instanceColor!.needsUpdate = true;破壊可能ブロック
v1 スコープでは破壊演出を限定
style-guide.md の記載どおり、v1 ではブロック単位の破壊は ボス戦アリーナ崩壊など演出の一部 に限定する。通常のDestructibleブロックは「破壊フラグのON/OFFで非表示」に留め、破片シミュレーションは実装しない。
破壊時のフォールバック演出:
- InstancedMesh の対象indexを matrix.scale=0 にして瞬時消去
- 代わりに
THREE.Pointsで 8〜12個の小さな発光粒子を0.5秒散らす
ポータルシェーダ
リフト面は共通の ShaderMaterial を使い、uniformで色・パターンだけ切り替える。
glsl
// fragment shader（概念）
uniform float uTime;
uniform vec3 uCoreColor;
uniform vec3 uEdgeColor;
uniform int uMode; // 0=ripple, 1=rainbow, 2=swirl, 3=glitch
varying vec2 vUv;
void main() {
vec2 centered = vUv - 0.5;
float r = length(centered);
float ripple = sin(r * 12.0 - uTime * 3.0) * 0.5 + 0.5;
vec3 col = mix(uCoreColor, uEdgeColor, smoothstep(0.2, 0.5, r));
col *= 0.7 + ripple * 0.6;
gl_FragColor = vec4(col, 1.0 - smoothstep(0.4, 0.5, r));
}ライティング
| ライト | 用途 | 強度 |
|---|---|---|
| AmbientLight | 全体の薄明かり（テーマ色） | 0.3〜0.5 |
| HemisphereLight | 上下で色差をつける（Void Riftは使用しない） | 0.2 |
| PointLight (最大4) | ポータル・ボス・プレイヤー光源 | 距離4〜6で減衰 |
ポイントライト制約
style-guide.md の制約どおり、同時点灯PointLightは 最大4つ まで。ネオン発光のほとんどは MeshBasicMaterial + UnrealBloomPass で表現する。
ポストプロセス
| パス | 用途 | 備考 |
|---|---|---|
| UnrealBloomPass | 全テーマでネオン発光強調 | threshold 0.8, strength 1.2 |
| ChromaticAberration | Glitch Core は強め（1.5x） | モバイルは無効 |
| Custom GlitchShader | Glitch Core 専用、時間ベースのRGBシフト | v2 以降で拡張可 |
描画パフォーマンス見積もり
| 項目 | Draw Call | ポリゴン |
|---|---|---|
| 環境ブロック（1テーマ・最大6種類） | 6 | 部屋あたり 2,000〜6,000（500ブロック×12triangle） |
| ポータル（4種） | 4〜8 | 各100程度 |
| プロップ（Points + 少量Mesh） | 3〜5 | パーティクル1000粒 |
| エフェクト（ポストプロセス含む） | ~5 | — |
| 合計（1ダンジョン画面内） | ~25 | < 10,000（画面内） |
Draw Call目標 < 100 のうち、環境レイヤーは 30以下 に収める。残りはキャラクター・敵・UI・VFXで使用。
アセット予算
| アセット | サイズ目安 | 備考 |
|---|---|---|
| タイルアトラス（テーマごと×4） | 1 枚あたり 64〜128KB（合計 256〜512KB） | PNG 圧縮後、ダンジョン突入時に該当テーマのみロード |
| ポータルシェーダ（GLSL文字列） | < 5KB | バンドル内 |
| 粒子用 gradient texture | 16x16, < 2KB | radial gradient |
| 背景（星空等） | 手続き生成 | テクスチャ不要 |
| 環境レイヤー合計 | < 600KB | 初回2MB制約内で十分に収まる |
デザイン禁則事項（環境レイヤー）
- 写実的なブロック質感（石壁のPBRテクスチャなど）
- ブロックのベベル・角丸（ハードエッジを維持）
- ブロック以外の複雑な曲面形状（球体・円柱の多用）
- テーマ色の逸脱（他テーマのネオン色を混ぜない）
- v1 でのリアルタイムブロック破壊（演出用途のみ）
関連ドキュメント
- Art-1: スタイルガイド — 2層構造・全体方針
- Art-2: カラースクリプト — シーン別カラーパレット
- Art-3: プレイヤーキャラクター — FF7ローポリ層
- Art-6: エフェクト・VFX — ポータル発動演出・攻撃エフェクト
- ダンジョン生成 — 部屋タイプ・環境ハザード
- ミッション — ポータル使用フロー