モバイルアプリ

発見コレクションアプリデザイン

Abyssal Atlasは標本コレクションとダイブキューをつなぎます。ロックされた記録、2列のフィルター、進行状況のカウントが、次に発見すべきものをどう伝えるかを見ていきます。

OpenDesignデザイン・制作
公式
深海の発見とコレクション4 画面
発見コレクションアプリデザイン:現在の標本と発見カード 発見コレクションアプリデザイン:探検キューを備えたDive Board
現在の標本と発見カード · 探検キューを備えたDive Board

LLM Arena 2026年9月

ケースメモ
モデル
Grok 4.6
デザインタスク
深海生物カードコレクションアプリ
出力
モバイルアプリ

対象分野

  • コレクションアプリデザイン発見済みと未発見の記録を、1つの閲覧可能なコレクションにまとめます。
  • 発見ゲームのインターフェースミッションと、それによって明らかになるアイテムをつなぎます。
  • モバイルフィールドガイド標本の概要と詳細な記録を分けて表示します。

主な特徴

  • 独立した2つのフィルター深度ゾーンとレア度によって、アーカイブへ異なる切り口からアクセスできます。
  • 表示されるロック済み記録未知のカードには、それを明らかにするために必要な探検が表示されます。
  • 2種類の進行状況アーカイブの完了状況とミッションキューは、別々のカウントで管理されます。
  • コンパクトな標本詳細詳細ビューでは、説明とより正確な発見時刻が追加されます。

コレクションと次のアクションを備えた発見アプリ

Abyssal AtlasはAtlasとDiveの2つのタブを使い、コレクションと、それを拡張するアクションをつなぎます。Atlasには現在の標本とスクロール可能なアーカイブが表示されます。Diveには、未発見の記録に関連付けられた名前付きの探検が一覧表示されます。この構成により、訪問者は今すぐ閲覧できるものと、別の画面へ移動する理由の両方を得られます。

初期ヘッダーには「7 of 13 specimens archived」と「54% logged」と表示されます。これらはアーカイブ全体の進行状況を示します。一方、「SPECIMEN 02 / 13」は現在表示されている記録を示します。ラベルを表示したままにすることが重要です。訪問者が見ているのは2番目のエントリーですが、すでに7つの標本を収集しているからです。

未発見の記録も閲覧に役立つものにする

ロックされた記録はアーカイブから消えるのではなく、その一部として残ります。未知のカードは番号付きの位置を維持し、「Twilight Trawl」のような名前付きの探検を示します。これにより空のスロットにも目的が生まれます。標本を早く明かしすぎることなく、次に試すべきことを訪問者に伝えられるためです。

深度ゾーンとレア度のピル行を、2列の写真グリッドの上に表示したコレクション画面。カード01から04にはARCHIVEDステータスが表示され、種名とレア度バッジがカードのサムネイル上に直接配置されています。
深度ゾーンとレア度のピル行を、2列の写真グリッドの上に表示したコレクション画面。カード01から04にはARCHIVEDステータスが表示され、種名とレア度バッジがカードのサムネイル上に直接配置されています。

コレクションの規模を一定に保つ

アーカイブ済みのエントリーとロックされたエントリーは、同じコレクション内に配置されます。読者は別の実績画面を開かなくても、全体の範囲を理解できます。ロックされたカードは種名の代わりにミッション情報を使うため、境界と次へ進むルートの両方を伝えられます。

生息環境とレア度を分ける

2つのピル行で、深度ゾーンとレア度をフィルターします。これらは同じコレクションに対する異なる問いであり、競合するナビゲーションセクションではありません。略されたラベルはスマートフォン上のスペースを節約しますが、フィールドガイドとして応用する場合は、MesoやBathyのような用語を、あらかじめ知らない読者にも説明する必要があります。

閲覧位置と進行状況を区別する

選択中の標本番号、アーカイブ済み件数、パーセンテージは、互いに置き換えられることなく一貫している必要があります。表示カードのフィルタリングは、さらに別の操作です。実運用のインターフェースでは、訪問者が一覧を絞り込んだときに、全体の進行状況インジケーターの意味を黙って変えてはいけません。

標本記録とダイブキューを行き来する

Vampire Squidの概要には、一般名と学名、レア度、深度、初発見日が表示されます。記録を開くと、日付に加えて短い説明、深度ゾーンのラベル、時刻が表示されます。そのため詳細ビューは、同じカードを単に拡大するのではなく、情報を追加します。

Dive Boardは6つの探検と、別個の0 / 6ミッションキューカウントから始まります。各エントリーには、ダイブの名前、深度ゾーン、目的が示され、その後に「Log this expedition」アクションが続きます。アーカイブのカウントは上部に表示されたままです。この2つの合計により、保有しているコレクションと、進められるキューの両方を理解できます。

完成したVampire Squidの詳細記録。アーカイブ画像、ティール色のラテン名、Rarity / Depth / Sea zoneを含む3列のメタデータ行、生物学的説明、時刻付きの初発見行を表示しています。
完成したVampire Squidの詳細記録。アーカイブ画像、ティール色のラテン名、Rarity / Depth / Sea zoneを含む3列のメタデータ行、生物学的説明、時刻付きの初発見行を表示しています。
各カウントをそれぞれの対象に結び付ける
ラベル取得値カウント対象
アーカイブ済み標本7 of 13すでにアーカイブで表示されている記録。
記録済み進行状況54%同じアーカイブ完了状況を丸めて表した値。
現在の標本02 / 13選択中の標本の位置であり、完了率ではありません。
ミッションキュー0 / 6表示されている探検サイクル内で完了した項目。

サンプル記録を用いたローカル発見プロトタイプ

これは、ライブの探検サービスではなく、ローカルで動作するコレクションとアンロックのデモンストレーションです。深度、目撃日、レア度ティア、生物学的説明はソースコンテンツであり、独立して検証された科学的参考データではありません。分離されたプレビューでは、アカウントやクラウド同期は提供されません。ソース画像はこのローカルレビューのために保持されています。公開で再配布する前には、権利について別途確認する必要があります。

OpenDesignで発見コレクションアプリデザインを作成する方法

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

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

    OpenDesignをダウンロード
  2. アーカイブとアンロックのループを定義する

    OpenDesignに固定されたサンプルコレクションと、各ミッションとロックされた記録の明確な関係を与えます。以下のプロンプトは、このケースに着想を得た新しいデザイン演習を説明しています。

    推奨プロンプト

    13種類の標本があり、そのうち7種類が最初から発見済みの架空の深海アーカイブ向けに、発見コレクションアプリのデザインを作成してください。ティールのアクセントを使ったダークなモバイルインターフェースにし、下部タブはAtlasとDiveの2つにします。Atlasには現在の標本カード、一般名と学名、レア度、深度、初発見日を表示し、その下にコレクショングリッドを配置してください。ロックされたエントリーも表示したままにし、一定の番号と、それをアンロックする探検の名前を保持してください。深度ゾーンとレア度のフィルター行は分けて追加します。詳細画面では、カードと同じ内容を繰り返すだけでなく、説明と正確な発見時刻を追加してください。Diveには、目的、ステータス、ローカルのLogアクションを備えた、名前付きの6つの探検を表示します。アーカイブの進行状況、ミッションの完了状況、現在の記録位置は分けて管理してください。サンプル記録には明確なラベルを付け、実際のダイビング、科学的検証、クラウドアカウントを示唆しないでください。

  3. 1つのミッションをコレクションまで追跡する

    1つの探検について、準備完了、進行中、完了の各状態をOpenDesignに表示させ、続けて対象の記録を示すよう依頼します。アーカイブのカウントが1度だけ変わり、同じカードの位置が維持され、完了済みのアクションを繰り返しても進行状況が水増しされないことを確認してください。

  4. フィルターラベルと空の結果を明確にする

    深度ゾーンとレア度を1つずつ同時に選択します。一致する記録がない場合は、フィルターを解除できる方法とともに、明示的な空の状態を表示するよう依頼してください。アーカイブ全体のカウントはフィルター結果と分け、略された科学用語には読みやすい説明を添えてください。

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

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

OpenDesign デスクトップ版

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

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

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

macOS と Windows に対応