白蓮堂

Cookie / 規約 · Cookie / Legal · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Utility › Cookie / Legal

Cookie / 規約

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

70

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');

05

Reference Complete — cookie-legal 01 Sticky Entry

reference-complete-cookie-legal-01-sticky-entry-unicell

Copy
Link
SANKOU sampling inspired hero image

Sampled Site

17101 / Unicell

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

詳しく見る
  • パターン名: Reference Complete — cookie-legal 01 Sticky Entry
  • 概要: 参照サンプル再確認から追加したcookie-legal向け部品。固定導線つきの大判ファーストビュー。
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 25% / 75%、推奨コンテンツ幅 52283px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Cookie / Legalをミニマルに見せる余白重視版 / Cookie / Legalをリッチに見せるカバー/カード強調版 / Cookie / Legalをコーポレート向けに整える情報密度高め版 / Cookie / Legalをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cookie-legal-01-sticky-entry-unicell"} /-->

CSS:
.section-reference-complete-cookie-legal-01-sticky-entry-unicell { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cookie-legal-01-sticky-entry-unicell').forEach((el) => el.dataset.ready = 'true');

06

Reference Complete — cookie-legal 02 Editorial Issue

reference-complete-cookie-legal-02-editorial-issue-kikyougaoka

Copy
Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

  • 背景を伝える
  • 選ぶ理由を示す
  • 次の行動へ進める
記事を見る
  • パターン名: Reference Complete — cookie-legal 02 Editorial Issue
  • 概要: 参照サンプル再確認から追加したcookie-legal向け部品。雑誌的な見出しと導入文の編集レイアウト。
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 18122px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Cookie / Legalをリッチに見せるカバー/カード強調版 / Cookie / Legalをコーポレート向けに整える情報密度高め版 / Cookie / Legalをカジュアルに見せるアイコン/ラベル強調版 / Cookie / Legalをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cookie-legal-02-editorial-issue-kikyougaoka"} /-->

CSS:
.section-reference-complete-cookie-legal-02-editorial-issue-kikyougaoka { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cookie-legal-02-editorial-issue-kikyougaoka').forEach((el) => el.dataset.ready = 'true');

07

Reference Complete — cookie-legal 03 Brand Index

reference-complete-cookie-legal-03-brand-index-serious-ceramic

Copy
Link

Card Flow

迷わない比較カード

Serious Ceramic から抽出した、選択を促すカード群。

01

見つける

導線を小さな判断単位に分解します。

02

選ぶ

導線を小さな判断単位に分解します。

03

進む

導線を小さな判断単位に分解します。

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

CSS:
.section-reference-complete-cookie-legal-03-brand-index-serious-ceramic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cookie-legal-03-brand-index-serious-ceramic').forEach((el) => el.dataset.ready = 'true');

08

Reference Complete — cookie-legal 04 Recruit Story

reference-complete-cookie-legal-04-recruit-story-koba-clinic

Copy
Link

Split Story

写真と要点で信頼を作る

Koba Clinic の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

split layout image
  • パターン名: Reference Complete — cookie-legal 04 Recruit Story
  • 概要: 参照サンプル再確認から追加したcookie-legal向け部品。採用・企業紹介に使える人物/思想の分割構成。
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 18144px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Cookie / Legalをリッチに見せるカバー/カード強調版 / Cookie / Legalをコーポレート向けに整える情報密度高め版 / Cookie / Legalをカジュアルに見せるアイコン/ラベル強調版 / Cookie / Legalをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cookie-legal-04-recruit-story-koba-clinic"} /-->

CSS:
.section-reference-complete-cookie-legal-04-recruit-story-koba-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cookie-legal-04-recruit-story-koba-clinic').forEach((el) => el.dataset.ready = 'true');

09

Reference Complete — cookie-legal 05 Commerce Compare

reference-complete-cookie-legal-05-commerce-compare-obunko

Copy
Link

Collection Selector

Obunko の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

product selector image

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

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

CSS:
.section-reference-complete-cookie-legal-05-commerce-compare-obunko { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cookie-legal-05-commerce-compare-obunko').forEach((el) => el.dataset.ready = 'true');

10

Reference Complete — cookie-legal 06 Timeline Proof

reference-complete-cookie-legal-06-timeline-proof-fumino

Copy
Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

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

CSS:
.section-reference-complete-cookie-legal-06-timeline-proof-fumino { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cookie-legal-06-timeline-proof-fumino').forEach((el) => el.dataset.ready = 'true');

11

Reference Complete — cookie-legal 07 Gallery Led

reference-complete-cookie-legal-07-gallery-led-norikura-hanabi

Copy
Link
gallery primary image
gallery sub image

Detail

gallery sub image
  • パターン名: Reference Complete — cookie-legal 07 Gallery Led
  • 概要: 参照サンプル再確認から追加したcookie-legal向け部品。写真量の多い商材を見せるギャラリー導線。
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 18227px、主要ブロック group, columns, column, image, column, image, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Cookie / Legalをリッチに見せるカバー/カード強調版 / Cookie / Legalをコーポレート向けに整える情報密度高め版 / Cookie / Legalをカジュアルに見せるアイコン/ラベル強調版 / Cookie / Legalをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cookie-legal-07-gallery-led-norikura-hanabi"} /-->

CSS:
.section-reference-complete-cookie-legal-07-gallery-led-norikura-hanabi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cookie-legal-07-gallery-led-norikura-hanabi').forEach((el) => el.dataset.ready = 'true');

12

Reference Complete — cookie-legal 08 Dashboard Proof

reference-complete-cookie-legal-08-dashboard-proof-land-sapporo

Copy
Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

  • パターン名: Reference Complete — cookie-legal 08 Dashboard Proof
  • 概要: 参照サンプル再確認から追加したcookie-legal向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 18188px、主要ブロック group, paragraph, heading, columns, column, group, 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/reference-complete-cookie-legal-08-dashboard-proof-land-sapporo"} /-->

CSS:
.section-reference-complete-cookie-legal-08-dashboard-proof-land-sapporo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cookie-legal-08-dashboard-proof-land-sapporo').forEach((el) => el.dataset.ready = 'true');

13

Reference Complete — cookie-legal 09 Contact Ready

reference-complete-cookie-legal-09-contact-ready-gaaboo

Copy
Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

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

CSS:
.section-reference-complete-cookie-legal-09-contact-ready-gaaboo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cookie-legal-09-contact-ready-gaaboo').forEach((el) => el.dataset.ready = 'true');

14

Reference Complete — cookie-legal 10 Mobile Rail

reference-complete-cookie-legal-10-mobile-rail-dac-web

Copy
Link

Dac

About

Works

Journal

Contact

Reserve
  • パターン名: Reference Complete — cookie-legal 10 Mobile Rail
  • 概要: 参照サンプル再確認から追加したcookie-legal向け部品。スマホ閲覧で要点を縦に追えるレール型。
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 18290px、主要ブロック group, columns, column, heading, column, columns, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Cookie / Legalをミニマルに見せる余白重視版 / Cookie / Legalをリッチに見せるカバー/カード強調版 / Cookie / Legalをコーポレート向けに整える情報密度高め版 / Cookie / Legalをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cookie-legal-10-mobile-rail-dac-web"} /-->

CSS:
.section-reference-complete-cookie-legal-10-mobile-rail-dac-web { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cookie-legal-10-mobile-rail-dac-web').forEach((el) => el.dataset.ready = 'true');

15

SANKOU100 — 029 Chiikawa Pocket

sankou100-029-chiikawa-pocket

Copy
Link

数字で納得させる

49%

改善率

5分

短縮

303

導入数

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

CSS:
.section-sankou100-029-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-029-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');

16

SANKOU100 — 069 Kikyougaoka

sankou100-069-kikyougaoka

Copy
Link

数字で納得させる

89%

改善率

9分

短縮

583

導入数

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

CSS:
.section-sankou100-069-kikyougaoka { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-069-kikyougaoka').forEach((el) => el.dataset.ready = 'true');

17

SANKOU Max — cookie-legal 01 Kagami

sankoumax-cookie-legal-01-kagami

Copy
Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

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

CSS:
.section-sankoumax-cookie-legal-01-kagami { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-01-kagami').forEach((el) => el.dataset.ready = 'true');

18

SANKOU Max — cookie-legal 02 Antscr

sankoumax-cookie-legal-02-antscr

Copy
Link
gallery primary image
gallery sub image

Detail

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

CSS:
.section-sankoumax-cookie-legal-02-antscr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-02-antscr').forEach((el) => el.dataset.ready = 'true');

19

SANKOU Max — cookie-legal 03 Meisei Kg

sankoumax-cookie-legal-03-meisei-kg

Copy
Link

People Line

person a

Director

person b

Planner

person c

Designer

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

CSS:
.section-sankoumax-cookie-legal-03-meisei-kg { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-03-meisei-kg').forEach((el) => el.dataset.ready = 'true');

20

SANKOU Max — cookie-legal 04 Iamwithyou

sankoumax-cookie-legal-04-iamwithyou

Copy
Link

4104

Iamwithyou

静かな思想を置く

余白、短文、少ない選択肢で印象を残します。

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

CSS:
.section-sankoumax-cookie-legal-04-iamwithyou { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-04-iamwithyou').forEach((el) => el.dataset.ready = 'true');

21

SANKOU Max — cookie-legal 05 Depsoa

sankoumax-cookie-legal-05-depsoa

Copy
Link
SANKOU sampling inspired hero image

Sampled Site

4105 / Depsoa

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

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

CSS:
.section-sankoumax-cookie-legal-05-depsoa { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-05-depsoa').forEach((el) => el.dataset.ready = 'true');

22

SANKOU Max — cookie-legal 06 Nothing Tech

sankoumax-cookie-legal-06-nothing-tech

Copy
Link

Split Story

写真と要点で信頼を作る

Nothing Tech の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

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

CSS:
.section-sankoumax-cookie-legal-06-nothing-tech { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-06-nothing-tech').forEach((el) => el.dataset.ready = 'true');

23

SANKOU Max — cookie-legal 07 Upvege

sankoumax-cookie-legal-07-upvege

Copy
Link

Card Flow

迷わない比較カード

Upvege から抽出した、選択を促すカード群。

01

見つける

導線を小さな判断単位に分解します。

02

選ぶ

導線を小さな判断単位に分解します。

03

進む

導線を小さな判断単位に分解します。

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

CSS:
.section-sankoumax-cookie-legal-07-upvege { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-07-upvege').forEach((el) => el.dataset.ready = 'true');

24

SANKOU Max — cookie-legal 08 Fujiya1935

sankoumax-cookie-legal-08-fujiya1935

Copy
Link

Collage

素材感を重ねる

写真、番号、短文をずらして一枚の編集面にします。

collage image a
collage image b

4108

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

CSS:
.section-sankoumax-cookie-legal-08-fujiya1935 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-08-fujiya1935').forEach((el) => el.dataset.ready = 'true');

25

SANKOU Max — cookie-legal 09 Omodakaya

sankoumax-cookie-legal-09-omodakaya

Copy
Link

Omodakaya

About

Works

Journal

Contact

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

CSS:
.section-sankoumax-cookie-legal-09-omodakaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-09-omodakaya').forEach((el) => el.dataset.ready = 'true');

26

SANKOU Max — cookie-legal 10 Favtown

sankoumax-cookie-legal-10-favtown

Copy
Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

  • 背景を伝える
  • 選ぶ理由を示す
  • 次の行動へ進める
記事を見る
  • パターン名: SANKOU Max — cookie-legal 10 Favtown
  • 概要: SANKOU100 sample setから展開したcookie-legal向けeditorial構成。
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 5130px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Cookie / Legalをミニマルに見せる余白重視版 / Cookie / Legalをリッチに見せるカバー/カード強調版 / Cookie / Legalをコーポレート向けに整える情報密度高め版 / Cookie / Legalをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cookie-legal-10-favtown"} /-->

CSS:
.section-sankoumax-cookie-legal-10-favtown { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-10-favtown').forEach((el) => el.dataset.ready = 'true');

27

SANKOU Max — cookie-legal 11 Mizuya Kyoto

sankoumax-cookie-legal-11-mizuya-kyoto

Copy
Link

Collection Selector

Mizuya Kyoto の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

product selector image

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

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

CSS:
.section-sankoumax-cookie-legal-11-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-11-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');

28

SANKOU Max — cookie-legal 12 Allright Inc

sankoumax-cookie-legal-12-allright-inc

Copy
Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

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

CSS:
.section-sankoumax-cookie-legal-12-allright-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-12-allright-inc').forEach((el) => el.dataset.ready = 'true');

29

SANKOU Max — cookie-legal 13 Jins Holdings

sankoumax-cookie-legal-13-jins-holdings

Copy
Link

数字で納得させる

73%

改善率

3分

短縮

28891

導入数

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

CSS:
.section-sankoumax-cookie-legal-13-jins-holdings { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-13-jins-holdings').forEach((el) => el.dataset.ready = 'true');

30

SANKOU Max — cookie-legal 14 Tsuchitokaze

sankoumax-cookie-legal-14-tsuchitokaze

Copy
Link

Contact

次の相談先を明確にする

電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。

Tel

Form

Map

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

CSS:
.section-sankoumax-cookie-legal-14-tsuchitokaze { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-14-tsuchitokaze').forEach((el) => el.dataset.ready = 'true');

31

SANKOU Max — cookie-legal 15 Yamato 50Th

sankoumax-cookie-legal-15-yamato-50th

Copy
Link

Yamato 50Th

商用サイトの締めに必要な主要リンクを整理します。

  • About
  • Service
  • Works
  • News
  • Recruit
  • Contact

Sample 4115

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

CSS:
.section-sankoumax-cookie-legal-15-yamato-50th { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-15-yamato-50th').forEach((el) => el.dataset.ready = 'true');

32

SANKOU Max — cookie-legal 16 Action Npo

sankoumax-cookie-legal-16-action-npo

Copy
Link

NEWS

Action Npo から抽出した告知導線。重要なお知らせを短く表示します。

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

CSS:
.section-sankoumax-cookie-legal-16-action-npo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-16-action-npo').forEach((el) => el.dataset.ready = 'true');

33

SANKOU Max — cookie-legal 17 Mycampus

sankoumax-cookie-legal-17-mycampus

Copy
Link

Access

迷わないアクセス案内

01

駅を固定

02

目印を指定

03

入口を明示

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

CSS:
.section-sankoumax-cookie-legal-17-mycampus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-17-mycampus').forEach((el) => el.dataset.ready = 'true');

34

SANKOU Max — cookie-legal 18 Mejinavi

sankoumax-cookie-legal-18-mejinavi

Copy
Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

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

CSS:
.section-sankoumax-cookie-legal-18-mejinavi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-18-mejinavi').forEach((el) => el.dataset.ready = 'true');

35

SANKOU Max — cookie-legal 19 Niwaya

sankoumax-cookie-legal-19-niwaya

Copy
Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

商品、採用、サービス紹介で情報量を抑えて見せるタブ型。

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

CSS:
.section-sankoumax-cookie-legal-19-niwaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-19-niwaya').forEach((el) => el.dataset.ready = 'true');

36

SANKOU Max — cookie-legal 20 Mindful Connect

sankoumax-cookie-legal-20-mindful-connect

Copy
Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

  • パターン名: SANKOU Max — cookie-legal 20 Mindful Connect
  • 概要: SANKOU100 sample setから展開したcookie-legal向けdashboard構成。
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 5200px、主要ブロック group, paragraph, heading, columns, column, group, 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/sankoumax-cookie-legal-20-mindful-connect"} /-->

CSS:
.section-sankoumax-cookie-legal-20-mindful-connect { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-20-mindful-connect').forEach((el) => el.dataset.ready = 'true');

37

SANKOU Max — cookie-legal 21 Spicato Daruma

sankoumax-cookie-legal-21-spicato-daruma

Copy
Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

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

CSS:
.section-sankoumax-cookie-legal-21-spicato-daruma { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-21-spicato-daruma').forEach((el) => el.dataset.ready = 'true');

38

SANKOU Max — cookie-legal 22 Morohoshi Portfolio

sankoumax-cookie-legal-22-morohoshi-portfolio

Copy
Link
gallery primary image
gallery sub image

Detail

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

CSS:
.section-sankoumax-cookie-legal-22-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-22-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');

39

SANKOU Max — cookie-legal 23 Vision Structure

sankoumax-cookie-legal-23-vision-structure

Copy
Link

People Line

person a

Director

person b

Planner

person c

Designer

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

CSS:
.section-sankoumax-cookie-legal-23-vision-structure { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-23-vision-structure').forEach((el) => el.dataset.ready = 'true');

40

SANKOU Max — cookie-legal 24 Nakiri Shota

sankoumax-cookie-legal-24-nakiri-shota

Copy
Link

4124

Nakiri Shota

静かな思想を置く

余白、短文、少ない選択肢で印象を残します。

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

CSS:
.section-sankoumax-cookie-legal-24-nakiri-shota { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-24-nakiri-shota').forEach((el) => el.dataset.ready = 'true');

41

SANKOU Max — cookie-legal 25 Koba Clinic

sankoumax-cookie-legal-25-koba-clinic

Copy
Link
SANKOU sampling inspired hero image

Sampled Site

4125 / Koba Clinic

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

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

CSS:
.section-sankoumax-cookie-legal-25-koba-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-25-koba-clinic').forEach((el) => el.dataset.ready = 'true');

42

SANKOU Max — cookie-legal 26 Ems Recruit

sankoumax-cookie-legal-26-ems-recruit

Copy
Link

Split Story

写真と要点で信頼を作る

Ems Recruit の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

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

CSS:
.section-sankoumax-cookie-legal-26-ems-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-26-ems-recruit').forEach((el) => el.dataset.ready = 'true');

43

SANKOU Max — cookie-legal 27 Felissimo Panda

sankoumax-cookie-legal-27-felissimo-panda

Copy
Link

Card Flow

迷わない比較カード

Felissimo Panda から抽出した、選択を促すカード群。

01

見つける

導線を小さな判断単位に分解します。

02

選ぶ

導線を小さな判断単位に分解します。

03

進む

導線を小さな判断単位に分解します。

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

CSS:
.section-sankoumax-cookie-legal-27-felissimo-panda { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-27-felissimo-panda').forEach((el) => el.dataset.ready = 'true');

44

SANKOU Max — cookie-legal 28 Iriam Miraito

sankoumax-cookie-legal-28-iriam-miraito

Copy
Link

Collage

素材感を重ねる

写真、番号、短文をずらして一枚の編集面にします。

collage image a
collage image b

4128

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

CSS:
.section-sankoumax-cookie-legal-28-iriam-miraito { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-28-iriam-miraito').forEach((el) => el.dataset.ready = 'true');

45

SANKOU Max — cookie-legal 29 Gaaboo

sankoumax-cookie-legal-29-gaaboo

Copy
Link

Gaaboo

About

Works

Journal

Contact

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

CSS:
.section-sankoumax-cookie-legal-29-gaaboo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-29-gaaboo').forEach((el) => el.dataset.ready = 'true');

46

SANKOU Max — cookie-legal 30 Violet Patisserie

sankoumax-cookie-legal-30-violet-patisserie

Copy
Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

  • 背景を伝える
  • 選ぶ理由を示す
  • 次の行動へ進める
記事を見る
  • パターン名: SANKOU Max — cookie-legal 30 Violet Patisserie
  • 概要: SANKOU100 sample setから展開したcookie-legal向けeditorial構成。
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 5150px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Cookie / Legalをミニマルに見せる余白重視版 / Cookie / Legalをリッチに見せるカバー/カード強調版 / Cookie / Legalをコーポレート向けに整える情報密度高め版 / Cookie / Legalをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cookie-legal-30-violet-patisserie"} /-->

CSS:
.section-sankoumax-cookie-legal-30-violet-patisserie { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-30-violet-patisserie').forEach((el) => el.dataset.ready = 'true');

47

SANKOU Max — cookie-legal 31 Nii Recruit

sankoumax-cookie-legal-31-nii-recruit

Copy
Link

Collection Selector

Nii Recruit の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

product selector image

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

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

CSS:
.section-sankoumax-cookie-legal-31-nii-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-31-nii-recruit').forEach((el) => el.dataset.ready = 'true');

48

SANKOU Max — cookie-legal 32 Saranosono

sankoumax-cookie-legal-32-saranosono

Copy
Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

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

CSS:
.section-sankoumax-cookie-legal-32-saranosono { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-32-saranosono').forEach((el) => el.dataset.ready = 'true');

49

SANKOU Max — cookie-legal 33 Dac Web

sankoumax-cookie-legal-33-dac-web

Copy
Link

数字で納得させる

23%

改善率

5分

短縮

29031

導入数

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

CSS:
.section-sankoumax-cookie-legal-33-dac-web { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-33-dac-web').forEach((el) => el.dataset.ready = 'true');

50

SANKOU Max — cookie-legal 34 Asuzac Recruit

sankoumax-cookie-legal-34-asuzac-recruit

Copy
Link

Contact

次の相談先を明確にする

電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。

Tel

Form

Map

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

CSS:
.section-sankoumax-cookie-legal-34-asuzac-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-34-asuzac-recruit').forEach((el) => el.dataset.ready = 'true');

51

SANKOU Max — cookie-legal 35 Suntory Sic

sankoumax-cookie-legal-35-suntory-sic

Copy
Link

Suntory Sic

商用サイトの締めに必要な主要リンクを整理します。

  • About
  • Service
  • Works
  • News
  • Recruit
  • Contact

Sample 4135

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

CSS:
.section-sankoumax-cookie-legal-35-suntory-sic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-35-suntory-sic').forEach((el) => el.dataset.ready = 'true');

52

SANKOU Max — cookie-legal 36 Amano Clinic

sankoumax-cookie-legal-36-amano-clinic

Copy
Link

NEWS

Amano Clinic から抽出した告知導線。重要なお知らせを短く表示します。

確認する
  • パターン名: SANKOU Max — cookie-legal 36 Amano Clinic
  • 概要: SANKOU100 sample setから展開したcookie-legal向けalert構成。
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 5216px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Cookie / Legalをミニマルに見せる余白重視版 / Cookie / Legalをリッチに見せるカバー/カード強調版 / Cookie / Legalをコーポレート向けに整える情報密度高め版 / Cookie / Legalをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cookie-legal-36-amano-clinic"} /-->

CSS:
.section-sankoumax-cookie-legal-36-amano-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-36-amano-clinic').forEach((el) => el.dataset.ready = 'true');

53

SANKOU Max — cookie-legal 37 Infocus

sankoumax-cookie-legal-37-infocus

Copy
Link

Access

迷わないアクセス案内

01

駅を固定

02

目印を指定

03

入口を明示

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

CSS:
.section-sankoumax-cookie-legal-37-infocus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-37-infocus').forEach((el) => el.dataset.ready = 'true');

54

SANKOU Max — cookie-legal 38 Tomore

sankoumax-cookie-legal-38-tomore

Copy
Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

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

CSS:
.section-sankoumax-cookie-legal-38-tomore { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-38-tomore').forEach((el) => el.dataset.ready = 'true');

55

SANKOU Max — cookie-legal 39 Dan Brise Barber

sankoumax-cookie-legal-39-dan-brise-barber

Copy
Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

商品、採用、サービス紹介で情報量を抑えて見せるタブ型。

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

CSS:
.section-sankoumax-cookie-legal-39-dan-brise-barber { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-39-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');

56

SANKOU Max — cookie-legal 40 Allureville Elements

sankoumax-cookie-legal-40-allureville-elements

Copy
Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

  • パターン名: SANKOU Max — cookie-legal 40 Allureville Elements
  • 概要: SANKOU100 sample setから展開したcookie-legal向けdashboard構成。
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 5220px、主要ブロック group, paragraph, heading, columns, column, group, 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/sankoumax-cookie-legal-40-allureville-elements"} /-->

CSS:
.section-sankoumax-cookie-legal-40-allureville-elements { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-40-allureville-elements').forEach((el) => el.dataset.ready = 'true');

57

SANKOU Max — cookie-legal 41 Studio Cbr

sankoumax-cookie-legal-41-studio-cbr

Copy
Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

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

CSS:
.section-sankoumax-cookie-legal-41-studio-cbr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-41-studio-cbr').forEach((el) => el.dataset.ready = 'true');

58

SANKOU Max — cookie-legal 42 Yamakachi

sankoumax-cookie-legal-42-yamakachi

Copy
Link
gallery primary image
gallery sub image

Detail

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

CSS:
.section-sankoumax-cookie-legal-42-yamakachi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-42-yamakachi').forEach((el) => el.dataset.ready = 'true');

59

SANKOU Max — cookie-legal 43 Chiikawa Pocket

sankoumax-cookie-legal-43-chiikawa-pocket

Copy
Link

People Line

person a

Director

person b

Planner

person c

Designer

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

CSS:
.section-sankoumax-cookie-legal-43-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-43-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');

60

SANKOU Max — cookie-legal 44 Chiba Dojo

sankoumax-cookie-legal-44-chiba-dojo

Copy
Link

4144

Chiba Dojo

静かな思想を置く

余白、短文、少ない選択肢で印象を残します。

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

CSS:
.section-sankoumax-cookie-legal-44-chiba-dojo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-44-chiba-dojo').forEach((el) => el.dataset.ready = 'true');

61

SANKOU Max — cookie-legal 45 Twoe

sankoumax-cookie-legal-45-twoe

Copy
Link
SANKOU sampling inspired hero image

Sampled Site

4145 / Twoe

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

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

CSS:
.section-sankoumax-cookie-legal-45-twoe { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-45-twoe').forEach((el) => el.dataset.ready = 'true');

62

SANKOU Max — cookie-legal 46 Kamata Shoyu

sankoumax-cookie-legal-46-kamata-shoyu

Copy
Link

Split Story

写真と要点で信頼を作る

Kamata Shoyu の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

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

CSS:
.section-sankoumax-cookie-legal-46-kamata-shoyu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-46-kamata-shoyu').forEach((el) => el.dataset.ready = 'true');

63

SANKOU Max — cookie-legal 47 Fumino

sankoumax-cookie-legal-47-fumino

Copy
Link

Card Flow

迷わない比較カード

Fumino から抽出した、選択を促すカード群。

01

見つける

導線を小さな判断単位に分解します。

02

選ぶ

導線を小さな判断単位に分解します。

03

進む

導線を小さな判断単位に分解します。

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

CSS:
.section-sankoumax-cookie-legal-47-fumino { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-47-fumino').forEach((el) => el.dataset.ready = 'true');

64

SANKOU Max — cookie-legal 48 Anbe Shoten

sankoumax-cookie-legal-48-anbe-shoten

Copy
Link

Collage

素材感を重ねる

写真、番号、短文をずらして一枚の編集面にします。

collage image a
collage image b

4148

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

CSS:
.section-sankoumax-cookie-legal-48-anbe-shoten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-48-anbe-shoten').forEach((el) => el.dataset.ready = 'true');

65

SANKOU Max — cookie-legal 49 Plaid Alpha

sankoumax-cookie-legal-49-plaid-alpha

Copy
Link

Plaid

About

Works

Journal

Contact

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

CSS:
.section-sankoumax-cookie-legal-49-plaid-alpha { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-49-plaid-alpha').forEach((el) => el.dataset.ready = 'true');

66

SANKOU Max — cookie-legal 50 Undimension

sankoumax-cookie-legal-50-undimension

Copy
Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

  • 背景を伝える
  • 選ぶ理由を示す
  • 次の行動へ進める
記事を見る
  • パターン名: SANKOU Max — cookie-legal 50 Undimension
  • 概要: SANKOU100 sample setから展開したcookie-legal向けeditorial構成。
  • 使用目的: Cookie / Legal領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 5170px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Cookie / Legalをミニマルに見せる余白重視版 / Cookie / Legalをリッチに見せるカバー/カード強調版 / Cookie / Legalをコーポレート向けに整える情報密度高め版 / Cookie / Legalをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cookie-legal-50-undimension"} /-->

CSS:
.section-sankoumax-cookie-legal-50-undimension { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-50-undimension').forEach((el) => el.dataset.ready = 'true');

67

SANKOU Max — cookie-legal 51 Norikura Hanabi

sankoumax-cookie-legal-51-norikura-hanabi

Copy
Link

Collection Selector

Norikura Hanabi の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

product selector image

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

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

CSS:
.section-sankoumax-cookie-legal-51-norikura-hanabi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-51-norikura-hanabi').forEach((el) => el.dataset.ready = 'true');

68

SANKOU Max — cookie-legal 52 Chugaitoen

sankoumax-cookie-legal-52-chugaitoen

Copy
Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

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

CSS:
.section-sankoumax-cookie-legal-52-chugaitoen { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-52-chugaitoen').forEach((el) => el.dataset.ready = 'true');

69

SANKOU Max — cookie-legal 53 Favtown Wakayama

sankoumax-cookie-legal-53-favtown-wakayama

Copy
Link

数字で納得させる

43%

改善率

7分

短縮

29171

導入数

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

CSS:
.section-sankoumax-cookie-legal-53-favtown-wakayama { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-53-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');

70

SANKOU Max — cookie-legal 54 Palcloset Fashion

sankoumax-cookie-legal-54-palcloset-fashion

Copy
Link

Contact

次の相談先を明確にする

電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。

Tel

Form

Map

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

CSS:
.section-sankoumax-cookie-legal-54-palcloset-fashion { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cookie-legal-54-palcloset-fashion').forEach((el) => el.dataset.ready = 'true');

← Previous

Error Page

エラーページ

←

◈ Blanc Nail

Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。

Foundations

  • ヒーロー
  • ヘッダー
  • フッター
  • ナビゲーション
  • タイポグラフィ

Content

  • フィーチャー
  • スタッツ
  • コール トゥ アクション
  • レビュー / 推薦
  • チーム

Business

  • 料金プラン
  • 商品 / EC
  • アクセス / 営業時間
  • メニュー (飲食)
  • コンタクト

UI Components

  • カードレイアウト
  • モーダル / アコーディオン
  • タブ / セグメント
  • バナー / アラート
  • SNS

© 2026 Blanc Nail · Built with WordPress + Block Editor v1.0 · isValid=0