{
  "schemaVersion": 1,
  "generatedAt": "2026-04-20T13:36:02.679Z",
  "count": 4,
  "designs": [
    {
      "id": "_example",
      "schemaVersion": 1,
      "title": {
        "ja": "ミニマルなアナリティクスダッシュボード",
        "en": "Minimal Analytics Dashboard"
      },
      "summary": {
        "ja": "余白で語るタイプのダッシュボード",
        "en": "A dashboard that speaks through whitespace"
      },
      "source": {
        "url": "https://example.com/post/123",
        "author": "Jane Doe",
        "platform": "dribbble"
      },
      "capturedAt": "2026-04-18",
      "publishedAt": "2025-11-02",
      "categories": [
        "dashboard",
        "web-app"
      ],
      "tags": [
        "minimal",
        "monochrome",
        "data-viz"
      ],
      "palette": [
        "#0E0E10",
        "#FAFAFA",
        "#FF5A1F"
      ],
      "rating": 4,
      "status": "draft",
      "relations": {
        "similar": []
      },
      "license": "Unknown",
      "cover": null,
      "assets": [],
      "urls": {
        "ja": "https://design-vault.pages.dev/designs/_example",
        "en": "https://design-vault.pages.dev/en/designs/_example",
        "json": "https://design-vault.pages.dev/ai/designs/_example.json"
      },
      "notesMarkdown": "## Why I saved this / なぜ保存したか\n\nこのエントリはスキーマの実例です。Markdown 本文は自由記述で、デザインを保存した理由・\n注目した技法・応用したい場面などを記録します。LLM はこの本文を主要な文脈情報として読みます。\n\nThis entry is a schema example. The Markdown body is free-form: record why you saved the design,\ntechniques you noticed, and where you might apply them. LLMs use this body as primary context.\n\n### Techniques\n\n- 大胆な余白の使い方\n- モノクロ + 1 アクセントカラー（#FF5A1F）\n- データ表示で 1 グリッドあたり 1 メッセージに絞っている\n\n### Apply to\n\n- 社内向け SaaS のダッシュボード\n- 読み取り重視のレポート画面"
    },
    {
      "id": "2026-04-15-gradient-saas-landing",
      "schemaVersion": 1,
      "title": {
        "ja": "オーロラグラデーション SaaS ランディング",
        "en": "Aurora Gradient SaaS Landing"
      },
      "summary": {
        "ja": "濃紫から青緑へ溶けるグラデを主役にした、SaaS ヒーローセクション",
        "en": "A SaaS hero section built around a deep-purple-to-teal gradient"
      },
      "source": {
        "url": "https://dribbble.com/shots/example-aurora-saas",
        "author": "Kei Tanaka",
        "platform": "dribbble"
      },
      "capturedAt": "2026-04-15",
      "publishedAt": "2026-03-28",
      "categories": [
        "marketing"
      ],
      "tags": [
        "bold",
        "typography",
        "glassmorphism"
      ],
      "palette": [
        "#0B0224",
        "#3B1E8C",
        "#2FB6A8",
        "#F4F0FF"
      ],
      "rating": 4,
      "status": "published",
      "relations": {
        "similar": [
          "2026-04-18-fintech-mobile-dashboard"
        ]
      },
      "license": "Unknown",
      "cover": null,
      "assets": [],
      "urls": {
        "ja": "https://design-vault.pages.dev/designs/2026-04-15-gradient-saas-landing",
        "en": "https://design-vault.pages.dev/en/designs/2026-04-15-gradient-saas-landing",
        "json": "https://design-vault.pages.dev/ai/designs/2026-04-15-gradient-saas-landing.json"
      },
      "notesMarkdown": "## Why I saved this / なぜ保存したか\n\n濃い紫から青緑へ流れる 4 色グラデ 1 枚だけでブランドトーンを完成させている。ヒーロー\n文字は 72px 超、サブコピーは 18px で情報密度を極端に絞り、\"空気\" で語るタイプの SaaS\nランディング。CTA は半透明パネル（glassmorphism）で、グラデの上から浮かせる設計。\n\nThe hero sells the brand with a single 4-stop gradient, with oversized type (72px+) and\nminimal supporting copy. The CTA sits on a translucent glass panel, floating over the\ngradient rather than fighting it.\n\n### Techniques\n\n- 4 ストップ以上のグラデは \"中間色\" が主役になる — 目立つ色ではなく繋ぎの色で印象が決まる\n- 背景に任せて文字サイズで余白を作る（Figma でのセーフエリアは画面の 60% 以下に抑える）\n- glass パネルは `backdrop-filter: blur(20px)` + 白 4〜8% overlay が下限\n\n### Apply to\n\n- プロダクトサイトのヒーローや LP のファーストビュー\n- 発表イベントのランディング（1 枚絵で世界観を伝えたい場面）"
    },
    {
      "id": "2026-04-17-monochrome-editorial-magazine",
      "schemaVersion": 1,
      "title": {
        "ja": "モノクロームのエディトリアル誌面",
        "en": "Monochrome Editorial Spread"
      },
      "summary": {
        "ja": "黒・白・1 段階の灰だけで組んだ見開き。書体のウェイト差で階層を作る",
        "en": "A two-page spread built from black, white, and a single gray — hierarchy carried entirely by type weight"
      },
      "source": {
        "url": "https://www.behance.net/gallery/example-editorial",
        "author": "Marta Lindqvist",
        "platform": "behance"
      },
      "capturedAt": "2026-04-17",
      "publishedAt": "2026-02-14",
      "categories": [
        "editorial"
      ],
      "tags": [
        "minimal",
        "monochrome",
        "typography"
      ],
      "palette": [
        "#0A0A0A",
        "#8C8C8C",
        "#FAFAFA"
      ],
      "rating": 5,
      "status": "published",
      "relations": {
        "similar": []
      },
      "license": "Editorial use only",
      "cover": null,
      "assets": [],
      "urls": {
        "ja": "https://design-vault.pages.dev/designs/2026-04-17-monochrome-editorial-magazine",
        "en": "https://design-vault.pages.dev/en/designs/2026-04-17-monochrome-editorial-magazine",
        "json": "https://design-vault.pages.dev/ai/designs/2026-04-17-monochrome-editorial-magazine.json"
      },
      "notesMarkdown": "## Why I saved this / なぜ保存したか\n\n色を 3 値に絞り、情報階層を **書体のウェイト差** だけで表現している見開き。セリフの見出し\n(Weight 700) と、サンセリフの本文 (Weight 400)、そしてキャプション (Weight 300) の三段で\n読み順が設計されている。色を封じたとき、タイポグラフィが設計の主語になる例。\n\nA spread that restricts itself to three tonal values and leans entirely on type weight for\nhierarchy. A serif headline (700), a sans body (400), and a light caption (300) define the\nreading order. When color is taken off the table, typography becomes the subject of the design.\n\n### Techniques\n\n- 3 値配色は「黒・灰 1 値・白」で十分。灰を増やすと「妥協した配色」に見える\n- 和欧混植ならセリフ見出し + サンセリフ本文で階層の差を確保できる\n- ボディコピーの行送りは 1.6〜1.75。エディトリアルでは 1.8 まで伸ばすと呼吸が出る\n\n### Apply to\n\n- 長文記事 / ブログの記事テンプレート\n- ブランドのマニフェストページ（余白と書体だけで世界観を語る場面）"
    },
    {
      "id": "2026-04-18-fintech-mobile-dashboard",
      "schemaVersion": 1,
      "title": {
        "ja": "フィンテックのモバイルダッシュボード",
        "en": "Fintech Mobile Dashboard"
      },
      "summary": {
        "ja": "ポートフォリオ推移 + 取引履歴を 1 画面で見せる、チャート主役の個人資産アプリ",
        "en": "A personal-finance app that fits portfolio chart and transactions onto a single screen"
      },
      "source": {
        "url": "https://www.figma.com/community/file/example-fintech-mobile",
        "author": "Daniel Oh",
        "platform": "figma-community"
      },
      "capturedAt": "2026-04-18",
      "publishedAt": "2026-04-02",
      "categories": [
        "mobile",
        "dashboard"
      ],
      "tags": [
        "data-viz",
        "minimal",
        "bold"
      ],
      "palette": [
        "#0E1116",
        "#1C2230",
        "#4C8BF5",
        "#25D88A",
        "#F4F5F7"
      ],
      "rating": 4,
      "status": "published",
      "relations": {
        "similar": [
          "2026-04-15-gradient-saas-landing"
        ]
      },
      "license": "Figma Community (CC BY 4.0)",
      "cover": null,
      "assets": [],
      "urls": {
        "ja": "https://design-vault.pages.dev/designs/2026-04-18-fintech-mobile-dashboard",
        "en": "https://design-vault.pages.dev/en/designs/2026-04-18-fintech-mobile-dashboard",
        "json": "https://design-vault.pages.dev/ai/designs/2026-04-18-fintech-mobile-dashboard.json"
      },
      "notesMarkdown": "## Why I saved this / なぜ保存したか\n\nモバイル 1 画面に「総資産」「推移チャート」「直近取引」の 3 ブロックを積んでいるが、チャートを\n画面高の 40% まで大胆に確保することで視線の起点を固定している。数字は Tabular Lining 書体、\n増減は緑 / 赤を使わず「+」「-」記号と強弱だけで示している（色覚配慮）。\n\nA single mobile screen stacks \"total assets\", \"portfolio chart\", and \"recent transactions\".\nThe chart owns 40% of the screen height to anchor the eye. Figures use tabular lining\nnumerals, and gains/losses are signalled with \"+\" / \"-\" glyphs and weight — not red/green —\nto stay accessible.\n\n### Techniques\n\n- 数字主役 UI は Tabular (等幅) 数字に切り替えるだけで \"きちんと感\" が跳ね上がる\n- 増減の色分けに頼らない設計は、色覚アクセシビリティと海外展開の両方で効く\n- チャートの \"最初の 1 画面占有率\" を 30〜45% に置くと \"データ駆動\" の印象が立つ\n\n### Apply to\n\n- 個人資産 / 経費 / 健康データなど、数値が主役のモバイルアプリ\n- 社内向けの KPI モバイルビュー（Slack モバイルから飛ばす系ダッシュボード）"
    }
  ]
}