dating-web

デート Web スキル

日曜新聞の恋愛コラムをソフトウェアとして表現したような、1画面の消費者向けダッシュボードを作成します。エディトリアルな書体、控えめなアクセントカラーを1色、たっぷりとした余白を使い、スワイプ式のカードや遊び目的の出会いを連想させる表現は避けます。

ワークフロー

1. 有効な DESIGN.md を読む（上で挿入されています）。指標の数字にはセリフ体のディスプレイ用トークンを活用します。これらの画面は、数字の出来で決まります。
2. ブランドの語り口を選ぶ — 皮肉を少し含み、観察眼があり、やや文学的なトーンです。具体性のあるコピーを考えます。例：「1日以内に返信してくれる人たち」、「なんとかなる。2人とは今では友達です。」、「あなたの最大の相性の強みです。」
3. 以下の順にレイアウトします：
   • 上部ティッカー — 上部を横切る1行のストリップを、サンセリフ体のアイブロウスタイルで配置します。左側にタグライン、右側に「NEXT TIER AT 2,080 MUTUALS」を置き、どちらも字間を広げたモノスペースの大文字にします。下に細い罫線を引きます。
   • 左レール — 幅 220～260px のサイドバーです。上部にセリフ体のイタリックでブランドのワードマークを配置します。ユーザーカード（アバター／ハンドル／比率／ティア）を置きます。ナビゲーションは3つのグループに分けます。「TODAY」（標本、受信箱、キュー、通知）、「YOU」（あなたの統計、相互フォローとコミュニティ、ブロック済み、設定）、「ARCHIVE」（過去の号、有効期限切れのマッチ）。選択中の項目はアクセントカラーのテキストとドットで示します。
   • メインコンテンツ：
     • KPI グリッド — 3列 × 3行（計9セル）にします。各セルには、小さなモノスペースの大文字ラベル、大きなセリフ体の数字（プラスの値にはアクセントカラーまたは彩度を抑えた緑、注意を示す値には彩度を抑えた赤）、1行のイタリック体の注記を配置します。もっともらしい具体例を使います — 「1,842 ↑ 今週41 · 健全に成長中。」、「あなたのグループの中央値を14%上回っています。」、「4人／あなたの輪の元恋人 · なんとかなる。2人とは今では友達です。」
     • 棒グラフパネル — 「mutuals — last 30 days」。細くて背の高い黒い棒を並べ、直近2日分をアクセントカラーで強調します。上部に「↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE」というモノスペースのキャプションを置きます。
     • トレンドパネル — 「match rate — last 12 weeks」。その下に本文のコピーを1行入れます（「8% から 14% へ着実に上昇。あるコミュニティへの参加が要因…」）。フッターに罫線を引きます。
4. HTML ドキュメントを1つ作成します：
   • <!doctype html> から </html> までの1つのドキュメントにし、CSS はインラインにします。
   • 背景はクリーミーなオフホワイト、本文はセリフ体、ラベルにはすべてモノスペース体を使います。
   • 指標の数字に font-feature-settings: 'tnum' を使用します。
   • 高さに変化をつけた約30本の棒で SVG 棒グラフを作成します。
   • ティッカー、サイドバー、KPI グリッド、グラフ、トレンドに data-od-id を付与します。
5. セルフチェック：
   • 抑制が効き、エディトリアルで、少しおかしみのある印象になっていること。色気を前面に出さないこと。
   • アクセントトークンの使用箇所は最大3～4か所にします（KPIを1か所、強調する棒を2本、選択中のナビ項目を1か所）。
   • スワイプ式のカード、ハート、炎の絵文字を使わないこと。

出力形式

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

<artifact identifier="dating-slug" type="text/html" title="Dating Dashboard — Title">
<!doctype html>
<html>...</html>
</artifact>

アーティファクトの前に文を1つだけ書き、その後には何も書きません。