パックの内容

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

Digital Bank OG Image

When to use

• Your digital bank, neobank, or fintech product is launching a card, feature, or landing page and the link preview is the first thing people see
• A press article, blog post, or App Store page links to your product and shows a broken or generic preview
• You're announcing a new feature (savings pots, instant transfers, virtual cards) and want the share card to explain it in one glance
• Your marketing site has ten pages and they all share the same preview image — each page needs its own
• You're a designer or founder who needs a preview card that looks trustworthy, because a bank that looks sloppy doesn't get signups

Workflow

1. Define the page's one message (input: page URL + goal → output: message brief)
   Every OG image sells one thing: the page it points to. Write the page's single message in under 10 words — "A card that rounds up your spare change" or "Send money home in seconds." If the page has three messages, pick the one that earns the click; the other two live on the page itself. Also note the compliance boundaries up front: no interest rates, fees, or guarantees in the image unless they're on the page and approved, and never a claim the product can't back.
2. Design the 1200×630 composition (input: message brief → output: layout spec)
   Lay out the standard anatomy for a banking preview: brand mark + name, the one-message headline in large type, and one visual — a card, a phone showing the app, or a simple graphic motif. Keep the background premium and restrained: a solid brand color, a subtle gradient, or a dark field with a metallic card. Respect the safe zones — keep text clear of edges and center, since platforms crop previews differently. A bank's OG image should look calm and expensive, not loud: one accent, generous spacing, no stock-photo people.
3. Build the image (input: layout spec → output: draft OG image)
   Produce the image at exactly 1200×630 pixels. Headline type around 64–80px at full size so it stays legible in a chat sidebar at ~300px wide. Total word count under 12, including the brand name. If a card appears, show a clean card mock with no real card number, no real name, and no chip/expiry that could be mistaken for a real card. Export as JPG or PNG under 300KB. Check the draft at three sizes — full, chat-width, and notification-tiny — and confirm the message survives at each.
4. Wire it into the page (input: draft OG image → output: live preview)
   Add the standard meta tags: og:image (absolute URL), og:title (page title), og:description (one line matching the image's message), and twitter:card set to summary_large_image. Serve the image from a stable CDN or public path. If the page is localized, each locale gets its own image and tags — a Spanish page sharing an English preview card is a small, avoidable embarrassment. Confirm the image URL is publicly reachable: crawlers can't log in or pass a paywall.
5. Verify and refresh (input: live preview → output: verified OG image)
   Test the link in the major messengers, in a social preview debugger, and in a search-result preview if available. Confirm: the image loads, the message is legible, nothing is cropped awkwardly, and every claim in the image matches the page. Re-scrape in the debuggers to bust caches after launch. Re-check after any rebrand, rate change, or feature rename — a stale OG image will keep advertising last year's offer in every chat thread.

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

Digital Bank OG Image — Template

One page = one OG image. Fill this in before designing.

Message brief

Page URL: {url} | Locale: {language} One message (under 10 words): {e.g. "Round up spare change. Save without thinking."} Compliance boundaries: {no rates/fees/guarantees in image unless approved — list what is NOT allowed: …}

Layout spec (1200×630)

• Background: {brand color / subtle gradient / dark field}
• Brand mark + name: {position, size}
• Headline: {one message, 64–80px}
• Visual on the right: {card mock / phone showing app / graphic motif}
• Safe zones: text clear of edges and center
• Total words: ≤12

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

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