装飾 · Decoration · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Foundations › Decoration

装飾

セクション仕切り、装飾線、引用フレーム。空間に音を与える要素。

13

Patterns

Foundations

Group

isValid=0

Verified

CSS

Animation

01

Decoration — Wave + Diamond Dividers

decoration-divider-wave

Copy
Link

セクション ディバイダ

◆ ◆ ◆

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

CSS:
.section-decoration-divider-wave { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-decoration-divider-wave').forEach((el) => el.dataset.ready = 'true');

02

Decoration — Divider Variants

decoration-dividers

Copy
Link

装飾

・ ・ ・

SECTION

✦ ✦ ✦

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

CSS:
.section-decoration-dividers { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-decoration-dividers').forEach((el) => el.dataset.ready = 'true');

03

Decoration — Giant Quote Marks

decoration-quote-marks

Copy
Link

“

シンプルさとは究極の洗練である。

— LEONARDO DA VINCI

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

CSS:
.section-decoration-quote-marks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-decoration-quote-marks').forEach((el) => el.dataset.ready = 'true');

04

Decoration — Organic Shape Blobs

decoration-shape-blobs

Copy
Link

🌸

柔らかなブロブ装飾

不規則な border-radius を使った有機的な装飾シェイプ。ヒーロー横や記事のアクセントに。

✨

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

CSS:
.section-decoration-shape-blobs { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-decoration-shape-blobs').forEach((el) => el.dataset.ready = 'true');

05

Deco — FX01 Embers

fx-embers

Copy
Link

炭火の火の粉が舞う

  • パターン名: 火の粉 — Deco — FX01 Embers
  • 概要: 暗い帯の中を火の粉が舞い上がる
  • 適用シーン: 炭火・夜メニュー・冬の帯
  • 使い方: ダーク背景のグループに fx-embers(全幅推奨)
  • メリット: 空気感が一気に出る
  • デメリット: 明るい背景では見えない
  • バリエーション案: 粒の量
  • 実装時の注意点: 全幅ダーク面での使用推奨
使い方: ダーク背景のグループに fx-embers(全幅推奨)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2

06

Deco — FX02 Steam

fx-steam

Copy
Link

☕

  • パターン名: 湯気 — Deco — FX02 Steam
  • 概要: 要素から湯気が立ちのぼる
  • 適用シーン: カフェ・温泉・料理写真の傍
  • 使い方: 段落やグループに fx-steam
  • メリット: 小さく効く生活感
  • デメリット: 控えめ(それが良い)
  • バリエーション案: 量・速さ
  • 実装時の注意点: 要素の上に余白を
使い方: 段落やグループに fx-steam
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2

07

Deco — FX03 Float

fx-float

Copy
Link
  • パターン名: ふわふわ浮遊 — Deco — FX03 Float
  • 概要: 要素がゆっくり上下に浮遊し続ける
  • 適用シーン: バッジ・イラスト・装飾画像
  • 使い方: 画像やグループに fx-float
  • メリット: ページに呼吸感
  • デメリット: 本文には不向き
  • バリエーション案: 振幅
  • 実装時の注意点: 小さめ要素向け
使い方: 画像やグループに fx-float
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2

08

Deco — FX04 Drift

fx-drift

Copy
Link

☁

  • パターン名: 漂い — Deco — FX04 Drift
  • 概要: 雲や葉がゆっくり左右に漂う
  • 適用シーン: 空・自然モチーフの装飾
  • 使い方: 段落(絵文字/小画像)に fx-drift
  • メリット: 背景に穏やかな動き
  • デメリット: 主張は弱い
  • バリエーション案: 振れ幅±4vw
  • 実装時の注意点: 中央寄せで自動配置(はみ出し対策済み)
使い方: 段落(絵文字/小画像)に fx-drift
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2

09

Deco — FX05 Blob Frame

fx-blob

Copy
Link
  • パターン名: 有機フレーム — Deco — FX05 Blob Frame
  • 概要: 写真の輪郭が有機的に変形し続ける
  • 適用シーン: ビューティ・キッズ・柔らかい世界観
  • 使い方: グループに fx-blob(中に画像)
  • メリット: 角のない優しい印象
  • デメリット: 四隅が欠ける
  • バリエーション案: 変形速度
  • 実装時の注意点: 被写体中央の写真で
使い方: グループに fx-blob(中に画像)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2

10

Deco — FX06 Orbit

fx-orbit

Copy
Link

軌道の中心

  • パターン名: 周回ドット — Deco — FX06 Orbit
  • 概要: 小さな点が要素の周りを回り続ける
  • 適用シーン: ロゴ・バッジ・アイコンの強調
  • 使い方: グループに fx-orbit
  • メリット: さりげない視線誘導
  • デメリット: 多用すると騒がしい
  • バリエーション案: 色・速度
  • 実装時の注意点: 正方形に近い要素向け
使い方: グループに fx-orbit
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2

11

Deco — FX07 Lava

fx-lava

Copy
Link

Glassmorphism

  • パターン名: ラバランプ — Deco — FX07 Lava
  • 概要: 溶岩のような光塊が背景をうごめく
  • 適用シーン: ダークヒーロー・音楽/バー系
  • 使い方: ダーク背景グループに fx-lava
  • メリット: 雰囲気の主役になれる背景
  • デメリット: 文字の可読性に注意
  • バリエーション案: 色変更
  • 実装時の注意点: 上に置く文字は太め・明色で
使い方: ダーク背景グループに fx-lava
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2

12

Deco — FX08 Scanline

fx-scanline

Copy
Link
  • パターン名: 走査線 — Deco — FX08 Scanline
  • 概要: CRT風の走査線が画面を走る
  • 適用シーン: レトロ・ゲーム・テック系
  • 使い方: グループに fx-scanline
  • メリット: レトロ演出が1クラス
  • デメリット: 業種を選ぶ
  • バリエーション案: 線の濃さ
  • 実装時の注意点: 暗背景推奨
使い方: グループに fx-scanline
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2

13

Deco — FX09 BG Morph

fx-bg-morph

Copy
Link

背景色がスクロール位置で変わります

  • パターン名: 背景モーフ — Deco — FX09 BG Morph
  • 概要: 背景グラデーションがゆっくり変化し続ける
  • 適用シーン: ヒーロー・CTA帯の背景
  • 使い方: グループに fx-bg-morph
  • メリット: 静かな高級感
  • デメリット: –
  • バリエーション案: 色の組み合わせ
  • 実装時の注意点: テキストとのコントラスト確保
使い方: グループに fx-bg-morph
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2