デスクトップアプリ

島のアドベンチャーゲームデザイン

屋上を通るルート、3つの武器スロット、遊び心のある一人称視点インターフェースを備えた小さな海辺の島、ハーバー・スカーミッシュを紹介します。

OpenDesignデザイン・制作
公式
ブラウザゲームのインターフェース4 画面
島のアドベンチャーゲームデザイン:島の俯瞰表示とスタート画面
GPT 6 Astra · 評価例スクリーンショット 1 / 4

LLM Arena 2026年9月

ケースメモ
モデル
GPT 6 Astra
デザインタスク
移動とウェーブ制の戦闘を備え、実際にプレイできる島のアドベンチャー「ハーバー・スカーミッシュ」を作成する。
出力
デスクトップアプリ

適した用途

  • ブラウザゲームのプロトタイププレイ可能なシーンをオープニング状態やポーズ状態とつなげます。
  • 一人称視点インターフェース移動、体力、武器の情報を視界の周囲に整理します。
  • ゲームの起動画面すべてのキーボードコマンドを列挙せずに、舞台設定を紹介します。

主な特徴

  • 戦闘前に見せる島オープニングビューで道路、屋上、周囲の海を示します。
  • 中央を空けたHUDステータスを端部に配置し、照準を見える状態に保ちます。
  • 遊び心のあるポーズ状態傾けたカードにより、中断そのものをビジュアルアイデンティティの一部にしています。

海辺のオープニングを備えた島のアドベンチャーゲームデザイン

ハーバー・スカーミッシュは、プレイヤーを街路に配置する前に、舞台を上空から紹介します。オープニング画面の左側をタイトルが占め、右側には島が配置されています。色とりどりの屋根、時計塔、海辺が同時に見えます。これにより、一人称視点カメラへ切り替わって俯瞰図が見えなくなる前に、プレイヤーは場所の全体像を把握できます。

クリーム色、黄色、濃緑色のインターフェースは、軍事用ダッシュボードというより、印刷された休暇旅行のポスターに近い印象です。短い導入文で手に負えないウサギの襲来を説明し、続いて目立つLet’s Playボタンが、次に取るべき明確なアクションを1つ示します。オープニングには基本的な移動と照準のヒントが表示され、追加の説明は主要な誘導とは分けられています。

完成したスタート画面では、タイトルとプレイ操作にシーブリーズ島を高所から見た景色を組み合わせています。
完成したスタート画面では、タイトルとプレイ操作にシーブリーズ島を高所から見た景色を組み合わせています。

マップパネルを使わない地図表現

島を高所から見せることで、独立した図を追加せずに、道路と屋上の位置関係を説明しています。塔と密集した屋根が識別しやすい形を作り、それらは地上からも確認できます。舞台を紹介するうえで有効ですが、見えている屋根のすべてに到達できることまでは示していません。

明確な開始アクションを1つに絞る

Let’s Playには、後に選択中の武器を示すものと同じ黄色が使われています。傾けた形とオフセットされた境界線により、穏やかな海を背景に際立ちます。周囲の文章が十分に短いため、このボタンが完全な操作マニュアルと注意を奪い合うことはありません。

継続して使われるグラフィック表現

小さなハーバー・スカーミッシュのマークは、プレイ中も隅に残ります。クリーム色のキーキャップ、緑色のラベル、温かみのあるアクセントカラーも、HUDとポーズカードで再び使われています。そのため、空撮シーンから一人称視点シーンへ切り替わっても、無関係なインターフェーススタイルが持ち込まれることはありません。

島の景色を囲む一人称視点HUDの構成

プレイ中、中央部は主に街路と照準表示のために確保されています。スコアは左上寄り、ウェーブと残りの敵は右上寄り、場所と速度は上部中央付近に表示されます。体力とダッシュの状態は左下、武器と弾薬は右下に配置されています。

この情報の多くは重いパネル内ではなく、シーン上に直接重ねて表示されます。そのため島は見え続けますが、各ラベルのコントラストは背後の建物、空、地面に左右されます。下部のクリーム色の操作ストリップは逆の手法を採用しており、正確な読み取りが必要な小さなキーラベルに一貫した背景を与えています。

一人称視点の全景では、端に揃えたステータス群と操作群の間に街路が見える状態を保っています。
一人称視点の全景では、端に揃えたステータス群と操作群の間に街路が見える状態を保っています。
3種類の異なるゲームプレイフィードバック
表示伝える内容区別が重要な理由
スコアとウェーブ現在のローカルプレイ内での進行状況セッションスコアは、モデルの評価スコアでも保存済みの記録でもありません。
体力とダッシュ準備完了生存状態と、使用可能な移動アクションダッシュのラベルは実績ではなく、使用可能かどうかを示します。
武器名と弾薬選択中の道具と、表示されている弾薬数ハイライトだけでなく、名前もアクティブなスロットに合わせて変わる必要があります。

武器の切り替えとポーズ画面からの復帰

番号付きの3つのスロットは、Ink Rifle、Scattergun、Paper Bladeとして常に表示されます。2を選択すると、アクティブなスロットと武器名がScattergunに変わります。この二重のフィードバックは、境界線だけを変えるよりも多くの情報を伝えます。ショートカット上と弾薬表示の横の両方で、選択内容を特定できるためです。

ポーズカードは現在のスコアを保持し、続行を強調するとともに、追加の移動操作説明をまとめています。
ポーズカードは現在のスコアを保持し、続行を強調するとともに、追加の移動操作説明をまとめています。
  1. 状況の中で移動方法を学ぶ

    WASD、スイング、ジャンプ、スライドのヒントは、プレイ中のシーン下部付近に配置されています。独立したHold E to Grappleの案内は中央寄りにあります。この分割により、一般的な操作をいつでも参照できる一方、移動メカニクスにはより局所的な案内を提示できます。ただし、複数のヒントが同時に表示されると、依然として景色と注意を奪い合う可能性があります。

  2. 舞台とのつながりを失わずに一時停止する

    Escapeを押すと、ぼかした街路の上にクリーム色のカードIsland timeが開きます。現在のスコアはカード内に表示されたままです。下のシーンを引き続き認識できるため、この中断は別の設定ページへ移動したようには感じられず、現在のプレイとつながって感じられます。

  3. 再開と退出を分ける

    Back to Itは大きな黄色のアクションで、Back to the islandは小さく下線が引かれた代替アクションです。表現が似ているため、違いは注意深く確認する必要があります。視覚的な階層は続行操作の識別に役立ちますが、この体験に不慣れな人にとっては、より直接的なラベルのほうが曖昧さを減らせます。

このローカルゲーム事例が示すこと

提供されたエクスポートには、ローカルのシングルプレイヤーゲームとレンダリングされた3D環境が含まれています。開始、武器選択の変更、ポーズ状態を開く操作を確認しました。このギャラリーは、パフォーマンスのベンチマークでも、完了済みの通しプレイでも、すべての移動メカニクスがあらゆるデバイスで動作することの証明でもありません。オンラインマルチプレイ、アカウントサービス、保存されるリーダーボードはいずれも検証されていません。モデルラベルは、提供されたファイル名のまま保持しています。

OpenDesignで島のアドベンチャーゲームデザインを作成する方法

  1. OpenDesignをダウンロードしてインストール

    デスクトップアプリをダウンロードしてインストールし、セットアップを完了してください。デザイン用のプロジェクトを作成します。

    OpenDesignをダウンロード
  2. オープニング画面とプレイ画面を一体として設計する

    1つの小さな島と2つのカメラ状態から始めます。俯瞰表示と道路レベルの表示の両方で、主要なランドマークが見えるようにします。武器や環境のディテールを追加する前に、常時表示するインターフェースの配色を定義してください。

    推奨プロンプト

    ハーバー・スカーミッシュという架空のブラウザゲーム向けに、島のアドベンチャーゲームデザインを作成してください。オープニング画面には、カラフルな海辺の島を上空から見た景色を表示し、左側に大きなタイトルと黄色の「プレイしよう」ボタンを1つ配置してください。クリーム色の面、濃緑色のラベル、オフセットされた境界線、傾きを控えめにしたカードを使用してください。プレイ開始後は一人称視点の街路シーンに切り替え、上部にスコアとウェーブ情報、左下に体力とダッシュの状態、右下に武器と弾薬を表示してください。インクライフル、散弾銃、ペーパーブレード用に、番号付きスロットを3つ維持してください。現在のスコア、主要な再開アクション、開始画面へ戻る独立したアクションを含むポーズカードを追加してください。ローカルのセッション状態のみを使用し、マルチプレイ、保存済みスコア、アカウント接続があるかのように示さないでください。キーボード操作を見えるようにし、シーン中央を遮らないでください。

  3. HUD全体で1つの選択状態を追跡する

    各武器を選択し、そのスロット、名前、弾薬表示をまとめて確認します。次に、その選択状態のまま一時停止し、再開します。有効なテストは、各要素が単独でもっともらしく見えるかどうかではなく、インターフェース全体が一貫した1つの状態を表しているかどうかです。

  4. 空以外の背景でもコントラストを確認する

    淡い壁、暗い屋根、道路面を背景に、ステータスラベルを確認します。シーンの開放感は保ちつつ、小さな文字には必要に応じて控えめな背景を追加してください。色だけに頼らなくても、ポーズ画面の各アクションを区別できることを確認します。

  5. エクスポートして共有リンクを取得

    完成したデザインをエクスポートし、OpenDesignの「共有」機能を使って共有リンクを取得してください。別のブラウザウィンドウでリンクを開き、意図したバージョンとそのアセットが正しく表示されることを確認してから送付してください。

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応