パックの内容

SKILL.md（手順書）1点とスターターテンプレート1点が入っています。プレビューはこちらです：

Dark Stat Hero

When to use

• A landing or product page needs a hero that opens with proof, not a slogan
• You have one strong, verifiable number (customers, hours saved, accuracy, uptime) that beats any headline
• The page already uses a dark theme and the hero must feel native to it, not like a banner pasted on top
• A report, impact page, or annual summary needs a hero that states the headline result in one glance
• The current hero is a generic claim ("The best way to…") that visitors scroll past without reading

Workflow

1. Pick the one number (input: evidence and audience → output: hero stat brief)
   Choose exactly one number to lead the hero — the strongest figure you can verify and your audience can grasp in two seconds. The number must clear three tests: it is true and verifiable (you can show where it came from), it matters to this visitor (not an internal vanity metric), and it is understandable without a paragraph of explanation. Common strong choices: a customer count, a time or money saving, an accuracy or uptime figure, or a before-and-after improvement. Write the brief now: the number, its unit, the timeframe or scope it covers ("in 2025," "across 340 teams," "median, not mean"), and the source. If two numbers are fighting for the hero, the second one becomes a supporting stat below — heroes with two leading numbers have none.
2. Write the stat sentence (input: hero stat brief → output: stat line plus subhead)
   The hero needs two lines and no more: the stat line (the number, huge, with its unit and scope in the same breath — "4,200 hours saved" beats "4,200" alone) and a subhead of one sentence that says what the number means for the visitor ("Teams get their Fridays back" beats "We optimize workflows"). The subhead must connect the number to the visitor's life; a stat without a "so what" is trivia. Add one supporting line only if the number needs a qualifier to stay honest ("Median across paying teams, Jan–Jun 2025") — honesty qualifiers belong in the hero, not hidden in a footnote. Read the two lines aloud: a stranger should understand the claim and why it matters within five seconds, or the lines need rewriting.
3. Design the dark hero (input: stat line and subhead → output: hero style system)
   Design the hero as the darkest, calmest part of the page so the number commands it. Background: near-black with a subtle gradient, texture, or glow — never pure black behind thin type, and never a busy photo fighting the number. Type: the number in a large, confident weight at a size that dominates the viewport on desktop and still fits on one line (or a clean two-line break) on a phone; the subhead in near-white at body-plus size; supporting text in a muted gray that still clears accessibility contrast. Use one accent color, sparingly: the number itself, a small divider, or the call-to-action button — never all three at full strength, or nothing is accented. Give the number room: generous padding above and below, and no competing graphics, badges, or popups inside the hero.
4. Add the action and the proof (input: hero style system → output: complete hero)
   Place one primary call to action directly under the subhead — the single next step the page wants (start, see it in action, read the report) — and make it the only button in the hero. If the page needs a secondary action, render it as a quiet text link, not a second button competing for the click. Add up to three supporting stats in a row beneath the action, each smaller and quieter than the hero number, each with its own unit and scope, so the hero's proof deepens without diluting the lead number. Optional: a single line of social proof ("Trusted by teams at…") with names the visitor will recognize — but only real names, and only if they add weight the stats do not already carry. Nothing else goes in the hero: no nav clutter, no chat widget overlapping the number, no auto-playing video behind the text.
5. Make it work on phones (input: complete hero → output: responsive hero)
   Phones are where dark heroes most often break, so check the phone layout deliberately. The number must fit without awkward breaks — test the actual figure at the actual size, and reduce size or re-break the line rather than letting a seven-digit number overflow or hyphenate. The call to action must be thumb-reachable without scrolling past the stat, and supporting stats must stack into a clean vertical list (never a squashed three-column row that turns into unreadable slivers). Check contrast on a real phone in both bright daylight and a dim room: dark heroes that look premium on a desktop monitor often wash out or glare on a phone. Confirm the hero's total height stays within about one viewport on phones — a hero that needs two screens to reach the button is a wall, not a welcome.
6. Verify and keep honest (input: responsive hero → output: verified, maintained hero)
   Before launch, verify the number against its source one final time and confirm the scope line matches the data exactly (a "customers" figure that silently includes free trials is a lie in a large font). Check the hero with images off and with custom fonts blocked — the number and subhead must still read clearly in fallback type. Set a review date: stats age, and a hero number that was true last year is a false claim this year. Record the source, the date pulled, and the next review date in one place the team can find, and re-verify on that schedule or whenever the underlying data changes. If the number ever becomes unverifiable, replace it with a qualitative headline the same day — a dark hero with a huge unverified number is the fastest way to lose a visitor's trust.

テンプレートのプレビュー

Dark Stat Hero — Production Template

One number leads. Everything else supports. Fill this in before designing.

Hero stat brief

• The number: {figure}
• Unit: {customers / hours / % / $ / …}
• Timeframe / scope: {e.g. in 2025 · across 340 teams · median, not mean}
• Source: {where the number came from}
• Tests: [ ] true + verifiable · [ ] matters to this visitor · [ ] understandable in 2 seconds

Copy (two lines, no more)

• Stat line: "{number} {unit}" — with unit + scope in the same breath
• Subhead (one sentence — the "so what"): "{what the number means for the visitor}"

スキルパック本体（SKILL.md とテンプレート）は英語で書かれています。

スキルパックを購入 — $4.99 Pro — 全511件のスキル