本文へスキップ

実用サンプル: LP・マーケページ

プロのサイトで実見した型を、そのまま使える大きさで。ヒーロー・分岐・事例・CTA。

プロのサイトで実見した型を、そのまま使える大きさで再現した LP・マーケページのカテゴリ。精密ヘッダー、1画面1メッセージ、生きた数字、幾何学バランスの各ヒーロー、対象者で分岐する入口、「〜向け」タグ付きカード、ベントの機能紹介、事実で語る信頼帯、誇張しない目次型セクション、事例カード、更新履歴、安心の一言つき CTA 帯、サイトマップ型フッター、作品リストがそのままインターフェースになる型がある。原則は認知負荷。1画面に1つの主張、押す前に分かる行き先、形容詞ではなく事実、という共通点はすべて読み手の負担を減らす方向にある。LP を0から組むとき、部品ではなく画面単位で引く。

関わる原則: 認知負荷14件

使い分け冒頭は hero-one-message / hero-precise-header / hero-live-number から1つ。対象が複数なら audience-branch-hero で分岐。信頼は trust-band-facts と case-study-cards、締めは cta-band-reassure。装飾を足すより plain-toc-section で言葉を整えるほうが先。

まず見る3件

  • スクロール

    1画面1メッセージのヒーロー実例あり

    One Message Per Screen Hero

    見出し＋一行＋CTA 1つだけを1画面に置き、スクロールすると同じ構造の次のメッセージが現れます。スナップで1画面ずつ止まります。

    • 1画面に見出し・一行・CTA 1つ以外を置かない。見せ場が2つあればどちらも見せ場ではない
    • CTA はボタンでなく文字リンク。主役は言葉と製品で、ボタンは脇役に格下げする
    • 画面ごとに地色を変える（白→黒→薄灰）と、同じ構造でも「次の話」に切り替わったと分かる
    • JS
    コードを見る →
  • クリック

    対象者で分岐するヒーロー実例あり

    Audience Split Hero

    ヒーロー直下に「法人のお客さま／個人事業主・副業のお客さま」の2つの入口を置き、誰向けかで迷わせません。ホバーで持ち上がり、選ぶと案内が切り替わります。

    • ナビは構造の目次ではなく、訪問者の語彙で分岐する案内。「法人／個人事業主」は相手が自分を呼ぶ言葉で書く
    • 入口は2つまで。3つ以上になったら「〜向け」タグ付きのカード（別パーツ）に切り替える
    • 各入口に「何が起きるか」の一行（決算・請求・経費精算をひとつに）。ラベルだけだと押す前に判断できない
    • JS
    コードを見る →
  • 静的

    安心の一言つき CTA 帯実例あり

    CTA Band with Reassurance

    主 CTA は1つ、副 CTA は文字リンクに格下げした帯。ボタンの脇に「クレジットカード不要」「いつでも解約できます」と、押す前の不安に答える一言を添えます。

    • CTA は1画面に1つ。2つ目は文字リンクに格下げして主役を守る。同じ強さのボタンを2つ並べない
    • ボタンの脇の一言は装飾ではなく UI。「押したら何が起きるか／なぜ安心か」を事実で書く
    • 安心の一言は3つまで。多いほど不安に見える。「クレカ不要・14日間無料・いつでも解約」で足りる
    • CSSのみ
    コードを見る →

使い分け表

パーツ操作技術向く場面状態
精密ヘッダーのヒーロー
Precision Header Hero
静的JSSaaS・開発者ツールの LP 冒頭・製品画面を主役に据えたいトップdefault / hover / focus
1画面1メッセージのヒーロー
One Message Per Screen Hero
スクロールJS1 製品に絞った消費者向け LP・見出し 1 行で言い切れる主張がある製品default / hover / focus
生きた数字のヒーロー
Live Counter Hero
自動再生JS決済・配信など件数が絶えず増える事業・実データの API 集計値を見せられる LPdefault / hover / focus
幾何学バランスのヒーロー
Three-Column Geometric Hero
ホバーCSSのみデザイン・コラボ系ツールの LP・CTA を余白で孤立させて見つけやすくしたいときdefault / hover / focus
対象者で分岐するヒーロー
Audience Split Hero
クリックJS法人／個人など対象者が 2 種類ある製品・料金や機能が対象者で分かれるサービスdefault / hover / focus / active
「〜向け」タグ付きカード
Audience Cards with Tags
ホバーCSSのみ家計／法人／開発者など製品ラインが 3 つある企業・入口の対象者を名指ししたい一覧default / hover / focus
機能紹介のベントグリッド
Feature Bento with Micro Motion
自動再生CSSのみ主役の機能 1 つと脇役 4 つを紹介する LP・機能が動く瞬間を小さな図で見せたいときdefault
事実で語る信頼帯
Social Proof Band
静的CSSのみ導入社数や継続率の実数を出せる B2B・No.1 の調査主体・年月を明記できる場合default
誇張しない目次型セクション
Plain Table-of-Contents Section
ホバーCSSのみ言葉で信頼を作りたい老舗・堅実な製品・機能を目次として同格に並べたいときdefault / hover / focus
導入事例カード
Case Study Cards
ホバーCSSのみB2B の導入事例を 3 社並べる LP・成果を差分の数字 1 つで語れるときdefault / hover / focus
更新履歴タイムライン
Changelog Timeline
クリックJSSaaS の更新履歴・リリースノート・新機能と修正を種類で絞り込ませたいときdefault / focus / active / empty
安心の一言つき CTA 帯
CTA Band with Reassurance
静的CSSのみLP 末尾の申込み・無料開始の帯・押す前の不安（課金・解約）に答えたいときdefault / hover / focus
サイトマップ型フッター
Sitemap Footer
静的CSSのみページ数の多いコーポレート・SaaS サイト・言語切替と法務リンクを常に置く必要がある場合default / hover / focus
作品リストがインターフェース
Work Index List
ホバーJSデザインスタジオ・作家のポートフォリオ・内容そのものを構造にしたいトップdefault / hover / focus

すべての見本（14件）

  • 静的

    精密ヘッダーのヒーロー実例あり

    Precision Header Hero

    64px の細いヘッダー（ロゴ・ナビ・仕切り線・pill CTA）と、字間を詰めた大型見出し＋一行リード＋製品画面の枠。狭幅ではナビがメニューに畳まれます。

    • JS
    コードを見る →
  • スクロール

    1画面1メッセージのヒーロー実例あり

    One Message Per Screen Hero

    見出し＋一行＋CTA 1つだけを1画面に置き、スクロールすると同じ構造の次のメッセージが現れます。スナップで1画面ずつ止まります。

    • JS
    コードを見る →
  • 自動再生

    生きた数字のヒーロー実例あり

    Live Counter Hero

    見出しの上に、小数点以下まで動き続けるカウンタ（今この瞬間の処理件数）。色の見せ場は右の斜めリボン1箇所に絞り、リードは本文級の大きさで読ませます。

    • JS
    コードを見る →
  • ホバー

    幾何学バランスのヒーロー実例あり

    Three-Column Geometric Hero

    左にコピー、中央に図形のコラージュ、右に CTA を置く3分割のヒーロー。CTA を余白の中に孤立させて、探さなくても見つかるようにします。

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

    対象者で分岐するヒーロー実例あり

    Audience Split Hero

    ヒーロー直下に「法人のお客さま／個人事業主・副業のお客さま」の2つの入口を置き、誰向けかで迷わせません。ホバーで持ち上がり、選ぶと案内が切り替わります。

    • JS
    コードを見る →
  • ホバー

    「〜向け」タグ付きカード実例あり

    Audience Cards with Tags

    家計／バックオフィス／開発者の3枚のカードに「〜向け」タグを付け、誰向けかを押す前に分からせます。ホバーで矢印が進みます。

    • CSSのみ
    コードを見る →
  • 自動再生

    機能紹介のベントグリッド

    Feature Bento with Micro Motion

    大小のタイルで機能を紹介するベントグリッド。主役は大タイル1枚だけ、他4枚は脇役。各タイルに CSS だけの小さな動く図を置き、機能の中身を一目で伝えます。

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

    事実で語る信頼帯実例あり

    Social Proof Band

    導入社数の実数・継続率・「No.1」に調査主体の但し書き・テキストロゴの並び。形容詞ではなく、検証できる事実だけで信頼を作る帯です。

    • CSSのみ
    コードを見る →
  • ホバー

    誇張しない目次型セクション実例あり

    Plain Table-of-Contents Section

    「堅牢で、使いやすい。それだけです」のような平文の見出しと、下線リンク＋一行説明の縦並びだけで製品を紹介するセクション。装飾を足さず、言葉で信頼を作ります。

    • CSSのみ
    コードを見る →
  • ホバー

    導入事例カード

    Case Study Cards

    写真の代わりのグラデーション・引用・成果の数字（問い合わせ対応時間 −42%）・担当者名を1枚にまとめた事例カード3枚。ホバーで少し持ち上がります。

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

    更新履歴タイムライン実例あり

    Changelog Timeline

    左に日付レール、右にバージョンタグ＋見出し＋変更点を並べる更新履歴。新着に「New」バッジ。「新機能／修正」のフィルタで項目が絞り込まれます。

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

    安心の一言つき CTA 帯実例あり

    CTA Band with Reassurance

    主 CTA は1つ、副 CTA は文字リンクに格下げした帯。ボタンの脇に「クレジットカード不要」「いつでも解約できます」と、押す前の不安に答える一言を添えます。

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

    サイトマップ型フッター

    Sitemap Footer

    4カラムのリンク群・言語切替・SNS アイコン・法務リンクをまとめたフッター。320px では2カラムに畳まれ、法務リンクは横に流れます。

    • CSSのみ
    コードを見る →
  • ホバー

    作品リストがインターフェース実例あり

    Work Index List

    装飾ゼロの一行リスト（年・題・種別）。ホバーやフォーカスで右にサムネイル（グラデーション）が浮かび、行の位置に追従します。狭幅では右下に小さく出ます。

    • JS
    コードを見る →