{ "id": "design:topics-dated-cards", "schemaVersion": 2, "title": { "ja": "今期の出来事 — 日付・分類・見出しを揃えた 3 枚のカード", "en": "Topics — Three Cards Lined Up by Date, Category and Headline" }, "summary": { "ja": "今期の出来事を 3 枚のカードにし、図版の差し替え枠・日付・分類・見出し・1 行の説明を同じ位置に揃える。並びは日付順", "en": "The period's events as three cards with image frame, date, category, headline and one line of detail in the same places, in date order" }, "capturedAt": "2026-10-19", "categories": [ "presentation" ], "tags": [ "minimal", "typography" ], "useCases": [ "summary" ], "format": "slide-16x9", "density": "medium", "layout": { "kind": "3-column", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 96, "right": 140, "bottom": 56, "left": 140 }, "columns": { "count": 3, "gap": 40 } }, "type": { "kicker": { "size": 22, "weight": 700, "tracking": "0.16em", "numeric": "tabular" }, "title": { "size": 52, "weight": 700, "leading": 1.35, "numeric": "tabular" }, "date": { "size": 24, "weight": 700, "numeric": "tabular" }, "category": { "size": 20, "weight": 500, "numeric": "tabular" }, "headline": { "size": 32, "weight": 700, "leading": 1.45, "numeric": "tabular" }, "body": { "size": 22, "weight": 400, "leading": 1.7, "numeric": "tabular" }, "folio": { "size": 16, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#FFFFFF", "surface": "#F2F4F8", "ink": "#0E1A2B", "muted": "#5B6879", "accent": "#1D3F72", "rule": "#D6DCE5", "series": [] }, "rules": [ { "ja": "出来事は 3 件、日付順。重要な順にすると、時系列を読み違える", "en": "Three events in date order — rank them by importance and the sequence gets misread" }, { "ja": "各カードに数字を 1 つ入れる（台数・国の数・投資額）", "en": "Put one number in each card (units, countries, investment)" }, { "ja": "図版は 16:9 の差し替え枠。写真が無いうちは、淡い紺の図形で置き場所だけを示す", "en": "Images are 16:9 stand-ins; until photos exist, pale navy shapes only mark the slot" }, { "ja": "見出しは 1 行に収める。2 行になる見出しは、説明の行に回す", "en": "Keep each headline to one line; whatever spills goes into the detail line" } ], "cover": "https://design-vault.pages.dev/_astro/cover.BuyWdG6p.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "offering-grid-six-cards", "timeline-vertical-milestones", "case-study-2col-single-figure" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "format": "slide-16x9", "density": "medium", "layout": { "kind": "3-column", "canvas": { "w": 1920, "h": 1080 }, "margin": { "top": 96, "right": 140, "bottom": 56, "left": 140 }, "columns": { "count": 3, "gap": 40 } }, "type": { "kicker": { "size": 22, "weight": 700, "tracking": "0.16em", "numeric": "tabular" }, "title": { "size": 52, "weight": 700, "leading": 1.35, "numeric": "tabular" }, "date": { "size": 24, "weight": 700, "numeric": "tabular" }, "category": { "size": 20, "weight": 500, "numeric": "tabular" }, "headline": { "size": 32, "weight": 700, "leading": 1.45, "numeric": "tabular" }, "body": { "size": 22, "weight": 400, "leading": 1.7, "numeric": "tabular" }, "folio": { "size": 16, "weight": 400, "numeric": "tabular" } }, "colors": { "ground": "#FFFFFF", "surface": "#F2F4F8", "ink": "#0E1A2B", "muted": "#5B6879", "accent": "#1D3F72", "rule": "#D6DCE5" }, "rules": [ "Three events in date order — rank them by importance and the sequence gets misread", "Put one number in each card (units, countries, investment)", "Images are 16:9 stand-ins; until photos exist, pale navy shapes only mark the slot", "Keep each headline to one line; whatever spills goes into the detail line" ] }, "prompt": { "ja": "以下の仕様でスライドを 1 枚作ってください。\n\n- 版面 1920 × 1080\n- 余白 上 96 右 140 下 56 左 140\n- 3 カラム（等分）、間隔 40\n\n## 文字（版面 1920px に対する px）\nkicker 22px / 700 / 字間 0.16em / 等幅数字\ntitle 52px / 700 / 行送り 1.35 / 等幅数字\ndate 24px / 700 / 等幅数字\ncategory 20px / 500 / 等幅数字\nheadline 32px / 700 / 行送り 1.45 / 等幅数字\nbody 22px / 400 / 行送り 1.7 / 等幅数字\nfolio 16px / 400 / 等幅数字\n\n## 配色\n地 #FFFFFF / 面 #F2F4F8 / 文字 #0E1A2B / 補助 #5B6879 / 強調 #1D3F72 / 罫 #D6DCE5\n\n## 外すと崩れる点\n- 出来事は 3 件、日付順。重要な順にすると、時系列を読み違える\n- 各カードに数字を 1 つ入れる（台数・国の数・投資額）\n- 図版は 16:9 の差し替え枠。写真が無いうちは、淡い紺の図形で置き場所だけを示す\n- 見出しは 1 行に収める。2 行になる見出しは、説明の行に回す\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/topics-dated-cards/pattern.html", "en": "Produce one slide to the following specification.\n\n- Canvas 1920 × 1080\n- Margin top 96 right 140 bottom 56 left 140\n- 3 equal columns, gap 40\n\n## Type (px against a 1920px canvas)\nkicker 22px / 700 / tracking 0.16em / tabular numerals\ntitle 52px / 700 / leading 1.35 / tabular numerals\ndate 24px / 700 / tabular numerals\ncategory 20px / 500 / tabular numerals\nheadline 32px / 700 / leading 1.45 / tabular numerals\nbody 22px / 400 / leading 1.7 / tabular numerals\nfolio 16px / 400 / tabular numerals\n\n## Colour\nGround #FFFFFF / Surface #F2F4F8 / Ink #0E1A2B / Muted #5B6879 / Accent #1D3F72 / Rule #D6DCE5\n\n## Constraints — dropping these breaks it\n- Three events in date order — rank them by importance and the sequence gets misread\n- Put one number in each card (units, countries, investment)\n- Images are 16:9 stand-ins; until photos exist, pale navy shapes only mark the slot\n- Keep each headline to one line; whatever spills goes into the detail line\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/topics-dated-cards/pattern.html." }, "code": { "html": "\n\n今期の出来事 — 日付・分類・見出しを揃えた 3 枚のカード\n\n\n\n\n
\n
\n
\n

上期のトピックス

\n

製品・提携・設備で、計画の 3 本の柱が動き出した

\n
\n
\n
\n
\n
\n

2026.06.02製品

\n

診療所向けの小型分析装置を発売

\n

卓上に置ける大きさ。初年度 1,200 台を見込む

\n
\n
\n
\n
\n
\n

2026.07.15提携

\n

北欧の検査機器会社と販売で提携

\n

欧州 6 か国で、当社の計測サービスを提供する

\n
\n
\n
\n
\n
\n

2026.09.01設備

\n

仙台工場に自動組立ラインを新設

\n

組立の工数を 3 割減らす。投資額は 18 億円

\n
\n
\n
\n
\n

アオバ精工株式会社　2027 年 3 月期 第 2 四半期 決算説明資料

\n

08

\n
\n
\n
\n", "url": "https://design-vault.pages.dev/designs/topics-dated-cards/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/topics-dated-cards/font.css", "https://design-vault.pages.dev/designs/topics-dated-cards/font-0.woff2", "https://design-vault.pages.dev/designs/topics-dated-cards/font-1.woff2", "https://design-vault.pages.dev/designs/topics-dated-cards/font-2.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/topics-dated-cards", "en": "https://design-vault.pages.dev/en/designs/topics-dated-cards", "json": "https://design-vault.pages.dev/ai/assets/topics-dated-cards.json", "designJson": "https://design-vault.pages.dev/ai/designs/topics-dated-cards.json" }, "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。一式「決算・経営報告」の\n1 枚で、架空の会社「アオバ精工」の第 2 四半期決算説明として描いてある。会社・人物・数値はすべて架空。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it. One of the eight results-briefing slides, drawn\nas a fictional company's half-year results deck; every company, person and figure on it is invented.\n\n### Techniques\n\n- 3 列のカード、上端に紺の 4px の罫\n- 分類は紺の枠線だけの小さな札\n- 図版の図形は紺を地に 8%・22%・45% 混ぜた 3 段\n\n### Apply to\n\n- 決算説明のトピックス\n- 社内報・月次報告の出来事のまとめ", "slug": "topics-dated-cards", "kind": "artboard", "catalogVersion": 1, "designSchemaVersion": 2, "capabilities": [ "view-artboard", "read-spec", "copy-prompt", "get-code" ], "reusePolicy": "construction-reuse" }