Checklist Builder

記事に貼れるチェックリストを作成する。

記事内やLPに置けるチェックリストを、ブラウザ上で編集できます。確認項目を整えて、HTMLとしてコピーし、小さく試せる形にします。

What you can do

・タイトル、説明文、補足文を編集
・チェック項目を追加・削除
・HTML + CSSをまとめてコピー

Edit

入力内容

TitleDescription

Items

Item 1

Item 2

Item 3

Note

Preset

Standard記事内の確認リストとして使いやすい基本形。Soft本文中に自然に置きやすい、やわらかい見た目。Minimal装飾を抑えた、シンプルなチェックリスト。

Preview

表示イメージ

Checklist

設置前の確認チェックリスト

記事内やLPに置けるチェックリストです。読者が確認しながら進める小さな導線として使えます。

記事の目的とCTAの内容が合っている
リンク先URLに誤りがない
スマホ表示で読みやすい

必要な項目だけ残して、記事の内容に合わせて調整してください。

使いやすい場面

・記事の最後に、確認項目をまとめたいとき
・手順記事や準備記事で、抜け漏れを減らしたいとき
・CTAの前に、読者が自分の状態を確認できる流れを作りたいとき

設置前の確認ポイント

・項目数が多すぎないか確認する
・記事内容とチェック項目が合っているか確認する
・WordPressでは下書きで表示を確認してから公開する

HTML

生成されたHTML

HTMLとCSSをまとめてコピーできます。WordPressの場合は、カスタムHTMLブロックで試してください。

<style>
.pkz-checklist {
  box-sizing: border-box;
  max-width: 760px;
  margin: 32px auto;
  padding: 28px;
  border: 1px solid #7c9a92;
  border-radius: 14px;
  background: #f4f3ef;
  color: #1c1917;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.pkz-checklist__label {
  margin: 0 0 10px;
  color: #7c9a92;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pkz-checklist__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
}

.pkz-checklist__description {
  margin: 14px 0 0;
  color: #57534e;
  font-size: 15px;
  line-height: 1.8;
}

.pkz-checklist__items {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.pkz-checklist__item {
  padding: 12px 14px;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  background: #ffffff;
  color: #44403c;
  font-size: 14px;
  line-height: 1.7;
}

.pkz-checklist__control {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}

.pkz-checklist__checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pkz-checklist__mark {
  position: relative;
  display: inline-flex;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid #7c9a92;
  border-radius: 999px;
  background: #ffffff;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pkz-checklist__mark::after {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  opacity: 0;
  transform: rotate(-45deg) translate(1px, -1px);
  transition: opacity 0.2s ease;
}

.pkz-checklist__checkbox:checked + .pkz-checklist__mark {
  border-color: #7c9a92;
  background: #7c9a92;
}

.pkz-checklist__checkbox:checked + .pkz-checklist__mark::after {
  opacity: 1;
}

.pkz-checklist__checkbox:focus-visible + .pkz-checklist__mark {
  outline: 3px solid rgba(124, 154, 146, 0.24);
  outline-offset: 2px;
}

.pkz-checklist__control:hover .pkz-checklist__mark {
  transform: translateY(-1px);
}

.pkz-checklist__text {
  flex: 1;
}

.pkz-checklist__note {
  margin: 16px 0 0;
  color: #78716c;
  font-size: 12px;
  line-height: 1.7;
}
</style>

<section class="pkz-checklist" aria-label="チェックリスト">
  <p class="pkz-checklist__label">Checklist</p>
  <h2 class="pkz-checklist__title">設置前の確認チェックリスト</h2>
  <p class="pkz-checklist__description">記事内やLPに置けるチェックリストです。読者が確認しながら進める小さな導線として使えます。</p>
  <ul class="pkz-checklist__items">
    <li class="pkz-checklist__item">
      <label class="pkz-checklist__control">
        <input class="pkz-checklist__checkbox" type="checkbox">
        <span class="pkz-checklist__mark" aria-hidden="true"></span>
        <span class="pkz-checklist__text">記事の目的とCTAの内容が合っている</span>
      </label>
    </li>
    <li class="pkz-checklist__item">
      <label class="pkz-checklist__control">
        <input class="pkz-checklist__checkbox" type="checkbox">
        <span class="pkz-checklist__mark" aria-hidden="true"></span>
        <span class="pkz-checklist__text">リンク先URLに誤りがない</span>
      </label>
    </li>
    <li class="pkz-checklist__item">
      <label class="pkz-checklist__control">
        <input class="pkz-checklist__checkbox" type="checkbox">
        <span class="pkz-checklist__mark" aria-hidden="true"></span>
        <span class="pkz-checklist__text">スマホ表示で読みやすい</span>
      </label>
    </li>
  </ul>
  <p class="pkz-checklist__note">必要な項目だけ残して、記事の内容に合わせて調整してください。</p>
</section>

Templates

型から考える

チェックリストやCTAパーツなど、記事改善や導線設計に使える小さな型を確認できます。

テンプレートを見る

CTA

CTAも作成する

チェックリストの後に置くCTAボックスも、HTMLとして作成できます。

CTAボックスを作成する

Contact

導線を見直す

記事・チェックリスト・CTAまでの流れを見直したい場合は、概要をお送りください。

問い合わせページへ