イベント案内スケジュールのデザインプロンプト

既存のプロジェクトスタックを使用して、[PROJECT]と[AUDIENCE]向けの編集可能なモバイルファーストのアプリプロトタイプを作成してください。タスク：イベントコンパニオン・スケジュール。

必須のコンテンツと構成

時間と議題分類別にセッションを探し、個人用の予定を作成して、時間の重複、会場変更、イベントのお知らせを表示してください。

画面とナビゲーション

Schedule、Session detail、My dayという3つの連携ビューを作成してください。選択したレコードが画面タイトルまたは概要に表示され続けるようにします。明示的な戻る操作をサポートし、ビュー間を移動しても入力途中の内容を保持してください。主要な操作は関連コンテンツの近くに配置し、モバイルのセーフエリア、表示中のソフトウェアキーボード、翻訳によって長くなったラベルを考慮してください。デスクトップ幅では、手順を削除したりタスクを変更したりせずに構成を適応させてください。

プロジェクト入力

名前、レコード、ラベル、数量、遷移先には[APPROVED_CONTENT]を使用してください。運用上の事実を捏造せず、不足しているデータを確認してください。デモ用レコードには架空のブランドGatherを使用できますが、サンプルデータであることを明記してください。どの操作がローカルプロトタイプ上のインタラクションであり、どの操作に認証、永続化、権限、バックエンドが必要かを説明してください。統合が明示的に実装およびテストされていない限り、外部サービスに接続したり、取引が完了したと主張したりしないでください。

デザイン方針

[BRAND_RULES]に従ってください。ブランドが指定されていない場合は、黒、白、アシッドイエロー、太字のカンファレンス向けタイポグラフィを使用してください。汎用的なダッシュボードカードを繰り返すのではなく、固有のコンテンツとコントロールによってワークフローを認識できるようにしてください。一貫したスペーシングスケールと明確なテキスト階層を使用してください。視認できるキーボードフォーカス、アクセシブルな名前、十分なコントラスト、色だけに依存しないステータスラベルを含めてください。動きを抑える設定を尊重し、アニメーション付きの遷移は任意にしてください。

タスク固有の受け入れチェック

• 重複する保存済みセッションやタイムゾーンの変更によって選択内容を黙って削除せず、明示してください。

インタラクション状態

ローカルのサンプルデータを使用して、3画面の正常系フローを実装します。実用的な空の状態、アクション完了前の検証、読み込み中または保留中の状態、復旧可能な失敗状態を含めます。破壊的な変更には確認または取り消し手段が必要です。3つのビューすべてで記録の状態を一貫させます。入力途中の内容を通知なく破棄したり、再試行後にユーザーの選択を変更したりしないでください。

納品とレビュー

編集可能なアプリビューを提出し、データモデル、ローカルストレージの挙動、未実装の連携について説明します。320pxとより広いビューポートで、キーボードナビゲーションと長いコンテンツを使用してテストします。機能を追加する前に、上記のタスク固有の受け入れチェックを使って結果を確認します。デモの挙動と稼働中の本番サービスを明確に区別してください。

参考添付ファイルと再構築の目標

このプロンプトのダウンロードバンドルに含まれるreference.webpを、OpenDesign内でこのプロンプトと一緒に添付してください。構成と階層が似た編集可能な成果物を作成し、参考画像全体を完成インターフェースとして埋め込まないでください。架空のサンプルラベルと競合する場合は、承認済みのプロジェクトコンテンツとブランドルールを優先してください。画像がない、または読み取れない場合は、視覚的な忠実性を主張せず、画像の提供を依頼してください。

リファレンス構成 — 連携する3つのアプリ画面

添付画像には、架空のカンファレンスアプリGatherが、淡いアシッドイエローのプレゼンテーション背景上に同じ幅の3つのモバイル画面として表示されています。Schedule、Session detail、My dayを連携するアプリビューとして作成してください。3画面のモンタージュを1ページとしてレンダリングしたり、リファレンス全体を背景として使用したりしないでください。モバイル幅では一度に1つのビューを表示します。幅の広いプレビューでは比較用にビューを横並びで表示できますが、実際に操作するアプリではナビゲーションと状態を維持する必要があります。

Schedule画面

ほぼ白のキャンバスに細い濃色の外枠を使用してください。ヘッダーでは、左側に太い黒字のGatherワードマーク、右側にコンパクトなイベント日程と会場情報を配置し、検索アイコンも加えます。その下に、特大の太字でScheduleというタイトルを置き、さらに小さな1行の紹介文を配置してください。Tue Oct 14、Wed Oct 15、Thu Oct 16の3列の日付セレクターを追加します。選択中の日付はアシッドイエロー、その他は薄い区切り線付きの白にしてください。その下にAll tracksとAll typesのフィルター、コンパクトなリスト表示コントロールを配置します。メインリストには、幅の狭い時間列、縦方向のトラックカラーバー、続けて大文字のトラックラベル、太字のセッションタイトル、小さめの会場ラベルを使用してください。各行の右側には円形のプラス操作を揃えて配置し、細い水平区切り線を入れます。図示されているトラックには青、黄、ピンク、緑、紫を使用します。色だけが手掛かりにならないよう、トラック名も表示してください。下部ナビゲーションは黒にし、Schedule、My day、Notices、Moreを配置します。アクティブなアイコンとラベルは黄色にしてください。

Session detail画面

明るいリストビューと、ほぼ黒の詳細画面を対比させます。上部に戻る、ブックマーク、共有の各コントロールを配置します。上部セクションの背景には控えめなカンファレンス写真を使い、テキストのコントラストを保つ暗いオーバーレイを重ねます。小さな黄色の「プロダクト」ラベル、黄色の大きな2行タイトル「大規模環境のデザインシステム」、白い補足文を表示します。その下に、カレンダー／時刻と会場／ルームのメタデータを、アウトラインアイコン付きの2列で配置します。続けて、細いアウトラインのトピックタグ、短い説明、円形ポートレート、氏名、役職、組織、開示用矢印を含む登壇者行を配置します。横幅いっぱいのアシッドイエローの「マイデイに保存」ボタン、その下に暗色のアウトライン付き「カレンダーに追加」ボタンを配置します。区切り線の下に「関連セッション」を置き、小さな「すべて表示」アクションとコンパクトなセッション行を表示します。戻り先が明確に分かるナビゲーションを維持し、デモデータを置き換える際に実在する登壇者や推薦情報を捏造しないでください。

マイデイ画面

ほぼ白の画面に戻り、Gatherのヘッダー、日付、会場、設定アイコンを再度表示します。大きな「マイデイ」見出しと短いサブタイトルを配置します。淡い黄色の通知バナーには、ベル、太字の「タイムゾーンの変更」タイトル、補足文、閉じるコントロールを含めます。その下に「マイアジェンダ」「競合（1）」「お知らせ（2）」の3つのセグメントを表示し、選択中のセグメントは黒地に白文字とします。保存済みセッションには、スケジュール行と同じ構造を再利用します。時間が重なるセッションには淡いピンクのパネル、赤い時刻と議題分類のアクセント、明示的な「保存済みセッションと重複」ラベル、「両方を保持」コントロールを使用します。会場変更は、赤字の「ルーム変更：B1 → B2」として表示します。黒い下部ナビゲーションを再度配置し、「マイデイ」をアクティブにして、「お知らせ」に黄色の件数バッジを付けます。

視覚的階層とトークン

ワードマークと大きなタイトルには太くニュートラルなグロテスク体、本文とコントロールには読みやすいサンセリフ体を使用します。主要な画面には黒とほぼ白を使い、主要アクションと選択状態にはアシッドイエローを使用します。8pxのスペーシングスケール、16–24pxのページ左右パディング、44px以上のタッチターゲット、タイトル・本文・メタデータ間の明確なコントラストから始めます。これらは実装時の初期値であり、計測済みのピクセル仕様ではありません。スクリーンショットにあるコンパクトなタイムテーブル、太字の詳細タイトル、明確な明暗コントラストを維持します。オリジナルまたはライセンス取得済みのカンファレンス写真と、架空の登壇者ポートレートを使用し、ラベルは画像化せずライブテキストにします。この例に含まれる角丸コントロールはGatherの視覚的リファレンスの一部であり、プロンプトライブラリサイトのボタンとは別のものです。

インタラクションとデータ契約 — 実装と検証

安定したセッションID、タイトル、議題分類、種別、UTCの開始／終了日時、イベントのタイムゾーン、ルーム、previousRoom、登壇者、保存状態を含むローカルのデモレコードを使用します。selectedDate、searchQuery、議題分類／種別フィルター、savedSessionIds、dismissedNoticeIdsを明示的に保持します。画像は概念図です。画像内の日付やタイムゾーンの表現を正式なイベントタイムテーブルとして扱わないでください。表示されている階層を維持しながら、デモ内の矛盾する日付を修正します。日を選択すると、日付のハイライトとリストが更新されます。検索ではセッション名と登壇者名を照合し、フィルターは組み合わせて適用します。該当結果がない場合は、役立つ空の状態とクリア操作を表示します。行を開くと同じセッションの詳細が表示され、「戻る」で直前のリスト、フィルター、スクロール位置を復元します。プラスと「マイデイに保存」の各コントロールは、同じセッションを正確に1回だけ保存し、明確な保存済み状態へ切り替えます。削除した場合は、マイデイとお知らせを一貫して更新します。同じ日付に保存されたセッションについて、startA < endBかつstartB < endAで重複を検出します。警告と両方のレコードを表示し、「両方を保持」では、どちらの選択も暗黙に削除せず競合を確認済みにします。「競合」には影響を受ける組み合わせを表示し、それぞれの詳細へリンクします。タイムゾーンを変更すると、同じUTC時刻を選択した名前付きタイムゾーンへ変換し、表示日時を更新してグループ分けを再計算します。実際のイベント継続時間は変更してはいけません。常に見えるタイムゾーンラベルと、閉じられる説明を用意します。ルーム変更のお知らせには、変更前と変更後のルームを表示します。お知らせを閉じても、新しいルームへ戻すことはありません。「カレンダーに追加」では、有効なローカルカレンダーファイルを提供するか、デモ操作であることを明確に示します。外部カレンダーとの接続を暗示しないでください。共有にはプラットフォームの共有シートを使用でき、利用できない場合はリンクのコピーへフォールバックします。ブックマーク、通知の非表示、ナビゲーションには、視認できるキーボードフォーカスとアクセシブルな名前が必要です。主要アクションはモバイルのセーフエリアより上で操作できるようにします。保存済みセッションなし、検索結果なし、復旧可能なストレージ障害の各状態を含めます。別途依頼がない限り、決済、アカウント作成、イベントのリアルタイム更新は実装しないでください。

ビジュアル比較と納品

1. 同じ比率で成果物と添付画像を比較してください。装飾的な詳細を仕上げる前に、主要領域の配置、画像の相対サイズ、改行、余白、タイポグラフィの階層、コントラスト、アクティブ状態、コンテンツ密度を確認します。
2. 次に、デスクトップ向けテキストを小さなラベルに無理に詰め込まず、狭いレイアウトをテストしてください。
3. ロゴ、写真、アイコンは個別のアセットとして保持し、意味のあるラベルはすべて編集可能にしてください。利用できないフォントやアセット、および意図的に変更した点を列挙してください。動作するファイルに加え、実装した動作と未完了の連携について簡潔な説明を返してください。プロンプトだけでピクセル単位まで同一の結果を約束しないでください。