Section Composer / Section Definition(セクション定義)

料金・プラン

複数プランの価格、対象、機能、CTAを比較可能にする。

SC-PRI-001 v1.0.0 ツールで試す

Direct answer

何を決めるための項目ですか?

複数プランの価格、対象、機能、CTAを比較可能にする。

SC-PRI-001 は commercial-details の役割を持つSectionです。表示名や文章を変更しても固定Definition IDとversionを保ち、Project、品質finding、WordPress出力を同じ契約へ結び付けます。

Content contract

必要なContent Slot

ID日本語の意味Type(型)Required(必須)
heading見出しtext必須
intro説明richText任意
plans料金プランpricingList必須

Content Slot(コンテンツスロット)は、そのSectionに必要な文章・リンク・画像・一覧を型付きで保持する入力項目です。任意HTMLをそのまま保存せず、URL、alt、件数、必須状態を型ごとに検査します。

Layout variants

意味を変えずに選べる配置

  • pricing-cardsPricing cards2〜4プランをカード比較。
  • pricing-comparisonComparison機能比較表を中心に表示。

Implementation contract

Design Token・WordPress・アクセシビリティ

Required token(必須の意味付き設計値)

  • semantic.color.surface.card
  • semantic.color.action.primary.background
  • semantic.color.text.primary
  • semantic.color.border.strong

WordPress core Block

  • core/group
  • core/columns
  • core/heading
  • core/list
  • core/buttons

Accessibility(アクセシビリティ上の注意)

  • 価格と期間を文字で明示
  • おすすめを色だけで表現しない
  • 比較表には見出しセルを付ける

Safe workflow

安全に使う手順

  1. Page KitとSectionの役割を決め、必須Content Slotを実際の内容へ置き換えます。
  2. 375・768・1100・fluidで、見出し、長い文字、画像、CTA、横はみ出しを確認します。
  3. Quality Guardの固定Rule ID、severity(重要度)、evidence(根拠)、loss(変換損失)を確認します。
  4. 用途に合うAdapterを選び、INSTALL、VERIFY、ROLLBACKの順に導入・確認・復旧方法を共有します。

Terms

英語表記の意味

Section(セクション)はページ内の役割を持つ区画、Variant(バリアント)は意味を変えない配置違い、Adapter(アダプター)は同じProjectを実装形式へ変換する処理、Evidence(エビデンス)は判定根拠、Loss(ロス)は出力形式で完全には表現できない差、Rollback(ロールバック)は元に戻す手順です。