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

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Utility › Notification / Toast

通知 / トースト

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

16

Patterns

Utility

Group

isValid=0

Verified

CSS

Animation

01

Notification — Bell with Pulse Badge

notification-bell-badge

Copy
Link

🔔

通知

12

  • パターン名: 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');

02

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

03

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

04

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

05

Notification — Quality Layout 03

notification-toast-quality-layout-03

Copy
Link

通知

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

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

NOTIFICATION

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

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

01

保存

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

02

警告

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

03

招待

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

04

更新

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

  • パターン名: 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');

06

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

07

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

08

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

09

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

10

Notification – Quality Layout 08

notification-toast-quality-layout-08

Copy
Link

INDEX

01

保存

02

警告

03

招待

04

更新

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

11

Notification – Quality Layout 09

notification-toast-quality-layout-09

Copy
Link

NOTIFICATION

Notification layout system

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

01

保存

確認

Open

02

警告

修正

Open

03

招待

承認

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

12

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

13

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

14

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

15

Notif — FX01 Shake

fx-shake

Copy
Link
削除する
  • パターン名: シェイク — Notif — FX01 Shake
  • 概要: 注意要素が小刻みに揺れて注意を引く
  • 適用シーン: 締切・在庫僅少の告知
  • 使い方: 要素に fx-shake
  • メリット: 見逃し防止
  • デメリット: 常用すると煩い
  • バリエーション案: 揺れ幅
  • 実装時の注意点: 本当に重要な時だけ
使い方: 要素に fx-shake
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

16

Notif — FX02 Badge Pop

fx-badge

Copy
Link

NEW

  • パターン名: バッジポップ — Notif — FX02 Badge Pop
  • 概要: NEW/SALEバッジが弾んで登場する
  • 適用シーン: 新着・キャンペーンの印
  • 使い方: バッジ要素に fx-badge
  • メリット: 小さく強い視線誘導
  • デメリット: –
  • バリエーション案: 色
  • 実装時の注意点: 角に配置が定番
使い方: バッジ要素に fx-badge
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3