HTML Design Studio｜NSFW対応

━━━━━━━━━━━━━━━━━━━━ 　HTML Design Studio 　Episode 1｜キャラクター紹介ページ ━━━━━━━━━━━━━━━━━━━━

キャラクター紹介ページ（ユーザー向け追加説明）とクリエイターコメントに貼るHTMLを作ります。 コードブロックのコピーボタンでそのまま貼り付けられます。 ライトモード・ダークモードのどちらでも読める配色で作ります。

▼ 使い方

要望と内容を分けて送ってください。

　- 要望: ダークな配色で高級感のあるデザイン。行間は広めで。
　- 内容:
　　##世界観
　　（本文）
　　##プロフィール
　　（本文）

要望だけでも作れます。内容がなければ仮の文言で組み、あとから差し替えられる形にします。 装飾なしで読みやすく整理したい場合は「Markdownで」と書いてください。

▼ 作れるデザイン（一例）

◆ プロフィールカード
　ヘッダー画像＋名前＋属性タグ＋基本情報。単独キャラの定番。

◆ 記録文書
　カルテ・人事ファイル・契約書風。機密印や文書番号を添えます。
　表向きの記述の下に赤字で「実際：」を書けば、裏の顔が見えます。

◆ 雑誌・インタビュー記事
　大見出し＋引用ブロック＋2段組。台詞を並べて人物像を立てます。

◆ 実機フレーム
　スマホ画面を再現。チャットログやSNS投稿を本物のように見せます。

◆ ポスター・キービジュアル
　全面画像に大型英字を重ね、左右にパターン帯。情報が少なくても映えます。

◆ サービス・組織紹介
　架空のサービスや店舗の公式サイト風。料金表や利用の流れまで。
　シミュレーターの世界観説明に向きます。

上記は代表例です。形式は自由に指定できます。 新聞／カルテ／契約書／タロット／宮廷文書／監視カメラ／ステータス画面／掲示板／チケット など、ご希望をそのままどうぞ。

▼ 依頼例

　「レンタル彼氏サービスの公式サイト風。清潔感のある配色で」
　「機密文書風のプロフィール。表の顔と裏の顔を対比させて」
　「夜桜テーマ、明朝体で耽美に。スマホ画面風のチャットログも入れて」
　「サーカス団の世界観紹介。テントのストライプと電球で」
　「このタグの配色だけボルドーに変えて」（既存タグの修正も可）
　「このタグ、スマホで崩れる。直して」（既存タグの診断も可）

▼ 指定できること

　配色名　　ボルドー／シャンパンゴールド／ダスティピンク など
　雰囲気　　耽美／和モダン／サイバー／背徳／甘い など
　季節・時間　夜桜／月夜／紅葉／ネオン街 など
　書体　　　明朝／ゴシック／等幅
　その他　　行間、余白、文字サイズ、セクションの追加削除
　動き　　　透過PNGのモチーフを揺らす・跳ねさせる
　動画　　　YouTubeの埋め込み

▼ コマンド

　続行　　　出力が途中で切れたとき、続きを出します
　結合　　　分かれた出力を貼ると、1つの完成版にまとめます
　相談：　　HTMLを出さず相談に乗ります
　　　　　　例)「相談：世界観が長くて15,000超えそう。どう分ける？」

━━━━━━━━━━━━━━━━━━━━

▼ 推奨モデル

高性能モデル（Claude Opus / Gemini 4 Argon など）を推奨します。
標準モデルでも動作しますが、1回の出力量が少ないため途中で切れる回数が増えます。「続行」で続きは出せます。

▼ 補足

成人向け作品でも暗い配色に限定しません。
明るいまま艶のあるデザインも作れます。

紹介ページは最大15,000文字（タグ・空白・改行込み）です。
超える場合はクリエイターコメント欄（30,000文字）へ分けて作ります。合計45,000文字ぶん使えます。

紹介ページでは折りたたみ（開閉ボタン）は使えません。
長い内容は横スクロールや欄の分割で見せます。

それでは、ご要望をどうぞ。

━━━━━━━━━━━━━━━━━━━━ 　HTML Design Studio 　Episode 2｜ウィジェット ━━━━━━━━━━━━━━━━━━━━

チャット画面に表示されるウィジェットを作ります。 「状態値」と「ウィジェットコンテンツ」の2点を出力します。 ※指示事項はクリエイター側で自由に設定してください。

▼ ご注意｜依頼文の書き方

　◎ 「ウィジェットを作って」
　✕ 「HTMLを作って」「説明HTMLを作って」

「HTML」と書くと、紹介ページに貼る静的なHTML（数値が固定された画面イメージ）として解釈されます。 チャット中に自動更新されるウィジェットが欲しい場合は、必ず「ウィジェット」と書いてください。

▼ 使い方

【入れたい項目が決まっている場合】

　「現在地、天気、時間、彼の服装、あなたの服装、タスクを入れて。ファンタジー風、羊皮紙みたいな配色で」

指定された項目をそのまま使い、型と出力例を補完して組みます。

【おまかせの場合】

　「大人の恋愛シミュ用。明るい配色で上品に」

世界観から4〜6個の項目を提案します。

▼ 状態値の見せ方

　数値バー　　好感度 72 ／ バーが実際に伸び縮みします
　記号ゲージ　●●●○○ ／ 数字を出さずに段階を見せます
　状態名　　　恋人未満・共犯者 ／ 語で関係を示します
　呼び方　　　名字呼び→下の名前→愛称 ／ 関係の進展が一目でわかります

数字を出したくない場面では記号ゲージが向きます。 「熱」と「理性」のように対になる2項目を置くと、拮抗が見えて面白くなります。

▼ レイアウト

　バー＋グリッド　　項目5〜6個の定番
　横1行　　　　　　項目3個以下。最軽量
　上下2層　　　　　状況を小さく、関係を大きく
　左右対比　　　　　二人の状態を並べる
　縦リスト　　　　　和風・記録系に
　テーマ枠　　　　　テント帯や機密印など世界観の枠で囲む

▼ 折りたたみもできます

　「上のバーだけ表示して、あとは折りたたんで」
　「三分割で折りたためるように」
　「全部畳んだ状態にして」

クリックで開閉するブロックを作れます。 表示領域を節約できますが、文字数は変わりません。

▼ 依頼例

　「サーカス風のウィジェット。演目と客席の熱狂を入れて」
　「監視カメラ風。タイムコードとREC表示で」
　「手紙風。好感度は『未投函◯通目』みたいな言い方で」
　「このタグ、項目を1つ増やして」（既存タグの修正も可）

▼ 出力について

リッチ版と軽量版の2種類を出します。 ウィジェットはキャラクターの秘密欄の文字数を共有するため、容量が厳しい場合は軽量版をお使いください。

文字数は項目数によって変わります。

　項目4〜6個　　リッチ版 約1,500字／軽量版 約600字
　項目10個以上　リッチ版 約3,000字／軽量版 約1,200字

項目を増やすほど本文の出力量が減ります。 迷ったら軽量版から始めて、余裕を見て増やすのがおすすめです。

▼ 静的なステータス画面も作れます

「紹介ページに載せる見本」「サンプル画面」として、数値を固定した静的HTMLも作成できます。

「ステータス画面の見本を作って。紹介ページに載せたい」→ 実数値入りの静的HTMLを、紹介ページで使える形で出します

チャット中に自動更新させたい場合はウィジェット、紹介ページに画面イメージを載せたい場合は静的HTML、と使い分けてください。

▼ コマンド

　続行　　　出力が途中で切れたとき、続きを出します
　相談：　　HTMLを出さず相談に乗ります
　　　　　　例)「相談：状態値って何個くらいが適正？」

━━━━━━━━━━━━━━━━━━━━

▼ 推奨モデル

高性能モデル（Claude Opus / Gemini 3.1 Pro など）を推奨します。
標準モデルでも動作しますが、途中で切れる回数が増えます。

▼ 補足

成人向け作品でも暗い配色に限定しません。 明るいまま艶のあるデザインも作れます。 ライトモード・ダークモードのどちらでも読める配色で作ります。

状態値のラベルは世界観の言葉に翻訳できます。 好感度→客席の熱狂／湯加減／未投函◯通目 など。

タグの確認はこちらのサイトから確認できます。 トグル切替でスマホから見たイメージも確認できるので活用してください。 ただし、使用しているアニメーションやエフェクトは確認することはできかねます。

https://benri-tools.jp/html-preview

それでは、ご要望をどうぞ。