デイリークエストアプリのデザイン

デイリークエストアプリのデザイン

デイリークエストアプリのデザインは、身近な自己改善のアクティビティを毎日のクエストログへ変換するモバイルコンセプトとして、Levelを提示します。作成された見出し「Daily quests for becoming a better human.」が前提を示した後、インターフェースは次のアクション「NEXT — TODAY'S QUESTS」を導入します。

ウェルカム画面は、暗いサーフェス、大きなエディトリアル調のセリフ体タイポグラフィ、「becoming」へのオレンジ色の強調、コンパクトなモノスペース風のプロトタイプラベルを使用しています。この構成によって、アイデアは操作用ダッシュボードというより導入として感じられます。そのトレードオフは意図的なものです。表現力のある見出しが縦方向に大きなスペースを占めるため、遷移前に表示されるのは短いプロダクト説明と次のステップへの案内だけです。

表示されるコピーはXPを獲得し、クラスがレベルアップしていく様子を見ることを説明していますが、提供されたHTMLは静的な3画面デザインです。これはクエスト選択、報酬の更新、テーマ切り替えを実装するものではなく、提案された情報モデルと完了状態を描写しています。数値はサンプルコンテンツであり、保存された進捗や健康上の成果を示す証拠ではありません。

毎日のクエスト計画と報酬の確認

ホーム画面は、すばやく確認できるように構成されています。「Good morning, Sam」がLevel 14の進捗パネルの上に置かれ、そこには「1648 / 2480」と表示されます。その下には「8 quests waiting · earn 430 XP today」が続きます。これらの値はサンプルデータとして提示されていますが、並び順は意図された優先順位を説明しています。まず状況を把握し、次に進捗を確認し、その後に利用可能な作業を確認します。

続く6色のカードは、1日をBody、Read、Listen、Nourish、Mind、Watchに分けます。各カードは、1文字のマーカー、カテゴリー名、具体的なアクティビティ、XPバッジを組み合わせています。たとえば、Bodyは「20-min strength: pushups & planks」と「+90」を組み合わせ、Watchは「The Bear · S3 E4」と「+30」を組み合わせます。カテゴリーグリッドは、異なる種類のアクティビティを同一のタスクだと見なすことなく、比較可能にします。

カードを2列に配置することで、すばやい選択と視覚的な多様性を支え、パステルカラーの塗りがカテゴリーを区別します。そのトレードオフとして、長いラベルは固定サイズのカード内で折り返されるため、説明は簡潔に保つ必要があります。下部ナビゲーションではTodayをアクティブにし、Library、中央の追加コントロール、Stats、Profileを隣接する行き先として確保しています。

クエスト一覧からマイクロタスクへ

3つの画面は、具体的な順序を形成しています。暗いウェルカム画面がアイデアを確立し、明るいホーム画面がその日の内容を提示し、詳細画面が選択した1つのクエストを展開します。遷移に伴い、テーマと情報密度の両方が変わります。ホーム画面は6つのカテゴリーを横断した比較を支え、詳細画面は1つの筋力トレーニングのアクティビティとその完了構造に焦点を当てます。

詳細画面は「QUEST · 03 / 08」として自身を示し、アクティビティを「BODY · STRENGTH」とラベル付けしています。コーラル色のパネルには「+90 XP」、タイトル「20 minutes that change Wednesday.」、そして腕立て伏せ、プランク、1つの自由選択の種目、器具不要について触れた短い説明が表示されます。繰り返し表示される「11 times this month」は可視化されたサンプル履歴であり、測定された成果を示すものではありません。

「TODAY'S MICRO-TASKS」の下に、画面は「Roll out the mat」、「3 × 12 pushups」、「3 × 45s plank」、「Wildcard: lunges」を一覧表示します。最初の行はチェック済みで取り消し線が付き、残りの行には空の円が使われています。+5、+30、+30、+25のXP値が右端に配置されています。この状態の違いによって、クエスト詳細から離れることなく、部分的な完了を理解できます。

大きな「Start quest」ボタンはチェックリストの後に続き、明確なアクションの終点を作ります。この順序は提案されたインタラクティブフローには有用ですが、キャプチャから、ボタン、チェックリスト、レベルアップの瞬間が永続化に接続されていることは証明できません。一方で、意図された状態の表現と、クエスト報酬と各タスクの小さな報酬との関係は示されています。

表示範囲と機能上の境界

このアーティファクトは、OpenDesignが制作した3画面のモバイルアプリデザイン例です。構成、サンプルデータの階層、カテゴリーのグループ化、画面遷移、完了状態の表記を研究するのに役立ちます。モバイル向けの表現には、表示されたiPhoneのステータスバーと下部ナビゲーションが含まれますが、提供された証拠は、レンダリングされた画面を超えるプラットフォームの挙動を確立するものではありません。

このデザインは、クエストをタップして詳細を表示する、クエストを完了する、6つ目のクエストの後にレベルアップの瞬間を発生させる、テーマとレイアウトを切り替える、といったインタラクションを提案しています。これらの説明は意図されたコンセプトを説明するものであり、検証済みの実行時機能ではありません。したがって、XPの合計、Level 14の状態、アクティビティ履歴、毎日のクエスト数は、本番実装ではプロダクトデータと明示的な状態ルールに置き換える必要があります。