デスクトップアプリ

旅行プランナーダッシュボードデザイン

Halcyon Coveで6ヶ所巡る1日を設計する。保存済みスポット、地図上の位置、徒歩時間を連携させる。

OpenDesignデザイン&制作
公式
1日市内観光プランニング3 画面
旅行プランナーダッシュボードデザイン:完全な都市マップ、スポットライブラリ、1日プラン
評価サンプル · Claude Opus 5スクリーンショット 1 / 3

LLM Arena 2026年9月

ケースメモ
モデル
Claude Opus 5
デザインタスク
ドラッグ&ドロップ式の市内日帰りプランナー
出力
デスクトップアプリ

適用シーン

  • 旅程プランニングスポット、営業時間、滞在時間を軸に1日を構成する。
  • マップ連携ダッシュボード場所の選択を視覚的なスポット順序と連携させる。
  • 旅行プロダクトのプロトタイプライブの旅行サービスを追加する前に、プランニングのインタラクションをテストする。

主な特長

  • 3つの連携ビュースポットライブラリ、都市マップ、旅程が選択を共有する。
  • 6つの名前付き時間スロット「Breakfast」から「Evening」まで、1日に分かりやすい構造を与える。
  • コンテキスト対応のスポットドロワープランを離れずに営業時間を確認し、スポットを移動できる。
  • 可視化されたルートコスト徒歩時間の推定値が、連続するスポット間の移動を明示する。

場所と時間を結ぶ旅行ダッシュボード

Daybreak Atlasは、Halcyon Coveの架空の1日を3つの連携ビューに変換する。保存済みスポットは左側に並び、イラスト風の都市マップが中央を占め、The Dayが右側に縦に展開する。マップはどこにスポットを配置すべきかを示し、タイムラインはいつ訪れるべきかを示す。両方を常に表示しておくことで、スポットを選んだ際の影響を比較しやすくなる。

スポットライブラリは単なる名前の一覧ではない。Gullwing Bakeryは6:30am〜11amの営業時間帯を持ち、ルートに追加されると「In Breakfast」とマークされる。同じスポットがBreakfastスロットにも表示され、滞在時間と「View」「Remove」コントロールが付く。この繰り返される識別子こそが、ブラウジングとプランニングをつなぐ接点だ。カードは役割を変えるが、名前は変わらない。

完全なプランニングワークスペースは、保存済みスポットライブラリ、イラスト風マップ、1日のタイムラインを連携させる。キャプチャされたHidden Gardensルートは6つのスロットすべてを埋めている。
完全なプランニングワークスペースは、保存済みスポットライブラリ、イラスト風マップ、1日のタイムラインを連携させる。キャプチャされたHidden Gardensルートは6つのスロットすべてを埋めている。

営業時間・滞在時間・移動時間を分けて表示する

この旅行プランナーダッシュボードデザインで最も有用なのは、時間の扱い方だ。営業時間帯、滞在時間、徒歩時間の推定値はそれぞれ異なる制約を表している。これらを1つの曖昧な所要時間に圧縮すべきではない。この例では、それぞれが情報提供する判断の近くに配置されている。

キャプチャされたルートに示された3種類の時間
時間シグナル表示場所読者が判断できること
6:30am–11amGullwing Bakeryカードとスポットドロワー意図した訪問時間帯に施設が営業しているかどうか。
35分の滞在BreakfastスロットのGullwing Bakeryそのスポットに費やす時間(移動時間を除く)。
約10分の徒歩Verdant Steps Gardenの前次のスポットへの移動がプランに加える時間。
62分の徒歩Hidden GardensのThe Dayサマリーこの特定の6ヶ所ルート全体で移動時間がどのように積み重なるか。

おすすめルートから意図的な旅程へ

「Surprise Me」が、6つの空スロットを埋めるよう求める代わりに、出発点となるルートを提供する。キャプチャされたHidden Gardensの状態では、Gullwing Bakeryからガーデン、ランチ、読書ホールへと続くシーケンスになっている。ユーザーに編集の出発点を与えるものだ。あくまで提案であり、最適化された、または地理的に正確なルートである証拠ではない。

Gullwing Bakeryを選択するとスポットの全詳細ドロワーが開く。既存の都市マップとルートはその背後に表示されたままで、時間スロットコントロールがドラッグの明示的な代替手段を提供する。
Gullwing Bakeryを選択するとスポットの全詳細ドロワーが開く。既存の都市マップとルートはその背後に表示されたままで、時間スロットコントロールがドラッグの明示的な代替手段を提供する。

1つのスポット、複数の有用な入口

保存済みスポットカードとマップピンのどちらからでも詳細にアクセスできる。ドロワーには説明、営業時間、典型的な滞在時間、最適スロットが集約されている。マップから始めるユーザーも、ライブラリを閲覧するユーザーと同じスケジューリング判断を下せる。

名前付きの行き先が移動を予測可能にする

ドロワーは現在の割り当てを表示し、「Breakfast」「Morning」「Lunch」「Afternoon」「Sunset」「Evening」をボタンとして提供する。これにより、スポットの移動が発見すべきジェスチャーではなく、視覚的なアクションになる。プロダクション版では、占有済みスロットの置き換えについても、実行前に同様に明示的にすべきだ。

  1. 完全なサンプルから始める

    「Surprise Me」のテーマを選び、マップと並べてスポットのシーケンスを確認する。提案されたテーマがラベルだけでなく、実際のスポットカテゴリーに反映されているかを確認する。

  2. 移動前に確認する

    スポットを1つ開き、その営業時間帯と利用可能な時間スロットを比較し、名前付きスロットを使って移動する。タイムラインとルートに生じた変化を追う。

  3. 1日全体を見直す

    「Lock the Day」を使用する前に、埋まっているスロット数と徒歩時間の合計を比較する。これらは、完了ボタンを実行可能な旅程の証明として扱うよりも、有用な最終レビューを提供する。

この旅行プランナープロトタイプが示すもの

Halcyon Cove、その施設、徒歩時間の推定値はデモンストレーション用コンテンツだ。このアーティファクトはローカルのフロントエンドプロトタイプであり、ライブマップ、予約サービス、マルチユーザープランナーではない。元のlocalStorageの動作は、隔離されたShow Preview環境では利用できないため、保存された進捗はそこでは当てにすべきではない。Claude Opus 5はオーナーのエクスポートに付与されたラベルであり、独立して検証されたベンチマーク結果ではない。

OpenDesignで旅行プランナーダッシュボードデザインを作成する方法

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

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

    OpenDesignをダウンロード
  2. 3つの連携ビューを記述する

    OpenDesignに架空の小都市を与え、スポットがライブラリ、マップ、タイムラインにどのように表示されるかを指定する。装飾を加える前に、共通のスポット識別子を定義しておく。以下のプロンプトは、このケースにインスパイアされた新しいデザイン演習であり、元の生成プロンプトではない。

    推奨プロンプト

    架空の沿岸都市を舞台にした旅行プランナーダッシュボードデザインを作成してください。温かみのある紙のような背景を使用し、左側にコンパクトなスポットライブラリ、中央にイラスト風のマップ、右側に1日のタイムラインを配置してください。「Breakfast」「Morning」「Lunch」「Afternoon」「Sunset」「Evening」の6つの名前付きスロットを用意してください。各サンプルスポットには、営業時間帯、典型的な滞在時間、カテゴリーを設定してください。マップピンまたはライブラリカードを選択すると、同じスポットドロワーが開くようにしてください。ユーザーが明示的なスロットボタンとドラッグ&ドロップの両方でスポットを割り当てられるようにしてください。連続するスポット間の推定徒歩時間を滞在時間とは別に表示し、1日のサマリーに合計を示してください。おすすめルートの初期状態と最終レビュー状態を含めてください。スポットとルート推定値はフィクションのデモデータであることを明示し、ライブマップ、予約、共同編集、クラウド保存は示唆しないでください。

  3. ダッシュボード全体で1つの変更を追跡する

    OpenDesignに1つのスポットを別のスロットへ移動させ、カードラベル、選択済みマップピン、タイムラインを通じてその変更が反映されることを確認する。変更前と変更後の状態を比較する。スポット名と滞在時間はすべての箇所で統一し、移動先のスロットにすでにスポットが存在する場合の動作を明記する。

  4. 条件に合わないルートをテストする

    割り当てスロットより前に閉店するサンプル施設を使用し、デザインがその不一致をどのように説明するかを確認する。小さい画面ではどのパネルを優先するかを決め、残り2つのパネルをデスクトップの3カラムをスマートフォンの画面幅に押し込まずにアクセスできるようにする。

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

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

OpenDesign デスクトップ版

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

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

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

macOS と Windows に対応