Cookie / 規約 · Cookie / Legal · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Utility › Cookie / Legal

Cookie / 規約

Cookie 同意、利用規約、プライバシーポリシーの定型ブロック。

4

Patterns

Utility

Group

isValid=0

Verified

CSS

Animation

01

Cookie — Bottom Consent Banner

cookie-banner-bottom

Copy
Link

🍪 Cookie のご利用について

サイト体験の向上と利用状況の分析のため Cookie を使用しています。詳細を見る

必要なものだけ
すべて受け入れる
  • パターン名: Cookie — Bottom Consent Banner
  • 概要: Dark cookie consent banner with copy on the left and accept/decline buttons on the right.
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 1180px、主要ブロック group, group, group, paragraph, paragraph, buttons, button, button
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Cookie / Legalをリッチに見せるカバー/カード強調版 / Cookie / Legalをコーポレート向けに整える情報密度高め版 / Cookie / Legalをカジュアルに見せるアイコン/ラベル強調版 / Cookie / Legalをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cookie-banner-bottom"} /-->

CSS:
.section-cookie-banner-bottom { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cookie-banner-bottom').forEach((el) => el.dataset.ready = 'true');

02

Cookie — Compact Corner Card

cookie-corner-card

Copy
Link

🍪

Cookie をご利用いただきます

必要最低限の Cookie でサイトを正常に動作させています。分析 Cookie は任意です。

すべて許可
必要なもののみ
  • パターン名: Cookie — Compact Corner Card
  • 概要: Compact corner-style cookie consent card with 2 action buttons.
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px、推奨コンテンツ幅 480px、主要ブロック group, group, paragraph, paragraph, paragraph, buttons, button, button
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Cookie / Legalをリッチに見せるカバー/カード強調版 / Cookie / Legalをコーポレート向けに整える情報密度高め版 / Cookie / Legalをカジュアルに見せるアイコン/ラベル強調版 / Cookie / Legalをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/cookie-corner-card"} /-->

CSS:
.section-cookie-corner-card { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cookie-corner-card').forEach((el) => el.dataset.ready = 'true');

03

Legal — Terms of Service Article

legal-terms-block

Copy
Link

LEGAL

利用規約

最終更新日: 2026 年 4 月 27 日

第 1 条 (適用)

本規約は、当社が提供するすべてのサービスの利用に関する条件を定めるものであり、ユーザーと当社との間のサービスの利用に関わる一切の関係に適用されるものとします。

第 2 条 (利用登録)

本サービスの利用を希望する者は、本規約に同意の上、当社の定める方法により利用登録を申請するものとします。当社は、登録申請者が以下の事由に該当する場合、登録申請を承認しないことがあります。

第 3 条 (禁止事項)

ユーザーは、本サービスの利用にあたり、法令または公序良俗に違反する行為、犯罪行為に関連する行為、当社のサーバーまたはネットワークの機能を破壊したり、妨害したりする行為等を行ってはならないものとします。

  • パターン名: Legal — Terms of Service Article
  • 概要: Long-form terms-of-service article block with numbered sections.
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 720px、主要ブロック group, paragraph, heading, paragraph, heading, paragraph, heading, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Cookie / Legalをリッチに見せるカバー/カード強調版 / Cookie / Legalをコーポレート向けに整える情報密度高め版 / Cookie / Legalをカジュアルに見せるアイコン/ラベル強調版 / Cookie / Legalをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/legal-terms-block"} /-->

CSS:
.section-legal-terms-block { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-legal-terms-block').forEach((el) => el.dataset.ready = 'true');

04

Legal — 3-Pillar Document Links

legal-three-pillar

Copy
Link

🔒

プライバシーポリシー

個人情報の取扱いについて詳しくご説明しています。

📜

利用規約

サービスご利用時に適用される規約をご確認ください。

🍪

Cookie ポリシー

使用する Cookie の種類と目的を記載しています。

  • パターン名: Legal — 3-Pillar Document Links
  • 概要: Three legal document summaries (privacy / terms / cookie) in 3 columns.
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Cookie / Legalをリッチに見せるカバー/カード強調版 / Cookie / Legalをコーポレート向けに整える情報密度高め版 / Cookie / Legalをカジュアルに見せるアイコン/ラベル強調版 / Cookie / Legalをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/legal-three-pillar"} /-->

CSS:
.section-legal-three-pillar { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-legal-three-pillar').forEach((el) => el.dataset.ready = 'true');