コールトゥアクション

パターン名: Reference Complete — cta 01 Sticky Entry
概要: 参照サンプル再確認から追加したcta向け部品。固定導線つきの大判ファーストビュー。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 25% / 75%、推奨コンテンツ幅 44183px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cta-01-sticky-entry-dodasports"} /-->

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

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

Reference Complete — cta 02 Editorial Issue

reference-complete-cta-02-editorial-issue-kiyasuku

Copy

Link

Editorial

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

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

背景を伝える
選ぶ理由を示す
次の行動へ進める

パターン名: Reference Complete — cta 02 Editorial Issue
概要: 参照サンプル再確認から追加したcta向け部品。雑誌的な見出しと導入文の編集レイアウト。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 15422px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cta-02-editorial-issue-kiyasuku"} /-->

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

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

Reference Complete — cta 03 Brand Index

reference-complete-cta-03-brand-index-ichizenbooks

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

パターン名: Reference Complete — cta 03 Brand Index
概要: 参照サンプル再確認から追加したcta向け部品。複数ブランドやサービスを迷わせず並べる索引。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 15483px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cta-03-brand-index-ichizenbooks"} /-->

CSS:
.section-reference-complete-cta-03-brand-index-ichizenbooks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cta-03-brand-index-ichizenbooks').forEach((el) => el.dataset.ready = 'true');

Reference Complete — cta 04 Recruit Story

reference-complete-cta-04-recruit-story-palcloset-fashion

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

パターン名: Reference Complete — cta 04 Recruit Story
概要: 参照サンプル再確認から追加したcta向け部品。採用・企業紹介に使える人物/思想の分割構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 15444px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cta-04-recruit-story-palcloset-fashion"} /-->

CSS:
.section-reference-complete-cta-04-recruit-story-palcloset-fashion { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cta-04-recruit-story-palcloset-fashion').forEach((el) => el.dataset.ready = 'true');

Reference Complete — cta 05 Commerce Compare

reference-complete-cta-05-commerce-compare-megamis

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

パターン名: Reference Complete — cta 05 Commerce Compare
概要: 参照サンプル再確認から追加したcta向け部品。料金・商品・プランを比較しやすい構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 15505px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cta-05-commerce-compare-megamis"} /-->

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

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

Reference Complete — cta 06 Timeline Proof

reference-complete-cta-06-timeline-proof-morinosato-clinic

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

パターン名: Reference Complete — cta 06 Timeline Proof
概要: 参照サンプル再確認から追加したcta向け部品。沿革・導入手順・制作工程の時系列。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 15446px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cta-06-timeline-proof-morinosato-clinic"} /-->

CSS:
.section-reference-complete-cta-06-timeline-proof-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cta-06-timeline-proof-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');

Reference Complete — cta 07 Gallery Led

reference-complete-cta-07-gallery-led-nissan-career

Copy

Link

Detail

パターン名: Reference Complete — cta 07 Gallery Led
概要: 参照サンプル再確認から追加したcta向け部品。写真量の多い商材を見せるギャラリー導線。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 15527px、主要ブロック group, columns, column, image, column, image, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cta-07-gallery-led-nissan-career"} /-->

CSS:
.section-reference-complete-cta-07-gallery-led-nissan-career { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cta-07-gallery-led-nissan-career').forEach((el) => el.dataset.ready = 'true');

Reference Complete — cta 08 Dashboard Proof

reference-complete-cta-08-dashboard-proof-ems-recruit

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cta-08-dashboard-proof-ems-recruit"} /-->

CSS:
.section-reference-complete-cta-08-dashboard-proof-ems-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cta-08-dashboard-proof-ems-recruit').forEach((el) => el.dataset.ready = 'true');

Reference Complete — cta 09 Contact Ready

reference-complete-cta-09-contact-ready-trail-inc

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

パターン名: Reference Complete — cta 09 Contact Ready
概要: 参照サンプル再確認から追加したcta向け部品。問い合わせ前の入力項目を整理する導線。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 15469px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cta-09-contact-ready-trail-inc"} /-->

CSS:
.section-reference-complete-cta-09-contact-ready-trail-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cta-09-contact-ready-trail-inc').forEach((el) => el.dataset.ready = 'true');

Reference Complete — cta 10 Mobile Rail

reference-complete-cta-10-mobile-rail-uki-editions

Copy

Link

Uki

About

Works

Journal

Contact

パターン名: Reference Complete — cta 10 Mobile Rail
概要: 参照サンプル再確認から追加したcta向け部品。スマホ閲覧で要点を縦に追えるレール型。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 15590px、主要ブロック group, columns, column, heading, column, columns, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-cta-10-mobile-rail-uki-editions"} /-->

CSS:
.section-reference-complete-cta-10-mobile-rail-uki-editions { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-cta-10-mobile-rail-uki-editions').forEach((el) => el.dataset.ready = 'true');

Reference Brand — Immersive Photo CTA

reference-immersive-photo-cta

Copy

Link

next action

ブランドの空気ごと、次の行動へつなぐ。

問い合わせ、予約、採用応募などに使える写真背景CTA。

相談する

パターン名: Reference Brand — Immersive Photo CTA
概要: 写真背景と大きなコピーで行動喚起するCTA。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: ビジュアル面を中心にしたカバー構造、幅配分 auto、推奨コンテンツ幅 860px、主要ブロック cover, group, paragraph, heading, paragraph, buttons, button, button

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-immersive-photo-cta"} /-->

CSS:
.section-reference-immersive-photo-cta { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-immersive-photo-cta').forEach((el) => el.dataset.ready = 'true');

SANKOU — Organic Art Event Route

sankou-art-event-organic-route

Copy

Link

Art Event

子どもの感性が通る道

曲線的な背景、短い開催情報、CTAでイベントの楽しさを伝えます。

参加する

パターン名: SANKOU — Organic Art Event Route
概要: アートイベント向けの有機的な導線CTA。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 1px / 54%、推奨コンテンツ幅 1160px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, buttons

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-art-event-organic-route"} /-->

CSS:
.section-sankou-art-event-organic-route { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-art-event-organic-route').forEach((el) => el.dataset.ready = 'true');

SANKOU — Mobile Campaign Phone Frame

sankou-mobile-campaign-phone-frame

Copy

Link

Mobile first

スマホ画面で伝える参加型企画

SP縦長のバナーや診断、キャンペーン告知に使いやすい構成。

WE LOVE SERVICE

縦長画面を主役にしたキャンペーンLP向け。

パターン名: SANKOU — Mobile Campaign Phone Frame
概要: スマホ特化キャンペーン向けの端末フレームCTA。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px、推奨コンテンツ幅 1080px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-mobile-campaign-phone-frame"} /-->

CSS:
.section-sankou-mobile-campaign-phone-frame { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-mobile-campaign-phone-frame').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 008 Allureville Elements

sankou100-008-allureville-elements

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

パターン名: SANKOU100 — 008 Allureville Elements
概要: SANKOU! sample 008から抽出したtimeline型の商用サイト向け構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1048px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-008-allureville-elements"} /-->

CSS:
.section-sankou100-008-allureville-elements { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-008-allureville-elements').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 048 Meisei Es

sankou100-048-meisei-es

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

パターン名: SANKOU100 — 048 Meisei Es
概要: SANKOU! sample 048から抽出したtimeline型の商用サイト向け構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1088px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-048-meisei-es"} /-->

CSS:
.section-sankou100-048-meisei-es { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-048-meisei-es').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 088 Nissan Career

sankou100-088-nissan-career

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

パターン名: SANKOU100 — 088 Nissan Career
概要: SANKOU! sample 088から抽出したtimeline型の商用サイト向け構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1128px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-088-nissan-career"} /-->

CSS:
.section-sankou100-088-nissan-career { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-088-nissan-career').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 01 J Security

sankoumax-cta-01-j-security

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

パターン名: SANKOU Max — cta 01 J Security
概要: SANKOU100 sample setから展開したcta向けsplit構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 2441px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-01-j-security"} /-->

CSS:
.section-sankoumax-cta-01-j-security { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-01-j-security').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 02 Serious Ceramic

sankoumax-cta-02-serious-ceramic

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

パターン名: SANKOU Max — cta 02 Serious Ceramic
概要: SANKOU100 sample setから展開したcta向けcards構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2482px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-02-serious-ceramic"} /-->

CSS:
.section-sankoumax-cta-02-serious-ceramic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-02-serious-ceramic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 03 Tsumari Chamame

sankoumax-cta-03-tsumari-chamame

Copy

Link

Collage

素材感を重ねる

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

1403

パターン名: SANKOU Max — cta 03 Tsumari Chamame
概要: SANKOU100 sample setから展開したcta向けcollage構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 33% / 1px / 39% / 31% / 1px、推奨コンテンツ幅 2523px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-03-tsumari-chamame"} /-->

CSS:
.section-sankoumax-cta-03-tsumari-chamame { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-03-tsumari-chamame').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 04 Notahotel Architects

sankoumax-cta-04-notahotel-architects

Copy

Link

Notahotel

About

Works

Journal

Contact

パターン名: SANKOU Max — cta 04 Notahotel Architects
概要: SANKOU100 sample setから展開したcta向けrail構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 2584px、主要ブロック group, columns, column, heading, column, columns, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-04-notahotel-architects"} /-->

CSS:
.section-sankoumax-cta-04-notahotel-architects { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-04-notahotel-architects').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 05 Montblanc Pictures

sankoumax-cta-05-montblanc-pictures

Copy

Link

Editorial

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

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

背景を伝える
選ぶ理由を示す
次の行動へ進める

パターン名: SANKOU Max — cta 05 Montblanc Pictures
概要: SANKOU100 sample setから展開したcta向けeditorial構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 49% / 51% / 1px、推奨コンテンツ幅 2425px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-05-montblanc-pictures"} /-->

CSS:
.section-sankoumax-cta-05-montblanc-pictures { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-05-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 06 Tattoo Rays

sankoumax-cta-06-tattoo-rays

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

パターン名: SANKOU Max — cta 06 Tattoo Rays
概要: SANKOU100 sample setから展開したcta向けproduct構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 2506px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-06-tattoo-rays"} /-->

CSS:
.section-sankoumax-cta-06-tattoo-rays { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-06-tattoo-rays').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 07 Rim Jins

sankoumax-cta-07-rim-jins

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

パターン名: SANKOU Max — cta 07 Rim Jins
概要: SANKOU100 sample setから展開したcta向けtimeline構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2447px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-07-rim-jins"} /-->

CSS:
.section-sankoumax-cta-07-rim-jins { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-07-rim-jins').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 08 Obunko

sankoumax-cta-08-obunko

Copy

Link

数字で納得させる

28%

改善率

7分

短縮

9956

導入数

パターン名: SANKOU Max — cta 08 Obunko
概要: SANKOU100 sample setから展開したcta向けstats構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2368px、主要ブロック group, heading, columns, column, group, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-08-obunko"} /-->

CSS:
.section-sankoumax-cta-08-obunko { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — cta 09 Pronets Recruit

sankoumax-cta-09-pronets-recruit

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

パターン名: SANKOU Max — cta 09 Pronets Recruit
概要: SANKOU100 sample setから展開したcta向けcontact構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 57% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2489px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-09-pronets-recruit"} /-->

CSS:
.section-sankoumax-cta-09-pronets-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-09-pronets-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 10 Glanta

sankoumax-cta-10-glanta

Copy

Link

Glanta

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

About
Service
Works

News
Recruit
Contact

Sample 1410

パターン名: SANKOU Max — cta 10 Glanta
概要: SANKOU100 sample setから展開したcta向けfooter構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 2530px、主要ブロック group, columns, column, heading, paragraph, column, list, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-10-glanta"} /-->

CSS:
.section-sankoumax-cta-10-glanta { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — cta 11 Tashi Portfolio

sankoumax-cta-11-tashi-portfolio

Copy

Link

NEWS

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

確認する

パターン名: SANKOU Max — cta 11 Tashi Portfolio
概要: SANKOU100 sample setから展開したcta向けalert構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 2491px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-11-tashi-portfolio"} /-->

CSS:
.section-sankoumax-cta-11-tashi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-11-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 12 Kitanohashi

sankoumax-cta-12-kitanohashi

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

パターン名: SANKOU Max — cta 12 Kitanohashi
概要: SANKOU100 sample setから展開したcta向けmap構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2452px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-12-kitanohashi"} /-->

CSS:
.section-sankoumax-cta-12-kitanohashi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-12-kitanohashi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 13 Morinosato Clinic

sankoumax-cta-13-morinosato-clinic

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

パターン名: SANKOU Max — cta 13 Morinosato Clinic
概要: SANKOU100 sample setから展開したcta向けform構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 2473px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-13-morinosato-clinic"} /-->

CSS:
.section-sankoumax-cta-13-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-13-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 14 Asuzac Highschool

sankoumax-cta-14-asuzac-highschool

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

パターン名: SANKOU Max — cta 14 Asuzac Highschool
概要: SANKOU100 sample setから展開したcta向けtabs構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2394px、主要ブロック group, group, columns, column, group, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-14-asuzac-highschool"} /-->

CSS:
.section-sankoumax-cta-14-asuzac-highschool { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-14-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 15 Junni Newyear

sankoumax-cta-15-junni-newyear

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-15-junni-newyear"} /-->

CSS:
.section-sankoumax-cta-15-junni-newyear { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-15-junni-newyear').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 16 Mizota Ks

sankoumax-cta-16-mizota-ks

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

パターン名: SANKOU Max — cta 16 Mizota Ks
概要: SANKOU100 sample setから展開したcta向けfaq構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2336px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-16-mizota-ks"} /-->

CSS:
.section-sankoumax-cta-16-mizota-ks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-16-mizota-ks').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 17 Nissan Career

sankoumax-cta-17-nissan-career

Copy

Link

Detail

パターン名: SANKOU Max — cta 17 Nissan Career
概要: SANKOU100 sample setから展開したcta向けgallery構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2537px、主要ブロック group, columns, column, image, column, image, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-17-nissan-career"} /-->

CSS:
.section-sankoumax-cta-17-nissan-career { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-17-nissan-career').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 18 Shueisha Recruit

sankoumax-cta-18-shueisha-recruit

Copy

Link

People Line

Director

Planner

Designer

パターン名: SANKOU Max — cta 18 Shueisha Recruit
概要: SANKOU100 sample setから展開したcta向けroster構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 2538px、主要ブロック group, heading, columns, column, image, paragraph, column, image

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-18-shueisha-recruit"} /-->

CSS:
.section-sankoumax-cta-18-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-18-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 19 Sanu Weekday

sankoumax-cta-19-sanu-weekday

Copy

Link

1419

Sanu Weekday

静かな思想を置く

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

パターン名: SANKOU Max — cta 19 Sanu Weekday
概要: SANKOU100 sample setから展開したcta向けmanifesto構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 2319px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-19-sanu-weekday"} /-->

CSS:
.section-sankoumax-cta-19-sanu-weekday { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-19-sanu-weekday').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 20 Newspicks Business

sankoumax-cta-20-newspicks-business

Copy

Link

Sampled Site

1420 / Newspicks Business

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

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

パターン名: SANKOU Max — cta 20 Newspicks Business
概要: SANKOU100 sample setから展開したcta向けcover構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 31% / 69%、推奨コンテンツ幅 5240px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-20-newspicks-business"} /-->

CSS:
.section-sankoumax-cta-20-newspicks-business { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-20-newspicks-business').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 21 Miyakawa Lab

sankoumax-cta-21-miyakawa-lab

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

パターン名: SANKOU Max — cta 21 Miyakawa Lab
概要: SANKOU100 sample setから展開したcta向けsplit構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 2461px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-21-miyakawa-lab"} /-->

CSS:
.section-sankoumax-cta-21-miyakawa-lab { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-21-miyakawa-lab').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 22 Matsuo Komuten

sankoumax-cta-22-matsuo-komuten

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

パターン名: SANKOU Max — cta 22 Matsuo Komuten
概要: SANKOU100 sample setから展開したcta向けcards構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2502px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-22-matsuo-komuten"} /-->

CSS:
.section-sankoumax-cta-22-matsuo-komuten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-22-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 23 Yokohama Timberwharf

sankoumax-cta-23-yokohama-timberwharf

Copy

Link

Collage

素材感を重ねる

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

1423

パターン名: SANKOU Max — cta 23 Yokohama Timberwharf
概要: SANKOU100 sample setから展開したcta向けcollage構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 37% / 1px / 35% / 35% / 1px、推奨コンテンツ幅 2543px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-23-yokohama-timberwharf"} /-->

CSS:
.section-sankoumax-cta-23-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-23-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 24 Janu

sankoumax-cta-24-janu

Copy

Link

Janu

About

Works

Journal

Contact

パターン名: SANKOU Max — cta 24 Janu
概要: SANKOU100 sample setから展開したcta向けrail構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 2604px、主要ブロック group, columns, column, heading, column, columns, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-24-janu"} /-->

CSS:
.section-sankoumax-cta-24-janu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-24-janu').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 25 Daimatsu

sankoumax-cta-25-daimatsu

Copy

Link

Editorial

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

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

背景を伝える
選ぶ理由を示す
次の行動へ進める

パターン名: SANKOU Max — cta 25 Daimatsu
概要: SANKOU100 sample setから展開したcta向けeditorial構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 45% / 55% / 1px、推奨コンテンツ幅 2445px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-25-daimatsu"} /-->

CSS:
.section-sankoumax-cta-25-daimatsu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-25-daimatsu').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 26 Omotesando Ortho

sankoumax-cta-26-omotesando-ortho

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

パターン名: SANKOU Max — cta 26 Omotesando Ortho
概要: SANKOU100 sample setから展開したcta向けproduct構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 2526px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-26-omotesando-ortho"} /-->

CSS:
.section-sankoumax-cta-26-omotesando-ortho { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-26-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 27 Dodasports

sankoumax-cta-27-dodasports

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

パターン名: SANKOU Max — cta 27 Dodasports
概要: SANKOU100 sample setから展開したcta向けtimeline構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2467px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-27-dodasports"} /-->

CSS:
.section-sankoumax-cta-27-dodasports { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-27-dodasports').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 28 Ja Aichi Recruit

sankoumax-cta-28-ja-aichi-recruit

Copy

Link

数字で納得させる

48%

改善率

9分

短縮

10096

導入数

パターン名: SANKOU Max — cta 28 Ja Aichi Recruit
概要: SANKOU100 sample setから展開したcta向けstats構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2388px、主要ブロック group, heading, columns, column, group, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-28-ja-aichi-recruit"} /-->

CSS:
.section-sankoumax-cta-28-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-28-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 29 Kiyasuku

sankoumax-cta-29-kiyasuku

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

パターン名: SANKOU Max — cta 29 Kiyasuku
概要: SANKOU100 sample setから展開したcta向けcontact構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 53% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2509px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-29-kiyasuku"} /-->

CSS:
.section-sankoumax-cta-29-kiyasuku { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — cta 30 Hirono Recruit

sankoumax-cta-30-hirono-recruit

Copy

Link

Hirono Recruit

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

About
Service
Works

News
Recruit
Contact

Sample 1430

パターン名: SANKOU Max — cta 30 Hirono Recruit
概要: SANKOU100 sample setから展開したcta向けfooter構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 2550px、主要ブロック group, columns, column, heading, paragraph, column, list, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-30-hirono-recruit"} /-->

CSS:
.section-sankoumax-cta-30-hirono-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-30-hirono-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 31 Ichizenbooks

sankoumax-cta-31-ichizenbooks

Copy

Link

NEWS

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

確認する

パターン名: SANKOU Max — cta 31 Ichizenbooks
概要: SANKOU100 sample setから展開したcta向けalert構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 2511px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-31-ichizenbooks"} /-->

CSS:
.section-sankoumax-cta-31-ichizenbooks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-31-ichizenbooks').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 32 Mec Residence Recruit

sankoumax-cta-32-mec-residence-recruit

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

パターン名: SANKOU Max — cta 32 Mec Residence Recruit
概要: SANKOU100 sample setから展開したcta向けmap構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2472px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-32-mec-residence-recruit"} /-->

CSS:
.section-sankoumax-cta-32-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-32-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 33 Greenpark Santo

sankoumax-cta-33-greenpark-santo

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

パターン名: SANKOU Max — cta 33 Greenpark Santo
概要: SANKOU100 sample setから展開したcta向けform構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 2493px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-33-greenpark-santo"} /-->

CSS:
.section-sankoumax-cta-33-greenpark-santo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-33-greenpark-santo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 34 Land Sapporo

sankoumax-cta-34-land-sapporo

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

パターン名: SANKOU Max — cta 34 Land Sapporo
概要: SANKOU100 sample setから展開したcta向けtabs構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2414px、主要ブロック group, group, columns, column, group, paragraph, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-34-land-sapporo"} /-->

CSS:
.section-sankoumax-cta-34-land-sapporo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-34-land-sapporo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 35 Tokachi Fruits

sankoumax-cta-35-tokachi-fruits

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-35-tokachi-fruits"} /-->

CSS:
.section-sankoumax-cta-35-tokachi-fruits { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-35-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 36 Echitora

sankoumax-cta-36-echitora

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

パターン名: SANKOU Max — cta 36 Echitora
概要: SANKOU100 sample setから展開したcta向けfaq構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2356px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-36-echitora"} /-->

CSS:
.section-sankoumax-cta-36-echitora { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-cta-36-echitora').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — cta 37 Megamis

sankoumax-cta-37-megamis

Copy

Link

Detail

パターン名: SANKOU Max — cta 37 Megamis
概要: SANKOU100 sample setから展開したcta向けgallery構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2557px、主要ブロック group, columns, column, image, column, image, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-37-megamis"} /-->

CSS:
.section-sankoumax-cta-37-megamis { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — cta 38 Kagami

sankoumax-cta-38-kagami

Copy

Link

People Line

Director

Planner

Designer

パターン名: SANKOU Max — cta 38 Kagami
概要: SANKOU100 sample setから展開したcta向けroster構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 2558px、主要ブロック group, heading, columns, column, image, paragraph, column, image

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-38-kagami"} /-->

CSS:
.section-sankoumax-cta-38-kagami { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — cta 39 Antscr

sankoumax-cta-39-antscr

Copy

Link

1439

Antscr

静かな思想を置く

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

パターン名: SANKOU Max — cta 39 Antscr
概要: SANKOU100 sample setから展開したcta向けmanifesto構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 2339px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-39-antscr"} /-->

CSS:
.section-sankoumax-cta-39-antscr { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — cta 40 Meisei Kg

sankoumax-cta-40-meisei-kg

Copy

Link

Sampled Site

1440 / Meisei Kg

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

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

パターン名: SANKOU Max — cta 40 Meisei Kg
概要: SANKOU100 sample setから展開したcta向けcover構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 24% / 76%、推奨コンテンツ幅 5300px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-40-meisei-kg"} /-->

CSS:
.section-sankoumax-cta-40-meisei-kg { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — cta 41 Iamwithyou

sankoumax-cta-41-iamwithyou

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

パターン名: SANKOU Max — cta 41 Iamwithyou
概要: SANKOU100 sample setから展開したcta向けsplit構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 2481px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-41-iamwithyou"} /-->

CSS:
.section-sankoumax-cta-41-iamwithyou { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — cta 42 Depsoa

sankoumax-cta-42-depsoa

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

パターン名: SANKOU Max — cta 42 Depsoa
概要: SANKOU100 sample setから展開したcta向けcards構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2522px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-42-depsoa"} /-->

CSS:
.section-sankoumax-cta-42-depsoa { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — cta 43 Nothing Tech

sankoumax-cta-43-nothing-tech

Copy

Link

Collage

素材感を重ねる

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

1443

パターン名: SANKOU Max — cta 43 Nothing Tech
概要: SANKOU100 sample setから展開したcta向けcollage構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 33% / 1px / 37% / 33% / 1px、推奨コンテンツ幅 2563px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版 / Call to Actionをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-43-nothing-tech"} /-->

CSS:
.section-sankoumax-cta-43-nothing-tech { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — cta 44 Upvege

sankoumax-cta-44-upvege

Copy

Link

Upvege

About

Works

Journal

Contact

パターン名: SANKOU Max — cta 44 Upvege
概要: SANKOU100 sample setから展開したcta向けrail構成。
使用目的: Call to Action領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 2624px、主要ブロック group, columns, column, heading, column, columns, column, group

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Call to Actionをミニマルに見せる余白重視版 / Call to Actionをリッチに見せるカバー/カード強調版 / Call to Actionをコーポレート向けに整える情報密度高め版 / Call to Actionをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-cta-44-upvege"} /-->

CSS:
.section-sankoumax-cta-44-upvege { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — cta 45 Fujiya1935

sankoumax-cta-45-fujiya1935

Copy

Link

Editorial

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

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

背景を伝える
選ぶ理由を示す
次の行動へ進める