ヨルハ：ニーア オートマタ — ヨルハ UIビルドショーケース：インタラクティブなアンドロイド・インターフェース体験 | オンラインでプレイ
完成品：ヨルハ UIビルドショーケース
カバー
カバーアート：ヨルハ UIビルドショーケース — GPT Image 2 で生成した16:9のキービジュアル
スクリーンショット
実際のビルド：アセットワーカーがキャラクタースプライトをなぞり、UIワーカーが認証ピルをリンクする
スクリーンショット
実際のビルド：ui.speaker_plate が通信ログの中で枠囲みされ、表示される
スクリーンショット
完成した端末：HUD、信号モニター、2Bのスプライト、選択肢リスト、通信ログ、ページャー、フリーアクション入力
スプライト
2B — 全身のランタイムスプライト、透過PNG（BiRefNet で背景を除去）
スプライト
9S — スキャンタイプのランタイムスプライト、透過PNG（BiRefNet で背景を除去）
スプライト
A2 — 試作型脱走兵のランタイムスプライト、透過PNG（BiRefNet で背景を除去）
ヨルハ UIビルドショーケースは、2B、9S、A2 が従う軌道型アンドロイド指揮システム「ヨルハ」のインターフェース言語を、ブラウザ上で再構築したものです。静的なモックアップではありません。ページを読み込むと、インターフェースはまだ構築の途中です。自律したカーソルが画面を飛び回り、各要素の周囲に枠を描き、名前を付け、一歩ずつ表示していきます。まず背景と照明、次にスキャンフィールドとキャラクタースプライト、そしてHUD、信号モニター、認証ピル、対話システム、物語テキスト、最後に選択肢リスト。
最後のパネルが落ち着くと、動作するヨルハ端末が残ります。救助信号という目標、スピーカープレートとページャーを備えた等幅フォントの通信ログ、番号の付いた三つの決断、そして次に取る行動を自分で書けるフリーアクションフィールドです。アッシュホワイト、髪の毛ほどの黒い罫線、絶えず流れる走査線が、冷たく静かで紛れもなくアンドロイド的な印象を保ちます — かつてのインターフェースを忘れられないものにした、あの抑制された美意識そのままです。
今すぐプレイ： ライブのヨルハ・インターフェースを開く →
特徴
- 自ら組み上がるインターフェース — すべてのHUDレイヤーは、段階的なビルド工程によって目の前で描かれます。枠描画、走査線、ポップ、パネル、タイプライターの各エフェクトが用いられ、それぞれが ui.hud()、ui.signal_monitor、ui.dialogue_system といった固有のランタイムコンポーネント名でラベル付けされます。
- 本物のヨルハ視覚言語 — アッシュホワイトのパネル、髪の毛ほどの黒い罫線、硬いオフセットシャドウ、モノクロの書体。それらを、漂うスキャンフィールドがまとめ上げます。かつてのアンドロイドOSが持つ抑制を、生きたウェブページとして再構築しました。
- 戦術ステージとスプライトのライティング — 独自のスキャンフィールドを備えたグレースケールの廃墟背景と、ドロップシャドウの演出工程が、全身のキャラクタースプライトを中央に保ち、読みやすく、指令表示の読み取り画面のように縁取ります。
- 通信ログ対話システム — スピーカープレート、一文字ずつ書かれる等幅フォントの物語テキスト、脈打つ「次へ」のプロンプト、そして「1/3」のページャー。ポッド042の声で語る、古典的なアドベンチャーゲームの会話ブロックです。
- 分岐する選択肢リスト — 番号付きの決断の列（01〜03）が、ブラックボックスの救助信号を、遊べるビジュアルノベルの一場面として縁取ります。どんな物語エンジンにも接続して動かせる準備が整っています。
- フリーアクション入力 — 次に取る行動を自分で入力し、画像演算を切り替え、「確定」ボタンで決定します。インターフェースがプレイヤーに操作を返すときに使う、あのフィールドです。
- インストール不要のブラウザ実行環境 — 純粋な HTML、CSS、JavaScript のみで、ビルド工程もダウンロードも不要です。リンクを開けば、端末が自ら起動します。
インターフェース
UI
ビルド段階1 — 端末が埋まる前に、廃墟となったバンカーの背景とHUDフレームが表示される
UI
ビルド段階2 — アセットワーカーが asset.character_sprite をなぞり、UIワーカーが ui.auth_link をリンクする
UI
ビルド段階3 — 一号機のそばで、通信ログが場面のテキストを打ち出す
UI
最終状態 — 完成したヨルハ端末。決断あるいは自由な行動を待っている
背景
バンカー指令デッキ — 端末の雰囲気を支える世界のアート。ヨルハ：ニーア オートマタの世界のために生成された
背景
夕暮れの都市廃墟 — 植生に分断された放棄された塔々。端末が見つめる地上の世界
制作プロセス
第1段階：世界構築claude-opus-5
たった一文から、ヨルハ：ニーア オートマタの世界が生まれます。7人のキャラクター（2B、9S、A2、司令官ホワイト、パスカル、アダム、イヴ）を扱う25枚のアトムカード、8つのロケーション（バンカー、都市廃墟、レジスタンスキャンプ、機械の村、遊園地廃墟、森の王国、コピーされた都市、塔）、3つのイベント、4件の伝承項目、3つの秘密。それぞれに専用のカバーアートが付きます。
たった一文から、ヨルハ：ニーア オートマタの世界が生まれます。7人のキャラクター（2B、9S、A2、司令官ホワイト、パスカル、アダム、イヴ）を扱う25枚のアトムカード、8つのロケーション（バンカー、都市廃墟、レジスタンスキャンプ、機械の村、遊園地廃墟、森の王国、コピーされた都市、塔）、3つのイベント、4件の伝承項目、3つの秘密。それぞれに専用のカバーアートが付きます。
第2段階：アセット生成gpt-image-2
全身のキャラクター素材、16:9のランタイム背景、そしてカバーのキービジュアルは、GPT Image 2 で生成されます。その後、キャラクター素材は BiRefNet で背景を除去され、きれいな透過PNGになります。こうしてステージには、背景が残らないスプライト一式が揃います。
全身のキャラクター素材、16:9のランタイム背景、そしてカバーのキービジュアルは、GPT Image 2 で生成されます。その後、キャラクター素材は BiRefNet で背景を除去され、きれいな透過PNGになります。こうしてステージには、背景が残らないスプライト一式が揃います。
第3段階：インターフェースの構築と公開claude-opus-5
ヨルハのHUD — ヘッダーバー、プロダクトバッジ、信号モニター、認証ピル、戦術ステージ、選択肢リスト、通信ログ、ページャー、フリーアクション入力 — を、静的な HTML、CSS、JavaScript のアプリとして組み立て、コンポーネントごとのラベル付きの段階ビルドアニメーションに結びつけ、公開プレイリンクとともに公開します。
ヨルハのHUD — ヘッダーバー、プロダクトバッジ、信号モニター、認証ピル、戦術ステージ、選択肢リスト、通信ログ、ページャー、フリーアクション入力 — を、静的な HTML、CSS、JavaScript のアプリとして組み立て、コンポーネントごとのラベル付きの段階ビルドアニメーションに結びつけ、公開プレイリンクとともに公開します。
アセットのプロンプト
アセットのプロンプト
インターフェースモックのプロンプトgpt-image-2
「スタイル確認用の16:9ビジュアルノベルUIモックを作成してください。題材：9Sの一人称視点による、悲劇的なSF恋愛アドベンチャーゲーム向けの、壊れたヨルハ情報端末のインターフェース。構図：空の背景レイヤー、下部に半透明の戦術対話ボックス、右上に「真理同期」「信頼」「警戒」のステータスウィジェット、控えめな選択肢ボタン、キャラクターなし、大きく判読できる著作権ロゴなし。スタイル：黒、白、アッシュグレー、くすんだ金色の髪の毛ほどの罫線、淡い青の走査グリッド、小さな赤いエラーコードのアクセント、終末後のSF HUD、優雅でゴシック的な軍事的抑制、損傷した記憶アーカイブ。テキスト：最小限の汎用UIラベルのみ、長く判読できる段落は避ける。制約：透かしなし、実在ブランドのロゴなし、雑然とさせない、中央はキャラクタースプライト用に空けておく。」
「スタイル確認用の16:9ビジュアルノベルUIモックを作成してください。題材：9Sの一人称視点による、悲劇的なSF恋愛アドベンチャーゲーム向けの、壊れたヨルハ情報端末のインターフェース。構図：空の背景レイヤー、下部に半透明の戦術対話ボックス、右上に「真理同期」「信頼」「警戒」のステータスウィジェット、控えめな選択肢ボタン、キャラクターなし、大きく判読できる著作権ロゴなし。スタイル：黒、白、アッシュグレー、くすんだ金色の髪の毛ほどの罫線、淡い青の走査グリッド、小さな赤いエラーコードのアクセント、終末後のSF HUD、優雅でゴシック的な軍事的抑制、損傷した記憶アーカイブ。テキスト：最小限の汎用UIラベルのみ、長く判読できる段落は避ける。制約：透かしなし、実在ブランドのロゴなし、雑然とさせない、中央はキャラクタースプライト用に空けておく。」
スプライトのプロンプト（2B）gpt-image-2
「@2B ／ ヨルハ二号B型。ビジュアルノベルのランタイム向けに、切り抜きやすい3:4のキャラクタースプライト素材を作成してください。題材：立っている2B、膝まで写る全身、抑えた悲しげな表情、片手を剣の柄の近くに置き、攻撃動作なし、9Sから見たようにわずかにこちらを向く。構図：キャラクターを中央に、無地の明るいグレーの継ぎ目のない背景、切り取られずに全身のシルエットが見える、テキストなし。スタイル：冷たいゲームコンセプトアートと繊細な悲劇的恋愛CG、黒いゴシック調の戦闘服、白い短髪、戦術バイザー、ほっそりとしたシルエット、モノクロの黒・白・グレーにくすんだ金色のディテール。制約：背景除去しやすい単純な背景、他のキャラクターなし、透かしなし、ロゴなし、グロ表現なし、透過PNGの切り抜きのために輪郭をきれいに保つ。」
「@2B ／ ヨルハ二号B型。ビジュアルノベルのランタイム向けに、切り抜きやすい3:4のキャラクタースプライト素材を作成してください。題材：立っている2B、膝まで写る全身、抑えた悲しげな表情、片手を剣の柄の近くに置き、攻撃動作なし、9Sから見たようにわずかにこちらを向く。構図：キャラクターを中央に、無地の明るいグレーの継ぎ目のない背景、切り取られずに全身のシルエットが見える、テキストなし。スタイル：冷たいゲームコンセプトアートと繊細な悲劇的恋愛CG、黒いゴシック調の戦闘服、白い短髪、戦術バイザー、ほっそりとしたシルエット、モノクロの黒・白・グレーにくすんだ金色のディテール。制約：背景除去しやすい単純な背景、他のキャラクターなし、透かしなし、ロゴなし、グロ表現なし、透過PNGの切り抜きのために輪郭をきれいに保つ。」
背景のプロンプト（都市廃墟）gpt-image-2
「ビジュアルノベルのランタイム向けに、16:9のクリーンな背景を作成してください。場面：雨上がりの夕暮れの終末後の廃墟都市、植生に分断された放棄されたコンクリートの塔、壊れた高架道路、遠くの月光の霞、手前に小さな白い花の群生、キャラクターなし。構図：ワイドショット、落ち着いて読みやすい中景、対話UIに適した空の下三分の一、中央は雑然とさせない、映画的な奥行き。スタイル：冷たい『ニーア』風の終末後SFゲームコンセプトアートの雰囲気、アッシュグレー、白、黒、くすんだ金のハイライト、塵と霧、憂鬱で孤独。テキスト：テキストなし。制約：人物なし、手前にロボットなし、透かしなし、ロゴなし、ランタイムに適したクリーンな背景。」
「ビジュアルノベルのランタイム向けに、16:9のクリーンな背景を作成してください。場面：雨上がりの夕暮れの終末後の廃墟都市、植生に分断された放棄されたコンクリートの塔、壊れた高架道路、遠くの月光の霞、手前に小さな白い花の群生、キャラクターなし。構図：ワイドショット、落ち着いて読みやすい中景、対話UIに適した空の下三分の一、中央は雑然とさせない、映画的な奥行き。スタイル：冷たい『ニーア』風の終末後SFゲームコンセプトアートの雰囲気、アッシュグレー、白、黒、くすんだ金のハイライト、塵と霧、憂鬱で孤独。テキスト：テキストなし。制約：人物なし、手前にロボットなし、透かしなし、ロゴなし、ランタイムに適したクリーンな背景。」
背景のプロンプト（バンカー指令デッキ）gpt-image-2
「ビジュアルノベル向けに、16:9のクリーンなランタイム背景を作成してください。場面：地球の上に浮かぶ軌道型アンドロイド軍の指令デッキ、冷たい黒・白・グレーの内部、吊り下げられたデータパネル、月への放送端末、キャラクターなし、ロゴなし。構図：ワイドショット、対話UIのために下三分の一と中央が読みやすい、強い奥行き、抑制されたゴシック調SFの幾何学。スタイル：壊れたヨルハ情報端末の世界、くすんだ金の髪の毛ほどの光、淡い青のモニターの輝き、孤独な終末後軍事の雰囲気。テキスト：テキストなし。制約：判読できるロゴなし、人物なし、透かしなし、ランタイムに適したクリーンな背景。」
「ビジュアルノベル向けに、16:9のクリーンなランタイム背景を作成してください。場面：地球の上に浮かぶ軌道型アンドロイド軍の指令デッキ、冷たい黒・白・グレーの内部、吊り下げられたデータパネル、月への放送端末、キャラクターなし、ロゴなし。構図：ワイドショット、対話UIのために下三分の一と中央が読みやすい、強い奥行き、抑制されたゴシック調SFの幾何学。スタイル：壊れたヨルハ情報端末の世界、くすんだ金の髪の毛ほどの光、淡い青のモニターの輝き、孤独な終末後軍事の雰囲気。テキスト：テキストなし。制約：判読できるロゴなし、人物なし、透かしなし、ランタイムに適したクリーンな背景。」
背景のプロンプト（遊園地廃墟）gpt-image-2
「悲劇的なSFビジュアルノベル向けに、16:9のクリーンなランタイム背景を作成してください。場面：人間を模倣した機械生命体が築いた、放棄された遊園地の結婚式場、壊れたメリーゴーラウンドの灯り、紙の花、ひび割れた通路、不気味な礼拝堂のアーチ、判読できるテキストなし、手前にキャラクターなし。構図：対話UI用にクリーンな下三分の一を備えたワイドショット。スタイル：終末後の機械の憂鬱、アッシュグレーと冷たい白にくすんだ祝祭感、塵と朽ちゆく様子。テキスト：テキストなし。制約：透かしなし、ロゴなし。」
「悲劇的なSFビジュアルノベル向けに、16:9のクリーンなランタイム背景を作成してください。場面：人間を模倣した機械生命体が築いた、放棄された遊園地の結婚式場、壊れたメリーゴーラウンドの灯り、紙の花、ひび割れた通路、不気味な礼拝堂のアーチ、判読できるテキストなし、手前にキャラクターなし。構図：対話UI用にクリーンな下三分の一を備えたワイドショット。スタイル：終末後の機械の憂鬱、アッシュグレーと冷たい白にくすんだ祝祭感、塵と朽ちゆく様子。テキスト：テキストなし。制約：透かしなし、ロゴなし。」
背景のプロンプト（コピーされた都市）gpt-image-2
「ビジュアルノベル向けに、16:9のクリーンなランタイム背景を作成してください。場面：白いコピーされた都市、人工人間の都市の空っぽの外殻、峻厳でミニマルな幾何学の建物、光沢のある白い石、果てしない淡い虚無、かすかな黒いひび割れとデータノイズ、キャラクターなし。構図：対話UI用にクリーンな下三分の一を備えたワイドショット、強い遠近法の消失点。スタイル：臨床的なSFミニマリズム、白と淡いグレーに黒い髪の毛ほどのひび割れ、静かで落ち着かない。テキスト：テキストなし。制約：人物なし、透かしなし、ロゴなし、ランタイムに適したクリーンな背景。」
「ビジュアルノベル向けに、16:9のクリーンなランタイム背景を作成してください。場面：白いコピーされた都市、人工人間の都市の空っぽの外殻、峻厳でミニマルな幾何学の建物、光沢のある白い石、果てしない淡い虚無、かすかな黒いひび割れとデータノイズ、キャラクターなし。構図：対話UI用にクリーンな下三分の一を備えたワイドショット、強い遠近法の消失点。スタイル：臨床的なSFミニマリズム、白と淡いグレーに黒い髪の毛ほどのひび割れ、静かで落ち着かない。テキスト：テキストなし。制約：人物なし、透かしなし、ロゴなし、ランタイムに適したクリーンな背景。」
Neta Studio を選ぶ理由
プロフェッショナル — クラウドの基盤システムが、世界構築からアセット生成、公開までのワークフロー全体を支えます。すべてクラウド上で動作し、ローカル環境の準備は不要です。最新モデルへ安定してアクセスできます。Claude Opus 5、GPT Image 2、DeepSeek V3。
ワンクリック生成 — 公式に調整されたスキルが、世界構築、キャラクターデザイン、アート生成、スプライトの切り抜き、パッケージ化というすべての工程を導きます。ワールドフォークのリソース共有も標準搭載です。
コミュニティ第一 — ユーザーは無制限に世界を構築でき、公開された世界はすべてフォーク、リミックス、再構想できます。
スタジオ内部
‹
›
スタジオ
スタジオ
スタジオ
制作を始める
このインターフェースは、Neta Studio AI がたった一文から生成しました。世界は数分、アセットも数分、ビルドも数分で完成します。あなたにもできます — この世界をアレンジするもよし、どんな題材から新しく始めるもよし。コーディングは不要、無料で始められます。
×