DESIGN PARTS - コピペで使えるWebデザインパーツ集

ボタン

ソリッドボタン

申し込み・購入など主要導線に使う基本形

<style>
.dp-btn-01 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background: #2563EB;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(26, 26, 36, 0.06);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.dp-btn-01:hover {
  transform: translateY(2px);
  filter: brightness(0.94);
}
.dp-btn-01:active {
  transform: translateY(3px);
  filter: brightness(0.88);
}
.dp-btn-01:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
}
</style>
<button class="dp-btn-01" type="button">資料を無料でダウンロード</button>

ボタン

グラデーションボタン

強めの訴求をしたいCTAで存在感を出す

<style>
.dp-btn-02 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(26, 26, 36, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dp-btn-02:hover {
  box-shadow: 0 8px 24px rgba(26, 26, 36, 0.12);
  transform: translateY(-2px);
}
.dp-btn-02:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(26, 26, 36, 0.06);
}
.dp-btn-02:focus-visible {
  outline: 2px solid #7C3AED;
  outline-offset: 3px;
}
</style>
<button class="dp-btn-02" type="button">今すぐ無料で始める</button>

ボタン

アウトラインボタン

白背景に馴染みつつ押せると分かる控えめな導線

<style>
.dp-btn-03 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  background: #FFFFFF;
  color: #2563EB;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 2px solid #2563EB;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.dp-btn-03:hover {
  background: #2563EB;
  color: #FFFFFF;
}
.dp-btn-03:active {
  filter: brightness(0.92);
}
.dp-btn-03:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
}
</style>
<button class="dp-btn-03" type="button">詳しい資料を見る</button>

ボタン

矢印アイコンボタン

次のページへ進む動線をアイコンで視覚的に補強

<style>
.dp-btn-04 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: #2563EB;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(26, 26, 36, 0.06);
  transition: box-shadow 0.2s ease;
}
.dp-btn-04:hover {
  box-shadow: 0 8px 24px rgba(26, 26, 36, 0.12);
}
.dp-btn-04:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
}
.dp-btn-04__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.dp-btn-04:hover .dp-btn-04__icon {
  transform: translateX(4px);
}
</style>
<button class="dp-btn-04" type="button">
  サービス詳細を見る
  <svg class="dp-btn-04__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <line x1="5" y1="12" x2="19" y2="12"></line>
    <polyline points="12 5 19 12 12 19"></polyline>
  </svg>
</button>

ボタン

ピル型シャインボタン

特典やキャンペーンなど華やかさを添えたい訴求に

<style>
.dp-btn-05 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 14px 36px;
  background: #2563EB;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(26, 26, 36, 0.06);
}
.dp-btn-05::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.dp-btn-05:hover::before {
  left: 130%;
}
.dp-btn-05:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
}
</style>
<button class="dp-btn-05" type="button">キャンペーンに申し込む</button>

ボタン

ダークゴーストボタン

黒背景セクションで控えめに次の行動へ促す

<style>
.dp-btn-06 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: #1A1A24;
  border-radius: 16px;
}
.dp-btn-06__btn {
  padding: 14px 36px;
  background: transparent;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dp-btn-06__btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #FFFFFF;
}
.dp-btn-06__btn:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}
</style>
<div class="dp-btn-06">
  <button class="dp-btn-06__btn" type="button">導入事例を見る</button>
</div>

ボタン

保存キャンセルペア

フォームや設定画面の確定操作をワンセットで配置

<style>
.dp-btn-07 {
  display: flex;
  gap: 12px;
}
.dp-btn-07__primary {
  padding: 10px 24px;
  background: #2563EB;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.dp-btn-07__primary:hover {
  filter: brightness(0.94);
}
.dp-btn-07__primary:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}
.dp-btn-07__secondary {
  padding: 10px 24px;
  background: #F4F5F7;
  color: #1A1A24;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #E2E4E9;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.dp-btn-07__secondary:hover {
  background: #E2E4E9;
}
.dp-btn-07__secondary:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}
</style>
<div class="dp-btn-07">
  <button class="dp-btn-07__primary" type="button">保存する</button>
  <button class="dp-btn-07__secondary" type="button">キャンセル</button>
</div>

ボタン

特大CVボタン

LP最下部の最終コンバージョン獲得に使う主役ボタン

<style>
.dp-btn-08 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
.dp-btn-08__micro {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #F59E0B;
}
.dp-btn-08__btn {
  max-width: 100%;
  padding: 20px 56px;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(26, 26, 36, 0.12);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.dp-btn-08__btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}
.dp-btn-08__btn:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
}
.dp-btn-08__sub {
  font-size: 12px;
  color: #1A1A24;
  opacity: 0.6;
}
</style>
<div class="dp-btn-08">
  <span class="dp-btn-08__micro">今なら無料</span>
  <button class="dp-btn-08__btn" type="button">無料相談を予約する</button>
  <span class="dp-btn-08__sub">30秒で完了します</span>
</div>

見出し

左端下線見出し

左端に太いブルー下線を敷いた基本の見出し。セクション導入に

<style>
.dp-hd-01 {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 2px;
  max-width: 100%;
}
.dp-hd-01__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  color: #2563EB;
  text-transform: uppercase;
}
.dp-hd-01__title {
  font-size: 28px;
  font-weight: 800;
  color: #1A1A24;
  line-height: 1.4;
  letter-spacing: .02em;
}
.dp-hd-01__bar {
  width: 56px;
  height: 5px;
  border-radius: 999px;
  background: #2563EB;
  transition: width .2s ease, background .2s ease;
}
.dp-hd-01:hover .dp-hd-01__bar,
.dp-hd-01:focus-visible .dp-hd-01__bar {
  width: 88px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
}
.dp-hd-01:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 4px;
  border-radius: 6px;
}
</style>
<div class="dp-hd-01" tabindex="0">
  <span class="dp-hd-01__eyebrow">SERVICE</span>
  <h2 class="dp-hd-01__title">選ばれる理由</h2>
  <span class="dp-hd-01__bar"></span>
</div>

見出し

縦罫見出し

縦太罫線とセットの見出し＋リード文。本文導入に

<style>
.dp-hd-02 {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 2px 4px;
  max-width: 100%;
}
.dp-hd-02__bar {
  flex: 0 0 6px;
  width: 6px;
  border-radius: 999px;
  background: #2563EB;
  align-self: stretch;
  min-height: 64px;
  transition: background .2s ease;
}
.dp-hd-02__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.dp-hd-02__title {
  font-size: 24px;
  font-weight: 800;
  color: #1A1A24;
  line-height: 1.4;
}
.dp-hd-02__lead {
  font-size: 14px;
  color: rgba(26,26,36,.64);
  line-height: 1.7;
}
.dp-hd-02:hover .dp-hd-02__bar,
.dp-hd-02:focus-visible .dp-hd-02__bar {
  background: linear-gradient(135deg,#2563EB,#7C3AED);
}
.dp-hd-02:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 4px;
  border-radius: 6px;
}
</style>
<div class="dp-hd-02" tabindex="0">
  <span class="dp-hd-02__bar"></span>
  <div class="dp-hd-02__body">
    <h2 class="dp-hd-02__title">導入までの3つのステップ</h2>
    <p class="dp-hd-02__lead">お申し込みから最短1週間で運用を開始できます。</p>
  </div>
</div>

見出し

中央英字見出し

英字ラベル＋見出し＋グラデ罫線。セクション冒頭の顔に

<style>
.dp-hd-03 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 8px 4px;
  max-width: 100%;
}
.dp-hd-03__en {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(26,26,36,.10);
  line-height: 1;
}
.dp-hd-03__title {
  margin-top: -30px;
  font-size: 24px;
  font-weight: 800;
  color: #1A1A24;
}
.dp-hd-03__rule {
  width: 40px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  transition: width .2s ease;
}
.dp-hd-03:hover .dp-hd-03__rule,
.dp-hd-03:focus-visible .dp-hd-03__rule {
  width: 72px;
}
.dp-hd-03:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 6px;
  border-radius: 6px;
}
</style>
<div class="dp-hd-03" tabindex="0">
  <span class="dp-hd-03__en">ABOUT</span>
  <h2 class="dp-hd-03__title">私たちについて</h2>
  <span class="dp-hd-03__rule"></span>
</div>

見出し

ナンバリング見出し

大きな薄字ナンバーを背景に重ねる連番セクション見出し

<style>
.dp-hd-04 {
  position: relative;
  display: inline-block;
  padding: 8px 4px 4px;
  max-width: 100%;
}
.dp-hd-04__num {
  position: absolute;
  top: -18px;
  left: -6px;
  font-size: 64px;
  font-weight: 800;
  color: rgba(37,99,235,.10);
  line-height: 1;
  z-index: 0;
  transition: color .2s ease;
}
.dp-hd-04__title {
  position: relative;
  z-index: 1;
  font-size: 24px;
  font-weight: 800;
  color: #1A1A24;
  padding-top: 20px;
}
.dp-hd-04:hover .dp-hd-04__num,
.dp-hd-04:focus-visible .dp-hd-04__num {
  color: rgba(37,99,235,.22);
}
.dp-hd-04:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 4px;
  border-radius: 6px;
}
</style>
<div class="dp-hd-04" tabindex="0">
  <span class="dp-hd-04__num">01</span>
  <h2 class="dp-hd-04__title">ヒアリング</h2>
</div>

見出し

マーカー強調見出し

アンバーの半透明帯を文字下半分に敷くマーカー風の強調見出し

<style>
.dp-hd-05 {
  display: inline-block;
  padding: 4px 2px;
  max-width: 100%;
}
.dp-hd-05__title {
  font-size: 24px;
  font-weight: 800;
  color: #1A1A24;
  line-height: 1.6;
}
.dp-hd-05__mark {
  background-image: linear-gradient(rgba(245,158,11,0) 55%, rgba(245,158,11,.45) 55%);
  padding: 0 2px;
  transition: background-image .2s ease;
}
.dp-hd-05:hover .dp-hd-05__mark,
.dp-hd-05:focus-visible .dp-hd-05__mark {
  background-image: linear-gradient(rgba(245,158,11,0) 45%, rgba(245,158,11,.6) 45%);
}
.dp-hd-05:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 4px;
  border-radius: 6px;
}
</style>
<div class="dp-hd-05" tabindex="0">
  <h2 class="dp-hd-05__title">導入企業の<span class="dp-hd-05__mark">97%</span>が継続利用</h2>
</div>

見出し

隅かっこ見出し

左上・右下だけの枠線で見出しを囲む。特集ページの扉に

<style>
.dp-hd-06 {
  position: relative;
  display: inline-block;
  padding: 22px 32px;
  max-width: 100%;
}
.dp-hd-06::before,
.dp-hd-06::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: #2563EB;
  border-style: solid;
  transition: width .2s ease, height .2s ease;
}
.dp-hd-06::before {
  top: 0;
  left: 0;
  border-width: 3px 0 0 3px;
}
.dp-hd-06::after {
  bottom: 0;
  right: 0;
  border-width: 0 3px 3px 0;
}
.dp-hd-06__title {
  font-size: 22px;
  font-weight: 800;
  color: #1A1A24;
  letter-spacing: .04em;
}
.dp-hd-06:hover::before,
.dp-hd-06:hover::after,
.dp-hd-06:focus-visible::before,
.dp-hd-06:focus-visible::after {
  width: 34px;
  height: 34px;
}
.dp-hd-06:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 6px;
  border-radius: 6px;
}
</style>
<div class="dp-hd-06" tabindex="0">
  <h2 class="dp-hd-06__title">SPECIAL CONTENTS</h2>
</div>

見出し

墨帯バナー見出し

墨色の帯にグラデの上罫を乗せた白抜きバナー見出し

<style>
.dp-hd-07 {
  position: relative;
  background: #1A1A24;
  color: #FFFFFF;
  padding: 22px 28px;
  border-radius: 10px;
  overflow: hidden;
  max-width: 100%;
  transition: box-shadow .2s ease;
}
.dp-hd-07::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
}
.dp-hd-07__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: rgba(255,255,255,.6);
  margin-bottom: 8px;
}
.dp-hd-07__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
}
.dp-hd-07:hover,
.dp-hd-07:focus-visible {
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
}
.dp-hd-07:focus-visible {
  outline: 2px solid #7C3AED;
  outline-offset: 3px;
}
</style>
<div class="dp-hd-07" tabindex="0">
  <span class="dp-hd-07__eyebrow">NOTICE</span>
  <h2 class="dp-hd-07__title">年末年始の営業について</h2>
</div>

見出し

Q&A型見出し

円形の「Q」アイコンで始める質問型見出し。FAQ導入文に

<style>
.dp-hd-08 {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 4px;
  max-width: 100%;
}
.dp-hd-08__icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  transition: transform .2s ease;
}
.dp-hd-08__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
  min-width: 0;
}
.dp-hd-08__title {
  font-size: 19px;
  font-weight: 800;
  color: #1A1A24;
  line-height: 1.6;
}
.dp-hd-08__lead {
  font-size: 14px;
  color: rgba(26,26,36,.64);
  line-height: 1.7;
}
.dp-hd-08:hover .dp-hd-08__icon,
.dp-hd-08:focus-visible .dp-hd-08__icon {
  transform: scale(1.08);
}
.dp-hd-08:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 4px;
  border-radius: 6px;
}
</style>
<div class="dp-hd-08" tabindex="0">
  <span class="dp-hd-08__icon" aria-hidden="true">Q</span>
  <div class="dp-hd-08__body">
    <h3 class="dp-hd-08__title">契約期間の縛りはありますか？</h3>
    <p class="dp-hd-08__lead">最低契約期間は設けておらず、月単位でいつでも解約いただけます。</p>
  </div>
</div>

カード

サービス紹介カード

主要サービス3つを一目で伝えるトップページ向けカード

<style>
.dp-card-01 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 100%;
}
@media (max-width: 700px) {
  .dp-card-01 {
    grid-template-columns: 1fr;
  }
}
.dp-card-01__item {
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 1px 2px rgba(26,26,36,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dp-card-01__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
}
.dp-card-01__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  margin-bottom: 20px;
}
.dp-card-01__icon svg {
  width: 24px;
  height: 24px;
}
.dp-card-01__title {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A24;
  margin: 0 0 8px;
}
.dp-card-01__desc {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(26,26,36,.68);
  margin: 0 0 20px;
}
.dp-card-01__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #2563EB;
  text-decoration: none;
  transition: gap .2s ease;
}
.dp-card-01__link:hover {
  gap: 10px;
}
.dp-card-01__link svg {
  width: 16px;
  height: 16px;
}
</style>
<div class="dp-card-01">
  <div class="dp-card-01__item">
    <div class="dp-card-01__icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-6 4 3 5-7"/></svg>
    </div>
    <h3 class="dp-card-01__title">戦略設計</h3>
    <p class="dp-card-01__desc">現状分析から逆算し、成果につながる打ち手だけを絞り込んでご提案します。</p>
    <a href="#" class="dp-card-01__link">詳しく見る<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a>
  </div>
  <div class="dp-card-01__item">
    <div class="dp-card-01__icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
    </div>
    <h3 class="dp-card-01__title">セキュリティ運用</h3>
    <p class="dp-card-01__desc">導入後の監視・改善まで一貫して伴走し、安心して使える体制を作ります。</p>
    <a href="#" class="dp-card-01__link">詳しく見る<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a>
  </div>
  <div class="dp-card-01__item">
    <div class="dp-card-01__icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 21v-7"/><path d="M4 10V3"/><path d="M12 21v-9"/><path d="M12 8V3"/><path d="M20 21v-5"/><path d="M20 12V3"/><path d="M1 14h6"/><path d="M9 8h6"/><path d="M17 16h6"/></svg>
    </div>
    <h3 class="dp-card-01__title">運用サポート</h3>
    <p class="dp-card-01__desc">導入企業ごとの課題に合わせて設定を最適化し、問い合わせにも迅速に対応します。</p>
    <a href="#" class="dp-card-01__link">詳しく見る<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a>
  </div>
</div>

カード

記事カード

ブログ一覧やお知らせ一覧の先頭に並べる記事サムネカード

<style>
.dp-card-02 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 100%;
}
@media (max-width: 560px) {
  .dp-card-02 {
    grid-template-columns: 1fr;
  }
}
.dp-card-02__item {
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26,26,36,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.dp-card-02__item:hover {
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
  transform: translateY(-4px);
}
.dp-card-02__thumb {
  height: 160px;
}
.dp-card-02__thumb--a {
  background: linear-gradient(135deg,#2563EB,#7C3AED);
}
.dp-card-02__thumb--b {
  background: linear-gradient(135deg,#F59E0B,#2563EB);
}
.dp-card-02__body {
  padding: 20px;
}
.dp-card-02__chip {
  display: inline-block;
  background: #F4F5F7;
  color: #2563EB;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.dp-card-02__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: #1A1A24;
  margin: 0 0 12px;
}
.dp-card-02__date {
  font-size: 13px;
  color: rgba(26,26,36,.56);
}
</style>
<div class="dp-card-02">
  <article class="dp-card-02__item">
    <div class="dp-card-02__thumb dp-card-02__thumb--a"></div>
    <div class="dp-card-02__body">
      <span class="dp-card-02__chip">導入事例</span>
      <h3 class="dp-card-02__title">中小製造業がAI検品を導入し不良流出を半減させた話</h3>
      <time class="dp-card-02__date">2026.06.12</time>
    </div>
  </article>
  <article class="dp-card-02__item">
    <div class="dp-card-02__thumb dp-card-02__thumb--b"></div>
    <div class="dp-card-02__body">
      <span class="dp-card-02__chip">お知らせ</span>
      <h3 class="dp-card-02__title">株式会社トリム、新プランの提供を開始しました</h3>
      <time class="dp-card-02__date">2026.05.28</time>
    </div>
  </article>
</div>

カード

プロフィールカード

代表者や講師の顔が見える紹介欄・チームページに

<style>
.dp-card-03 {
  max-width: 320px;
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(26,26,36,.06);
}
.dp-card-03__avatar {
  width: 88px;
  height: 88px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dp-card-03__name {
  font-size: 18px;
  font-weight: 700;
  color: #1A1A24;
  margin: 0 0 4px;
}
.dp-card-03__role {
  font-size: 13px;
  color: #2563EB;
  font-weight: 600;
  margin: 0 0 16px;
}
.dp-card-03__bio {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(26,26,36,.68);
  margin: 0 0 20px;
}
.dp-card-03__sns {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.dp-card-03__sns-link {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #E2E4E9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A1A24;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.dp-card-03__sns-link:hover {
  background: #2563EB;
  border-color: #2563EB;
  color: #FFFFFF;
}
.dp-card-03__sns-link svg {
  width: 16px;
  height: 16px;
}
</style>
<div class="dp-card-03">
  <div class="dp-card-03__avatar">HN</div>
  <p class="dp-card-03__name">本間 悠斗</p>
  <p class="dp-card-03__role">代表取締役 / AI導入コンサルタント</p>
  <p class="dp-card-03__bio">中小企業のAI活用を、現場に定着するところまで伴走して支援しています。</p>
  <div class="dp-card-03__sns">
    <a href="#" class="dp-card-03__sns-link" aria-label="X"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg></a>
    <a href="#" class="dp-card-03__sns-link" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg></a>
    <a href="#" class="dp-card-03__sns-link" aria-label="LinkedIn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></a>
    <a href="#" class="dp-card-03__sns-link" aria-label="Mail"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 6l-10 7L2 6"/></svg></a>
  </div>
</div>

カード

横長メディアカード

お知らせ一覧やニュース一覧を横並びレイアウトで見せる

<style>
.dp-card-04 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
}
.dp-card-04__item {
  display: flex;
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26,26,36,.06);
  transition: box-shadow .2s ease;
}
.dp-card-04__item:hover {
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
}
.dp-card-04__media {
  flex: 0 0 33%;
  min-height: 120px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
}
.dp-card-04__item--b .dp-card-04__media {
  background: linear-gradient(135deg,#F59E0B,#2563EB);
}
.dp-card-04__body {
  flex: 1;
  padding: 20px;
  min-width: 0;
}
.dp-card-04__date {
  font-size: 12px;
  color: rgba(26,26,36,.56);
  margin: 0 0 6px;
}
.dp-card-04__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #1A1A24;
  margin: 0 0 6px;
}
.dp-card-04__excerpt {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(26,26,36,.64);
  margin: 0;
}
@media (max-width: 480px) {
  .dp-card-04__item {
    flex-direction: column;
  }
  .dp-card-04__media {
    flex: 0 0 auto;
    height: 120px;
  }
}
</style>
<div class="dp-card-04">
  <article class="dp-card-04__item">
    <div class="dp-card-04__media"></div>
    <div class="dp-card-04__body">
      <p class="dp-card-04__date">2026.06.18 お知らせ</p>
      <h3 class="dp-card-04__title">夏季休業のご案内</h3>
      <p class="dp-card-04__excerpt">8月13日〜8月16日は休業とさせていただきます。お問い合わせは休業明けの順次対応となります。</p>
    </div>
  </article>
  <article class="dp-card-04__item dp-card-04__item--b">
    <div class="dp-card-04__media"></div>
    <div class="dp-card-04__body">
      <p class="dp-card-04__date">2026.06.02 メディア掲載</p>
      <h3 class="dp-card-04__title">日経クロステックに導入事例が掲載されました</h3>
      <p class="dp-card-04__excerpt">製造業のAI検品導入について取材を受け、記事として公開されています。</p>
    </div>
  </article>
</div>

カード

プランカード

料金プランを比較させる縦積みの価格表カード

<style>
.dp-card-05 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 100%;
}
@media (max-width: 760px) {
  .dp-card-05 {
    grid-template-columns: 1fr;
  }
}
.dp-card-05__item {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  padding: 32px 24px 28px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26,26,36,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.dp-card-05__item:hover {
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
  transform: translateY(-4px);
}
.dp-card-05__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
}
.dp-card-05__name {
  font-size: 14px;
  font-weight: 700;
  color: #2563EB;
  margin: 0 0 12px;
}
.dp-card-05__price {
  font-size: 32px;
  font-weight: 800;
  color: #1A1A24;
  margin: 0 0 4px;
}
.dp-card-05__price span {
  font-size: 14px;
  font-weight: 600;
  color: rgba(26,26,36,.56);
}
.dp-card-05__unit {
  font-size: 13px;
  color: rgba(26,26,36,.56);
  margin: 0 0 24px;
}
.dp-card-05__list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dp-card-05__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: rgba(26,26,36,.76);
}
.dp-card-05__list svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #2563EB;
  margin-top: 1px;
}
.dp-card-05__btn {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 999px;
  background: #1A1A24;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease;
}
.dp-card-05__btn:hover {
  background: #2563EB;
}
</style>
<div class="dp-card-05">
  <div class="dp-card-05__item">
    <p class="dp-card-05__name">ライト</p>
    <p class="dp-card-05__price">¥29,800<span>/月</span></p>
    <p class="dp-card-05__unit">小規模チーム向け</p>
    <ul class="dp-card-05__list">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>チャットAI導入サポート</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>月1回の運用相談</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>メールサポート</li>
    </ul>
    <a href="#" class="dp-card-05__btn">このプランで始める</a>
  </div>
  <div class="dp-card-05__item">
    <p class="dp-card-05__name">スタンダード</p>
    <p class="dp-card-05__price">¥59,800<span>/月</span></p>
    <p class="dp-card-05__unit">最も選ばれているプラン</p>
    <ul class="dp-card-05__list">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>業務フロー3件まで自動化</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>週1回の運用相談</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>チャット・電話サポート</li>
    </ul>
    <a href="#" class="dp-card-05__btn">このプランで始める</a>
  </div>
  <div class="dp-card-05__item">
    <p class="dp-card-05__name">プレミアム</p>
    <p class="dp-card-05__price">¥128,000<span>/月</span></p>
    <p class="dp-card-05__unit">全社導入・専任担当付き</p>
    <ul class="dp-card-05__list">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>業務フロー無制限で自動化</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>専任担当による週次伴走</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>24時間の緊急サポート</li>
    </ul>
    <a href="#" class="dp-card-05__btn">このプランで始める</a>
  </div>
</div>

カード

グラスモーフィズムカード

暗い背景の上でお客様の声や実績を引き立てるカード

<style>
.dp-card-06 {
  background: linear-gradient(160deg,#1A1A24,#2563EB);
  border-radius: 16px;
  padding: 56px 24px;
  display: flex;
  justify-content: center;
}
.dp-card-06__panel {
  max-width: 420px;
  width: 100%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  padding: 32px 28px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
}
.dp-card-06__quote {
  font-size: 15px;
  line-height: 1.9;
  color: #FFFFFF;
  margin: 0 0 24px;
}
.dp-card-06__person {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dp-card-06__avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dp-card-06__name {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}
.dp-card-06__role {
  font-size: 12px;
  color: rgba(255,255,255,.64);
  margin: 2px 0 0;
}
</style>
<div class="dp-card-06">
  <div class="dp-card-06__panel">
    <p class="dp-card-06__quote">「導入前は半信半疑でしたが、3週間で現場が自発的に使い始めました。数字だけでなく、雰囲気が変わったのが一番の収穫です。」</p>
    <div class="dp-card-06__person">
      <div class="dp-card-06__avatar">KS</div>
      <div>
        <p class="dp-card-06__name">工藤 沙織</p>
        <p class="dp-card-06__role">株式会社丸源製作所 / 製造部長</p>
      </div>
    </div>
  </div>
</div>

ヒーロー

中央揃えヒーロー

サービスLPの1画面目。バッジとCTA2つで訴求する定番型

<style>
.dp-hero-01 {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  padding: 72px 24px;
  text-align: center;
}
.dp-hero-01__decor {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(37,99,235,.16), rgba(37,99,235,0) 70%);
  pointer-events: none;
}
.dp-hero-01__inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}
.dp-hero-01__badge {
  display: inline-block;
  background: #F4F5F7;
  color: #2563EB;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.dp-hero-01__title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.4;
  color: #1A1A24;
  margin: 0 0 20px;
}
.dp-hero-01__title-accent {
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dp-hero-01__lead {
  font-size: 16px;
  line-height: 1.9;
  color: rgba(26,26,36,.68);
  margin: 0 0 32px;
}
.dp-hero-01__cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.dp-hero-01__btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.dp-hero-01__btn--primary {
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  color: #FFFFFF;
}
.dp-hero-01__btn--primary:hover {
  opacity: .88;
}
.dp-hero-01__btn--ghost {
  background: transparent;
  color: #1A1A24;
  border: 1.5px solid #E2E4E9;
}
.dp-hero-01__btn--ghost:hover {
  background: #F4F5F7;
}
</style>
<section class="dp-hero-01">
  <div class="dp-hero-01__decor" aria-hidden="true"></div>
  <div class="dp-hero-01__inner">
    <span class="dp-hero-01__badge">AI導入支援 / 中小企業向け</span>
    <h1 class="dp-hero-01__title">現場が動く<span class="dp-hero-01__title-accent">AI活用</span>を、最短距離で。</h1>
    <p class="dp-hero-01__lead">ツール選定から定着まで、御社専属チームが伴走します。まずは無料相談からお気軽にどうぞ。</p>
    <div class="dp-hero-01__cta">
      <a href="#" class="dp-hero-01__btn dp-hero-01__btn--primary">無料相談を予約する</a>
      <a href="#" class="dp-hero-01__btn dp-hero-01__btn--ghost">導入事例を見る</a>
    </div>
  </div>
</section>

ヒーロー

分割ヒーロー

左にコピー右に抽象図形を置く2カラム構成のヒーロー

<style>
.dp-hero-02 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 56px 24px;
  background: #FFFFFF;
}
@media (max-width: 768px) {
  .dp-hero-02 {
    grid-template-columns: 1fr;
    padding: 40px 20px;
  }
  .dp-hero-02__visual {
    order: -1;
    max-width: 280px;
    margin: 0 auto;
  }
}
.dp-hero-02__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #2563EB;
  margin: 0 0 12px;
}
.dp-hero-02__title {
  font-size: clamp(26px, 4.5vw, 36px);
  font-weight: 800;
  line-height: 1.45;
  color: #1A1A24;
  margin: 0 0 16px;
}
.dp-hero-02__lead {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(26,26,36,.68);
  margin: 0 0 28px;
}
.dp-hero-02__btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  background: #1A1A24;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease;
}
.dp-hero-02__btn:hover {
  background: #2563EB;
}
.dp-hero-02__visual {
  position: relative;
  width: 100%;
  padding-top: 100%;
}
.dp-hero-02__shape {
  position: absolute;
  border-radius: 16px;
}
.dp-hero-02__shape--1 {
  top: 8%;
  left: 6%;
  width: 62%;
  height: 62%;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  opacity: .92;
  transform: rotate(-6deg);
}
.dp-hero-02__shape--2 {
  bottom: 6%;
  right: 4%;
  width: 48%;
  height: 48%;
  background: #F4F5F7;
  border: 1px solid #E2E4E9;
  transform: rotate(8deg);
}
.dp-hero-02__shape--3 {
  bottom: 14%;
  left: 20%;
  width: 26%;
  height: 26%;
  background: #F59E0B;
  opacity: .9;
  border-radius: 999px;
}
</style>
<section class="dp-hero-02">
  <div class="dp-hero-02__text">
    <span class="dp-hero-02__eyebrow">CORPORATE SITE</span>
    <h1 class="dp-hero-02__title">伝えたいことを、<br>迷わせず届けるサイトへ。</h1>
    <p class="dp-hero-02__lead">情報設計とデザインを一体で見直し、成果につながるコーポレートサイトを構築します。</p>
    <a href="#" class="dp-hero-02__btn">相談してみる</a>
  </div>
  <div class="dp-hero-02__visual" aria-hidden="true">
    <div class="dp-hero-02__shape dp-hero-02__shape--1"></div>
    <div class="dp-hero-02__shape dp-hero-02__shape--2"></div>
    <div class="dp-hero-02__shape dp-hero-02__shape--3"></div>
  </div>
</section>

ヒーロー

ダークヒーロー

夜系・上質なLPの1画面目に使う墨色フルベタヒーロー

<style>
.dp-hero-03 {
  background: #1A1A24;
  padding: 96px 24px;
}
.dp-hero-03__inner {
  max-width: 620px;
  margin: 0 auto;
}
.dp-hero-03__line {
  display: block;
  width: 48px;
  height: 2px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  margin-bottom: 16px;
}
.dp-hero-03__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 20px;
}
.dp-hero-03__title {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 800;
  line-height: 1.4;
  color: #FFFFFF;
  margin: 0 0 20px;
}
.dp-hero-03__lead {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(255,255,255,.68);
  margin: 0 0 36px;
}
.dp-hero-03__btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.56);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dp-hero-03__btn:hover {
  background: #FFFFFF;
  color: #1A1A24;
  border-color: #FFFFFF;
}
</style>
<section class="dp-hero-03">
  <div class="dp-hero-03__inner">
    <span class="dp-hero-03__line" aria-hidden="true"></span>
    <span class="dp-hero-03__label">Night Learning Program</span>
    <h1 class="dp-hero-03__title">夜だけの、<br>特別な学び場を。</h1>
    <p class="dp-hero-03__lead">仕事終わりの2時間で、明日から使えるAIスキルを。少人数制のオンライン講座です。</p>
    <a href="#" class="dp-hero-03__btn">開催スケジュールを見る</a>
  </div>
</section>

ヒーロー

コピー特化ヒーロー

見出し下に実績数字を敷いて説得力を持たせる縦積み型

<style>
.dp-hero-04 {
  background: #FFFFFF;
  padding: 64px 24px;
  text-align: center;
}
.dp-hero-04__inner {
  max-width: 620px;
  margin: 0 auto;
}
.dp-hero-04__badge {
  display: inline-block;
  background: #F4F5F7;
  color: #1A1A24;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.dp-hero-04__title {
  font-size: clamp(26px, 4.5vw, 36px);
  font-weight: 800;
  line-height: 1.5;
  color: #1A1A24;
  margin: 0 0 16px;
}
.dp-hero-04__lead {
  font-size: 15px;
  line-height: 1.9;
  color: rgba(26,26,36,.68);
  margin: 0 0 32px;
}
.dp-hero-04__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #F4F5F7;
  border-radius: 16px;
  padding: 24px 12px;
  margin: 0 0 32px;
}
.dp-hero-04__stat {
  border-left: 1px solid #E2E4E9;
  padding: 0 8px;
}
.dp-hero-04__stat:first-child {
  border-left: none;
}
.dp-hero-04__stat-num {
  font-size: 28px;
  font-weight: 800;
  color: #1A1A24;
  margin: 0;
}
.dp-hero-04__stat-num span {
  font-size: 14px;
  font-weight: 600;
  color: #2563EB;
  margin-left: 2px;
}
.dp-hero-04__stat-label {
  font-size: 12px;
  color: rgba(26,26,36,.6);
  margin: 4px 0 0;
}
.dp-hero-04__btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s ease;
}
.dp-hero-04__btn:hover {
  opacity: .88;
}
@media (max-width: 420px) {
  .dp-hero-04__stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .dp-hero-04__stat {
    border-left: none;
    border-top: 1px solid #E2E4E9;
    padding: 16px 0 0;
  }
  .dp-hero-04__stat:first-child {
    border-top: none;
    padding-top: 0;
  }
}
</style>
<section class="dp-hero-04">
  <div class="dp-hero-04__inner">
    <span class="dp-hero-04__badge">導入企業250社突破</span>
    <h1 class="dp-hero-04__title">「使われないAI」を、<br>「手放せないAI」に。</h1>
    <p class="dp-hero-04__lead">導入して終わりにしない。定着率にこだわるAI活用支援サービスです。</p>
    <div class="dp-hero-04__stats">
      <div class="dp-hero-04__stat">
        <p class="dp-hero-04__stat-num">98<span>%</span></p>
        <p class="dp-hero-04__stat-label">継続利用率</p>
      </div>
      <div class="dp-hero-04__stat">
        <p class="dp-hero-04__stat-num">250<span>社+</span></p>
        <p class="dp-hero-04__stat-label">導入実績</p>
      </div>
      <div class="dp-hero-04__stat">
        <p class="dp-hero-04__stat-num">3<span>週間</span></p>
        <p class="dp-hero-04__stat-label">平均定着期間</p>
      </div>
    </div>
    <a href="#" class="dp-hero-04__btn">資料をダウンロードする</a>
  </div>
</section>

ナビゲーション

ベーシックナビ

ロゴ・メニュー4つ・CTAを横並びにした定番ヘッダー

<style>
.dp-nav-01 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 24px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E4E9;
}
.dp-nav-01__logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #1A1A24;
  text-decoration: none;
}
.dp-nav-01__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.dp-nav-01__link {
  font-size: 14px;
  font-weight: 600;
  color: rgba(26,26,36,.68);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.dp-nav-01__link:hover {
  color: #1A1A24;
}
.dp-nav-01__link--current {
  color: #2563EB;
  border-bottom-color: #2563EB;
}
.dp-nav-01__cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: #1A1A24;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease;
}
.dp-nav-01__cta:hover {
  background: #2563EB;
}
@media (max-width: 600px) {
  .dp-nav-01 {
    justify-content: center;
    text-align: center;
  }
  .dp-nav-01__menu {
    width: 100%;
    justify-content: center;
    gap: 16px;
  }
  .dp-nav-01__cta {
    width: 100%;
    text-align: center;
  }
}
</style>
<header class="dp-nav-01">
  <a href="#" class="dp-nav-01__logo">TRIM</a>
  <nav class="dp-nav-01__menu">
    <a href="#" class="dp-nav-01__link dp-nav-01__link--current">サービス</a>
    <a href="#" class="dp-nav-01__link">導入事例</a>
    <a href="#" class="dp-nav-01__link">料金</a>
    <a href="#" class="dp-nav-01__link">会社概要</a>
  </nav>
  <a href="#" class="dp-nav-01__cta">お問い合わせ</a>
</header>

ナビゲーション

中央ロゴナビ

老舗・ブランドサイト向けの左右対称で上品なヘッダー

<style>
.dp-nav-02 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding: 24px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E4E9;
}
.dp-nav-02__logo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #1A1A24;
  text-decoration: none;
  order: 2;
}
.dp-nav-02__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
.dp-nav-02__menu--left {
  order: 1;
  justify-content: flex-end;
}
.dp-nav-02__menu--right {
  order: 3;
  justify-content: flex-start;
}
.dp-nav-02__link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  color: rgba(26,26,36,.68);
  text-decoration: none;
  transition: color .2s ease;
}
.dp-nav-02__link:hover {
  color: #2563EB;
}
@media (max-width: 640px) {
  .dp-nav-02__menu--left,
  .dp-nav-02__menu--right {
    justify-content: center;
    gap: 20px;
  }
}
</style>
<header class="dp-nav-02">
  <nav class="dp-nav-02__menu dp-nav-02__menu--left">
    <a href="#" class="dp-nav-02__link">私たちについて</a>
    <a href="#" class="dp-nav-02__link">職人紹介</a>
  </nav>
  <a href="#" class="dp-nav-02__logo">丸源硝子店</a>
  <nav class="dp-nav-02__menu dp-nav-02__menu--right">
    <a href="#" class="dp-nav-02__link">作品ギャラリー</a>
    <a href="#" class="dp-nav-02__link">ご予約</a>
  </nav>
</header>

ナビゲーション

ダークグラスナビ

半透明×ぼかしで魅せる固定ヘッダー風のダークナビ

<style>
.dp-nav-03 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(26,26,36,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
}
.dp-nav-03__logo {
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  text-decoration: none;
}
.dp-nav-03__logo span {
  color: #F59E0B;
}
.dp-nav-03__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.dp-nav-03__link {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color .2s ease;
}
.dp-nav-03__link:hover {
  color: #FFFFFF;
}
.dp-nav-03__cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s ease;
}
.dp-nav-03__cta:hover {
  opacity: .85;
}
@media (max-width: 560px) {
  .dp-nav-03 {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .dp-nav-03__menu {
    justify-content: center;
  }
  .dp-nav-03__cta {
    text-align: center;
  }
}
</style>
<header class="dp-nav-03">
  <a href="#" class="dp-nav-03__logo">NOX<span>.</span></a>
  <nav class="dp-nav-03__menu">
    <a href="#" class="dp-nav-03__link">プロダクト</a>
    <a href="#" class="dp-nav-03__link">料金</a>
    <a href="#" class="dp-nav-03__link">ブログ</a>
  </nav>
  <a href="#" class="dp-nav-03__cta">無料で始める</a>
</header>

フッター

4カラムフッター

ロゴ・サイトマップ・SNSを備えた情報量の多いフッター

<style>
.dp-ft-01 {
  background: #1A1A24;
  padding: 56px 24px 24px;
}
.dp-ft-01__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 40px;
}
@media (max-width: 640px) {
  .dp-ft-01__top {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.dp-ft-01__logo {
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 12px;
}
.dp-ft-01__desc {
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255,255,255,.6);
  margin: 0 0 20px;
  max-width: 320px;
}
.dp-ft-01__sns {
  display: flex;
  gap: 10px;
}
.dp-ft-01__sns-link {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.8);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.dp-ft-01__sns-link:hover {
  background: #2563EB;
  border-color: #2563EB;
  color: #FFFFFF;
}
.dp-ft-01__sns-link svg {
  width: 15px;
  height: 15px;
}
.dp-ft-01__heading {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 16px;
}
.dp-ft-01__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dp-ft-01__link {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .2s ease;
}
.dp-ft-01__link:hover {
  color: #FFFFFF;
}
.dp-ft-01__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  max-width: 960px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.dp-ft-01__copyright {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin: 0;
}
.dp-ft-01__legal {
  display: flex;
  gap: 20px;
}
.dp-ft-01__legal-link {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  text-decoration: none;
}
.dp-ft-01__legal-link:hover {
  color: #FFFFFF;
}
</style>
<footer class="dp-ft-01">
  <div class="dp-ft-01__top">
    <div class="dp-ft-01__col">
      <p class="dp-ft-01__logo">株式会社トリム</p>
      <p class="dp-ft-01__desc">中小企業のAI活用を、導入から定着まで一貫して伴走支援します。</p>
      <div class="dp-ft-01__sns">
        <a href="#" class="dp-ft-01__sns-link" aria-label="X"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg></a>
        <a href="#" class="dp-ft-01__sns-link" aria-label="YouTube"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg></a>
        <a href="#" class="dp-ft-01__sns-link" aria-label="Mail"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 6l-10 7L2 6"/></svg></a>
      </div>
    </div>
    <div class="dp-ft-01__col">
      <p class="dp-ft-01__heading">サービス</p>
      <a href="#" class="dp-ft-01__link">AI導入支援</a>
      <a href="#" class="dp-ft-01__link">業務自動化</a>
      <a href="#" class="dp-ft-01__link">研修・セミナー</a>
    </div>
    <div class="dp-ft-01__col">
      <p class="dp-ft-01__heading">会社情報</p>
      <a href="#" class="dp-ft-01__link">会社概要</a>
      <a href="#" class="dp-ft-01__link">採用情報</a>
      <a href="#" class="dp-ft-01__link">お問い合わせ</a>
    </div>
  </div>
  <div class="dp-ft-01__bottom">
    <p class="dp-ft-01__copyright">© 2026 Trim Inc. All rights reserved.</p>
    <div class="dp-ft-01__legal">
      <a href="#" class="dp-ft-01__legal-link">プライバシーポリシー</a>
      <a href="#" class="dp-ft-01__legal-link">利用規約</a>
    </div>
  </div>
</footer>

フッター

シンプルフッター

情報量を絞った1行構成。小規模サイトの締めに最適

<style>
.dp-ft-02 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px 24px;
  background: #FFFFFF;
  border-top: 1px solid #E2E4E9;
}
.dp-ft-02__logo {
  font-size: 15px;
  font-weight: 800;
  color: #1A1A24;
  text-decoration: none;
}
.dp-ft-02__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.dp-ft-02__link {
  font-size: 13px;
  color: rgba(26,26,36,.64);
  text-decoration: none;
  transition: color .2s ease;
}
.dp-ft-02__link:hover {
  color: #2563EB;
}
.dp-ft-02__copyright {
  font-size: 12px;
  color: rgba(26,26,36,.48);
  margin: 0;
}
@media (max-width: 560px) {
  .dp-ft-02 {
    flex-direction: column;
    text-align: center;
  }
  .dp-ft-02__menu {
    justify-content: center;
  }
}
</style>
<footer class="dp-ft-02">
  <a href="#" class="dp-ft-02__logo">TRIM</a>
  <nav class="dp-ft-02__menu">
    <a href="#" class="dp-ft-02__link">サービス</a>
    <a href="#" class="dp-ft-02__link">導入事例</a>
    <a href="#" class="dp-ft-02__link">お問い合わせ</a>
  </nav>
  <p class="dp-ft-02__copyright">© 2026 Trim Inc.</p>
</footer>

フッター

CTA付きフッター

相談導線のグラデ帯とダークフッターを組みにした2段型

<style>
.dp-ft-03__cta {
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  padding: 56px 24px;
  text-align: center;
}
.dp-ft-03__cta-title {
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 12px;
}
.dp-ft-03__cta-lead {
  font-size: 14px;
  color: rgba(255,255,255,.88);
  margin: 0 0 28px;
}
.dp-ft-03__cta-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  background: #FFFFFF;
  color: #2563EB;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
  transition: transform .2s ease;
}
.dp-ft-03__cta-btn:hover {
  transform: translateY(-2px);
}
.dp-ft-03__footer {
  background: #1A1A24;
  padding: 28px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.dp-ft-03__logo {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
}
.dp-ft-03__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.dp-ft-03__link {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  transition: color .2s ease;
}
.dp-ft-03__link:hover {
  color: #FFFFFF;
}
.dp-ft-03__copyright {
  font-size: 12px;
  color: rgba(255,255,255,.48);
  margin: 0;
}
@media (max-width: 480px) {
  .dp-ft-03__footer {
    flex-direction: column;
    text-align: center;
  }
  .dp-ft-03__menu {
    justify-content: center;
  }
}
</style>
<div class="dp-ft-03">
  <section class="dp-ft-03__cta">
    <h2 class="dp-ft-03__cta-title">まずは無料で相談する</h2>
    <p class="dp-ft-03__cta-lead">貴社の課題をヒアリングし、最適な進め方をご提案します。</p>
    <a href="#" class="dp-ft-03__cta-btn">無料相談を申し込む</a>
  </section>
  <footer class="dp-ft-03__footer">
    <p class="dp-ft-03__logo">株式会社トリム</p>
    <nav class="dp-ft-03__menu">
      <a href="#" class="dp-ft-03__link">サービス</a>
      <a href="#" class="dp-ft-03__link">会社概要</a>
      <a href="#" class="dp-ft-03__link">お問い合わせ</a>
    </nav>
    <p class="dp-ft-03__copyright">© 2026 Trim Inc. All rights reserved.</p>
  </footer>
</div>

フォーム

ラベル付き入力欄

会員登録やお問い合わせフォームの基本パーツに

<style>
.dp-form-01 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  width: 100%;
}
.dp-form-01__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-form-01__required {
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  background: #2563EB;
  padding: 2px 8px;
  border-radius: 999px;
}
.dp-form-01__input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  color: #1A1A24;
  background: #FFFFFF;
  border: 1.5px solid #E2E4E9;
  border-radius: 10px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dp-form-01__input::placeholder {
  color: rgba(26,26,36,.35);
}
.dp-form-01__input:hover {
  border-color: rgba(26,26,36,.3);
}
.dp-form-01__input:focus-visible {
  border-color: #2563EB;
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
.dp-form-01__hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(26,26,36,.5);
}
</style>
<div class="dp-form-01">
  <label class="dp-form-01__label" for="dp-form-01-name">
    お名前
    <span class="dp-form-01__required">必須</span>
  </label>
  <input class="dp-form-01__input" type="text" id="dp-form-01-name" placeholder="山田 太郎">
  <p class="dp-form-01__hint">姓名の間にスペースを入れてご入力ください</p>
</div>

フォーム

フローティングラベル入力

省スペースで洗練された印象を与えたい入力欄に

<style>
.dp-form-02 {
  max-width: 360px;
  width: 100%;
}
.dp-form-02__field {
  position: relative;
}
.dp-form-02__input {
  box-sizing: border-box;
  width: 100%;
  padding: 22px 14px 8px;
  font-size: 15px;
  color: #1A1A24;
  background: #FFFFFF;
  border: 1.5px solid #E2E4E9;
  border-radius: 10px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dp-form-02__input:hover {
  border-color: rgba(26,26,36,.3);
}
.dp-form-02__input:focus-visible {
  border-color: #2563EB;
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
.dp-form-02__label {
  position: absolute;
  left: 14px;
  top: 18px;
  font-size: 15px;
  color: rgba(26,26,36,.45);
  pointer-events: none;
  transition: top .18s ease, font-size .18s ease, color .18s ease;
}
.dp-form-02__input:focus + .dp-form-02__label,
.dp-form-02__input:not(:placeholder-shown) + .dp-form-02__label {
  top: 7px;
  font-size: 11px;
  color: rgba(26,26,36,.5);
}
.dp-form-02__input:focus + .dp-form-02__label {
  color: #2563EB;
}
</style>
<div class="dp-form-02">
  <div class="dp-form-02__field">
    <input class="dp-form-02__input" type="email" id="dp-form-02-email" placeholder=" ">
    <label class="dp-form-02__label" for="dp-form-02-email">メールアドレス</label>
  </div>
</div>

フォーム

セレクト・チェック・ラジオ

アンケートや条件選択フォームの選択項目一式に

<style>
.dp-form-03 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 360px;
  width: 100%;
}
.dp-form-03__select-wrap {
  position: relative;
}
.dp-form-03__select {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 40px 12px 14px;
  font-size: 15px;
  color: #1A1A24;
  background: #FFFFFF;
  border: 1.5px solid #E2E4E9;
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dp-form-03__select:hover {
  border-color: rgba(26,26,36,.3);
}
.dp-form-03__select:focus-visible {
  border-color: #2563EB;
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
.dp-form-03__select-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  color: rgba(26,26,36,.5);
  transform: translateY(-50%);
  pointer-events: none;
}
.dp-form-03__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dp-form-03__check,
.dp-form-03__radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #1A1A24;
  cursor: pointer;
}
.dp-form-03__input {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
}
.dp-form-03__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid #E2E4E9;
  border-radius: 6px;
  background: #FFFFFF;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.dp-form-03__check:hover .dp-form-03__box {
  border-color: rgba(26,26,36,.4);
}
.dp-form-03__check-icon {
  width: 13px;
  height: 13px;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity .15s ease;
}
.dp-form-03__input:checked + .dp-form-03__box {
  background: #2563EB;
  border-color: #2563EB;
}
.dp-form-03__input:checked + .dp-form-03__box .dp-form-03__check-icon {
  opacity: 1;
}
.dp-form-03__input:focus-visible + .dp-form-03__box {
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
.dp-form-03__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid #E2E4E9;
  border-radius: 999px;
  background: #FFFFFF;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dp-form-03__radio:hover .dp-form-03__circle {
  border-color: rgba(26,26,36,.4);
}
.dp-form-03__circle::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #2563EB;
  transform: scale(0);
  transition: transform .15s ease;
}
.dp-form-03__input:checked + .dp-form-03__circle {
  border-color: #2563EB;
}
.dp-form-03__input:checked + .dp-form-03__circle::after {
  transform: scale(1);
}
.dp-form-03__input:focus-visible + .dp-form-03__circle {
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
</style>
<div class="dp-form-03">
  <div class="dp-form-03__select-wrap">
    <select class="dp-form-03__select">
      <option>都内23区</option>
      <option>都下・多摩地域</option>
      <option>その他エリア</option>
    </select>
    <svg class="dp-form-03__select-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="6 9 12 15 18 9"></polyline>
    </svg>
  </div>
  <div class="dp-form-03__group">
    <label class="dp-form-03__check">
      <input class="dp-form-03__input" type="checkbox" checked>
      <span class="dp-form-03__box">
        <svg class="dp-form-03__check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="4 12 9 17 20 6"></polyline>
        </svg>
      </span>
      メールマガジンを受け取る
    </label>
    <label class="dp-form-03__check">
      <input class="dp-form-03__input" type="checkbox">
      <span class="dp-form-03__box">
        <svg class="dp-form-03__check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="4 12 9 17 20 6"></polyline>
        </svg>
      </span>
      キャンペーン情報も受け取る
    </label>
  </div>
  <div class="dp-form-03__group">
    <label class="dp-form-03__radio">
      <input class="dp-form-03__input" type="radio" name="dp-form-03-plan" checked>
      <span class="dp-form-03__circle"></span>
      月額プラン
    </label>
    <label class="dp-form-03__radio">
      <input class="dp-form-03__input" type="radio" name="dp-form-03-plan">
      <span class="dp-form-03__circle"></span>
      年額プラン（2ヶ月分お得）
    </label>
  </div>
</div>

フォーム

お問い合わせフォーム

サービスサイトの問い合わせページにそのまま設置できる

<style>
.dp-form-04 {
  box-sizing: border-box;
  max-width: 640px;
  width: 100%;
  padding: 28px;
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
}
.dp-form-04__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 520px) {
  .dp-form-04__grid {
    grid-template-columns: 1fr;
  }
}
.dp-form-04__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dp-form-04__field--full {
  grid-column: 1 / -1;
}
.dp-form-04__label {
  font-size: 13px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-form-04__input,
.dp-form-04__select,
.dp-form-04__textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 13px;
  font-size: 14.5px;
  color: #1A1A24;
  background: #F4F5F7;
  border: 1.5px solid transparent;
  border-radius: 10px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.dp-form-04__input:hover,
.dp-form-04__select:hover,
.dp-form-04__textarea:hover {
  border-color: rgba(26,26,36,.12);
}
.dp-form-04__textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.7;
}
.dp-form-04__input:focus-visible,
.dp-form-04__select:focus-visible,
.dp-form-04__textarea:focus-visible {
  background: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
.dp-form-04__agree {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(26,26,36,.7);
}
.dp-form-04__agree-input {
  width: 17px;
  height: 17px;
  accent-color: #2563EB;
  cursor: pointer;
}
.dp-form-04__submit {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 13px 36px;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(26,26,36,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.dp-form-04__submit:hover {
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
  transform: translateY(-1px);
}
.dp-form-04__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.25);
}
</style>
<form class="dp-form-04">
  <div class="dp-form-04__grid">
    <div class="dp-form-04__field">
      <label class="dp-form-04__label" for="dp-form-04-name">お名前</label>
      <input class="dp-form-04__input" type="text" id="dp-form-04-name" placeholder="山田 太郎">
    </div>
    <div class="dp-form-04__field">
      <label class="dp-form-04__label" for="dp-form-04-email">メールアドレス</label>
      <input class="dp-form-04__input" type="email" id="dp-form-04-email" placeholder="example@mail.com">
    </div>
    <div class="dp-form-04__field dp-form-04__field--full">
      <label class="dp-form-04__label" for="dp-form-04-type">お問い合わせ種別</label>
      <select class="dp-form-04__select" id="dp-form-04-type">
        <option>サービスについて</option>
        <option>お見積もり依頼</option>
        <option>その他のご質問</option>
      </select>
    </div>
    <div class="dp-form-04__field dp-form-04__field--full">
      <label class="dp-form-04__label" for="dp-form-04-message">お問い合わせ内容</label>
      <textarea class="dp-form-04__textarea" id="dp-form-04-message" placeholder="ご質問・ご相談内容をご記入ください"></textarea>
    </div>
    <label class="dp-form-04__agree">
      <input class="dp-form-04__agree-input" type="checkbox">
      プライバシーポリシーに同意する
    </label>
    <button class="dp-form-04__submit" type="submit">送信する</button>
  </div>
</form>

フォーム

メルマガ登録フォーム

フッターや記事末尾のメルマガ登録導線に

<style>
.dp-form-05 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  max-width: 420px;
  width: 100%;
  padding: 5px;
  background: #FFFFFF;
  border: 1.5px solid #E2E4E9;
  border-radius: 999px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dp-form-05:focus-within {
  border-color: #2563EB;
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
.dp-form-05__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-left: 12px;
  color: rgba(26,26,36,.4);
}
.dp-form-05__input {
  flex: 1;
  min-width: 0;
  padding: 10px 10px;
  font-size: 14px;
  color: #1A1A24;
  background: transparent;
  border: none;
  outline: none;
}
.dp-form-05__input::placeholder {
  color: rgba(26,26,36,.4);
}
.dp-form-05__btn {
  flex-shrink: 0;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease;
}
.dp-form-05__btn:hover {
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
  transform: translateY(-1px);
}
.dp-form-05__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(37,99,235,.25);
}
</style>
<form class="dp-form-05">
  <svg class="dp-form-05__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <rect x="3" y="5" width="18" height="14" rx="2"></rect>
    <polyline points="3 7 12 13 21 7"></polyline>
  </svg>
  <input class="dp-form-05__input" type="email" placeholder="メールアドレスを入力">
  <button class="dp-form-05__btn" type="submit">登録する</button>
</form>

フォーム

検索ボックス

サイト内検索やFAQ検索の入り口として

<style>
.dp-form-06 {
  max-width: 420px;
  width: 100%;
}
.dp-form-06__wrap {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 55%;
  min-width: 180px;
  max-width: 100%;
  padding: 10px 16px;
  background: #F4F5F7;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: text;
  transition: width .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.dp-form-06__wrap:hover {
  border-color: rgba(26,26,36,.15);
}
.dp-form-06__wrap:focus-within {
  width: 100%;
  background: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
.dp-form-06__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: rgba(26,26,36,.45);
  transition: color .3s ease;
}
.dp-form-06__wrap:focus-within .dp-form-06__icon {
  color: #2563EB;
}
.dp-form-06__input {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: #1A1A24;
  background: transparent;
  border: none;
  outline: none;
}
.dp-form-06__input::placeholder {
  color: rgba(26,26,36,.4);
}
</style>
<div class="dp-form-06">
  <label class="dp-form-06__wrap">
    <svg class="dp-form-06__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="7"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
    <input class="dp-form-06__input" type="search" placeholder="キーワードで検索">
  </label>
</div>

FAQ

アコーディオンFAQ

質問数が多いFAQページを省スペースにまとめたい時に

<style>
.dp-faq-01 {
  max-width: 640px;
  width: 100%;
}
.dp-faq-01__item {
  border: 1px solid #E2E4E9;
  border-left: 3px solid transparent;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #FFFFFF;
  transition: border-color .2s ease;
}
.dp-faq-01__item:last-child {
  margin-bottom: 0;
}
.dp-faq-01__item[open] {
  border-left-color: #2563EB;
}
.dp-faq-01__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 700;
  color: #1A1A24;
  list-style: none;
  cursor: pointer;
  transition: background .2s ease;
}
.dp-faq-01__q::-webkit-details-marker {
  display: none;
}
.dp-faq-01__q:hover {
  background: #F4F5F7;
}
.dp-faq-01__q:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(37,99,235,.25);
}
.dp-faq-01__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #2563EB;
  transition: transform .25s ease;
}
.dp-faq-01__item[open] .dp-faq-01__icon {
  transform: rotate(45deg);
}
.dp-faq-01__a {
  margin: 0;
  padding: 0 18px 18px;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(26,26,36,.7);
}
</style>
<div class="dp-faq-01">
  <details class="dp-faq-01__item" open>
    <summary class="dp-faq-01__q">
      支払い方法を教えてください
      <svg class="dp-faq-01__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="12" y1="5" x2="12" y2="19"></line>
        <line x1="5" y1="12" x2="19" y2="12"></line>
      </svg>
    </summary>
    <p class="dp-faq-01__a">クレジットカード、銀行振込、代金引換のいずれかからお選びいただけます。</p>
  </details>
  <details class="dp-faq-01__item">
    <summary class="dp-faq-01__q">
      解約時に違約金は発生しますか
      <svg class="dp-faq-01__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="12" y1="5" x2="12" y2="19"></line>
        <line x1="5" y1="12" x2="19" y2="12"></line>
      </svg>
    </summary>
    <p class="dp-faq-01__a">違約金は一切発生しません。いつでも解約手続きが可能です。</p>
  </details>
  <details class="dp-faq-01__item">
    <summary class="dp-faq-01__q">
      無料トライアルはありますか
      <svg class="dp-faq-01__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="12" y1="5" x2="12" y2="19"></line>
        <line x1="5" y1="12" x2="19" y2="12"></line>
      </svg>
    </summary>
    <p class="dp-faq-01__a">14日間の無料トライアルをご用意しています。クレジットカードの登録は不要です。</p>
  </details>
</div>

FAQ

読ませるQ&Aカード

重要な質問だけをじっくり読んでもらいたい導入部に

<style>
.dp-faq-02 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 560px;
  width: 100%;
}
.dp-faq-02__card {
  box-sizing: border-box;
  padding: 22px;
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(26,26,36,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.dp-faq-02__card:hover {
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
  transform: translateY(-2px);
}
.dp-faq-02__row {
  display: flex;
  gap: 14px;
}
.dp-faq-02__row + .dp-faq-02__row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #E2E4E9;
}
.dp-faq-02__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.dp-faq-02__badge--q {
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
}
.dp-faq-02__badge--a {
  color: #2563EB;
  background: rgba(37,99,235,.1);
}
.dp-faq-02__text {
  margin: 0;
  padding-top: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #1A1A24;
}
.dp-faq-02__text--a {
  font-size: 14px;
  font-weight: 400;
  color: rgba(26,26,36,.7);
}
</style>
<div class="dp-faq-02">
  <div class="dp-faq-02__card">
    <div class="dp-faq-02__row">
      <span class="dp-faq-02__badge dp-faq-02__badge--q">Q</span>
      <p class="dp-faq-02__text">契約期間の縛りはありますか？</p>
    </div>
    <div class="dp-faq-02__row">
      <span class="dp-faq-02__badge dp-faq-02__badge--a">A</span>
      <p class="dp-faq-02__text dp-faq-02__text--a">最低契約期間は設けておりません。いつでも解約いただける月額制のプランです。</p>
    </div>
  </div>
  <div class="dp-faq-02__card">
    <div class="dp-faq-02__row">
      <span class="dp-faq-02__badge dp-faq-02__badge--q">Q</span>
      <p class="dp-faq-02__text">導入サポートは受けられますか？</p>
    </div>
    <div class="dp-faq-02__row">
      <span class="dp-faq-02__badge dp-faq-02__badge--a">A</span>
      <p class="dp-faq-02__text dp-faq-02__text--a">専任担当者が初期設定から運用開始まで無料で伴走いたします。</p>
    </div>
  </div>
</div>

FAQ

よくある質問2カラム

質問を一覧性高く見せたいFAQセクションに

<style>
.dp-faq-03 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 28px;
  width: 100%;
}
@media (max-width: 768px) {
  .dp-faq-03 {
    grid-template-columns: 1fr;
  }
}
.dp-faq-03__item {
  padding-bottom: 20px;
  border-bottom: 1px solid #E2E4E9;
}
.dp-faq-03__q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #1A1A24;
}
.dp-faq-03__mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  background: #2563EB;
  border-radius: 6px;
}
.dp-faq-03__a {
  margin: 0;
  padding-left: 32px;
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(26,26,36,.6);
}
</style>
<div class="dp-faq-03">
  <div class="dp-faq-03__item">
    <p class="dp-faq-03__q"><span class="dp-faq-03__mark">Q</span>導入までどれくらいかかりますか？</p>
    <p class="dp-faq-03__a">お申し込みから最短2週間で運用を開始できます。</p>
  </div>
  <div class="dp-faq-03__item">
    <p class="dp-faq-03__q"><span class="dp-faq-03__mark">Q</span>既存システムと連携できますか？</p>
    <p class="dp-faq-03__a">主要な会計ソフトやCRMとAPI連携が可能です。</p>
  </div>
  <div class="dp-faq-03__item">
    <p class="dp-faq-03__q"><span class="dp-faq-03__mark">Q</span>サポート体制を教えてください</p>
    <p class="dp-faq-03__a">平日9時から18時までチャットと電話で対応します。</p>
  </div>
  <div class="dp-faq-03__item">
    <p class="dp-faq-03__q"><span class="dp-faq-03__mark">Q</span>プランはあとから変更できますか？</p>
    <p class="dp-faq-03__a">管理画面からいつでもプラン変更が可能です。</p>
  </div>
</div>

CTA

グラデ帯CTA

LP中間の差し込み用。見出しと白ボタンで離脱を防ぐ

<style>
.dp-cta-01 {
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
  color: #FFFFFF;
  max-width: 100%;
  box-sizing: border-box;
}
.dp-cta-01__title {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .02em;
}
.dp-cta-01__desc {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.7;
  opacity: .92;
}
.dp-cta-01__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: #2563EB;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 36px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
  transition: transform .2s, box-shadow .2s;
}
.dp-cta-01__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,26,36,.2);
}
.dp-cta-01__btn:focus-visible {
  outline: 3px solid #F59E0B;
  outline-offset: 2px;
}
.dp-cta-01__btn svg {
  width: 18px;
  height: 18px;
}
</style>
<div class="dp-cta-01">
  <p class="dp-cta-01__title">導入のご相談、まずは無料でどうぞ</p>
  <p class="dp-cta-01__desc">初回相談は60分無料。貴社の課題に合わせた活用プランをその場でご提案します。</p>
  <button class="dp-cta-01__btn" type="button">
    無料相談を予約する
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
  </button>
</div>

CTA

枠付きCTAカード

資料DLと無料相談を並べる二択CTA。判断を迷わせない

<style>
.dp-cta-02 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  background: #FFFFFF;
  padding: 32px;
  max-width: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(26,26,36,.06);
}
.dp-cta-02__text {
  flex: 1;
  min-width: 0;
}
.dp-cta-02__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-cta-02__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #1A1A24;
  opacity: .7;
}
.dp-cta-02__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  width: 240px;
}
.dp-cta-02__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background .2s, color .2s;
}
.dp-cta-02__btn--primary {
  background: #2563EB;
  color: #FFFFFF;
  border: 1px solid #2563EB;
}
.dp-cta-02__btn--primary:hover {
  background: #1D4ED8;
}
.dp-cta-02__btn--outline {
  background: #FFFFFF;
  color: #2563EB;
  border: 1px solid #2563EB;
}
.dp-cta-02__btn--outline:hover {
  background: #F4F5F7;
}
.dp-cta-02__btn:focus-visible {
  outline: 3px solid #F59E0B;
  outline-offset: 2px;
}
.dp-cta-02__btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .dp-cta-02 {
    flex-direction: column;
    align-items: stretch;
  }
  .dp-cta-02__actions {
    width: 100%;
  }
}
</style>
<div class="dp-cta-02">
  <div class="dp-cta-02__text">
    <p class="dp-cta-02__title">まずは資料か、直接相談か</p>
    <p class="dp-cta-02__desc">導入事例と料金がまとまった資料をお送りします。急ぎの方は無料相談から直接どうぞ。</p>
  </div>
  <div class="dp-cta-02__actions">
    <a class="dp-cta-02__btn dp-cta-02__btn--primary" href="#">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2"/></svg>
      資料をダウンロード
    </a>
    <a class="dp-cta-02__btn dp-cta-02__btn--outline" href="#">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 10h.01M12 10h.01M16 10h.01M21 12a9 9 0 11-4.65-7.88L21 3l-1.12 4.35A8.96 8.96 0 0121 12z"/></svg>
      無料相談を予約
    </a>
  </div>
</div>

CTA

締切訴求CTA

期限訴求で今すぐ行動を促す申込直前ブロック

<style>
.dp-cta-03 {
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  background: #F4F5F7;
  padding: 36px 32px;
  max-width: 100%;
  box-sizing: border-box;
}
.dp-cta-03__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1A1A24;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.dp-cta-03__chip svg {
  width: 14px;
  height: 14px;
}
.dp-cta-03__title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-cta-03__title span {
  color: #2563EB;
}
.dp-cta-03__list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.dp-cta-03__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #1A1A24;
}
.dp-cta-03__list svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #F59E0B;
  margin-top: 1px;
}
.dp-cta-03__btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #2563EB;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.dp-cta-03__btn:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
}
.dp-cta-03__btn:focus-visible {
  outline: 3px solid #F59E0B;
  outline-offset: 2px;
}
</style>
<div class="dp-cta-03">
  <span class="dp-cta-03__chip">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
    受付は8月31日まで
  </span>
  <p class="dp-cta-03__title">今月中のお申し込みで<span>初期費用0円</span></p>
  <ul class="dp-cta-03__list">
    <li>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
      通常55,000円の初期設定費用が無料
    </li>
    <li>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
      導入後3ヶ月間、専任担当によるサポート付き
    </li>
    <li>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>
      先着30社限定の特別価格を適用
    </li>
  </ul>
  <button class="dp-cta-03__btn" type="button">今すぐ申し込む（無料）</button>
</div>

CTA

LINE登録CTA

友だち追加を促す緑系CTA。特典訴求で登録を後押し

<style>
.dp-cta-04 {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 100%;
  box-sizing: border-box;
}
.dp-cta-04__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #06C755;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dp-cta-04__icon svg {
  width: 32px;
  height: 32px;
  color: #FFFFFF;
}
.dp-cta-04__body {
  flex: 1;
  min-width: 0;
}
.dp-cta-04__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-cta-04__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #1A1A24;
  opacity: .7;
}
.dp-cta-04__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #06C755;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.dp-cta-04__btn:hover {
  background: #05A648;
  transform: translateY(-1px);
}
.dp-cta-04__btn:focus-visible {
  outline: 3px solid #F59E0B;
  outline-offset: 2px;
}
.dp-cta-04__btn svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 480px) {
  .dp-cta-04 {
    flex-wrap: wrap;
  }
  .dp-cta-04__btn {
    width: 100%;
    justify-content: center;
  }
}
</style>
<div class="dp-cta-04">
  <span class="dp-cta-04__icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/></svg>
  </span>
  <div class="dp-cta-04__body">
    <p class="dp-cta-04__title">公式LINEで最新情報を受け取る</p>
    <p class="dp-cta-04__desc">友だち追加で活用事例集をプレゼント。お得な情報もいち早くお届けします。</p>
  </div>
  <button class="dp-cta-04__btn" type="button">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
    友だち追加
  </button>
</div>

料金

3プラン比較

松竹梅で選ばせる王道の料金表。中央プランに視線誘導

<style>
.dp-price-01 {
  display: flex;
  align-items: stretch;
  gap: 20px;
  max-width: 100%;
  box-sizing: border-box;
}
.dp-price-01__plan {
  flex: 1;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  padding: 28px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.dp-price-01__plan:hover {
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
  transform: translateY(-2px);
}
.dp-price-01__plan--main {
  border: 2px solid #2563EB;
  padding: 34px 26px;
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
  position: relative;
}
.dp-price-01__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
}
.dp-price-01__name {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #1A1A24;
  opacity: .7;
}
.dp-price-01__price {
  margin: 0 0 4px;
  font-size: 32px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-price-01__price span {
  font-size: 14px;
  font-weight: 400;
  opacity: .6;
}
.dp-price-01__unit {
  margin: 0 0 20px;
  font-size: 12px;
  color: #1A1A24;
  opacity: .55;
}
.dp-price-01__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
  flex: 1;
}
.dp-price-01__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #1A1A24;
}
.dp-price-01__list svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #2563EB;
  margin-top: 2px;
}
.dp-price-01__btn {
  display: block;
  text-align: center;
  padding: 13px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.dp-price-01__btn--outline {
  background: #FFFFFF;
  color: #2563EB;
  border: 1px solid #2563EB;
}
.dp-price-01__btn--outline:hover {
  background: #F4F5F7;
}
.dp-price-01__btn--solid {
  background: #2563EB;
  color: #FFFFFF;
  border: 1px solid #2563EB;
}
.dp-price-01__btn--solid:hover {
  background: #1D4ED8;
}
.dp-price-01__btn:focus-visible {
  outline: 3px solid #F59E0B;
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .dp-price-01 {
    flex-direction: column;
  }
  .dp-price-01__plan--main {
    order: -1;
  }
}
</style>
<div class="dp-price-01">
  <div class="dp-price-01__plan">
    <p class="dp-price-01__name">ライト</p>
    <p class="dp-price-01__price">9,800<span>円/月</span></p>
    <p class="dp-price-01__unit">初期費用0円・税別</p>
    <ul class="dp-price-01__list">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>利用ユーザー3名まで</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>月間チャット500件</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>メールサポート</li>
    </ul>
    <a class="dp-price-01__btn dp-price-01__btn--outline" href="#">このプランで始める</a>
  </div>
  <div class="dp-price-01__plan dp-price-01__plan--main">
    <span class="dp-price-01__badge">人気No.1</span>
    <p class="dp-price-01__name">スタンダード</p>
    <p class="dp-price-01__price">29,800<span>円/月</span></p>
    <p class="dp-price-01__unit">初期費用0円・税別</p>
    <ul class="dp-price-01__list">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>利用ユーザー20名まで</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>月間チャット無制限</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>チャット・電話サポート</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>専任担当者による導入支援</li>
    </ul>
    <a class="dp-price-01__btn dp-price-01__btn--solid" href="#">このプランで始める</a>
  </div>
  <div class="dp-price-01__plan">
    <p class="dp-price-01__name">エンタープライズ</p>
    <p class="dp-price-01__price">要相談</p>
    <p class="dp-price-01__unit">利用規模に応じてお見積り</p>
    <ul class="dp-price-01__list">
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>利用ユーザー無制限</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>専用サーバー・SLA保証</li>
      <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>専属カスタマーサクセス</li>
    </ul>
    <a class="dp-price-01__btn dp-price-01__btn--outline" href="#">お問い合わせ</a>
  </div>
</div>

料金

1プラン集中CTA

セミナーや単発商品向け。価格を大きく見せ即決を促す

<style>
.dp-price-02 {
  max-width: 420px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
}
.dp-price-02__label {
  display: inline-block;
  background: #F4F5F7;
  color: #1A1A24;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.dp-price-02__title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-price-02__price {
  margin: 0 0 4px;
  font-size: 44px;
  font-weight: 700;
  color: #2563EB;
}
.dp-price-02__price span {
  font-size: 15px;
  font-weight: 400;
  color: #1A1A24;
}
.dp-price-02__note {
  margin: 0 0 24px;
  font-size: 12px;
  color: #1A1A24;
  opacity: .55;
}
.dp-price-02__list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 12px;
}
.dp-price-02__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #1A1A24;
}
.dp-price-02__list svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #2563EB;
  margin-top: 1px;
}
.dp-price-02__btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #2563EB;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  padding: 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.dp-price-02__btn:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
}
.dp-price-02__btn:focus-visible {
  outline: 3px solid #F59E0B;
  outline-offset: 2px;
}
</style>
<div class="dp-price-02">
  <span class="dp-price-02__label">オンラインセミナー</span>
  <p class="dp-price-02__title">AI活用実践セミナー（半日）</p>
  <p class="dp-price-02__price">19,800<span>円（税込）</span></p>
  <p class="dp-price-02__note">1名様分の参加費です</p>
  <ul class="dp-price-02__list">
    <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>3時間のライブ講義・質疑応答つき</li>
    <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>当日資料一式をPDFで配布</li>
    <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>見逃し配信を2週間視聴可能</li>
    <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>参加者限定コミュニティへの招待</li>
  </ul>
  <button class="dp-price-02__btn" type="button">今すぐ申し込む</button>
</div>

料金

月額年額トグル

ラジオボタンでCSSのみ切替。年払いの割引を訴求

<style>
.dp-price-03 {
  max-width: 380px;
  margin: 0 auto;
  box-sizing: border-box;
}
.dp-price-03__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.dp-price-03__switch {
  display: flex;
  background: #F4F5F7;
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 20px;
}
.dp-price-03__opt {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #1A1A24;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.dp-price-03__opt:hover {
  background: rgba(37,99,235,.08);
}
.dp-price-03__save {
  display: block;
  font-size: 10px;
  font-weight: 400;
  opacity: .8;
}
#dp-price-03-monthly:checked ~ .dp-price-03__switch .dp-price-03__opt--monthly,
#dp-price-03-yearly:checked ~ .dp-price-03__switch .dp-price-03__opt--yearly {
  background: #2563EB;
  color: #FFFFFF;
}
#dp-price-03-monthly:checked ~ .dp-price-03__switch .dp-price-03__opt--monthly:hover,
#dp-price-03-yearly:checked ~ .dp-price-03__switch .dp-price-03__opt--yearly:hover {
  background: #1D4ED8;
}
#dp-price-03-monthly:focus-visible ~ .dp-price-03__switch .dp-price-03__opt--monthly,
#dp-price-03-yearly:focus-visible ~ .dp-price-03__switch .dp-price-03__opt--yearly {
  outline: 3px solid #F59E0B;
  outline-offset: 2px;
}
.dp-price-03__card {
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  padding: 28px 26px;
  text-align: center;
  box-sizing: border-box;
}
.dp-price-03__name {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: #1A1A24;
  opacity: .7;
}
.dp-price-03__price {
  margin: 0 0 4px;
  font-size: 36px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-price-03__price span {
  font-size: 14px;
  font-weight: 400;
  opacity: .6;
}
.dp-price-03__hint {
  margin: 0 0 20px;
  font-size: 12px;
  color: #2563EB;
}
#dp-price-03-monthly:checked ~ .dp-price-03__card .dp-price-03__price--yearly,
#dp-price-03-monthly:checked ~ .dp-price-03__card .dp-price-03__hint--yearly {
  display: none;
}
#dp-price-03-yearly:checked ~ .dp-price-03__card .dp-price-03__price--monthly {
  display: none;
}
.dp-price-03__btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #2563EB;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  padding: 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.dp-price-03__btn:hover {
  background: #1D4ED8;
}
.dp-price-03__btn:focus-visible {
  outline: 3px solid #F59E0B;
  outline-offset: 2px;
}
</style>
<div class="dp-price-03">
  <input type="radio" name="dp-price-03-cycle" id="dp-price-03-monthly" class="dp-price-03__radio" checked>
  <input type="radio" name="dp-price-03-cycle" id="dp-price-03-yearly" class="dp-price-03__radio">
  <div class="dp-price-03__switch">
    <label class="dp-price-03__opt dp-price-03__opt--monthly" for="dp-price-03-monthly">月払い</label>
    <label class="dp-price-03__opt dp-price-03__opt--yearly" for="dp-price-03-yearly">年払い<span class="dp-price-03__save">2ヶ月分お得</span></label>
  </div>
  <div class="dp-price-03__card">
    <p class="dp-price-03__name">スタンダードプラン</p>
    <p class="dp-price-03__price dp-price-03__price--monthly">29,800<span>円/月</span></p>
    <p class="dp-price-03__price dp-price-03__price--yearly">298,000<span>円/年</span></p>
    <p class="dp-price-03__hint dp-price-03__hint--yearly">月あたり24,833円相当・59,600円お得</p>
    <button class="dp-price-03__btn" type="button">このプランで始める</button>
  </div>
</div>

お客様の声

感想カード2枚

導入企業の声を2件並べ信頼を補強する引用符付き

<style>
.dp-voice-01 {
  display: flex;
  gap: 20px;
  max-width: 100%;
  box-sizing: border-box;
}
.dp-voice-01__card {
  flex: 1;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  padding: 28px 24px;
  box-sizing: border-box;
  transition: box-shadow .2s, transform .2s;
}
.dp-voice-01__card:hover {
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
  transform: translateY(-2px);
}
.dp-voice-01__quote {
  width: 28px;
  height: 28px;
  color: #2563EB;
  opacity: .3;
  margin-bottom: 12px;
}
.dp-voice-01__text {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.8;
  color: #1A1A24;
}
.dp-voice-01__person {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dp-voice-01__avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dp-voice-01__name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-voice-01__role {
  margin: 0;
  font-size: 12px;
  color: #1A1A24;
  opacity: .55;
}
@media (max-width: 600px) {
  .dp-voice-01 {
    flex-direction: column;
  }
}
</style>
<div class="dp-voice-01">
  <div class="dp-voice-01__card">
    <svg class="dp-voice-01__quote" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 8c-2 0-3 1.5-3 3.5S5 15 7 15v2c-3.5 0-6-2.5-6-6.5S3.5 4 7 4v4zm10 0c-2 0-3 1.5-3 3.5s1 3.5 3 3.5v2c-3.5 0-6-2.5-6-6.5S13.5 4 17 4v4z"/></svg>
    <p class="dp-voice-01__text">導入から3ヶ月で問い合わせ対応の工数が半分になりました。担当者の入れ替わりが多い部署でも、マニュアルなしで運用できています。</p>
    <div class="dp-voice-01__person">
      <span class="dp-voice-01__avatar">M</span>
      <div>
        <p class="dp-voice-01__name">松本 様</p>
        <p class="dp-voice-01__role">株式会社フォレスト／カスタマーサポート部</p>
      </div>
    </div>
  </div>
  <div class="dp-voice-01__card">
    <svg class="dp-voice-01__quote" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 8c-2 0-3 1.5-3 3.5S5 15 7 15v2c-3.5 0-6-2.5-6-6.5S3.5 4 7 4v4zm10 0c-2 0-3 1.5-3 3.5s1 3.5 3 3.5v2c-3.5 0-6-2.5-6-6.5S13.5 4 17 4v4z"/></svg>
    <p class="dp-voice-01__text">現場の意見をすぐ反映してくれるサポート体制が決め手でした。初期設定も1週間で完了し、想像より早く使い始められました。</p>
    <div class="dp-voice-01__person">
      <span class="dp-voice-01__avatar">K</span>
      <div>
        <p class="dp-voice-01__name">木村 様</p>
        <p class="dp-voice-01__role">合同会社アイビス／代表取締役</p>
      </div>
    </div>
  </div>
</div>

お客様の声

星評価レビュー

星5段階で信頼度を一瞬で伝えるレビューカード

<style>
.dp-voice-02 {
  max-width: 420px;
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  padding: 28px 26px;
  box-sizing: border-box;
  transition: box-shadow .2s;
}
.dp-voice-02:hover {
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
}
.dp-voice-02__stars {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.dp-voice-02__star {
  position: relative;
  width: 18px;
  height: 18px;
}
.dp-voice-02__star svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
}
.dp-voice-02__star-bg {
  color: #E2E4E9;
}
.dp-voice-02__star-fill {
  color: #F59E0B;
}
.dp-voice-02__star--half .dp-voice-02__star-fill {
  clip-path: inset(0 50% 0 0);
}
.dp-voice-02__score {
  font-size: 13px;
  font-weight: 700;
  color: #1A1A24;
  margin-left: 4px;
}
.dp-voice-02__text {
  margin: 12px 0 20px;
  font-size: 14px;
  line-height: 1.8;
  color: #1A1A24;
}
.dp-voice-02__person {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dp-voice-02__name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-voice-02__role {
  margin: 0;
  font-size: 12px;
  color: #1A1A24;
  opacity: .55;
}
</style>
<div class="dp-voice-02">
  <div class="dp-voice-02__stars">
    <span class="dp-voice-02__star">
      <svg class="dp-voice-02__star-bg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3L12 17l-5.6 3.1 1.4-6.3-4.8-4.3 6.4-.6z"/></svg>
      <svg class="dp-voice-02__star-fill" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3L12 17l-5.6 3.1 1.4-6.3-4.8-4.3 6.4-.6z"/></svg>
    </span>
    <span class="dp-voice-02__star">
      <svg class="dp-voice-02__star-bg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3L12 17l-5.6 3.1 1.4-6.3-4.8-4.3 6.4-.6z"/></svg>
      <svg class="dp-voice-02__star-fill" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3L12 17l-5.6 3.1 1.4-6.3-4.8-4.3 6.4-.6z"/></svg>
    </span>
    <span class="dp-voice-02__star">
      <svg class="dp-voice-02__star-bg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3L12 17l-5.6 3.1 1.4-6.3-4.8-4.3 6.4-.6z"/></svg>
      <svg class="dp-voice-02__star-fill" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3L12 17l-5.6 3.1 1.4-6.3-4.8-4.3 6.4-.6z"/></svg>
    </span>
    <span class="dp-voice-02__star">
      <svg class="dp-voice-02__star-bg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3L12 17l-5.6 3.1 1.4-6.3-4.8-4.3 6.4-.6z"/></svg>
      <svg class="dp-voice-02__star-fill" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3L12 17l-5.6 3.1 1.4-6.3-4.8-4.3 6.4-.6z"/></svg>
    </span>
    <span class="dp-voice-02__star dp-voice-02__star--half">
      <svg class="dp-voice-02__star-bg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3L12 17l-5.6 3.1 1.4-6.3-4.8-4.3 6.4-.6z"/></svg>
      <svg class="dp-voice-02__star-fill" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.6 5.9 6.4.6-4.8 4.3 1.4 6.3L12 17l-5.6 3.1 1.4-6.3-4.8-4.3 6.4-.6z"/></svg>
    </span>
    <span class="dp-voice-02__score">4.5</span>
  </div>
  <p class="dp-voice-02__text">操作画面が直感的で、ITが苦手なスタッフでも当日から使えました。サポートの返信も早く、困ったときにすぐ解決できています。</p>
  <div class="dp-voice-02__person">
    <p class="dp-voice-02__name">佐藤 様</p>
    <p class="dp-voice-02__role">小売業／店舗マネージャー</p>
  </div>
</div>

お客様の声

大型引用文

事例ページ向け。象徴的な一言で説得力を高める

<style>
.dp-voice-03 {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 8px;
  box-sizing: border-box;
}
.dp-voice-03__rule {
  width: 56px;
  height: 4px;
  margin: 0 auto 24px;
  border-radius: 999px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
}
.dp-voice-03__quote {
  margin: 0 0 28px;
  font-size: 26px;
  line-height: 1.6;
  font-weight: 700;
  color: #1A1A24;
}
.dp-voice-03__quote::before {
  content: "\201C";
  color: #2563EB;
}
.dp-voice-03__quote::after {
  content: "\201D";
  color: #2563EB;
}
.dp-voice-03__person {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.dp-voice-03__avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #F4F5F7;
  color: #2563EB;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dp-voice-03__person-text {
  text-align: left;
}
.dp-voice-03__name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-voice-03__role {
  margin: 0;
  font-size: 12px;
  color: #1A1A24;
  opacity: .55;
}
</style>
<div class="dp-voice-03">
  <div class="dp-voice-03__rule"></div>
  <p class="dp-voice-03__quote">属人化していた業務が、誰でも同じ品質で回せるようになった。これが一番の変化です。</p>
  <div class="dp-voice-03__person">
    <span class="dp-voice-03__avatar">T</span>
    <div class="dp-voice-03__person-text">
      <p class="dp-voice-03__name">田中 様</p>
      <p class="dp-voice-03__role">株式会社ノーザンライト／業務改革推進室 室長</p>
    </div>
  </div>
</div>

実績数字

実績数字3列

導入社数など核心指標を横並びで見せ説得する

<style>
.dp-stat-01 {
  display: flex;
  max-width: 100%;
  box-sizing: border-box;
}
.dp-stat-01__item {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 8px 16px;
  border-right: 1px solid #E2E4E9;
  border-radius: 10px;
  transition: background .2s;
}
.dp-stat-01__item:hover {
  background: #F4F5F7;
}
.dp-stat-01__item:last-child {
  border-right: none;
}
.dp-stat-01__num {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  color: #2563EB;
  line-height: 1.2;
}
.dp-stat-01__num span {
  font-size: 16px;
  font-weight: 700;
  margin-left: 2px;
}
.dp-stat-01__label {
  margin: 8px 0 0;
  font-size: 13px;
  color: #1A1A24;
  opacity: .65;
}
@media (max-width: 480px) {
  .dp-stat-01 {
    flex-direction: column;
  }
  .dp-stat-01__item {
    border-right: none;
    border-bottom: 1px solid #E2E4E9;
    padding: 16px 0;
  }
  .dp-stat-01__item:last-child {
    border-bottom: none;
  }
}
</style>
<div class="dp-stat-01">
  <div class="dp-stat-01__item">
    <p class="dp-stat-01__num">120<span>社</span></p>
    <p class="dp-stat-01__label">導入企業数</p>
  </div>
  <div class="dp-stat-01__item">
    <p class="dp-stat-01__num">98<span>%</span></p>
    <p class="dp-stat-01__label">継続利用率</p>
  </div>
  <div class="dp-stat-01__item">
    <p class="dp-stat-01__num">24<span>時間</span></p>
    <p class="dp-stat-01__label">サポート対応</p>
  </div>
</div>

実績数字

墨パネル実績数字

濃色背景で数字を際立たせる対比訴求向け

<style>
.dp-stat-02 {
  display: flex;
  background: #1A1A24;
  border-radius: 16px;
  padding: 36px 24px;
  max-width: 100%;
  box-sizing: border-box;
}
.dp-stat-02__item {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 16px;
  border-right: 1px solid rgba(255,255,255,.14);
  transition: transform .2s;
}
.dp-stat-02__item:hover {
  transform: translateY(-2px);
}
.dp-stat-02__item:last-child {
  border-right: none;
}
.dp-stat-02__num {
  margin: 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dp-stat-02__num span {
  font-size: 16px;
  font-weight: 700;
  margin-left: 2px;
}
.dp-stat-02__label {
  margin: 10px 0 0;
  font-size: 12px;
  color: #FFFFFF;
  opacity: .6;
  letter-spacing: .05em;
}
@media (max-width: 480px) {
  .dp-stat-02 {
    flex-direction: column;
    gap: 20px;
  }
  .dp-stat-02__item {
    border-right: none;
  }
}
</style>
<div class="dp-stat-02">
  <div class="dp-stat-02__item">
    <p class="dp-stat-02__num">3.2<span>倍</span></p>
    <p class="dp-stat-02__label">業務処理速度の向上</p>
  </div>
  <div class="dp-stat-02__item">
    <p class="dp-stat-02__num">450<span>時間</span></p>
    <p class="dp-stat-02__label">年間削減工数</p>
  </div>
  <div class="dp-stat-02__item">
    <p class="dp-stat-02__num">92<span>%</span></p>
    <p class="dp-stat-02__label">利用者満足度</p>
  </div>
</div>

実績数字

アイコン実績カード

アイコンで指標の意味を補う3枚組の実績カード

<style>
.dp-stat-03 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 100%;
  box-sizing: border-box;
}
.dp-stat-03__card {
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 16px;
  padding: 24px 20px;
  box-sizing: border-box;
  transition: box-shadow .2s, transform .2s;
}
.dp-stat-03__card:hover {
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
  transform: translateY(-2px);
}
.dp-stat-03__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #F4F5F7;
  color: #2563EB;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.dp-stat-03__icon svg {
  width: 22px;
  height: 22px;
}
.dp-stat-03__num {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-stat-03__num span {
  font-size: 14px;
  font-weight: 700;
  margin-left: 2px;
  opacity: .6;
}
.dp-stat-03__label {
  margin: 6px 0 0;
  font-size: 13px;
  color: #1A1A24;
  opacity: .6;
}
@media (max-width: 600px) {
  .dp-stat-03 {
    grid-template-columns: 1fr;
  }
}
</style>
<div class="dp-stat-03">
  <div class="dp-stat-03__card">
    <span class="dp-stat-03__icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18M6 21V9l6-4 6 4v12M10 21v-6h4v6"/></svg>
    </span>
    <p class="dp-stat-03__num">120<span>社</span></p>
    <p class="dp-stat-03__label">導入企業数</p>
  </div>
  <div class="dp-stat-03__card">
    <span class="dp-stat-03__icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8v4l3 3M21 12a9 9 0 11-9-9"/></svg>
    </span>
    <p class="dp-stat-03__num">65<span>%</span></p>
    <p class="dp-stat-03__label">作業時間の削減率</p>
  </div>
  <div class="dp-stat-03__card">
    <span class="dp-stat-03__icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12l2 2 4-4M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
    </span>
    <p class="dp-stat-03__num">4.8<span>/5.0</span></p>
    <p class="dp-stat-03__label">導入企業の評価スコア</p>
  </div>
</div>

ステップ

縦型ステップフロー

ご利用の流れを順を追って説明したいページに

<style>
.dp-step-01 {
  max-width: 480px;
  width: 100%;
}
.dp-step-01__item {
  display: flex;
  gap: 20px;
  position: relative;
  padding-bottom: 32px;
}
.dp-step-01__item:last-child {
  padding-bottom: 0;
}
.dp-step-01__marker {
  position: relative;
  flex-shrink: 0;
}
.dp-step-01__num {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  border-radius: 999px;
}
.dp-step-01__marker::after {
  content: '';
  position: absolute;
  top: 36px;
  left: 50%;
  bottom: -32px;
  width: 2px;
  transform: translateX(-50%);
  background: #E2E4E9;
}
.dp-step-01__item:last-child .dp-step-01__marker::after {
  display: none;
}
.dp-step-01__body {
  padding-top: 6px;
}
.dp-step-01__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-step-01__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: rgba(26,26,36,.6);
}
</style>
<div class="dp-step-01">
  <div class="dp-step-01__item">
    <div class="dp-step-01__marker"><span class="dp-step-01__num">1</span></div>
    <div class="dp-step-01__body">
      <h3 class="dp-step-01__title">お問い合わせ</h3>
      <p class="dp-step-01__desc">フォームまたはお電話でご相談内容をお聞かせください。</p>
    </div>
  </div>
  <div class="dp-step-01__item">
    <div class="dp-step-01__marker"><span class="dp-step-01__num">2</span></div>
    <div class="dp-step-01__body">
      <h3 class="dp-step-01__title">ヒアリング・お見積り</h3>
      <p class="dp-step-01__desc">担当者が課題を伺い、最適なプランをご提案します。</p>
    </div>
  </div>
  <div class="dp-step-01__item">
    <div class="dp-step-01__marker"><span class="dp-step-01__num">3</span></div>
    <div class="dp-step-01__body">
      <h3 class="dp-step-01__title">ご契約・導入設定</h3>
      <p class="dp-step-01__desc">契約手続き後、専任スタッフが初期設定を行います。</p>
    </div>
  </div>
  <div class="dp-step-01__item">
    <div class="dp-step-01__marker"><span class="dp-step-01__num">4</span></div>
    <div class="dp-step-01__body">
      <h3 class="dp-step-01__title">運用スタート</h3>
      <p class="dp-step-01__desc">アカウントを発行し、いつでも利用を開始できます。</p>
    </div>
  </div>
</div>

ステップ

横並びステップ

3ステップで完了する手続きをシンプルに見せたい時に

<style>
.dp-step-02 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.dp-step-02__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-align: center;
}
.dp-step-02__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  border-radius: 999px;
}
.dp-step-02__label {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: #1A1A24;
}
.dp-step-02__arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 10px;
  color: rgba(26,26,36,.3);
}
@media (max-width: 768px) {
  .dp-step-02 {
    flex-direction: column;
    align-items: stretch;
  }
  .dp-step-02__arrow {
    align-self: center;
    margin: 0;
    transform: rotate(90deg);
  }
}
</style>
<div class="dp-step-02">
  <div class="dp-step-02__item">
    <div class="dp-step-02__num">1</div>
    <p class="dp-step-02__label">お申し込み</p>
  </div>
  <svg class="dp-step-02__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
  <div class="dp-step-02__item">
    <div class="dp-step-02__num">2</div>
    <p class="dp-step-02__label">本人確認</p>
  </div>
  <svg class="dp-step-02__arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
  <div class="dp-step-02__item">
    <div class="dp-step-02__num">3</div>
    <p class="dp-step-02__label">利用開始</p>
  </div>
</div>

ステップ

沿革タイムライン

会社概要ページで創業からの歩みを見せたい時に

<style>
.dp-step-03 {
  max-width: 480px;
  width: 100%;
}
.dp-step-03__item {
  display: grid;
  grid-template-columns: 60px 20px 1fr;
  column-gap: 16px;
  padding-bottom: 28px;
}
.dp-step-03__item:last-child {
  padding-bottom: 0;
}
.dp-step-03__year {
  padding-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: #2563EB;
}
.dp-step-03__line {
  position: relative;
  display: flex;
  justify-content: center;
}
.dp-step-03__line::before {
  content: '';
  position: absolute;
  top: 16px;
  bottom: -28px;
  width: 2px;
  background: #E2E4E9;
}
.dp-step-03__item:last-child .dp-step-03__line::before {
  display: none;
}
.dp-step-03__dot {
  position: relative;
  z-index: 1;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #2563EB;
  box-shadow: 0 0 0 4px #FFFFFF;
}
.dp-step-03__event {
  margin: 0;
  padding-top: 2px;
  font-size: 14px;
  line-height: 1.7;
  color: #1A1A24;
}
</style>
<div class="dp-step-03">
  <div class="dp-step-03__item">
    <div class="dp-step-03__year">2018年</div>
    <div class="dp-step-03__line"><span class="dp-step-03__dot"></span></div>
    <p class="dp-step-03__event">渋谷にて会社設立、Webサービス事業を開始</p>
  </div>
  <div class="dp-step-03__item">
    <div class="dp-step-03__year">2021年</div>
    <div class="dp-step-03__line"><span class="dp-step-03__dot"></span></div>
    <p class="dp-step-03__event">導入企業500社を突破、大阪オフィスを開設</p>
  </div>
  <div class="dp-step-03__item">
    <div class="dp-step-03__year">2024年</div>
    <div class="dp-step-03__line"><span class="dp-step-03__dot"></span></div>
    <p class="dp-step-03__event">シリーズBの資金調達を実施、海外展開を開始</p>
  </div>
</div>

ステップ

自社優位性の比較表

競合との違いを一目で伝えたい料金・機能比較に

<style>
.dp-tbl-01 {
  width: 100%;
  overflow-x: auto;
}
.dp-tbl-01__table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.dp-tbl-01__table th,
.dp-tbl-01__table td {
  padding: 14px 12px;
  text-align: center;
  border-bottom: 1px solid #E2E4E9;
}
.dp-tbl-01__label-th {
  text-align: left;
  color: rgba(26,26,36,.5);
  font-weight: 400;
}
.dp-tbl-01__th {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-tbl-01__th--own {
  color: #2563EB;
  background: rgba(37,99,235,.06);
  border-top: 3px solid #2563EB;
}
.dp-tbl-01__badge {
  display: block;
  width: fit-content;
  margin: 0 auto 6px;
  padding: 2px 10px;
  font-size: 10.5px;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
  border-radius: 999px;
}
.dp-tbl-01__td--own {
  background: rgba(37,99,235,.06);
  font-weight: 700;
  color: #1A1A24;
}
.dp-tbl-01__row-label {
  text-align: left;
  font-weight: 700;
  color: #1A1A24;
}
.dp-tbl-01__icon {
  width: 18px;
  height: 18px;
}
.dp-tbl-01__icon--yes {
  color: #2563EB;
}
.dp-tbl-01__icon--no {
  color: rgba(26,26,36,.3);
}
</style>
<div class="dp-tbl-01">
  <table class="dp-tbl-01__table">
    <thead>
      <tr>
        <th class="dp-tbl-01__th dp-tbl-01__label-th"></th>
        <th class="dp-tbl-01__th dp-tbl-01__th--own">
          <span class="dp-tbl-01__badge">おすすめ</span>
          自社サービス
        </th>
        <th class="dp-tbl-01__th">A社</th>
        <th class="dp-tbl-01__th">B社</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="dp-tbl-01__row-label">初期費用</th>
        <td class="dp-tbl-01__td--own">0円</td>
        <td>30,000円</td>
        <td>50,000円</td>
      </tr>
      <tr>
        <th class="dp-tbl-01__row-label">24時間サポート</th>
        <td class="dp-tbl-01__td--own">
          <svg class="dp-tbl-01__icon dp-tbl-01__icon--yes" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 12 9 17 20 6"></polyline></svg>
        </td>
        <td>
          <svg class="dp-tbl-01__icon dp-tbl-01__icon--no" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"></line><line x1="6" y1="18" x2="18" y2="6"></line></svg>
        </td>
        <td>
          <svg class="dp-tbl-01__icon dp-tbl-01__icon--yes" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 12 9 17 20 6"></polyline></svg>
        </td>
      </tr>
      <tr>
        <th class="dp-tbl-01__row-label">解約手数料無料</th>
        <td class="dp-tbl-01__td--own">
          <svg class="dp-tbl-01__icon dp-tbl-01__icon--yes" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 12 9 17 20 6"></polyline></svg>
        </td>
        <td>
          <svg class="dp-tbl-01__icon dp-tbl-01__icon--no" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"></line><line x1="6" y1="18" x2="18" y2="6"></line></svg>
        </td>
        <td>
          <svg class="dp-tbl-01__icon dp-tbl-01__icon--no" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="6" x2="18" y2="18"></line><line x1="6" y1="18" x2="18" y2="6"></line></svg>
        </td>
      </tr>
    </tbody>
  </table>
</div>

表・比較

仕様表（定義リスト型）

製品ページのサイズ・素材など詳細スペック表示に

<style>
.dp-tbl-02 {
  width: 100%;
  max-width: 480px;
  border-collapse: collapse;
  font-size: 14px;
}
.dp-tbl-02__row {
  transition: background .2s ease;
}
.dp-tbl-02__row:hover {
  background: #F4F5F7;
}
.dp-tbl-02__th,
.dp-tbl-02__td {
  padding: 14px 10px;
  border-bottom: 1px solid #E2E4E9;
  vertical-align: top;
}
.dp-tbl-02__th {
  width: 38%;
  text-align: left;
  font-weight: 400;
  color: rgba(26,26,36,.55);
}
.dp-tbl-02__td {
  text-align: right;
  font-weight: 700;
  color: #1A1A24;
}
</style>
<table class="dp-tbl-02">
  <tbody>
    <tr class="dp-tbl-02__row">
      <th class="dp-tbl-02__th">サイズ</th>
      <td class="dp-tbl-02__td">幅120 × 奥行80 × 高さ75cm</td>
    </tr>
    <tr class="dp-tbl-02__row">
      <th class="dp-tbl-02__th">重量</th>
      <td class="dp-tbl-02__td">18.5kg</td>
    </tr>
    <tr class="dp-tbl-02__row">
      <th class="dp-tbl-02__th">素材</th>
      <td class="dp-tbl-02__td">天然木（オーク突板）</td>
    </tr>
    <tr class="dp-tbl-02__row">
      <th class="dp-tbl-02__th">耐荷重</th>
      <td class="dp-tbl-02__td">120kg</td>
    </tr>
    <tr class="dp-tbl-02__row">
      <th class="dp-tbl-02__th">保証期間</th>
      <td class="dp-tbl-02__td">お買い上げから3年間</td>
    </tr>
    <tr class="dp-tbl-02__row">
      <th class="dp-tbl-02__th">生産国</th>
      <td class="dp-tbl-02__td">日本</td>
    </tr>
  </tbody>
</table>

表・比較

横スクロール実データ表

列数が多い料金・仕様表をスマホでも見せきる時に

<style>
.dp-tbl-03 {
  width: 100%;
}
.dp-tbl-03__scroll {
  overflow-x: auto;
  border-radius: 10px;
  box-shadow: inset -24px 0 16px -18px rgba(26,26,36,.14);
}
.dp-tbl-03__table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.dp-tbl-03__table th,
.dp-tbl-03__table td {
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #E2E4E9;
}
.dp-tbl-03__table thead th {
  font-weight: 700;
  color: #1A1A24;
  background: #F4F5F7;
}
.dp-tbl-03__table tbody td {
  color: rgba(26,26,36,.75);
}
.dp-tbl-03__table tbody tr:last-child td {
  border-bottom: none;
}
.dp-tbl-03__plan {
  font-weight: 700;
  color: #1A1A24;
}
</style>
<div class="dp-tbl-03">
  <div class="dp-tbl-03__scroll">
    <table class="dp-tbl-03__table">
      <thead>
        <tr>
          <th>プラン</th>
          <th>月額料金</th>
          <th>利用ユーザー数</th>
          <th>ストレージ容量</th>
          <th>サポート対応</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="dp-tbl-03__plan">フリー</td>
          <td>0円</td>
          <td>1名まで</td>
          <td>1GB</td>
          <td>メールのみ</td>
        </tr>
        <tr>
          <td class="dp-tbl-03__plan">スタンダード</td>
          <td>2,980円</td>
          <td>5名まで</td>
          <td>50GB</td>
          <td>平日9時〜18時</td>
        </tr>
        <tr>
          <td class="dp-tbl-03__plan">プロ</td>
          <td>9,800円</td>
          <td>20名まで</td>
          <td>500GB</td>
          <td>24時間365日</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

注意書き

インフォメーション

補足情報の案内に使う青系アラート。左太罫線とiアイコン付き

<style>
.dp-alert-01 {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(37,99,235,.06);
  border-left: 4px solid #2563EB;
  border-radius: 6px;
  padding: 16px 44px 16px 18px;
  max-width: 100%;
  transition: background .2s ease;
}
.dp-alert-01:hover {
  background: rgba(37,99,235,.10);
}
.dp-alert-01__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: #2563EB;
  margin-top: 1px;
}
.dp-alert-01__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dp-alert-01__title {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-alert-01__text {
  font-size: 13px;
  color: rgba(26,26,36,.68);
  line-height: 1.7;
}
.dp-alert-01__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgba(26,26,36,.4);
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.dp-alert-01__close svg {
  width: 14px;
  height: 14px;
}
.dp-alert-01__close:hover {
  background: rgba(37,99,235,.14);
  color: #2563EB;
}
.dp-alert-01__close:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}
</style>
<div class="dp-alert-01">
  <svg class="dp-alert-01__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="9"></circle>
    <line x1="12" y1="11" x2="12" y2="16"></line>
    <line x1="12" y1="8" x2="12" y2="8"></line>
  </svg>
  <div class="dp-alert-01__body">
    <p class="dp-alert-01__title">お知らせ</p>
    <p class="dp-alert-01__text">メンテナンスは毎週水曜 2:00〜4:00に実施しています。</p>
  </div>
  <button type="button" class="dp-alert-01__close" aria-label="閉じる">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <line x1="5" y1="5" x2="19" y2="19"></line>
      <line x1="19" y1="5" x2="5" y2="19"></line>
    </svg>
  </button>
</div>

注意書き

注意アラート

申込・入力前の確認事項を促すアンバー系の注意アラート

<style>
.dp-alert-02 {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.3);
  border-left: 4px solid #F59E0B;
  border-radius: 6px;
  padding: 16px 44px 16px 18px;
  max-width: 100%;
  transition: background .2s ease, border-color .2s ease;
}
.dp-alert-02:hover {
  background: rgba(245,158,11,.13);
  border-color: rgba(245,158,11,.5);
}
.dp-alert-02__icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: #F59E0B;
  margin-top: 1px;
}
.dp-alert-02__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dp-alert-02__title {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-alert-02__text {
  font-size: 13px;
  color: rgba(26,26,36,.68);
  line-height: 1.7;
}
.dp-alert-02__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: rgba(26,26,36,.4);
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.dp-alert-02__close svg {
  width: 14px;
  height: 14px;
}
.dp-alert-02__close:hover {
  background: rgba(245,158,11,.2);
  color: #F59E0B;
}
.dp-alert-02__close:focus-visible {
  outline: 2px solid #F59E0B;
  outline-offset: 2px;
}
</style>
<div class="dp-alert-02">
  <svg class="dp-alert-02__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="M12 3.5 21.5 20.5 2.5 20.5Z"></path>
    <line x1="12" y1="9.5" x2="12" y2="14.5"></line>
    <line x1="12" y1="17.5" x2="12" y2="17.5"></line>
  </svg>
  <div class="dp-alert-02__body">
    <p class="dp-alert-02__title">お申し込み前にご確認ください</p>
    <p class="dp-alert-02__text">キャンセルは開始日の7日前まで無料です。それ以降は所定のキャンセル料が発生しますので、日程はお間違えのないようご確認ください。</p>
  </div>
  <button type="button" class="dp-alert-02__close" aria-label="閉じる">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <line x1="5" y1="5" x2="19" y2="19"></line>
      <line x1="19" y1="5" x2="5" y2="19"></line>
    </svg>
  </button>
</div>

注意書き

完了アラート

手続き完了を知らせるグリーン系アラート。次の導線リンク付き

<style>
.dp-alert-03 {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(22,163,74,.07);
  border-left: 4px solid #16A34A;
  border-radius: 6px;
  padding: 16px 18px;
  max-width: 100%;
}
.dp-alert-03__icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: #16A34A;
  margin-top: 1px;
}
.dp-alert-03__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dp-alert-03__title {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-alert-03__text {
  font-size: 13px;
  color: rgba(26,26,36,.68);
  line-height: 1.7;
}
.dp-alert-03__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #16A34A;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: border-color .2s ease, opacity .2s ease;
}
.dp-alert-03__link:hover,
.dp-alert-03__link:focus-visible {
  border-color: #16A34A;
  opacity: .82;
}
.dp-alert-03__link:focus-visible {
  outline: 2px solid #16A34A;
  outline-offset: 3px;
}
.dp-alert-03__link svg {
  width: 14px;
  height: 14px;
  transition: transform .2s ease;
}
.dp-alert-03__link:hover svg,
.dp-alert-03__link:focus-visible svg {
  transform: translateX(3px);
}
</style>
<div class="dp-alert-03">
  <svg class="dp-alert-03__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <circle cx="12" cy="12" r="9"></circle>
    <polyline points="8 12.5 11 15.5 16 9"></polyline>
  </svg>
  <div class="dp-alert-03__body">
    <p class="dp-alert-03__title">お申し込みが完了しました</p>
    <p class="dp-alert-03__text">確認メールを登録アドレス宛にお送りしました。当日の詳細はマイページでご確認いただけます。</p>
    <a href="#" class="dp-alert-03__link">
      マイページで確認する
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="13 6 19 12 13 18"></polyline></svg>
    </a>
  </div>
</div>

注意書き

POINTボックス

記事本文の要点を目立たせるPOINT枠。上辺にラベルが乗る

<style>
.dp-alert-04 {
  position: relative;
  margin-top: 14px;
  border: 1px solid #E2E4E9;
  border-radius: 10px;
  background: #FFFFFF;
  padding: 22px 20px 18px;
  max-width: 100%;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.dp-alert-04:hover,
.dp-alert-04:focus-visible {
  border-color: #2563EB;
  box-shadow: 0 8px 24px rgba(26,26,36,.12);
}
.dp-alert-04:focus-visible {
  outline: none;
}
.dp-alert-04__tab {
  position: absolute;
  top: -14px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg,#2563EB,#7C3AED);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}
.dp-alert-04__tab svg {
  width: 13px;
  height: 13px;
}
.dp-alert-04__title {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A24;
  margin-bottom: 6px;
}
.dp-alert-04__text {
  font-size: 13px;
  color: rgba(26,26,36,.68);
  line-height: 1.8;
}
</style>
<div class="dp-alert-04" tabindex="0">
  <span class="dp-alert-04__tab">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><line x1="12" y1="8" x2="12" y2="8"></line><line x1="12" y1="11" x2="12" y2="16"></line></svg>
    POINT
  </span>
  <p class="dp-alert-04__title">無料プランでもAPI連携は利用できます</p>
  <p class="dp-alert-04__text">上限は月1,000件までですが、個人開発や検証用途であれば十分な回数です。上限に達した場合は自動で有料プランへの切り替えを案内する通知が届きます。</p>
</div>

バッジ

ステータスバッジ

商品一覧やカードにNEW・人気などの状態を示す

<style>
.dp-badge-01 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dp-badge-01__item {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dp-badge-01__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 26, 36, 0.12);
}
.dp-badge-01__item--new {
  background: #2563EB;
}
.dp-badge-01__item--popular {
  background: #F59E0B;
}
.dp-badge-01__item--low {
  background: #1A1A24;
}
</style>
<div class="dp-badge-01">
  <span class="dp-badge-01__item dp-badge-01__item--new">NEW</span>
  <span class="dp-badge-01__item dp-badge-01__item--popular">人気</span>
  <span class="dp-badge-01__item dp-badge-01__item--low">残りわずか</span>
</div>

バッジ

リボンバッジ

カード左上に載せて限定・特典の訴求を目立たせる

<style>
.dp-badge-02 {
  position: relative;
  width: 220px;
  max-width: 100%;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #E2E4E9;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(26, 26, 36, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dp-badge-02:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26, 26, 36, 0.12);
}
.dp-badge-02__ribbon {
  position: absolute;
  top: 18px;
  left: -38px;
  width: 150px;
  padding: 5px 0;
  background: #F59E0B;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  transform: rotate(-45deg);
  box-shadow: 0 1px 2px rgba(26, 26, 36, 0.06);
}
.dp-badge-02__thumb {
  height: 90px;
  background: linear-gradient(135deg, #2563EB, #7C3AED);
}
.dp-badge-02__body {
  padding: 12px 14px 16px;
}
.dp-badge-02__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #1A1A24;
}
.dp-badge-02__price {
  margin: 4px 0 0;
  font-size: 12px;
  color: #1A1A24;
  opacity: 0.6;
}
</style>
<div class="dp-badge-02">
  <span class="dp-badge-02__ribbon">限定</span>
  <div class="dp-badge-02__thumb"></div>
  <div class="dp-badge-02__body">
    <p class="dp-badge-02__title">プレミアムプラン</p>
    <p class="dp-badge-02__price">月額 9,800円〜</p>
  </div>
</div>

バッジ

通知カウントバッジ

未読件数やお知らせの有無をアイコンに重ねて示す

<style>
.dp-badge-03 {
  position: relative;
  display: inline-flex;
}
.dp-badge-03__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #FFFFFF;
  color: #1A1A24;
  border: 1px solid #E2E4E9;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.dp-badge-03__btn:hover {
  background: #F4F5F7;
  box-shadow: 0 1px 2px rgba(26, 26, 36, 0.06);
}
.dp-badge-03__btn:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}
.dp-badge-03__icon {
  width: 22px;
  height: 22px;
}
.dp-badge-03__count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F59E0B;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
}
</style>
<span class="dp-badge-03">
  <button class="dp-badge-03__btn" type="button" aria-label="通知">
    <svg class="dp-badge-03__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 8a6 6 0 0 1 12 0v4l2 4H4l2-4Z"></path>
      <path d="M10 20a2 2 0 0 0 4 0"></path>
    </svg>
  </button>
  <span class="dp-badge-03__count">3</span>
</span>

バッジ

タグチップ一覧

記事やコラムのカテゴリ・キーワードを一覧で示す

<style>
.dp-badge-04 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dp-badge-04__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: #F4F5F7;
  color: #1A1A24;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid #E2E4E9;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dp-badge-04__tag:hover {
  background: #2563EB;
  color: #FFFFFF;
  border-color: #2563EB;
}
.dp-badge-04__tag:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}
</style>
<div class="dp-badge-04">
  <a class="dp-badge-04__tag" href="#">#AI活用</a>
  <a class="dp-badge-04__tag" href="#">#業務効率化</a>
  <a class="dp-badge-04__tag" href="#">#Claude</a>
  <a class="dp-badge-04__tag" href="#">#セミナー</a>
  <a class="dp-badge-04__tag" href="#">#事例</a>
</div>

区切り線

グラデーション罫線

セクション間をさりげなく仕切る繊細な区切り線

<style>
.dp-sep-01 {
  width: 100%;
  height: 1px;
  margin: 32px 0;
  border: none;
  background: linear-gradient(90deg, rgba(26, 26, 36, 0) 0%, rgba(26, 26, 36, 0.55) 50%, rgba(26, 26, 36, 0) 100%);
  transition: background 0.3s ease;
}
.dp-sep-01:hover {
  background: linear-gradient(90deg, rgba(37, 99, 235, 0) 0%, rgba(37, 99, 235, 0.6) 50%, rgba(37, 99, 235, 0) 100%);
}
</style>
<hr class="dp-sep-01">

区切り線

ラベル入り区切り線

コンテンツの分類名を示しながらセクションを分ける

<style>
.dp-sep-02 {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 32px 0;
}
.dp-sep-02::before,
.dp-sep-02::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E2E4E9;
  transition: background 0.2s ease;
}
.dp-sep-02:hover::before,
.dp-sep-02:hover::after {
  background: #2563EB;
}
.dp-sep-02__label {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1A1A24;
  opacity: 0.55;
  white-space: nowrap;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.dp-sep-02:hover .dp-sep-02__label {
  color: #2563EB;
  opacity: 1;
}
</style>
<div class="dp-sep-02">
  <span class="dp-sep-02__label">SERVICE</span>
</div>

区切り線

斜めカット区切り帯

背景色が切り替わるセクション境界に動きを出す

<style>
.dp-sep-03 {
  position: relative;
  width: 100%;
  height: 110px;
  overflow: hidden;
  border-radius: 10px;
}
.dp-sep-03__top {
  position: absolute;
  inset: 0;
  background: #F4F5F7;
}
.dp-sep-03__bottom {
  position: absolute;
  inset: 0;
  background: #1A1A24;
  clip-path: polygon(0 58%, 100% 32%, 100% 100%, 0 100%);
  transition: filter 0.2s ease;
}
.dp-sep-03:hover .dp-sep-03__bottom {
  filter: brightness(1.35);
}
.dp-sep-03__label {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  padding-bottom: 16px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
</style>
<div class="dp-sep-03">
  <div class="dp-sep-03__top"></div>
  <div class="dp-sep-03__bottom"></div>
  <p class="dp-sep-03__label">NEXT SECTION</p>
</div>

区切り線

ドット区切り

余白の多いセクション間にさりげない間を作る

<style>
.dp-sep-04 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 0;
}
.dp-sep-04__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #E2E4E9;
  transition: transform 0.2s ease, background 0.2s ease;
}
.dp-sep-04__dot--center {
  width: 8px;
  height: 8px;
  background: #2563EB;
}
.dp-sep-04:hover .dp-sep-04__dot {
  transform: scale(1.3);
}
.dp-sep-04:hover .dp-sep-04__dot--center {
  transform: scale(1.5);
}
</style>
<div class="dp-sep-04">
  <span class="dp-sep-04__dot"></span>
  <span class="dp-sep-04__dot dp-sep-04__dot--center"></span>
  <span class="dp-sep-04__dot"></span>
</div>

UI小物

タブ切り替え

3つのタブでコンテンツを切り替える。CSSのみで動作

<style>
.dp-ui-01 {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.dp-ui-01__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.dp-ui-01__list {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #E2E4E9;
  flex-wrap: wrap;
}
.dp-ui-01__tab {
  cursor: pointer;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(26,26,36,.55);
  border-radius: 6px 6px 0 0;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.dp-ui-01__tab:hover {
  color: #2563EB;
  background: rgba(37,99,235,.06);
}
.dp-ui-01__panels {
  padding: 20px 4px 4px;
}
.dp-ui-01__panel {
  display: none;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(26,26,36,.68);
}
#dp-ui-01-t1:checked ~ .dp-ui-01__list .dp-ui-01__tab--1,
#dp-ui-01-t2:checked ~ .dp-ui-01__list .dp-ui-01__tab--2,
#dp-ui-01-t3:checked ~ .dp-ui-01__list .dp-ui-01__tab--3 {
  color: #2563EB;
  background: rgba(37,99,235,.08);
  box-shadow: inset 0 -2px 0 #2563EB;
}
#dp-ui-01-t1:checked ~ .dp-ui-01__panels .dp-ui-01__panel--1,
#dp-ui-01-t2:checked ~ .dp-ui-01__panels .dp-ui-01__panel--2,
#dp-ui-01-t3:checked ~ .dp-ui-01__panels .dp-ui-01__panel--3 {
  display: block;
}
#dp-ui-01-t1:focus-visible ~ .dp-ui-01__list .dp-ui-01__tab--1,
#dp-ui-01-t2:focus-visible ~ .dp-ui-01__list .dp-ui-01__tab--2,
#dp-ui-01-t3:focus-visible ~ .dp-ui-01__list .dp-ui-01__tab--3 {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}
</style>
<div class="dp-ui-01">
  <input type="radio" name="dp-ui-01-tab" id="dp-ui-01-t1" class="dp-ui-01__input" checked>
  <input type="radio" name="dp-ui-01-tab" id="dp-ui-01-t2" class="dp-ui-01__input">
  <input type="radio" name="dp-ui-01-tab" id="dp-ui-01-t3" class="dp-ui-01__input">
  <div class="dp-ui-01__list">
    <label for="dp-ui-01-t1" class="dp-ui-01__tab dp-ui-01__tab--1">サービス概要</label>
    <label for="dp-ui-01-t2" class="dp-ui-01__tab dp-ui-01__tab--2">料金プラン</label>
    <label for="dp-ui-01-t3" class="dp-ui-01__tab dp-ui-01__tab--3">導入の流れ</label>
  </div>
  <div class="dp-ui-01__panels">
    <p class="dp-ui-01__panel dp-ui-01__panel--1">初期費用0円、月額9,800円から始められるクラウド型の予約管理サービスです。予約受付から顧客管理までひとつの画面で完結します。</p>
    <p class="dp-ui-01__panel dp-ui-01__panel--2">スタンダードプランは月額9,800円。店舗が増えるごとに1店舗+3,000円で追加でき、契約期間の縛りはありません。</p>
    <p class="dp-ui-01__panel dp-ui-01__panel--3">お申し込み後、初期設定は最短3営業日で完了します。専任担当が設定から運用開始までサポートします。</p>
  </div>
</div>

UI小物

パンくずリスト

現在地までの階層を示すパンくず。区切りは矢印SVG

<style>
.dp-ui-02 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  max-width: 100%;
}
.dp-ui-02__link {
  color: rgba(26,26,36,.6);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 6px;
  transition: color .2s ease, background .2s ease;
}
.dp-ui-02__link:hover {
  color: #2563EB;
  background: rgba(37,99,235,.08);
}
.dp-ui-02__link:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}
.dp-ui-02__sep {
  width: 14px;
  height: 14px;
  color: rgba(26,26,36,.3);
  flex: 0 0 auto;
}
.dp-ui-02__current {
  color: rgba(26,26,36,.45);
  padding: 2px 4px;
}
</style>
<nav class="dp-ui-02" aria-label="パンくずリスト">
  <a href="#" class="dp-ui-02__link">ホーム</a>
  <svg class="dp-ui-02__sep" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 6 15 12 9 18"></polyline></svg>
  <a href="#" class="dp-ui-02__link">サービス</a>
  <svg class="dp-ui-02__sep" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 6 15 12 9 18"></polyline></svg>
  <span class="dp-ui-02__current" aria-current="page">料金プラン</span>
</nav>

UI小物

ページネーション

現在ページを塗りつぶしで示すページ送りUI。前後は矢印SVG

<style>
.dp-ui-03 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 100%;
}
.dp-ui-03__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 4px;
  border-radius: 6px;
  border: 1px solid #E2E4E9;
  background: #FFFFFF;
  color: #1A1A24;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
a.dp-ui-03__link:hover {
  border-color: #2563EB;
  color: #2563EB;
}
.dp-ui-03__link:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}
.dp-ui-03__link[aria-current="page"] {
  background: #2563EB;
  border-color: #2563EB;
  color: #FFFFFF;
}
.dp-ui-03__link svg {
  width: 16px;
  height: 16px;
}
.dp-ui-03__ellipsis {
  padding: 0 4px;
  color: rgba(26,26,36,.4);
  font-size: 13px;
}
.dp-ui-03__link[aria-disabled="true"] {
  opacity: .4;
  pointer-events: none;
}
</style>
<nav class="dp-ui-03" aria-label="ページネーション">
  <a href="#" class="dp-ui-03__link" aria-disabled="true" tabindex="-1" aria-label="前のページ">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 6 9 12 15 18"></polyline></svg>
  </a>
  <span class="dp-ui-03__link" aria-current="page">1</span>
  <a href="#" class="dp-ui-03__link">2</a>
  <a href="#" class="dp-ui-03__link">3</a>
  <span class="dp-ui-03__ellipsis">…</span>
  <a href="#" class="dp-ui-03__link">12</a>
  <a href="#" class="dp-ui-03__link" aria-label="次のページ">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 6 15 12 9 18"></polyline></svg>
  </a>
</nav>

UI小物

手続きステップ進捗

3ステップの申込み進捗。完了はチェック、接続線で経過を表現

<style>
.dp-ui-04 {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}
.dp-ui-04__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.dp-ui-04__circle {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  border: 2px solid #E2E4E9;
  color: rgba(26,26,36,.4);
  background: #FFFFFF;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dp-ui-04__step--done .dp-ui-04__circle {
  background: #2563EB;
  border-color: #2563EB;
  color: #FFFFFF;
}
.dp-ui-04__step:hover .dp-ui-04__circle,
.dp-ui-04__step:focus-visible .dp-ui-04__circle {
  transform: scale(1.08);
  box-shadow: 0 1px 2px rgba(26,26,36,.06);
}
.dp-ui-04__circle svg {
  width: 16px;
  height: 16px;
}
.dp-ui-04__label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(26,26,36,.55);
  white-space: nowrap;
}
.dp-ui-04__step--done .dp-ui-04__label {
  color: #1A1A24;
}
.dp-ui-04__line {
  flex: 1 1 auto;
  height: 2px;
  background: #E2E4E9;
  margin: 15px 6px 0;
  border-radius: 999px;
}
.dp-ui-04__line--done {
  background: #2563EB;
}
</style>
<div class="dp-ui-04">
  <div class="dp-ui-04__step dp-ui-04__step--done" tabindex="0">
    <span class="dp-ui-04__circle">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 12.5 10 16.5 18 8"></polyline></svg>
    </span>
    <span class="dp-ui-04__label">お申し込み</span>
  </div>
  <span class="dp-ui-04__line dp-ui-04__line--done"></span>
  <div class="dp-ui-04__step dp-ui-04__step--done" tabindex="0">
    <span class="dp-ui-04__circle">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 12.5 10 16.5 18 8"></polyline></svg>
    </span>
    <span class="dp-ui-04__label">本人確認</span>
  </div>
  <span class="dp-ui-04__line"></span>
  <div class="dp-ui-04__step" tabindex="0">
    <span class="dp-ui-04__circle">3</span>
    <span class="dp-ui-04__label">利用開始</span>
  </div>
</div>