ひとつ選んで、
あなたの物語のUIに。

QUICK START

まずは、ひとつ作ってみよう

YOUR WORKSPACE

画面のどこを使う？

プリセット・お気に入り・履歴

出発点を選ぶ場所。お気に入りはこのブラウザー内に残せます。履歴は今回の操作中に生成したものです。

プレビュー

出来上がりを確認する場所。画面比率やボタン状態を切り替えて確認できます。「直接編集」では位置や大きさも調整できます。

ガチャ

新しいデザインを作る場所。1つずつ作るほか、4案をまとめて作り、比べることもできます。

調整・CSS

色・形・文字・配置などを整える場所。CSSは必要な方だけ使える、追加のアレンジ機能です。

スマートフォンでは縦に並びます。下へスクロールするとプリセットや調整欄が見つかります。画面チュートリアルは該当する場所まで自動で移動します。

FIND YOUR STYLE

ガチャで「好き」を絞り込む

1. スタイルを選んで、4案を生成。候補を押してプレビューに反映。比較画面でも並べて見られます。
2. 残したい候補はピン留め。次に候補を生成するときも、ピン留めした候補を残せます。残りの枠に新しい候補が入ります。
3. 好きな部分は固定。「配色」「形状」「装飾」を固定すると、その要素を保って生成できます。全部を固定すると変化が小さくなります。
4. 一部だけ、引き直す。配色だけ変えたいときは、配色の引き直しを使います。固定中の要素は引き直せないので、先に固定を外しましょう。

同じ結果になってしまう？シードは生成の合言葉です。同じ条件とシードからは同じ結果が生まれます。「SEED」の固定を外すと新しい案を探せます。

A LITTLE MORE YOU

CSSでもう少し、自分らしく

調整欄の「CSSでカスタマイズ」を開き、「追加CSS」にコードを入力して「CSSを反映」を押します。入力するだけでは見た目は変わりません。

.design .message {
  border-radius: 24px;
}

.design .game-button {
  letter-spacing: 0.08em;
}

• .design はデザイン全体、.message は会話枠、.game-button はボタンです。
• 解除するときは「追加CSSを解除」。反映できないコードはエラーが出るので、最後に反映できた表示を確認しながら直せます。
• 外部URL、@import などの@ルール、画面への位置固定は使えません。
• 追加CSSはJSONに保存され、プレビューとWeb書き出しに使われます。UnityなどCSSに対応しない書き出し先には反映されません。実際に使う形式で確認しましょう。

KEEP & SHARE

保存と公開は、別の操作です

迷ったら、まず「JSON保存」で端末に控えを残しましょう。サイトへの保存・投稿は、上部の「マイデザイン・みんなのデザイン」から行います。

みんなのデザインを使う

「みんなの公開デザイン」は登録なしで見られます。気になる作品の「JSONをダウンロード」を押し、上部の「JSON読込」で開くと編集できます。スマートフォンで「JSON読込」が見えないときは、調整欄の下部にもあります。

「新着順」は新しく公開されたものから、「人気順（DL数）」はダウンロード数の多いものから表示します。公開JSONのダウンロードでDL数が加算されます。プレビューを見るだけでは加算されません。

登録に必要な個人情報は、メールアドレスのみ。氏名・住所・電話番号・生年月日は不要です。ニックネームとパスワードを設定します。無料会員登録へ →

ブラウザーのデータ削除や端末変更では、端末内の自動保存・お気に入りを引き継げません。大切なものはJSONかサイト保存でも残してください。

TAKE IT TO YOUR GAME

使いたい形で、持ち帰る

あとから編集したい → JSON

「JSON保存」でダウンロードし、「JSON読込」で戻します。WebのZIPにも設計データが入ります。有償CREATIVE版とはJSON形式が異なります。

画像として使いたい → PNG

プレビューの上にある「PNG画像出力」を開き、出力サイズや透明背景を選んで保存します。画像はそのままゲーム内の操作ボタンとして動くものではありません。

Webで使いたい → Web / CSS

上部の「エクスポート」でWebを選んでZIPをダウンロード。展開したファイルと同梱ガイドを確認し、ゲームの処理をつなぎます。追加CSSも含まれます。

ゲームエンジンで使いたい

書き出し先をTyranoScript、Unity UGUI、Godot 4などから選び、画面の取り込み手順とZIP内の説明に従います。フォントや効果の対応差は、書き出し前の診断で確認できます。

完成したゲームそのものを作るツールではなく、UI素材と設計データを作るツールです。まず小さなテスト画面へ取り込んで、文字とボタンの見え方を確認しましょう。

WHEN YOU NEED A HAND

困ったときは