GODRICH
#cssアニメーション#ボタン#ローディング#トランジション#スクロール#ダッシュボード#実用ui#デザイントレンド

【コピペOK】信頼を作るLPパーツ9選

· Godrich · 9種 · 7分で読める

LPセクションページテンプレートCSSのみLPCTAボタン

LPパーツは、統計カウンターやロゴバーから比較表・問い合わせフォームまで、ランディングページのあちこちに散らばっていた信頼づくりの部品をひとまとめにしたコード集です。LPにそのまま貼れる九つのうち一つは、ページが開いた瞬間に数字が実際に0から目標値まで上がります。

主要指標カウンター01 stats-metrics-showcase 導入企業ロゴバー02 logo-cloud-trusted-by 機能比較表03 feature-comparison-table チームメンバーグリッド04 team-members-grid ニュースレター登録バンド05 newsletter-signup-band 連携サービスグリッド06 integration-partners-grid ロードマップタイムライン07 timeline-roadmap 受賞・メディア掲載08 awards-press-mentions 分割型お問い合わせフォーム09 contact-form-split

自動再生 · タイルを押すとその項目へ · すべて1つのzip

lp パーツ 参考として集めた九つは、知名度順ではなく、訪問者の信頼が積み上がっていく順番に並べました。まず数字で規模を見せ(主要指標カウンター)、すでに使っている会社の名前を流し(導入企業ロゴバー)、料金の違いを表で見せ(機能比較表)、実際に働く人を見せ(チームメンバーグリッド)、次の情報を受け取ってもらい(ニュースレター登録バンド)、つながるサービスを並べ(連携サービスグリッド)、これまでの道とこれからの道を見せ(ロードマップタイムライン)、第三者の評価を根拠として示し(受賞・メディア掲載)、最後に実際の問い合わせを受け取ります(お問い合わせフォーム)。ロゴ・アバター・媒体名はすべてこのサイト共通のインク・ブルー・クリームのトークンだけで組んだ図形で、実際のロゴファイルに差し替えてもグリッドと配置はそのまま保たれます。同じセクション組み立てでも期間限定の販売を押す型はプロモ LP テンプレートにまとめてあり、信頼を人の顔で見せる部品はプロフィールカード デザインのほうが詳しいです。

01主要指標カウンター

lp パーツ デザインとして何が見えるか

三つの数字はページが開いた瞬間、requestAnimationFrameで実際に0から目標値までカウントアップします。

主要指標カウンター
新しいタブで開く

01 · 主要指標カウンター — 計測 累積面積 6.406% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

requestAnimationFramecountertransform

コードのどこを見るか

アイコンは常に静かに上下へ揺れ、行全体が動いている印象を保ちます。

document.querySelectorAll('.stats__n').forEach(function (el, i) {
  var target = Number(el.getAttribute('data-target'));
  var DUR = 1100, start = null, delay = i * 140;
  function frame(ts) {
    if (!start) start = ts;
    var t = Math.max(0, ts - start - delay);
    var p = Math.min(1, t / DUR);
    var eased = 1 - Math.pow(1 - p, 3);
    el.textContent = Math.round(eased * target).toLocaleString('ja-JP');
    if (p < 1) requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
});

02導入企業ロゴバー

画面で起きること

ロゴの列は切れ目なく流れ続け、ボタンを押すとaria-pressedが切り替わって実際に止まり、もう一度押すとまた流れます。

導入企業ロゴバー
新しいタブで開く

02 · 導入企業ロゴバー — 計測 累積面積 5.088% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateX(-50%)margin-rightaria-pressed

コードの読み方

トラックは同じ六つのロゴをもう一度つなげただけなので、つなぎ目が見えません。

.lc__track {
  display: flex;
  width: max-content;
  animation: lc-scroll 9s linear infinite;
}
.lc__track li {
  flex: 0 0 auto;
  margin-right: 24px; // gap の代わりに margin-right
}
@keyframes lc-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

03機能比較表

どんな動きか

プラン名をクリックするとaria-pressedが切り替わり、その列のチェック・バツのアイコンが実際に拡大して強調されます。

機能比較表
新しいタブで開く

03 · 機能比較表 — 計測 累積面積 15.99% · 動いたフレーム 7/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

aria-pressedscaleclick

どこを変えるか

二つの列は1秒ごとに自動でも交互に強調されるので、押さなくても違いを目で追えます。

function select(plan) {
  document.querySelectorAll('.fc__plan').forEach(function (b) {
    var on = b.getAttribute('data-plan') === plan;
    b.classList.toggle('is-on', on);
    b.setAttribute('aria-pressed', String(on));
  });
  document.querySelectorAll('.fc__cell').forEach(function (c) {
    c.classList.toggle('is-on', c.getAttribute('data-plan') === plan);
  });
}

04チームメンバーグリッド

何が見えるか

メンバーカードをクリックするか Enter を押すとaria-expandedが切り替わり、一行紹介がgrid-template-rowsで実際に開きます。

チームメンバーグリッド
新しいタブで開く

04 · チームメンバーグリッド — 計測 累積面積 35.494% · 動いたフレーム 13/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

aria-expandedgrid-template-rowsclick

コードのどこを見るか

開いているカードのアバターは少し拡大して傾き、どのメンバーが開いているかが一目で分かります。

document.querySelectorAll('.tm__head').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var card = btn.closest('.tm__card');
    var open = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!open));
    card.classList.toggle('is-open', !open);
  });
});

05ニュースレター登録バンド

画面で起きること

メールアドレスを入力して登録すると正規表現で実際に形式を検査し、通過するとstroke-dashoffsetでチェックが実際に描かれ、ボタンの文字が「登録完了」に変わります。

ニュースレター登録バンド
新しいタブで開く

05 · ニュースレター登録バンド — 計測 累積面積 0.22% · 動いたフレーム 16/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

정규식stroke-dashoffsetsubmit

コードの読み方

形式が違うと入力欄が左右に短く揺れ、どこが間違っているかがすぐ分かります。

var RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
form.addEventListener('submit', function (e) {
  e.preventDefault();
  if (RE.test(input.value)) {
    form.classList.add('is-done');
    msg.textContent = input.value + ' 宛に確認メールを送りました。';
  } else {
    input.classList.add('is-shake');
    msg.textContent = 'メールの形式を確認してください。';
  }
});

06連携サービスグリッド

どんな動きか

接続ボタンを押すとaria-pressedが切り替わり、丸い点が実際に右へスライドして文字が「連携済み」に変わります。

連携サービスグリッド
新しいタブで開く

06 · 連携サービスグリッド — 計測 累積面積 0.339% · 動いたフレーム 16/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

aria-pressedtranslateXclick

どこを変えるか

点は自分専用のトラックの中だけで動くので、隣の文字と重なりません。

document.querySelectorAll('.ig__toggle').forEach(function (btn) {
  btn.addEventListener('click', function () {
    var on = btn.getAttribute('aria-pressed') === 'true';
    btn.setAttribute('aria-pressed', String(!on));
    btn.querySelector('.ig__state').textContent = on ? '連携' : '連携済み';
  });
});

07ロードマップタイムライン

何が見えるか

スポットライトは自動で次の四半期へ移り、項目をクリックするか Tab でフォーカスを移すと、実測した位置までtranslateYで実際に移動します。

ロードマップタイムライン
新しいタブで開く

07 · ロードマップタイムライン — 計測 累積面積 4.467% · 動いたフレーム 6/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

setIntervalgetBoundingClientRecttranslateY

コードのどこを見るか

完了した四半期と予定の四半期は別のアイコンで区別されます。

function moveTo(idx) {
  i = idx;
  var top = steps[idx].getBoundingClientRect().top - list.getBoundingClientRect().top;
  spot.style.transform = 'translateY(' + top + 'px)';
  steps.forEach(function (s, n) { s.classList.toggle('is-active', n === idx); });
}

08受賞・メディア掲載

画面で起きること

媒体名をクリックするとaria-expandedが切り替わり、その媒体の引用文が実際に開き、一度に一つだけ開きます。

受賞・メディア掲載
新しいタブで開く

08 · 受賞・メディア掲載 — 計測 累積面積 20.544% · 動いたフレーム 11/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

aria-expandedgrid-template-rowsclick

コードの読み方

媒体は自動でも一つずつ順番に開くので、何も押さなくても引用文をすべて見られます。

function openOnly(idx) {
  btns.forEach(function (b, n) {
    var on = n === idx;
    b.setAttribute('aria-expanded', String(on));
    b.closest('.ap__badge').classList.toggle('is-open', on);
  });
}

09分割型お問い合わせフォーム

どんな動きか

名前・メール・お問い合わせ内容をすべて入力して送信すると、紙飛行機のアイコンが実際に飛んで消え、ボタンの文字が「送信完了」に変わります。

分割型お問い合わせフォーム
新しいタブで開く

09 · 分割型お問い合わせフォーム — 計測 累積面積 1.571% · 動いたフレーム 7/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

정규식translate+opacitysubmit

どこを変えるか

空欄があるか、メールの形式が違うと、その欄だけが短く揺れます。

inputs.forEach(function (inp) {
  if (!inp.value.trim() || (inp.type === 'email' && !RE.test(inp.value))) {
    ok = false;
    inp.classList.add('is-shake');
  }
});
if (ok) {
  form.classList.add('is-sent');
  msg.textContent = 'お問い合わせを受け付けました。1営業日以内にご連絡します。';
}

どこで壊れるか — 落とし穴

九つを作る間に、実際に三回つまずきました。一つ目は導入企業ロゴバー(02)です。六つのロゴを二回つなげてtranslateX(-50%)で無限に流していたのですが、最初は項目の間隔をgapで指定していました。ロゴが十二個あると間隔は十一個しかなく、-50%の地点が間隔の半分だけ足りずに、一周するたびにロゴの列が少しだけ跳ねていました。gapをやめて項目ごとにmargin-rightを指定すると、つなぎ目が完全に消えました。

二つ目は幅320px・高さ200pxの画面確認で見つかりました。チームメンバーグリッド(04)とお問い合わせフォーム(09)は最初、狭い画面で縦に積む(flex-direction: column)ようにしていたのですが、むしろ縦に長くなって実測値が画面の高さを超えてしまいました。積むのをやめて文字サイズと余白だけを縮めると、両方とも画面に収まりました。

三つ目は連携サービスグリッド(06)の接続トグルです。丸い点を「連携」「連携済み」の文字と同じ行に並べ、transform: translateXだけで動かしていたところ、オンになった瞬間に点が文字の上に実際に重なっていました。点を専用の小さなトラックに入れ、トラックごと配置し直すと重なりが消えました。

アクセシビリティ

数字で継続を証明するやり方は習慣トラッカー UIで草グリッドとして作り直しました。九つ全部、zip をrghhpe4vで開いて受け取るコードそのままで、prefers-reduced-motion: reduceでは装飾アニメーションだけを止め、状態自体は残します。主要指標カウンター(01)はアイコンの揺れだけを止め、数字のカウントアップは情報なのでそのまま残し、導入企業ロゴバー(02)の流れも止まりますが一時停止ボタンはそのまま動きます。機能比較表(03)と連携サービスグリッド(06)の状態はaria-pressedで、チームメンバーグリッド(04)と受賞・メディア掲載(08)の開閉状態はaria-expandedで伝えます。ニュースレター登録バンド(05)とお問い合わせフォーム(09)の結果文言はrole="status"なので、スクリーンリーダーが成功・失敗をすぐ読み上げます。開閉アニメーションに使ったgrid-template-rows: 0fr → 1frの遷移はMDNのgrid-template-rowsのページにある標準のトラックサイズ構文をそのまま使い、prefers-reduced-motion自体はMDNの資料に沿っています。

イベント・プレスルームのセクションが気になる方はテンプレート一覧もあわせてご覧ください。このサイトを作っている人の情報はサイト紹介ページにあります。

FAQ

lp パーツ 名称でいう導入企業ロゴバー(02)は実際に自動で流れますか、それとも静止画ですか?

実際に流れます。translateX(-50%)の CSS アニメーションで無限にループし、ロゴの一覧をちょうど一回多くつなげているので、ループの地点につなぎ目が見えません。一時停止ボタンを押すとanimation-play-stateが実際にpausedに変わります。報道の実績を信頼の根拠として積む方法はプレスルームセクションに整理してあります。

React 版も CSS 版と同じ動きをしますか?

はい、同じです。開閉・連携・強調といった状態はすべてuseStateで管理し、変数三つ(duration・easing・color)は props として受け取り、そのまま CSS 変数に渡します。ロードマップ(07)の自動移動とお問い合わせフォーム(09)の自動フォーカスも、useEffectの中で同じロジックを使います。

お問い合わせフォーム(09)は実際にメールをどこかへ送りますか?

いいえ、このデモ自体は形式の検査と送信完了の表示までしか実際には動作せず、本物の送信サーバーはつながっていません。formのsubmitイベントを受け取って正規表現で検査する部分までがこのテンプレートの役割で、実際に使うときはその場所に本物の API 呼び出しを足すだけで、検査・表示のロジックはそのまま使い回せます。

解凍パスワードを入力してください

パスワードはこの記事の本文の中にあります。読み進めると出てきます。