blob: bec6008baebd88f1f2f5d8e416b6c5bef16ba6a0 (
plain)
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
|
<!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>
|
