social-media-dashboard

ソーシャルメディアダッシュボードスキル

クリエイター向けのソーシャルメディア分析ダッシュボードを、1 画面で作成します。

ワークフロー

1. 有効な DESIGN.md を確認します（上部に挿入されています）。色、タイポグラフィ、間隔、角丸、コンポーネントのスタイルはすべてこのファイルに従います。新しいトークンを作らないでください。プラットフォームのブランドカラーをハードコードしないでください。視覚的なアイデンティティは DESIGN.md に委ね、プラットフォームは名前とモノグラムのみで示してください。
2. ブリーフで指定されているプラットフォームを特定します。指定がない場合は、X / LinkedIn / YouTube / Instagram をデフォルトにします。プラットフォーム切り替えは1行に収め、項目数は最大5つにしてください。
3. もっともらしいデータを生成し、Metric A / Metric B のようなプレースホルダーは使わないでください。クリエイターのペルソナを選び（デフォルト：「AI / デザイン系の個人クリエイター」）、ページ全体で一貫した数値を導き出してください。たとえば、X を選択したとき、切り替え部分のフォロワー数は KPI 行の数値と一致させます。
4. ページを上から下にレイアウトします。
   • ヘッダーバー：ブランドマークとセクションラベル（「ANALYTICS」）、ダーク／ライト切り替え、期間タブ（7D · 30D · 90D · YTD）、右側にクリエイターのアバターブロック。
   • ヒーローストリップ：ディスプレイ書体による1文の要約（「今週、X に14件の投稿を公開しました。」）、補足のメタデータ1行、2つの CTA（「レポートをエクスポート」、「新規投稿 →」）。
   • 質問バー：検索フィールド風の1行入力欄と、ゴーストテキストの候補（「先週のトップパフォーマンス」、「認証済みアカウントからのコメント」）。
   • プラットフォーム切り替え：1行に4枚のカードを並べ、それぞれにプラットフォームのモノグラム、名前、フォロワー数、+X.XK this week の増加数を表示します。選択中のプラットフォームには DESIGN.md のエレベーテッドサーフェスを使用します。
   • KPI 行：4枚のカード（フォロワー · エンゲージメント率 · いいね（7D）· リポスト（7D））。各カードにはラベル（大文字、label-md）、大きな値（display または headline-lg）、前期間比、短い注記（「先週は4.4%」、「8月9～17日 · 14件の投稿」）を表示します。
   • メイングリッド（2/3 + 1/3）：
     • 左：フォロワーの増加 · 30D — 下部に淡いエリア塗りを施した、幅いっぱいのインライン SVG 折れ線グラフ。軸の目盛りは開始点／中間点／終了点に配置し、ラベル付きの注釈ドットを2つ表示します（「ニュースレター掲載 +842」、「バズったスレッド +1.2K」）。
     • 右：今週のトップ投稿 — レンダリングされた投稿を表示するカード（アバター、ハンドル、投稿本文、任意の16:9メディアブロック）を配置し、ヘッダーに DS のアクセントカラーで「クリック率 5.6%」というタグを表示します。
   • 下部グリッド（1/2 + 1/2）：
     • このプラットフォームのトレンドトピック：チップ風の行を5～7個並べ、それぞれにトピック名、投稿数、24時間の変化を示すスパークライン（ラベルなしの polyline 10点）を表示します。
     • トップコメント：各カードにアバター、ハンドル（該当する場合は認証済みチェック）、コメント本文（最大2行、省略記号付き）、薄いテキストによる小さな ❤ 312 · 💬 18 の行を含むカードを3枚表示します。
5. 自己完結型の HTML ドキュメントを作成します。
   • <!doctype html> から </html> までを含め、CSS は1つのインライン <style> ブロックに記述します。
   • ページレベルのレイアウトには CSS Grid、カード内には Flexbox を使用します。
   • セマンティック HTML を使用します（<header>、<main>、<section>、<article>）。
   • コメントモード用に、各論理領域に data-od-id="slug" を付けます。 header、hero、ask、platform-switcher、kpis、 follower-growth、top-post、trending、top-comments。
6. グラフ：インライン SVG のみを使用し、JS ライブラリは使用しないでください。
   • 折れ線グラフ：曲線用の <path>、エリア用の低アルファ塗りつぶしを施した2つ目の <path>、注釈ドット用の <circle> を2つ配置し、テキストラベルを付けます。
   • スパークライン：10点の <polyline> を使用し、軸は表示せず、高さは約16pxにします。
   • ハイライトには DS のアクセントを使用し、薄いテキストには DS の on-surface-variant を使用します。ページ内でアクセントを使用するのは最大3回までにしてください。
7. 最終確認：
   • すべての色が DESIGN.md のトークン（またはガラス面用として文書化された rgba(token, alpha)）に対応していること。
   • 数値の整合性が取れていること（切り替え部分のフォロワー数が、選択中のプラットフォームの KPI と一致していること）。
   • ヘッダーバーとヒーローストリップは固定し、メインコンテンツはスクロールすること。
   • DS の雰囲気に合わせて情報密度を調整すること。ガラス／コズミック系の DS では余白を広めに取り、選択中のプラットフォームにアンビエントグローを加えます。クリーン／コーポレート系の DS では間隔を詰め、グローを省きます。

出力仕様

<artifact>タグの間に出力してください：

<artifact identifier="social-media-dashboard" type="text/html" title="Social Media Dashboard">
<!doctype html>
<html>...</html>
</artifact>

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