フィーチャー · Features · Blanc Nail

検索…

CATALOG › Content › Features

フィーチャー

サービスの強みを並列に提示。3 / 4 / 6 列のグリッドバリエーション。

14

Patterns

Content

Group

isValid=0

Verified

CSS

Animation

01

Features — 3 Column Icon Cards

features-3col-icons

FEATURES

選ばれる3つの理由

高速パフォーマンス

ミリ秒単位で応答する最適化されたエンジン。大規模トラフィックでも安定した動作を保証します。

🛡️

エンタープライズ級セキュリティ

SOC 2 Type II 認定、エンドツーエンド暗号化、ロールベースのアクセス制御で大切なデータを保護。

🚀

かんたんスケーリング

ワンクリックで容量を拡張。需要に応じて自動でリソースを最適化、コストを抑えながら成長を支援。

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

CSS:
.section-features-3col-icons { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-3col-icons').forEach((el) => el.dataset.ready = 'true');

02

Features — Alternating Image Rows

features-alternating

🎨 DESIGN

美しさは、機能の一部

細部まで磨き上げられたインターフェース。視覚的な階層、色彩のバランス、タイポグラフィの調和。すべてが一つの体験として機能します。

⚙️ ENGINEERING

堅牢なアーキテクチャ

マイクロサービス、自動スケーリング、グローバル CDN。最先端の技術スタックで、99.99% の稼働率と数百万リクエスト/秒の処理を実現。

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

CSS:
.section-features-alternating { max-width: 1200px; margin-inline: auto; }

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

03

Features — Bento Grid

features-bento

プラットフォーム全体像

⚡ Real-time

瞬時に反映されるデータ更新

WebSocket ベースのリアルタイム同期。チームメンバーの操作が即座に画面へ反映されます。

🔐

セキュア

SOC 2 / GDPR 準拠

🌍

グローバル

200+ エッジロケーション

✨ AI Powered

AI が支援する次世代ワークフロー

繰り返し作業を自動化、提案を生成、エラーを事前に発見。あなたの仕事を 10倍速く。

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

CSS:
.section-features-bento { max-width: 1200px; margin-inline: auto; }

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

04

Features — Numbered Steps

features-numbered

導入までの 4 ステップ

01

サインアップ

メールアドレスだけで 30 秒以内にアカウント作成。

02

セットアップ

ガイド付きセットアップで 5 分以内に環境準備完了。

03

カスタマイズ

ニーズに合わせて柔軟に調整、テンプレートも充実。

04

ローンチ

ワンクリックで本番環境へ、世界中のユーザーへ届けます。

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

CSS:
.section-features-numbered { max-width: 1200px; margin-inline: auto; }

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

05

Features — EX01 Icon Circle Trio

features-ex01-icon-circles

選ばれる理由

🌿

厳選した素材

産地に足を運び、納得したものだけを仕入れています。

🤲

手しごとの丁寧さ

機械に頼れない工程こそ、人の手と目で仕上げます。

🛡️

買ったあとも安心

修理・調整は永年対応。長くお使いいただくための窓口があります。

  • パターン名: Features — EX01 Icon Circle Trio
  • 概要: Three reasons with soft icon circles and descriptions.
  • 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex01-icon-circles"} /-->

CSS:
.section-features-ex01-icon-circles { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-ex01-icon-circles').forEach((el) => el.dataset.ready = 'true');

06

Features — EX02 Bento Asymmetric

features-ex02-bento

いちばんの強み

担当者が最初から最後まで変わりません

ヒアリングからアフターフォローまで一貫して同じ担当者。言った・言わないが起きない体制で、細かなご要望も漏らしません。

明朗な価格

見積り後の追加請求は一切ありません。

地域密着 20 年

何かあれば 30 分で駆けつけられる距離感です。

  • パターン名: Features — EX02 Bento Asymmetric
  • 概要: Asymmetric bento layout: one large card and two stacked cards.
  • 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex02-bento"} /-->

CSS:
.section-features-ex02-bento { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-ex02-bento').forEach((el) => el.dataset.ready = 'true');

07

Features — EX03 Checklist Two Column

features-ex03-checklist

料金に含まれるもの

✅ 事前カウンセリング
✅ 当日の施術一式
✅ アフターケア用品

✅ 一週間後のチェック
✅ LINE での相談(期間中無制限)
✅ 保証書の発行

  • パターン名: Features — EX03 Checklist Two Column
  • 概要: Check-mark feature list split into two columns.
  • 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex03-checklist"} /-->

CSS:
.section-features-ex03-checklist { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-ex03-checklist').forEach((el) => el.dataset.ready = 'true');

08

Features — EX04 Numbered Flow Four

features-ex04-numbered-steps

ご利用の流れ

01

ご相談

フォームか電話で。概要だけで OK です。

02

現地調査・お見積り

無料で伺います。その場で概算をご提示。

03

施工

進捗は毎日写真でご報告します。

04

お引き渡し

保証書とともに。1 年後の無料点検つき。

  • パターン名: Features — EX04 Numbered Flow Four
  • 概要: Four-step service flow with big numbers.
  • 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex04-numbered-steps"} /-->

CSS:
.section-features-ex04-numbered-steps { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-ex04-numbered-steps').forEach((el) => el.dataset.ready = 'true');

09

Features — EX05 Alternating Rows

features-ex05-alternating

朝採れを、その日のうちに

提携農家から毎朝届く野菜を、ロスなく使い切る献立に。鮮度が味の土台です。

器も、空間も、ごちそう

地元作家の器と、季節の設え。料理が運ばれる前から、食事は始まっています。

  • パターン名: Features — EX05 Alternating Rows
  • 概要: Two alternating image and text feature rows.
  • 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex05-alternating"} /-->

CSS:
.section-features-ex05-alternating { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-ex05-alternating').forEach((el) => el.dataset.ready = 'true');

10

Features — EX06 Numbers Band

features-ex06-stats-band

創業 38 年

地域での歴史

12,000 件

累計ご対応

97.8%

ご紹介・リピート率

有資格者 9 名

専門スタッフ体制

  • パターン名: Features — EX06 Numbers Band
  • 概要: Four trust numbers in a dark band.
  • 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex06-stats-band"} /-->

CSS:
.section-features-ex06-stats-band { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-ex06-stats-band').forEach((el) => el.dataset.ready = 'true');

11

Features — EX07 Us versus Typical

features-ex07-compare

よくあるサービスとの違い

一般的なサービス

- 担当が毎回変わる
- 追加費用が後から判明
- 納品して終わり

当店の場合

✓ 専任担当が一貫対応
✓ 総額を最初に確定
✓ 1 年間の無償フォロー

  • パターン名: Features — EX07 Us versus Typical
  • 概要: Comparison columns: typical service versus this brand.
  • 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex07-compare"} /-->

CSS:
.section-features-ex07-compare { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-ex07-compare').forEach((el) => el.dataset.ready = 'true');

12

Features — EX08 Photo Feature Cards

features-ex08-photo-cards

私たちのこだわり

道具を育てる

毎晩の手入れを欠かさない道具たち。切れ味は仕事の誠実さです。

対話から始める

注文の前に、暮らしの話を。最適な提案は理解から生まれます。

直す前提でつくる

壊れたら直して、また使う。修理しやすい構造で長く寄り添います。

  • パターン名: Features — EX08 Photo Feature Cards
  • 概要: Three feature cards led by photos.
  • 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex08-photo-cards"} /-->

CSS:
.section-features-ex08-photo-cards { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-ex08-photo-cards').forEach((el) => el.dataset.ready = 'true');

13

Features — EX09 Brand Promise Vertical

features-ex09-promise

三つの約束

一、ごまかさないこと。
一、急がせないこと。
一、長く付き合うこと。

創業のときから、店の柱に貼ってある言葉です。

  • パターン名: Features — EX09 Brand Promise Vertical
  • 概要: Quiet vertical brand promise statement with three short vows.
  • 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex09-promise"} /-->

CSS:
.section-features-ex09-promise { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-ex09-promise').forEach((el) => el.dataset.ready = 'true');

14

Features — EX10 Guarantee Banner

features-ex10-guarantee

🏅

仕上がり満足保証

仕上がりにご満足いただけなければ、1 週間以内のお直しは無料。
それでもご納得いただけない場合は、料金を全額お返しします。

  • パターン名: Features — EX10 Guarantee Banner
  • 概要: Guarantee banner with badge feel and terms note.
  • 使用目的: Features領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/features-ex10-guarantee"} /-->

CSS:
.section-features-ex10-guarantee { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-features-ex10-guarantee').forEach((el) => el.dataset.ready = 'true');