Service Pricing Card Moodboard

A compact pricing-card layout for service packages, consulting offers, workshops, and template bundles.

情報カード Info cardPricingServiceOffer
Service pricing card mockup with large price, included items, badge, and strong call-to-action.
info-card

SERVICE

Launch Review

  • Page audit
  • Copy rewrite notes
  • One follow-up call

Clear scope, clear price, clear next step

使い方

01

Package name

  • Name the outcome or service level, not just the internal tier.
02

Included list

  • Use 4-6 concrete deliverables so the buyer understands what they receive.
03

Decision cue

  • Add one line that says who this package is best for.

そのまま応用できる例

Design specs

Color values

Offer cream

#fffaf0 · RGB(255, 250, 240)

Card surface and page section background.

Ink black

#111111 · RGB(17, 17, 17)

Package name, price, and border.

Blue proof

#3b82f6 · RGB(59, 130, 246)

Recommended badge, guarantee line, or included count.

Red urgency

#ff4b2f · RGB(255, 75, 47)

Limited seats or one highlighted bonus.

Type and size

Price

  • Use 46-64px numerals, 900 weight, with a 15-17px billing note next to or below the number.

Feature list

  • Use 15-18px text, 600-750 weight, with short benefit-led bullets rather than long explanations.

Layout rules

Card structure

  • Use package name, one-line fit statement, price, 4-6 included items, and one CTA. Keep the CTA at the bottom.

Spacing

  • Use 28-36px padding, 18-24px between major zones, and 10-12px between included items.

Build notes

  • Use as a single offer card, three-card pricing row, proposal page block, or Instagram service menu.
  • If the price needs explanation, add one footnote instead of shrinking the main list.

置き換えられる部分

Offer fields

  • Package name
  • Best-for line
  • Price
  • Included items
  • CTA
  • Availability note

Useful badges

  • Most popular
  • Starter
  • For small teams
  • Limited seats

向かない場合

  • The service has too many custom variables.
  • Users must configure many options before seeing a price.
  • The offer needs a legal contract explanation first.

展開例

  • Make a three-tier pricing row.
  • Turn it into a proposal cover block.
  • Use it as a small-shop service menu.

使用時の注意

  • Never hide the price behind tiny text.
  • Keep included items parallel.
  • Use one badge only, or the card starts to feel noisy.

向いている用途

PricingService pageWorkshopOffer card

カラー

関連アイデア

近い構造、雰囲気、用途を続けて見られます。