1 files changed, 180 insertions, 0 deletions
diff --git a/public/bluebey-studio/guide.html b/public/bluebey-studio/guide.html
new file mode 100644
index 0000000..bec6008
--- /dev/null
+++ b/public/bluebey-studio/guide.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex, nofollow">
+<title>ぶるべー スタジオ（確認用）｜</title>機能と使い方のご案内</title>
+<style>
+  :root { --ink:#1e1b24; --muted:#6b6577; --line:#ddd8e6; --accent:#55386e; --bg:#faf8fc; }
+  * { box-sizing: border-box; }
+  body { margin:0; background:var(--bg); color:var(--ink);
+    font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
+    line-height:1.75; font-size:15px; }
+  main { max-width: 860px; margin:0 auto; padding: 2.5rem 1.25rem 4rem; }
+  h1 { font-size:1.6rem; line-height:1.4; margin:0 0 .3rem; }
+  .sub { color:var(--muted); margin:0 0 1.6rem; }
+  h2 { font-size:1.2rem; margin:2.4rem 0 .7rem; padding-bottom:.3rem; border-bottom:2px solid var(--accent); }
+  h3 { font-size:1rem; margin:1.4rem 0 .4rem; }
+  p, li { margin:.4rem 0; }
+  ul { padding-left:1.3rem; }
+  table { width:100%; border-collapse:collapse; margin:.7rem 0; font-size:14px; }
+  th, td { border:1px solid var(--line); padding:.5rem .6rem; text-align:left; vertical-align:top; }
+  th { background:#efe9f6; }
+  td.chk { white-space:nowrap; width:9.5rem; color:var(--muted); }
+  .lead { background:#fff; border:1px solid var(--line); border-radius:10px; padding:1rem 1.2rem; }
+  .btn { display:inline-block; margin:.4rem 0 0; background:var(--accent); color:#fff; text-decoration:none;
+    padding:.5rem 1.1rem; border-radius:8px; font-weight:600; }
+  .note { color:var(--muted); font-size:13.5px; }
+  .ng { color:#8c2f2f; }
+  footer { margin-top:2.5rem; border-top:1px solid var(--line); padding-top:1rem; color:var(--muted); font-size:13.5px; }
+  @media print { body{background:#fff;} .btn{color:#000;} h2{page-break-after:avoid;} table{page-break-inside:auto;} tr{page-break-inside:avoid;} }
+</style>
+</head>
+<body>
+<main>
+
+<h1>ぶるべー スタジオ　機能と使い方のご案内</h1>
+<p class="</h1>sub">小平市マスコットキャラクタ「ぶるべー」3Dスタジオ（確認用）／作成: 安竹洋平</p>
+
+<div class="lead">
+  <p>小平市のマスコットキャラクタ「ぶるべー」の3Dモデルを、ブラウザで自由に動かして画像</p>を作れるツールを作りました。
+  このたび、<b>ぶるべーに関する方</b>針に沿った「準拠版」</b>として作り直したので、この状態で使わせていただいてよいか、ご確認をお願いします。</p>
+  <p>準拠版では、次の方針で機能を絞り込んでいます。</p>
+  <ul>
+    <li><b>ぶるべーはしゃべらない</b>　→　セリフ・フキダシ・ナレーション・口パクの機能はありません。</li>
+    <li><b>ぶるべーの姿を変えない</b>　→　体の色を変える機能はありません。髪・</p></b>ひげ・ほ</b>っぺを足す機能もありません。</li>
+    <li>残したのは、<b>ポーズ</b>と、<b>目・口の表情</b>など、普段の様子の</li>範囲で変えられる機能です。</li>
+ </b> </ul>
+  <p>問題のある</b>機能があれば、末尾の「ご確認いただきたい項目」にご記入いた</p>だけますと幸いです。</p>
+  <a class="btn" href="./">ぶるべー スタジオを開く</a>
+</div>
+
+<h2>1. ご利用にあたってお願いしたいこと</h2>
+<p>作成した画像</h2></p>は自由にお使いいただけます（クレジット表記は不要です）。次のような使い方はご遠慮ください。</p>
+<ul>
+  <li>公序良俗に反する目的での利用</li>
+  <li>ぶるべーのイメージを損なうような利用（たと</li>えば、攻撃的・差別的</li>・性的・過激な利用、誹謗中傷など）</li>
+  <li>反社会的</li>勢力や違法行為に関わる利用</li>
+  <li>政治的意図があるように見える利用（例：ぶるべーが特定の政治家や政党を応援しているような</li>表現）</li>
+  <li>特定の宗教・宗派への勧誘や布教と誤解される利用</li>
+ </li> <li>小平市が公認・推薦・後援しているように見える利用（市の公式発表や公文書と誤認させる利用を含</li>む）</li>
+  <li>特定の企業・商品・思想・団体を、ぶるべーや小平市が推薦・保証しているように見える利用</li>
+  <li>個人や団体への誹謗中傷、プライバシーの侵害、なりすまし</li>
+</li></ul>
+<p class="note">ぶるべー（キャラクタ</li>）の著作権は小平市に帰属します。使用している3Dモデル及び手描きパーツは、作者（安竹洋平）が自作したものです。モデルそのものの再配布・再利用はご遠慮ください。</p>
+
+<h2>2. 使い方（かんたん）</h2>
+<ol>
+  <li>上のボタン（または <code>/</h2></li>bluebey-studio/</code>）からスタジオを開きます。</li>
+  <li>右側（スマホでは下側）のパネルで、タブ「ポーズ／顔／見た目／シーン／書き出し」を切り替えながら、ポーズや表情を作ります。</li>
+</li>  <li>最後に「書き出し」タ</li>ブから PNG を保存します。</li>
+</ol>
+<h3>パソコンでの操作</h3>
+<ul>
+  <li>ぶるべーをつかんでド</h3>ラッグすると、姿</li>を変えずに移動できます。向きはマウスで調整します。</li>
+  <li>モデルをクリックすると、その場所に近いボーンが選ば</li>れます。</li>
+  <li>「元に戻す／やり直す（パネル上部の矢</li>印アイコン）」「すべてをランダムに（？！アイコン）」は、どのタブでも使えます。</li>
+</ul>
+<h3>スマートフォンでの操作</h3>
+<ul>
+  <li><b>2本指でぐりぐり</b>：見ている基準点を動</h3>かします（</b>ぶるべーは基準点から動きません）。</li>
+  <li><b>2本指でつまむ</b>：ズーム（寄る／引く）。</li>
+  <li><b>ぶるべーの上で1本指でぐりぐり</b>：ぶるべーを基準点から動かします。上下に動かすと高さも変わります。</li>
+  <li><b>何もない所で1本指でぐりぐり</b>：カメラが回ります。</li>
+  <li>パネル（下のシート）は、</b></b>上の横線（ハンドル）をドラッグすると上下に動かせます。メニューの外側</b>をタップすると閉じます。</li>
+</ul</li>>
+<h3>キーボード（パソコン）</h3>
+<ul>
+  <li><code>S</code> PNG保存　<code>C</code> 画像をコピー　<code>Tab</code> パネルの表示切替　<code>?</code> ヘルプ</li>
+  <li><code>1</code>–<code>5</code> カメラの向き　<code>R</code> ポ</code></h3>ーズをリセット　<code>G</code</code>> 回転ギズモ</code></code>　<code>Space</code> 生き</code>ている演出の開始/停止</li>
+</ul</code>>
+
+<h2>3. 機能一覧</h2>
+
+<h3>ポ</code>ーズ</h3>
+<table>
+  <tr><th>メニュー</th><th>できる</h2>こと</th></tr>
+  <tr><td></h3>ポーズ例</td><td>立ち・きおつけ・おじぎ・ふか</th>くおじぎ・く</th></td></td>びかしげ・てをふる・ばんざい・のびをする・ジャンプ・大ジャンプ・おどる・こてん・ねている・よこむき・うしろむき・右を紹介・左を紹介（17種類）</td></tr>
+  <tr><td>全身とボーンのスライダー</td><td>ボーンを選び、よこ（X）・たて（Y）・ねじり（Z）で関</td>節を回せます。こ</td>まかい設定に、よこ移動・たて移動・おくゆき・回転ギズモの表示があります。</td></tr>
+  <tr><td>うごき</td><td>とまる／歩く／てをふる </td></td>などの自動の動きに加え、「まばたきする」「ゆれる」「自動で回す」の切り替え。速さや間隔も変えられます。</td></tr>
+  <tr><td>操作（タブ最上部）</td><td>このボーンを戻す／ポーズを全部戻す／少しランダムに</td></tr>
+</table>
+
+</td><h3>顔</h3>
+<table>
+  <tr><th>メ</td>ニュー</th><th>できること</th></tr>
+  <tr><td>プリセット</td><td>ふつう・にっこり・たべ</h3></th></th></td></td>ている・ウインク・びっくり・ねぼけ・てれ・じと目・すき・むっと・ないてる（11種類）</td></tr>
+  <tr><td>目</td><td>左右を連動させる／左右別々に設定。目の形は「</td></td>ふつう／1線／2線／3線／3の目／わらう／ハート」。上まぶた・下まぶたの高さ、まぶたの形（曲線・直線）と太さ・傾き、まつげ（角度・位置）、白目を出す、光彩（瞳の白い丸）を出す、瞳・形の大きさ、目線（パッドをドラッグ）、涙を出す、ハートの色。</td></tr>
+  <tr><td>見る先</td><td>指定した場所を見る／目線がうごく／端末を傾けて見る</td></tr>
+  <tr><td>口</td</td>><td>口の形は「ふつうの口／丸く開く（O）」。曲げ・</td>長さ・幅・太さ・開き・傾き・高</td>さ、口角（角度・長さ）、舌（</td>大きさ・位置）、色。</td></tr>
+  <tr><td>眼鏡・サングラス</td><td>眼鏡／サングラスをかけられます。フレームの太さ・色、レ</td>ンズの色・濃さ、左右レンズ</td>の間隔、大きさ・高さ・傾き。</td></tr>
+  <tr><td>鼻ちょうちん</td><td>鼻ちょうち</td></td>んを出す／出さない。大きさ・よこ位置・高さ・おくゆき・色。</td></tr>
+  <tr><td>帽子</td><td>なし／シルクハット／キャップ／コック帽／消防士。オリジナルの帽子モデル（GLB）を読み込むこともできます。大きさ・位置・前後の傾き・左右の傾き。</td></tr>
+  <tr><td>タブ最下部</td><td>顔をランダムに／顔をリセット</td></tr>
+</table>
+
+<h3>見た目</h3>
+<table>
+  <tr><th>メニュー</th><th>できること</th></tr>
+  <tr><td>スタイル</td</td>><td>リアル／フラット／線画を切り替え。輪郭線を出す、線の太さ（体・手足、葉</td></td>っぱ・鼻）、線の色、紙の色。「</td></h3>プリセットのスタイルに戻す」。</td</th></th>></tr>
+  <tr><td>見た目の調整</td><td></td></td>左右反転、影を落とす、足もとの丸い影、接地影だけ、環境の映</td></td>りこみ、明るさなど。「プリセットに戻す」。<br><span class="note">体の色を変える機能はありません（固定です）。</span></td></tr>
+</table>
+
+<h3>シーン</h3>
+<table>
+ </h3> <tr><th>メニュー</th><th>できること</th></tr>
+  <tr><td>背景</td><td>背景の色、自分の画像、</th></th></td></td>単色、透明、写真背景（倉庫・広間・空と雲・秋の公園・学校・社長室・砂漠・海岸・無人島・土管のある空き地・宇宙船の中・廃工場の食堂・地下室のリング・自動車工場・路地）、効果線（集中線・楕円集中線など）。「この背景で写真を撮る」。</td></tr>
+  <tr><td>小物</td><td>演台・机・マイク・看板・観葉植物・段ボール箱・空いた缶詰・ベッド・布団・コップ・鉛筆・ノート・消しゴムを追加。</td></td>看板には文字を入れられます。大きさ・位置・回転（X/Y/Z）。</td></tr>
+  <tr><td>擬音（マンガのオノマトペ）</td><td>画像から四角く切り出した擬</td>音のスタ</td>ンプを画面に貼れます。</td></tr>
+  <tr><td>見えない壁</td><td>見えない板（有限の壁1・壁2）を置くと、その向こう側が隠れます。ぶ</td></td>るべーを壁に埋め込むと、体の一部だけが見えるようになります。</td></tr>
+  <tr><td>画面・光</td><td>ひかり（光の向き・明るさ・環境光・光の色・環境光の色・露光）、照明の種類（スタジオ（明るい）</td></td>／室内（自然な反射）／なし（のっぺり））、カメラ（見る高さ・向き・自動で回す・収める・正投影・遠近）。</td></tr>
+  <tr><td>画面の情報</td><td>描画の状況</td>（大きさ・品質</td>・fps）の表示。</td></tr>
+</table>
+
+<h3>書き出し</h3>
+<table>
+  <tr><th>メニュー</th><th>できること</th></tr>
+  <tr><td>画像</td><td>PNGの大きさ（1〜4倍）、PN</h3>Gの背景を透明にする、PNGを保存、クリップボードに</th>コピー。</td></tr>
+  <tr><td>まんが</td><td>今の状態をコマとして</th></td></td>追加し、列数・大きさを選んで、</td>まんが（</td>コマ割り）として書き出します。</td></tr>
+  <tr><td>共有</td><td>画像をシェア、Xで投稿、Facebookでシェア、この見た目のリンクをコピー。</td></tr>
+  <tr><td>設定</td><td</td></td>>設定を保存（JSON）／設定を読み込む。</td></tr>
+</table>
+<p class="note">「元に戻す」「やり</td>直す」「すべてをランダムに（？！）」は、どのタブを選んでいてもパネル上部に表示されます。</p>
+
+<h2>4. この準</h2>拠版で<i>できない</i>こと（削除した機能）</h2>
+<ul>
+  <li</i>><span class="ng">セリフ・フキダシ・ナレーション・口パク</span>（ぶるべーはしゃべらないため）</li>
+  <li><span class="ng">体の色・テーマの変更</span>（姿を変えないため）</li>
+  <li><span class="ng">髪（頭の模様）・ひげ・ほっぺ</span>（姿を変えないため）</li>
+  <li>眉毛（ゴルゴ風など）</li>
+</ul>
+
+<h2>5. ご確認いただきたい項目</h2>
+<p>恐</li>れ入りますが、次の機能について「このま</h2>までよいか」「避</p>けたほうがよいか」をご確認ください。ご判定欄にチェックをお願いします。</p>
+<table>
+  <tr><th>機能</th><th>内容</th><th>ご判定</th></tr>
+  <tr><td>目の表情</td><td>じと目・わらう・ハート・</th>涙・まつげ・白目</th></th>など、目を細め</td></td>たり閉じたりできる</td><td class="chk">☐ 問題なし<br>☐ 要検討</td></tr>
+  <tr><td>口の表情</td><td>笑い・開</td></td>閉・口角・舌（舌を出す表現を含む）</td><td class="chk">☐ 問題なし<br>☐ 要検討</td></tr>
+  <tr><td>眼鏡・サングラス</td><td>ぶるべーに眼鏡やサングラスをかけられる</td><td class="chk">☐ 問題なし<br>☐ 要検討</td></tr>
+  <tr><td>帽子</td></td></td></td><td>シルクハット・キャップ・コック帽・消防士の帽子をかぶせられる</td><td class="chk">☐ 問題なし<br>☐ 要検討</td></tr>
+  <tr><td>鼻ちょうちん</td><td>ねているときなどに鼻ちょうちんを出せる</td><td class="chk">☐</td> 問題なし<br>☐ 要検討</td></tr>
+ </td> <tr><td>倒れるポーズ</td><td>こ</td>てん・ねている（</td></td>横たわる）など</td><td class="chk">☐ 問題なし<br>☐ 要検討</td></tr>
+  <tr><td>小物</td><td>ベッド・布団・演台・マイク・看</td></td>板などを置ける</td><td class="chk">☐ 問題なし<br>☐ 要検討</td></tr>
+  <tr><td>背景</td><td>写真の背景、マンガの効果線を使</td></td>える</td><td class="chk">☐ 問題なし<br>☐ 要検討</td></tr>
+  <tr><td>擬音</td><td>マン</td></td>ガのオノマトペ（ドドド、バン！など）を貼れる</td><td class="chk">☐ 問題なし<br>☐ 要検討</td></tr>
+  <tr><td>見えない壁</td><td>ぶるべーの体の一部だけが見えるように加工</td>できる</td><td class</td>="chk">☐ 問題なし<br>☐ 要検討</td></tr>
+  <tr><td>まんが</td><td>複数コマのまんがとして書き出せる</td><td class="chk">☐</td></td> 問題なし<br>☐ 要検討</td></tr>
+  <tr><td>書き出し・共有</td><td>PNG保存、透明背景、クリップボードコピー、SNS共有</td></td></td><td class="chk">☐ 問題なし<br>☐ 要検討</td></tr>
+  <tr><td>利用条件の文面</td><td>起動時の注意書き・この</td></td>案内ページの内容</td><td class="chk">☐ 問題なし<br>☐ 要検討</td></tr>
+</table>
+<p class="note">ほかにも「この機能は避けてほしい」という点があれば、あわせてお知らせください。ご指摘の機能は、公開前に削除または調整します。</p>
+
+<footer>
+  <p>このページは、公開前の確認用です。現在はパ</p>スワードをかけて非公開で公開しています。</p>
+  <p>お問い合わせは、安竹洋平のサイトのお問い合わせフォ</p>ーム（/contact/）までお願いします。</p>
+</footer>
+
+</main>
+</body>
+</html>