-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
499 lines (489 loc) · 18 KB
/
Copy pathindex.html
File metadata and controls
499 lines (489 loc) · 18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NovelADV | ヘルプ&ガイド</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-dark: #0b1220;
--card: #10192c;
--ink: #dce7ff;
--muted: #9fb4d1;
--accent: #3dd7aa;
--accent-2: #f3a32b;
--border: rgba(255, 255, 255, 0.06);
--shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
--glow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Space Grotesk", "M PLUS Rounded 1c", system-ui, -apple-system, "Segoe UI", sans-serif;
background: radial-gradient(120% 80% at 15% 10%, rgba(61, 215, 170, 0.12), transparent),
radial-gradient(80% 80% at 85% 0%, rgba(243, 163, 43, 0.12), transparent),
linear-gradient(145deg, #0b1220, #0f1c31 40%, #0b1220);
color: var(--ink);
letter-spacing: 0.02em;
}
a { color: var(--accent); text-decoration: none; }
a:hover { opacity: 0.92; }
header {
position: sticky;
top: 0;
backdrop-filter: blur(10px);
background: rgba(10, 17, 31, 0.65);
border-bottom: 1px solid var(--border);
z-index: 10;
}
.nav {
max-width: 1120px;
margin: 0 auto;
padding: 14px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.brand-badge {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, #27c498, #2fc5ec);
display: grid;
place-items: center;
font-weight: 700;
color: #0b1220;
box-shadow: 0 10px 35px rgba(39, 196, 152, 0.3);
}
.nav-links {
display: flex;
gap: 16px;
flex-wrap: wrap;
font-size: 14px;
color: var(--muted);
}
.nav-links a {
padding: 8px 10px;
border-radius: 10px;
border: 1px solid transparent;
transition: border 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.nav-links a:hover {
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.03);
color: var(--ink);
}
.page {
max-width: 1120px;
margin: 0 auto;
padding: 26px 20px 80px;
}
.hero {
margin: 40px 0 32px;
padding: 28px;
border-radius: 24px;
background: linear-gradient(150deg, rgba(16, 185, 129, 0.12), rgba(15, 98, 200, 0.08), rgba(243, 163, 43, 0.12));
border: 1px solid var(--border);
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
isolation: isolate;
}
.hero::before, .hero::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(36% 36% at 20% 20%, rgba(255, 255, 255, 0.12), transparent);
transform: translateY(-10px);
pointer-events: none;
}
.hero::after {
background: radial-gradient(28% 28% at 85% 12%, rgba(61, 215, 170, 0.18), transparent);
mix-blend-mode: screen;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--border);
color: var(--muted);
font-size: 13px;
}
h1 {
margin: 12px 0;
font-size: clamp(28px, 4vw, 40px);
line-height: 1.1;
letter-spacing: 0.01em;
}
p.lead {
margin: 10px 0 16px;
color: var(--muted);
font-size: 15.5px;
max-width: 720px;
}
.cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 10px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--card);
color: var(--ink);
font-weight: 600;
box-shadow: var(--glow);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn.primary {
background: linear-gradient(135deg, #2bc08f, #2fb2f5);
color: #0b1220;
border: none;
box-shadow: 0 10px 30px rgba(43, 192, 143, 0.35);
}
.btn:hover { transform: translateY(-2px); }
.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
color: var(--muted);
font-size: 13px;
}
section {
margin: 32px 0;
}
h2 {
font-size: 22px;
margin: 0 0 14px;
letter-spacing: 0.01em;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 18px;
padding: 18px;
box-shadow: var(--glow);
position: relative;
overflow: hidden;
}
.card::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 80% at 80% 0%, rgba(255, 255, 255, 0.04), transparent);
pointer-events: none;
}
.card h3 {
margin: 0 0 8px;
font-size: 17px;
}
.card p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
.tag-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.tag {
padding: 6px 10px;
border-radius: 10px;
background: rgba(61, 215, 170, 0.12);
color: var(--ink);
border: 1px solid rgba(61, 215, 170, 0.28);
font-size: 12px;
}
ol.step {
margin: 0;
padding-left: 18px;
color: var(--muted);
line-height: 1.7;
}
.inline-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 10px;
}
.inline-links a {
padding: 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
color: var(--ink);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-weight: 600;
}
.inline-links small { color: var(--muted); font-weight: 400; }
details {
background: var(--card);
border-radius: 14px;
border: 1px solid var(--border);
padding: 12px 14px;
color: var(--muted);
box-shadow: var(--glow);
}
details + details { margin-top: 10px; }
summary {
cursor: pointer;
color: var(--ink);
font-weight: 600;
list-style: none;
position: relative;
padding-right: 20px;
}
summary::marker, summary::-webkit-details-marker { display: none; }
summary::after {
content: "›";
position: absolute;
right: 0;
top: 0;
transform: rotate(90deg);
transition: transform 0.2s ease;
color: var(--muted);
}
details[open] summary::after { transform: rotate(270deg); }
footer {
margin-top: 40px;
padding: 24px 0;
color: var(--muted);
font-size: 13px;
border-top: 1px solid var(--border);
}
@media (max-width: 720px) {
.nav { padding: 12px 16px; }
.hero { padding: 22px; }
.cta { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>
<header>
<div class="nav">
<div class="brand">
<div class="brand-badge">NA</div>
<span>NovelADV Guide</span>
</div>
<div class="nav-links">
<a href="#start">はじめかた</a>
<a href="#features">主要機能</a>
<a href="#templates">テンプレート</a>
<a href="#policy">プライバシー</a>
<a href="#docs">ドキュメント</a>
</div>
</div>
</header>
<main class="page">
<section class="hero">
<div class="eyebrow">iOS向け AIビジュアルノベル | ヘルプセンター</div>
<h1>NovelADVで、AIと物語をつくる。<br>始めるためのガイド一式。</h1>
<p class="lead">
プロジェクト作成からチャット画面の使い方、テンプレートの再利用、データ保護まで。
迷わず創作に集中できるよう、よく使う手順とリンクをコンパクトにまとめました。
</p>
<div class="cta">
<a class="btn primary" href="https://apps.apple.com/jp/app/noveladv-ai%E3%83%8E%E3%83%99%E3%83%AB%E5%89%B5%E4%BD%9C/id6751755268" target="_blank" rel="noopener">
App Storeでダウンロード
</a>
<a class="btn" href="#docs">技術仕様・ポリシーを見る</a>
<span class="pill">保存はすべて端末内 / APIキーはキーチェーンに暗号化</span>
</div>
</section>
<section id="start">
<h2>最初の5分でできること</h2>
<div class="grid">
<div class="card">
<h3>1. プロジェクトを作成</h3>
<p>「プロジェクト」タブ右上の＋から新規作成。タイトルを決め、テンプレートを選択（またはテンプレートなしで開始）。</p>
<div class="tag-row">
<span class="tag">序破急の進行度表示</span>
<span class="tag">好きな世界観を設定</span>
</div>
</div>
<div class="card">
<h3>2. チャットで物語を進行</h3>
<p>行動やセリフを入力して送信すると、AIが状況描写とNPCの応答を返答。履歴検索、手番の取り消し、チェックポイント作成も可能。</p>
<div class="tag-row">
<span class="tag">入力履歴検索</span>
<span class="tag">手番を一手戻す</span>
<span class="tag">セーブポイント</span>
</div>
</div>
<div class="card">
<h3>3. 設定を磨く</h3>
<p>プロジェクト設定から世界観・キャラクター・謎/伏線・AIモデル・記憶量を調整。文体や口調を具体的に書くほど好みの出力に近づきます。</p>
<div class="tag-row">
<span class="tag">AIモデル選択</span>
<span class="tag">要約タイミング</span>
<span class="tag">謎と伏線管理</span>
</div>
</div>
</div>
</section>
<section id="features">
<h2>主要機能ハイライト</h2>
<div class="grid">
<div class="card">
<h3>AIチャットで創作</h3>
<p>主人公として行動入力 → AIが描写とNPCのセリフを返すサイクルで物語を構築。長編も短編もシームレスに進行できます。</p>
</div>
<div class="card">
<h3>謎と伏線をトラッキング</h3>
<p>AIが謎リストを認識し、自動で追加/解決を管理。真相を「非公開」で保持すれば、伏線だけ張って回答を開示しない運用も可能。</p>
</div>
<div class="card">
<h3>世界観・キャラクター設計</h3>
<p>舞台、時代、背景ストーリー、文体、キャラクターの一人称や主人公の呼び方まで指定。個性の立ったロールプレイを実現します。</p>
</div>
<div class="card">
<h3>テンプレート再利用</h3>
<p>シナリオ/キャラクターをJSONテンプレートとして保存し、別プロジェクトにすぐ流用。インポート/エクスポートで共有も簡単。</p>
</div>
<div class="card">
<h3>バックアップと復元</h3>
<p>プロジェクトを1ファイルでバックアップ。機種変更や物語の分岐管理に活用できます。</p>
</div>
<div class="card">
<h3>モデル選択と要約</h3>
<p>OpenRouter経由の高性能モデルと、ローカルLLM（オフライン要約）を用途に応じて切替。会話要約のタイミングも調整可能。</p>
</div>
</div>
</section>
<section id="templates">
<h2>テンプレート活用のコツ</h2>
<div class="grid">
<div class="card">
<h3>シナリオテンプレート</h3>
<p>世界設定、キャラクターリスト、オープニングシーンを丸ごと保存。よく使うジャンルを登録しておくと新作の立ち上げが速くなります。</p>
</div>
<div class="card">
<h3>キャラクターテンプレート</h3>
<p>一人称や呼称まで含んだキャラ設定を1名単位で保存。アーキタイプを使い回しても、物語ごとに関係性を変えて再利用できます。</p>
</div>
<div class="card">
<h3>インポート/エクスポート</h3>
<p>JSON形式で出力し、他ユーザーと共有したり、別端末で読み込むことが可能。既存テンプレートと重複する場合は上書き確認が表示されます。</p>
</div>
</div>
</section>
<section>
<h2>設定のヒント</h2>
<ol class="step">
<li>文体・口調・視点を明示する（例: 「三人称視点で、乾いた語り口」「硬派な刑事ドラマ調で」）。</li>
<li>キャラクターの呼び方・一人称を具体的に書くと、会話の自然さが向上。</li>
<li>長くなってきたら要約を実行し、短期記憶をリセット。重要メモは世界設定に追記。</li>
<li>外部AIを使う場合は必要な範囲の情報だけ送信。伏線の答えは「非公開」欄に入れておくと安全です。</li>
</ol>
</section>
<section id="policy">
<h2>データとプライバシー</h2>
<div class="grid">
<div class="card">
<h3>端末内保存</h3>
<p>物語データは端末内に保存され、当方サーバーには送信されません。アプリ削除時は端末内のデータも削除されます。</p>
</div>
<div class="card">
<h3>APIキーの取り扱い</h3>
<p>OpenRouterを利用する場合のみ、必要な範囲の文脈とともにAPIへ送信。APIキーはキーチェーンに暗号化保存され、開発者が参照することはありません。</p>
</div>
<div class="card">
<h3>決済情報</h3>
<p>サブスクリプションはAppleの決済システム経由で処理され、クレジットカード番号などの決済情報を当方が保持することはありません。</p>
</div>
</div>
<div class="inline-links" style="margin-top: 14px;">
<a href="privacypolicy" target="_blank" rel="noopener">
プライバシーポリシー
<small>端末内保存/外部AI利用時の送信範囲など</small>
</a>
<a href="terms" target="_blank" rel="noopener">
Terms of Use / EULA
<small>利用条件・サブスクリプション・AI出力の扱い</small>
</a>
<a href="Terms_of_use_jp" target="_blank" rel="noopener">
利用規約（日本語）
<small>日本語の利用規約全文</small>
</a>
</div>
</section>
<section id="docs">
<h2>ドキュメント & リンク</h2>
<div class="grid">
<div class="card">
<h3>シナリオJSON仕様</h3>
<p>テンプレートをJSONで書き出す際のフィールド仕様と例。</p>
<div class="tag-row"><a class="tag" href="scenario_json">scenario_json.md</a></div>
</div>
<div class="card">
<h3>キャラクターJSON仕様</h3>
<p>キャラクターテンプレートのフィールド定義とサンプル。</p>
<div class="tag-row"><a class="tag" href="character_json">character_json.md</a></div>
</div>
<div class="card">
<h3>アプリ連携</h3>
<p>OpenRouterのOAuthコールバック用のブリッジ。ブラウザからアプリに戻れない場合はrouter.htmlを手動で開いてください。</p>
<div class="tag-row"><a class="tag" href="router.html">router.html</a></div>
</div>
</div>
</section>
<section>
<h2>よくある質問</h2>
<details open>
<summary>AIが応答しない / 途切れる</summary>
<p>OpenRouter利用時はAPIキー設定を確認。エラーバナーが出ている場合はタップで設定画面へ移動できます。ローカルLLMを選んでいる場合はモデルが端末にあるか確認してください。</p>
</details>
<details>
<summary>出力がイメージと違う</summary>
<p>世界観の文体・ジャンル・タブー例をより具体的に書き、キャラクターの呼称/口調を明示すると改善します。モデルを変更するのも有効です。</p>
</details>
<details>
<summary>物語を途中で戻したい</summary>
<p>チャット画面右上の「…」から「手番を一手戻す」または「チェックポイントへ戻る」を実行してください。重要な分岐前にチェックポイントを作っておくと安全です。</p>
</details>
</section>
<section>
<h2>お問い合わせ</h2>
<p style="color: var(--muted); line-height: 1.7;">
ご意見・バグ報告・改善要望は <a href="mailto:orenodinner@gmail.com">orenodinner@gmail.com</a> までお知らせください。
</p>
</section>
</main>
<footer class="page">
<div>© NovelADV. Stories stay on your device unless you choose to share them.</div>
</footer>
</body>
</html>