gamified-app

ゲーミフィケーションアプリのスキル

1枚のダークなショーケースページに、複数画面のモバイルプロトタイプを作成します。 3つのスマートフォンフレームを横並びにし、それぞれをジャーニーの異なる場面にします。

ワークフロー

1. アクティブな DESIGN.md を読む（上部に挿入されています）。ゲーミフィケーションアプリでは、見出しに大胆なディスプレイ書体を使い、ほとんどのプロダクトより明るく幅広いパレットを採用します。クエストらしく見えるのは、色の力です。
2. ブランドと価値提案をブリーフから選びます。実際のクエスト名を生成します（例：「Body — 20分の筋トレ：腕立て伏せ＆プランク」、「Read — 『限りある時間の使い方』」、「Listen — Huberman Lab · 睡眠の構造」、「Nourish — 高タンパクなランチを作る」、「Mind — 10分間の集中瞑想」、「Watch — The Bear · シーズン3 第4話」）。
3. ステージ — 全面をダークにしたページ（ほぼ黒の #0e0d0c または DS のダークトークン）に、上部から柔らかなスポットライトのグラデーションを加えます。スマートフォンの上に小さなキャプション行を配置します。左側は「HI-FI PROTOTYPE · IPHONE」、右側はブランドのワードマークにし、どちらもモノスペースにします。
4. スマートフォン — 360×780 のスマートフォンフレームを3つ横一列に配置します（狭いビューポートでは縦に積み重ねます）。それぞれのスマートフォンには次の要素を含めます。
   • 12px の黒いベゼル、44px の角丸、ダイナミックアイランドのノッチ。
   • ステータスバー（時刻／電波／バッテリー）。
   • スマートフォンごとのコンテンツ（以下を参照）。
   • 5つのアイコンを備えた下部タブバー（今日、ライブラリ、統計、中央の ⊕ CTA、プロフィール）。選択中のタブはアクセントカラーにします。
5. スマートフォン1 — カバーポスター（セールス／価値提案）：
   • ステータスバー。
   • 「HI-FI PROTOTYPE · IPHONE」の小見出し。
   • 大きなディスプレイ見出し（「より良い自分になるための日々のクエスト」）。「より良い自分になる」をアクセントカラーにします。
   • 控えめなセリフ体またはサンセリフ体で、1～2文の本文。
   • モノスペースのヒント行（「クエストをタップすると詳細が開きます。ツールバーで［テーマ］を切り替えると、テーマとレイアウトを変更できます。」）
   • 画面下端に、次の画面が少しだけ見えるスクロールの予告。
6. スマートフォン2 — 今日のクエストダッシュボード（メイン画面）：
   • 「おはようございます、Sam」＋小さな XP ベルのアイコン。
   • レベルリボン — 「LV 14 · レベル14 · 1648 / 2480 XP」とプログレスバーを、グラスモーフィックなリボン内に配置します。
   • 補足行：「8つのクエストが待っています · 今日430 XPを獲得」。
   • クエストタイルを3×2のグリッドで配置します。各タイルには、角丸、パステルカラーのアクセント、左上のグリフチップ、タイトル、ミニメタ情報の行、右下の「+NN XP」ピルを含めます。
   • 下部タブバー。
7. スマートフォン3 — クエストの詳細：
   • 戻る矢印＋画面タイトル（「クエスト」）。
   • クエストのアクセントカラーを使ったヒーローブロック、大きなセリフ体のクエストタイトル（「Body — 筋力トレーニング」）、短い説明文、「報酬 +90 XP」のスタンプ。
   • ステップのチェックリスト（細かなタスクを3～4個。1つは完了、2つは未完了）。
   • 下部に、アクセントカラーを使った大きなプライマリー CTA のピル（「クエストを開始」）。
8. 作成するものは単一の HTML ドキュメントです。
   • <!doctype html> から </html> まで。CSS はインラインで記述します。
   • すべて CSS で作成し、画像は使いません。タイルチップとタブアイコンには linear-gradient とインライン SVG グリフを使います。
   • ステージ、各スマートフォン、各フレームの各領域に data-od-id を設定します。
9. セルフチェック：
   • 3つのフレームがあり、それぞれに異なる目的があること。同じ画面を3つ並べたものにしないでください。
   • タイルの色が強すぎないこと。各クエストタイルには、同じニュートラルな背景面に対して異なるパステルカラーを使います。
   • ゲーミフィケーションらしさと大人っぽさが伝わること。遊び心はあっても、子どもっぽくしないでください。

出力仕様

<artifact> タグで囲んで出力します。

<artifact identifier="game-slug" type="text/html" title="Mobile — App Name">
<!doctype html>
<html>...</html>
</artifact>

アーティファクトの前に1文だけ記述し、その後には何も書かないでください。