デザインの部屋
デザインの部屋は、作る製品のブランドとデザインを決めて作る所です。画面のキャンバスで描く前に、道具・トーン・色・キャラクターを決めます。決めた物は、全部の画面と、ウェブ・SNS で同じに使います。
設計の段は Claude の API で作ります（ブランド・画面・部品・キャラクター）。設計の一式は、作る段（各自の Claude Code や Codex）へ束にして渡します（設計図 ① システム開発）。
BeesBuild そのものの見た目（暗い・明るい・自分のテーマ、ミツバチ、遊びのモード）は、テーマ・キャラクター・遊びのモードにあります。
ブランドとデザインの決め
設計図の「ブランド」のタブで決めます。
| 決める物 | 中身 |
|---|---|
| UI の道具 | 動き・絵・アイコン・字に、何を使うか |
| デザインのトーン | 4 本のつまみと、一言の説明 |
| カラーセット | 標準・夜・強調（見出し・広告）の色の組 |
| キャラクター | 役・ポーズと表情の数・使う所 |
UI の道具
| 分野 | 道具の例 | 使う所 |
|---|---|---|
| 動き | Rive | キャラクターと状態の動き |
| 動き | CSS と Motion | 画面の小さな動き |
| 絵 | SVG | ロゴ・アイコン・図 |
| 絵 | 画像の AI | キャラクターの仕上げ |
| アイコン | Lucide（ISC）か自作 | 画面のアイコン |
| 字 | IBM Plex Sans JP・Inter など | 本文と見出し |
使う道具は、ライセンスの台帳に入ります（規約の線とライセンス）。
デザインのトーン
| 左 | 右 |
|---|---|
| やさしい | きりっと |
| あたたかい | つめたい |
| 子どもっぽい | 大人 |
| にぎやか | 静か |
つまみの位置と一言の説明（例：「先生向け。紙のノートの温かさ。子どもっぽくしない」）は、AI に案を頼む時の元になります。
キャラクター
製品の中で使うキャラクターを決めます。役（案内役・使う人の代わり など）・ポーズと表情の数・使う所（チュートリアル・空の画面・通知・説明のページ・SNS の動画）を書きます。
デザインの部屋
| 所 | 中身 |
|---|---|
| タブ | 画面・部品・ブランド・キャラクター・渡す |
| 板 | ロゴ・色（トークン）・字・キャラクター・声（言葉づかい） |
| 描く道具 | 選ぶ・枠・文字・ペン・画像・コメント・AI。どれもキー 1 つで持ち替える |
| AI に頼む | 一言で頼むと、AI が 3 つの案を作る。見込みの費用が出る |
| 版 | 案ごとの版（v1・v2・v3）と、採った版 |
| 当てる | 全部の画面に当てる・トークンを書き出す |
| 使う物 | 文と設計は Claude（API）、絵は画像の AI（API）、動きは Rive。今日の費用 |
- 頼む：「先生向けの、落ち着いた青。紙のノートの温かさ。子どもっぽくしない」のように、一言で頼みます。
- 3 つの案：AI が 3 つの案を作ります。
- 版を選ぶ：案を見比べ、採る版を決めます。前の版にも戻せます。
- 当てる：全部の画面に当てます。画面のキャンバスの画面が、まとめて新しい見た目になります。
- 書き出す：トークンを
tokens.jsonに書き出します。
トークンの形
ブランドのトークンは、Design Tokens の標準の形（DTCG 2025.10）にそろえます。標準の形なので、ほかのデザインの道具とも行き来できます。
- 色のトークンには、役の名前（
brand.ink・surface.paper・state.ok・borderなど）を付けます。画面のコードは、色の値ではなく役の名前を使います。 - ブランドのトークンとテーマは行き来できます。ブランドからテーマを作ることも、テーマからブランドの案を作ることもできます。
- 色の差（コントラスト）は、字が 4.5:1 以上になるように点検します。
キャラクターと AI の仲間
キャラクターは Rive で作り、声の ID を付けます。案内役のような製品のキャラクターも、統括やレビューの役の AI の仲間も、同じ形で持ちます。
| 欄 | 中身 |
|---|---|
| 名前と役 | 案内役・統括・レビューの仲間 など |
| 係 | 受け持つ AI（全体の AI・ある区画の統括・レビュー） |
| 声 | 声の ID |
| 動き | 歩く・案内する・しゃべる（口が動く） |
- 組織図で、キャラクターの上下の関係を見ます。
- 画面はシンプルなまま、下の帯の上をキャラクターが歩いて話します。アニメ調でもリアル調でも合うように、画面は飾りません。
- 話す AI は、速さと向きで道を分けます。話すのは API（流れる返事）で速く、重い作業は長く生かした Claude Code の CLI のセッションに渡します。
- 声は、手元で文字にし、API の返事を文ごとに読み上げ、読み上げの時刻で Rive の口を動かします（声）。
見た目は洗練に寄せます。かわいくするのは、そういうテーマを選んだ人だけです。
先に作る動画
画面のキャンバスと設計から、30〜60 秒の動画を作れます。型は「画面の紹介」と「キャラクターの解説」です。まだ無い機能には「開発中」「予定」の字幕を付け、できた版を先に作る束に渡します。作った後は、本物の画面で作り直します（ムービー・先に作る 4 つ）。
データの形
| 型 | 中身 |
|---|---|
HbBrand | ブランド（UI の道具・トーン・カラーセット・トークン・版） |
HbDesignAsset | デザインの素材（ロゴ・絵・字） |
HbCharacter | 仲間（名前・役・係・声・アンカー） |
HbRiveAsset | Rive の部品の約束 |
HbMovie | ムービー |