検索…

カタログ統計

CATALOG › Utility › Notification / Toast

通知 / トースト

成功・警告・情報通知のトースト UI バリエーション。

Patterns

Utility

Group

isValid=0

Verified

CSS

Animation

Notification — Bell with Pulse Badge

notification-bell-badge

Copy

Link

🔔

通知

パターン名: Notification — Bell with Pulse Badge
概要: Bell with pulsing red unread-count badge.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 480px、主要ブロック group, group, group, paragraph, paragraph, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-bell-badge"} /-->

CSS:
.section-notification-bell-badge { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-notification-bell-badge').forEach((el) => el.dataset.ready = 'true');

Notification — 4 Inline Alert Variants

notification-inline-alerts

Copy

Link

✅

変更が正常に保存されました

⚠️

パスワードの有効期限が近づいています

❌

必須項目が入力されていません

ℹ️

新しいバージョン 2.4.0 が利用可能です

パターン名: Notification — 4 Inline Alert Variants
概要: Four inline alerts: success / warning / error / info.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px / 1px、推奨コンテンツ幅 640px、主要ブロック group, group, group, paragraph, paragraph, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-inline-alerts"} /-->

CSS:
.section-notification-inline-alerts { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-notification-inline-alerts').forEach((el) => el.dataset.ready = 'true');

Notification — Quality Layout 01

notification-toast-quality-layout-01

Copy

Link

NOTIFICATION

通知を商用サイトで使いやすくする

状態変化を短く伝えて次の行動へつなげる

保存

修正

警告

承認

招待

完了

更新

確認

パターン名: Notification — Quality Layout 01
概要: 通知 category commercial part with a distinct production layout.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 38% / 62% / 1px、推奨コンテンツ幅 940px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-toast-quality-layout-01"} /-->

CSS:
.section-notification-toast-quality-layout-01 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-notification-toast-quality-layout-01').forEach((el) => el.dataset.ready = 'true');

Notification — Quality Layout 02

notification-toast-quality-layout-02

Copy

Link

NOTIFICATION

状態変化を短く伝えて次の行動へつなげる

保存

承認

実運用で差し替えやすい短い補足欄です。

警告

完了

実運用で差し替えやすい短い補足欄です。

招待

確認

実運用で差し替えやすい短い補足欄です。

更新

修正

実運用で差し替えやすい短い補足欄です。

パターン名: Notification — Quality Layout 02
概要: 通知 category commercial part with a distinct production layout.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 25% / 25% / 1px / 25% / 25%、推奨コンテンツ幅 1180px、主要ブロック group, cover, paragraph, heading, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-toast-quality-layout-02"} /-->

CSS:
.section-notification-toast-quality-layout-02 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-notification-toast-quality-layout-02').forEach((el) => el.dataset.ready = 'true');

Notification — Quality Layout 03

notification-toast-quality-layout-03

Copy

Link

通知

用途を固定して内容を展開

左に役割、右に実データを置くため、サイト制作時に差し替えやすい構成です。

NOTIFICATION

通知を商用サイトで使いやすくする

状態変化を短く伝えて次の行動へつなげる

保存

確認までの判断を短く示します。

警告

修正までの判断を短く示します。

招待

承認までの判断を短く示します。

更新

完了までの判断を短く示します。

パターン名: Notification — Quality Layout 03
概要: 通知 category commercial part with a distinct production layout.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 58% / 1px / 42%、推奨コンテンツ幅 860px、主要ブロック group, columns, column, group, group, paragraph, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-toast-quality-layout-03"} /-->

CSS:
.section-notification-toast-quality-layout-03 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-notification-toast-quality-layout-03').forEach((el) => el.dataset.ready = 'true');

Notification — Quality Layout 04

notification-toast-quality-layout-04

Copy

Link

NOTIFICATION

通知

保存

確認

警告

修正

招待

承認

更新

完了

確認

パターン名: Notification — Quality Layout 04
概要: 通知 category commercial part with a distinct production layout.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px、推奨コンテンツ幅 660px、主要ブロック group, group, group, paragraph, heading, group, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-toast-quality-layout-04"} /-->

CSS:
.section-notification-toast-quality-layout-04 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-notification-toast-quality-layout-04').forEach((el) => el.dataset.ready = 'true');

Notification — Quality Layout 05

notification-toast-quality-layout-05

Copy

Link

NOTIFICATION

通知を商用サイトで使いやすくする

状態変化を短く伝えて次の行動へつなげる

保存

修正

実運用で差し替えやすい短い補足欄です。

警告

承認

実運用で差し替えやすい短い補足欄です。

招待

完了

実運用で差し替えやすい短い補足欄です。

パターン名: Notification — Quality Layout 05
概要: 通知 category commercial part with a distinct production layout.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 54% / 1px / 46% / 1px、推奨コンテンツ幅 1100px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-toast-quality-layout-05"} /-->

CSS:
.section-notification-toast-quality-layout-05 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-notification-toast-quality-layout-05').forEach((el) => el.dataset.ready = 'true');

Notification – Quality Layout 06

notification-toast-quality-layout-06

Copy

Link

NOTIFICATION

Notification layout system

状態変化を短く伝えて次の行動へつなげる

修正

承認

完了

確認

保存

修正

Production-ready block composition.

警告

承認

Production-ready block composition.

招待

完了

Production-ready block composition.

更新

確認

Production-ready block composition.

パターン名: Notification – Quality Layout 06
概要: Notification category commercial part with a second distinct layout family.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px、推奨コンテンツ幅 955px、主要ブロック group, paragraph, heading, paragraph, group, group, paragraph, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-toast-quality-layout-06"} /-->

CSS:
.section-notification-toast-quality-layout-06 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-notification-toast-quality-layout-06').forEach((el) => el.dataset.ready = 'true');

Notification – Quality Layout 07

notification-toast-quality-layout-07

Copy

Link

STATUS

Operational ledger

保存

承認

警告

完了

招待

確認

更新

修正

Notification

Primary message area

A larger visual field for direction, recovery, proof, or navigation.

パターン名: Notification – Quality Layout 07
概要: Notification category commercial part with a second distinct layout family.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 42% / 1px / 58%、推奨コンテンツ幅 1040px、主要ブロック group, columns, column, group, paragraph, heading, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-toast-quality-layout-07"} /-->

CSS:
.section-notification-toast-quality-layout-07 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-notification-toast-quality-layout-07').forEach((el) => el.dataset.ready = 'true');

Notification – Quality Layout 08

notification-toast-quality-layout-08

Copy

Link

INDEX

保存

警告

招待

更新

NOTIFICATION

Notification layout system

状態変化を短く伝えて次の行動へつなげる

保存

完了

Production-ready block composition.

警告

確認

Production-ready block composition.

NOTES

Use this side pane for prerequisites, links, secondary explanation, or local navigation.

修正

パターン名: Notification – Quality Layout 08
概要: Notification category commercial part with a second distinct layout family.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 28% / 1px / 46% / 1px / 50%、推奨コンテンツ幅 1155px、主要ブロック group, columns, column, group, paragraph, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-toast-quality-layout-08"} /-->

CSS:
.section-notification-toast-quality-layout-08 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-notification-toast-quality-layout-08').forEach((el) => el.dataset.ready = 'true');

Notification – Quality Layout 09

notification-toast-quality-layout-09

Copy

Link

NOTIFICATION

Notification layout system

状態変化を短く伝えて次の行動へつなげる

保存

確認

Open

警告

修正

Open

招待

承認

Open

パターン名: Notification – Quality Layout 09
概要: Notification category commercial part with a second distinct layout family.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 38% / 62% / 1px、推奨コンテンツ幅 1080px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-toast-quality-layout-09"} /-->

CSS:
.section-notification-toast-quality-layout-09 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-notification-toast-quality-layout-09').forEach((el) => el.dataset.ready = 'true');

Notification – Quality Layout 10

notification-toast-quality-layout-10

Copy

Link

NOTIFICATION

Notification layout system

状態変化を短く伝えて次の行動へつなげる

保存

Start

Production-ready block composition.

警告

Compare

Production-ready block composition.

招待

Decide

Production-ready block composition.

パターン名: Notification – Quality Layout 10
概要: Notification category commercial part with a second distinct layout family.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 35% / 35% / 1px / 30%、推奨コンテンツ幅 1160px、主要ブロック group, cover, paragraph, heading, paragraph, columns, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-toast-quality-layout-10"} /-->

CSS:
.section-notification-toast-quality-layout-10 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-notification-toast-quality-layout-10').forEach((el) => el.dataset.ready = 'true');

Notification — Toast Stack

notification-toast-stack

Copy

Link

✓

保存しました

変更内容が反映されました

ⓘ

新しいバージョンが利用可能

v2.4.0 ・詳細を見る

アップロード失敗

ファイルサイズが上限を超えています

パターン名: Notification — Toast Stack
概要: Stack of three toast notifications (success / info / error) with status icons.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 480px、主要ブロック group, group, group, group, paragraph, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-toast-stack"} /-->

CSS:
.section-notification-toast-stack { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-notification-toast-stack').forEach((el) => el.dataset.ready = 'true');

Notification — Top Promo Bar

notification-top-banner

Copy

Link

🎉 期間限定キャンペーン: 全プラン 20% OFF — 詳細を見る →

パターン名: Notification — Top Promo Bar
概要: Gradient top notification bar with inline CTA link.
使用目的: Notification / Toast領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 1200px、主要ブロック group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/notification-top-banner"} /-->

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

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

Reference Complete — notification-toast 01 Sticky Entry

reference-complete-notification-toast-01-sticky-entry-echitora

Copy

Link

Sampled Site

17701 / Echitora

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

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

詳しく見る

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

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

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

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

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

Reference Complete — notification-toast 02 Editorial Issue

reference-complete-notification-toast-02-editorial-issue-kagami

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

Reference Complete — notification-toast 03 Brand Index

reference-complete-notification-toast-03-brand-index-meisei-kg

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-notification-toast-03-brand-index-meisei-kg"} /-->

CSS:
.section-reference-complete-notification-toast-03-brand-index-meisei-kg { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-notification-toast-03-brand-index-meisei-kg').forEach((el) => el.dataset.ready = 'true');

Reference Complete — notification-toast 04 Recruit Story

reference-complete-notification-toast-04-recruit-story-kikyougaoka

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-notification-toast-04-recruit-story-kikyougaoka"} /-->

CSS:
.section-reference-complete-notification-toast-04-recruit-story-kikyougaoka { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-notification-toast-04-recruit-story-kikyougaoka').forEach((el) => el.dataset.ready = 'true');

Reference Complete — notification-toast 05 Commerce Compare

reference-complete-notification-toast-05-commerce-compare-omodakaya

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

Reference Complete — notification-toast 06 Timeline Proof

reference-complete-notification-toast-06-timeline-proof-matsuo-komuten

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-notification-toast-06-timeline-proof-matsuo-komuten"} /-->

CSS:
.section-reference-complete-notification-toast-06-timeline-proof-matsuo-komuten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-notification-toast-06-timeline-proof-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');

Reference Complete — notification-toast 07 Gallery Led

reference-complete-notification-toast-07-gallery-led-omotesando-ortho

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-notification-toast-07-gallery-led-omotesando-ortho"} /-->

CSS:
.section-reference-complete-notification-toast-07-gallery-led-omotesando-ortho { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-notification-toast-07-gallery-led-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');

Reference Complete — notification-toast 08 Dashboard Proof

reference-complete-notification-toast-08-dashboard-proof-suntory-sic

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-notification-toast-08-dashboard-proof-suntory-sic"} /-->

CSS:
.section-reference-complete-notification-toast-08-dashboard-proof-suntory-sic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-notification-toast-08-dashboard-proof-suntory-sic').forEach((el) => el.dataset.ready = 'true');

Reference Complete — notification-toast 09 Contact Ready

reference-complete-notification-toast-09-contact-ready-notahotel-architects

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-notification-toast-09-contact-ready-notahotel-architects"} /-->

CSS:
.section-reference-complete-notification-toast-09-contact-ready-notahotel-architects { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-notification-toast-09-contact-ready-notahotel-architects').forEach((el) => el.dataset.ready = 'true');

Reference Complete — notification-toast 10 Mobile Rail

reference-complete-notification-toast-10-mobile-rail-obunko

Copy

Link

Obunko

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-notification-toast-10-mobile-rail-obunko"} /-->

CSS:
.section-reference-complete-notification-toast-10-mobile-rail-obunko { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-notification-toast-10-mobile-rail-obunko').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 035 Kagami

sankou100-035-kagami

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-035-kagami"} /-->

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

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

SANKOU100 — 075 Spicato Daruma

sankou100-075-spicato-daruma

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-075-spicato-daruma"} /-->

CSS:
.section-sankou100-075-spicato-daruma { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-075-spicato-daruma').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 01 Janu

sankoumax-notification-toast-01-janu

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-01-janu"} /-->

CSS:
.section-sankoumax-notification-toast-01-janu { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 02 Daimatsu

sankoumax-notification-toast-02-daimatsu

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-02-daimatsu"} /-->

CSS:
.section-sankoumax-notification-toast-02-daimatsu { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 03 Omotesando Ortho

sankoumax-notification-toast-03-omotesando-ortho

Copy

Link

数字で納得させる

33%

改善率

8分

短縮

33021

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-03-omotesando-ortho"} /-->

CSS:
.section-sankoumax-notification-toast-03-omotesando-ortho { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 04 Dodasports

sankoumax-notification-toast-04-dodasports

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-04-dodasports"} /-->

CSS:
.section-sankoumax-notification-toast-04-dodasports { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 05 Ja Aichi Recruit

sankoumax-notification-toast-05-ja-aichi-recruit

Copy

Link

Ja Aichi Recruit

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

About
Service
Works

News
Recruit
Contact

Sample 4705

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-05-ja-aichi-recruit"} /-->

CSS:
.section-sankoumax-notification-toast-05-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 06 Kiyasuku

sankoumax-notification-toast-06-kiyasuku

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-06-kiyasuku"} /-->

CSS:
.section-sankoumax-notification-toast-06-kiyasuku { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 07 Hirono Recruit

sankoumax-notification-toast-07-hirono-recruit

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-07-hirono-recruit"} /-->

CSS:
.section-sankoumax-notification-toast-07-hirono-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 08 Ichizenbooks

sankoumax-notification-toast-08-ichizenbooks

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-08-ichizenbooks"} /-->

CSS:
.section-sankoumax-notification-toast-08-ichizenbooks { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 09 Mec Residence Recruit

sankoumax-notification-toast-09-mec-residence-recruit

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-09-mec-residence-recruit"} /-->

CSS:
.section-sankoumax-notification-toast-09-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 10 Greenpark Santo

sankoumax-notification-toast-10-greenpark-santo

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-10-greenpark-santo"} /-->

CSS:
.section-sankoumax-notification-toast-10-greenpark-santo { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 11 Land Sapporo

sankoumax-notification-toast-11-land-sapporo

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-11-land-sapporo"} /-->

CSS:
.section-sankoumax-notification-toast-11-land-sapporo { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 12 Tokachi Fruits

sankoumax-notification-toast-12-tokachi-fruits

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-12-tokachi-fruits"} /-->

CSS:
.section-sankoumax-notification-toast-12-tokachi-fruits { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 13 Echitora

sankoumax-notification-toast-13-echitora

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-13-echitora"} /-->

CSS:
.section-sankoumax-notification-toast-13-echitora { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 14 Megamis

sankoumax-notification-toast-14-megamis

Copy

Link

4714

Megamis

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-14-megamis"} /-->

CSS:
.section-sankoumax-notification-toast-14-megamis { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 15 Kagami

sankoumax-notification-toast-15-kagami

Copy

Link

Sampled Site

4715 / Kagami

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-15-kagami"} /-->

CSS:
.section-sankoumax-notification-toast-15-kagami { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 16 Antscr

sankoumax-notification-toast-16-antscr

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-16-antscr"} /-->

CSS:
.section-sankoumax-notification-toast-16-antscr { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 17 Meisei Kg

sankoumax-notification-toast-17-meisei-kg

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-17-meisei-kg"} /-->

CSS:
.section-sankoumax-notification-toast-17-meisei-kg { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 18 Iamwithyou

sankoumax-notification-toast-18-iamwithyou

Copy

Link

Collage

素材感を重ねる

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

4718

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-18-iamwithyou"} /-->

CSS:
.section-sankoumax-notification-toast-18-iamwithyou { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 19 Depsoa

sankoumax-notification-toast-19-depsoa

Copy

Link

Depsoa

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-19-depsoa"} /-->

CSS:
.section-sankoumax-notification-toast-19-depsoa { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 20 Nothing Tech

sankoumax-notification-toast-20-nothing-tech

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-20-nothing-tech"} /-->

CSS:
.section-sankoumax-notification-toast-20-nothing-tech { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 21 Upvege

sankoumax-notification-toast-21-upvege

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-21-upvege"} /-->

CSS:
.section-sankoumax-notification-toast-21-upvege { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 22 Fujiya1935

sankoumax-notification-toast-22-fujiya1935

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-22-fujiya1935"} /-->

CSS:
.section-sankoumax-notification-toast-22-fujiya1935 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-22-fujiya1935').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 23 Omodakaya

sankoumax-notification-toast-23-omodakaya

Copy

Link

数字で納得させる

53%

改善率

10分

短縮

33161

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-23-omodakaya"} /-->

CSS:
.section-sankoumax-notification-toast-23-omodakaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-23-omodakaya').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 24 Favtown

sankoumax-notification-toast-24-favtown

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-24-favtown"} /-->

CSS:
.section-sankoumax-notification-toast-24-favtown { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 25 Mizuya Kyoto

sankoumax-notification-toast-25-mizuya-kyoto

Copy

Link

Mizuya Kyoto

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

About
Service
Works

News
Recruit
Contact

Sample 4725

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-25-mizuya-kyoto"} /-->

CSS:
.section-sankoumax-notification-toast-25-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-25-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 26 Allright Inc

sankoumax-notification-toast-26-allright-inc

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-26-allright-inc"} /-->

CSS:
.section-sankoumax-notification-toast-26-allright-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-26-allright-inc').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 27 Jins Holdings

sankoumax-notification-toast-27-jins-holdings

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-27-jins-holdings"} /-->

CSS:
.section-sankoumax-notification-toast-27-jins-holdings { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-27-jins-holdings').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 28 Tsuchitokaze

sankoumax-notification-toast-28-tsuchitokaze

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-28-tsuchitokaze"} /-->

CSS:
.section-sankoumax-notification-toast-28-tsuchitokaze { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-28-tsuchitokaze').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 29 Yamato 50Th

sankoumax-notification-toast-29-yamato-50th

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-29-yamato-50th"} /-->

CSS:
.section-sankoumax-notification-toast-29-yamato-50th { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-29-yamato-50th').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 30 Action Npo

sankoumax-notification-toast-30-action-npo

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-30-action-npo"} /-->

CSS:
.section-sankoumax-notification-toast-30-action-npo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-30-action-npo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 31 Mycampus

sankoumax-notification-toast-31-mycampus

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-31-mycampus"} /-->

CSS:
.section-sankoumax-notification-toast-31-mycampus { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — notification-toast 32 Mejinavi

sankoumax-notification-toast-32-mejinavi

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-32-mejinavi"} /-->

CSS:
.section-sankoumax-notification-toast-32-mejinavi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-32-mejinavi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 33 Niwaya

sankoumax-notification-toast-33-niwaya

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-33-niwaya"} /-->

CSS:
.section-sankoumax-notification-toast-33-niwaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-33-niwaya').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 34 Mindful Connect

sankoumax-notification-toast-34-mindful-connect

Copy

Link

4734

Mindful Connect

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-34-mindful-connect"} /-->

CSS:
.section-sankoumax-notification-toast-34-mindful-connect { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-34-mindful-connect').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 35 Spicato Daruma

sankoumax-notification-toast-35-spicato-daruma

Copy

Link

Sampled Site

4735 / Spicato Daruma

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-35-spicato-daruma"} /-->

CSS:
.section-sankoumax-notification-toast-35-spicato-daruma { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-35-spicato-daruma').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 36 Morohoshi Portfolio

sankoumax-notification-toast-36-morohoshi-portfolio

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-36-morohoshi-portfolio"} /-->

CSS:
.section-sankoumax-notification-toast-36-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-36-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 37 Vision Structure

sankoumax-notification-toast-37-vision-structure

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-37-vision-structure"} /-->

CSS:
.section-sankoumax-notification-toast-37-vision-structure { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-37-vision-structure').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 38 Nakiri Shota

sankoumax-notification-toast-38-nakiri-shota

Copy

Link

Collage

素材感を重ねる

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

4738

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-38-nakiri-shota"} /-->

CSS:
.section-sankoumax-notification-toast-38-nakiri-shota { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-38-nakiri-shota').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 39 Koba Clinic

sankoumax-notification-toast-39-koba-clinic

Copy

Link

Koba

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-39-koba-clinic"} /-->

CSS:
.section-sankoumax-notification-toast-39-koba-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-39-koba-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 40 Ems Recruit

sankoumax-notification-toast-40-ems-recruit

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-40-ems-recruit"} /-->

CSS:
.section-sankoumax-notification-toast-40-ems-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-40-ems-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 41 Felissimo Panda

sankoumax-notification-toast-41-felissimo-panda

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-41-felissimo-panda"} /-->

CSS:
.section-sankoumax-notification-toast-41-felissimo-panda { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-41-felissimo-panda').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 42 Iriam Miraito

sankoumax-notification-toast-42-iriam-miraito

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-42-iriam-miraito"} /-->

CSS:
.section-sankoumax-notification-toast-42-iriam-miraito { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-42-iriam-miraito').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 43 Gaaboo

sankoumax-notification-toast-43-gaaboo

Copy

Link

数字で納得させる

73%

改善率

3分

短縮

33301

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-43-gaaboo"} /-->

CSS:
.section-sankoumax-notification-toast-43-gaaboo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-43-gaaboo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — notification-toast 44 Violet Patisserie

sankoumax-notification-toast-44-violet-patisserie

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-notification-toast-44-violet-patisserie"} /-->

CSS:
.section-sankoumax-notification-toast-44-violet-patisserie { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-notification-toast-44-violet-patisserie').forEach((el) => el.dataset.ready = 'true');

◈ Blanc Nail

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

Foundations

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

Content

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

Business

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

UI Components

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

通知 / トースト · Notification / Toast · Blanc Nail

通知 / トースト

通知を商用サイトで使いやすくする

状態変化を短く伝えて次の行動へつなげる

用途を固定して内容を展開

通知を商用サイトで使いやすくする

保存

警告

招待

更新

通知

通知を商用サイトで使いやすくする

Notification layout system

Operational ledger

Primary message area

Notification layout system

Notification layout system

保存

警告

招待

Notification layout system

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

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

迷わない比較カード

見つける

選ぶ

進む

写真と要点で信頼を作る

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

状況を即座に把握する

72

入力前に安心させる

Obunko

切り替え前提の情報整理

切り替え前提の情報整理

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

33%

8分

33021

次の相談先を明確にする

Ja Aichi Recruit

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

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

People Line

静かな思想を置く

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

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Depsoa

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

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

53%

10分

33161

次の相談先を明確にする