kaze風
Pricing
料金プラン
プレビュー
Free
個人利用向け
¥0//月
- 5プロジェクト
- 基本コンポーネント
おすすめ
Pro
¥2,980//月
- 無制限プロジェクト
- 全コンポーネント
- 優先サポート
使いどころ
使う場面
- プランを比べて選んでもらう節。PricingGrid の中に PricingCard を 2 から 4 枚並べる
- おすすめのプランに featured と badge（「人気」など）を付ける。featured は 1 枚だけ
- price に金額、period に単位（「月」）を渡すと「/月」と表示される。features には含まれる内容を 1 項目 1 行で渡す
- children に CTA ボタンを置く。各カードのボタンは同じ位置・同じ書き方で揃える
使わない場面
- 機能の差を細かく比較する表。Table を使う
- featured を複数のカードに付けること。どれを選ぶべきか分からなくなる
- features に条件の長い説明を入れること。1 項目は 1 行に収まる長さにする
- 価格を画像にすること。文字として渡す
使い方
<PricingGrid>
<PricingCard name="Pro" price="¥2,980" period="/月" features={["機能1", "機能2"]} featured badge="おすすめ">
<Button fullWidth>選択</Button>
</PricingCard>
</PricingGrid>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
name必須 | string | なし | プラン名 |
description | string | なし | プラン名の下に出す短い説明 |
price必須 | string | なし | 価格 |
period | string | なし | 課金期間 |
features必須 | string[] | なし | 機能リスト |
featured | boolean | false | ハイライト表示 |
badge | string | なし | バッジテキスト |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- PricingCard の name は h3 で出力される。Section の下に置き、階層を合わせる
- features は <ul> で出力され、チェックマークは装飾（aria-hidden）。項目数が読み上げられる
- featured は見た目の強調だけで、読み上げには伝わらない。badge の文言（「人気」）が読み上げの手がかりになる
文言
- name は短い固有名（「スタータ」「チーム」）。description にだれ向けかを 1 文で書く
- price は税込か税抜かを画面のどこかに明記する。料金の表記は公開前に事実確認する
- CTA は「無料で始める」「営業に相談する」のように動詞で書き、プランの性質に合わせて変える