本文へスキップ

コンテンツ・LP部品

料金・特徴・証言など、伝えて動かすページ部品。

伝えて動かすページの部品のカテゴリ。3プラン比較の料金テーブル、証言カード、行動喚起の CTA セクション、アコーディオン式の FAQ、3つの特徴を並べるフィーチャーセクションの5種がある。原則はフォン・レストルフ効果。料金表の「おすすめ」を1つだけ縁取りとバッジで強調するように、選ばせたいものは周りと違う見た目にし、それ以外は退かせる。同じ強調を2つ置けばどちらも目立たなくなる。LP を組むときに、どのブロックをどの順に置き、どこを主役にするかを決める場面で引く。

関わる原則: フォン・レストルフ効果（孤立効果）5件

使い分け強みの紹介は feature-section、料金は pricing-table（おすすめは1つ）、信頼は testimonial、不安の解消は faq-section、締めは cta-section。順番は「特徴→料金→声→FAQ→CTA」を基本にし、証言は実在の声があるときだけ置く。

まず見る3件

  • 静的

    料金テーブル解説あり

    Pricing Table

    3つのプランを横並びで比較する料金表。中央の「おすすめ」プランを藍のふちとバッジで強調し、各プランに機能リストとCTAを添えます。

    • 強調は「おすすめ」プランだけ。枠を 2px の藍・影を 24px・バッジを上端からはみ出す、の 3 点で視線を寄せる
    • 価格は通貨記号 11px と数字 20px を分け、tabular-nums で桁を揃える。3 枚の数字の高さが揃うと比較しやすい
    • 359px 以下では 3 列を諦めて横スワイプ（flex 0 0 74%＋scroll-snap）。隣のカードの端を見せて続きがあると分かる
    • CSSのみ
    コードを見る →
  • 静的

    フィーチャーセクション

    Feature Section

    3つの特徴を、アイコンタイル・見出し・短い説明の組で並べる紹介セクション。プロダクトの強みを一目で伝えるLPの定番ブロックです。

    • アイコンは 44px の淡い藍タイルに 22px の線画。色面の大きさが揃えば、3 つが同じ格に見える
    • 機能名 14px 太字＋説明 12px 灰の 2 段だけ。3 つとも同じ行数に揃えると比較の目が迷わない
    • 説明は「使うとどうなるか」で書く。「操作に待たされない設計」のように結果を言い、機能名を繰り返さない
    • CSSのみ
    コードを見る →
  • 静的

    CTAセクション

    CTA Section

    藍のグラデーション帯の上に、太い見出し・補足文・主要ボタンを中央寄せで置く行動喚起セクション。ページ末尾の締めに使います。

    • 帯は藍のグラデーション 1 色。中に置くのは見出し・補足・白ボタン・小さなログインだけで、図や写真を入れない
    • 主ボタンは白地に藍文字で帯の中で最も明るい面にする。ホバーで 2px 浮かせ、押下で沈める
    • 補足文で「クレジットカード不要・14 日間無料」と押す前の不安に答える。事実で書けない語は入れない
    • CSSのみ
    コードを見る →

使い分け表

パーツ操作技術向く場面状態
料金テーブル
Pricing Table
静的CSSのみ3 プランを横並びで比較する料金ページ・おすすめプランに視線を寄せたいときdefault / hover / focus / active
お客様の声
Testimonial
静的CSSのみ利用者の声を 1 枚で見せる証言カード・星評価と肩書きで信頼を補強したい LPdefault
CTAセクション
CTA Section
静的CSSのみページ末尾の申込み・無料開始の締め・主ボタン 1 つと補足文で行動を促す帯default / hover / focus / active
FAQセクション
FAQ Section
クリックJS料金・製品ページのよくある質問・質問文を走査させ回答は開いた人だけに読ませるdefault / hover / focus / active
フィーチャーセクション
Feature Section
静的CSSのみ製品の強み 3 つをアイコン付きで紹介する LP・見出し＋短い説明で一目で伝えたい特徴default

すべての見本（5件）

  • 静的

    料金テーブル解説あり

    Pricing Table

    3つのプランを横並びで比較する料金表。中央の「おすすめ」プランを藍のふちとバッジで強調し、各プランに機能リストとCTAを添えます。

    • CSSのみ
    コードを見る →
  • 静的

    お客様の声

    Testimonial

    利用者の声を1枚のカードで見せる証言パーツ。頭文字入りのグラデーションアバター、名前・肩書き、星評価を添えて信頼感を伝えます。

    • CSSのみ
    コードを見る →
  • 静的

    CTAセクション

    CTA Section

    藍のグラデーション帯の上に、太い見出し・補足文・主要ボタンを中央寄せで置く行動喚起セクション。ページ末尾の締めに使います。

    • CSSのみ
    コードを見る →
  • クリック

    FAQセクション解説あり

    FAQ Section

    質問をクリックすると答えがなめらかに開くアコーディオン式のよくある質問。開いている項目のシェブロンが回転し、一度に複数開けます。

    • JS
    コードを見る →
  • 静的

    フィーチャーセクション

    Feature Section

    3つの特徴を、アイコンタイル・見出し・短い説明の組で並べる紹介セクション。プロダクトの強みを一目で伝えるLPの定番ブロックです。

    • CSSのみ
    コードを見る →