検索…

カタログ統計

CATALOG › UI Components › Card Layout

カードレイアウト

情報カードのバリエーション。グリッド、リスト、ヒーローカード。

Patterns

UI Components

Group

isValid=0

Verified

CSS

Animation

Card — Horizontal Wide

card-horizontal-wide

Copy

Link

デザイン

ミニマルデザインの原則

余白を活かし、要素を絞ることで本当に大切なものが際立ちます。

パターン名: Card — Horizontal Wide
概要: Single wide horizontal card: image left (40%) + text content right.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 40%、推奨コンテンツ幅 720px、主要ブロック group, group, columns, column, image, column, paragraph, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/card-horizontal-wide"} /-->

CSS:
.section-card-horizontal-wide { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-card-horizontal-wide').forEach((el) => el.dataset.ready = 'true');

Card — Minimal Numbered Steps

card-minimal-numbered

Copy

Link

Discover

お客様の課題を丁寧にヒアリング。

Design

最適な体験を一緒に設計します。

Deliver

最高品質で納品・運用サポート。

Grow

長期的な成長をサポート。

パターン名: Card — Minimal Numbered Steps
概要: Four minimal numbered cards (01–04) for process/step showcase.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/card-minimal-numbered"} /-->

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

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

Cards — Stacked Horizontal

cards-horizontal-split

Copy

Link

📚

ドキュメント

基本概念から API リファレンスまで、すべての情報を 1 か所に。

🛠️

CLI ツール

npm でインストール、コマンド一発でローカル開発を高速化。

💬

コミュニティ

Discord と GitHub Discussions で開発者と直接やりとり。

パターン名: Cards — Stacked Horizontal
概要: Stacked horizontal cards with icon-left content-right, suited for resource lists.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 880px、主要ブロック group, group, group, paragraph, group, heading, paragraph, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/cards-horizontal-split"} /-->

CSS:
.section-cards-horizontal-split { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cards-horizontal-split').forEach((el) => el.dataset.ready = 'true');

Cards — 3-Column Pastel Icon Cards

cards-icon-3col

Copy

Link

⚡

高速

業界最速のクエリ実行で、待ち時間ゼロのユーザー体験を提供。

🛡️

セキュア

SOC2 Type II 準拠、E2E 暗号化、定期的な第三者監査。

🤝

支援体制

専任のカスタマーサクセスがオンボーディングから運用までサポート。

パターン名: Cards — 3-Column Pastel Icon Cards
概要: Three pastel cards with emoji icons, used as a generic feature row.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/cards-icon-3col"} /-->

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

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

Cards — Dark Outline 4-up

cards-outline-quad

Copy

Link

調査

課題と機会を、現場のヒアリングから明確化します。

設計

情報設計と UI 設計を同時に進め、骨格を固めます。

実装

小さく素早く、検証しながら積み上げる開発。

運用

継続的な改善のための、計測と仮説検証の仕組み。

パターン名: Cards — Dark Outline 4-up
概要: Four numbered process cards on a dark background with hairline borders.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/cards-outline-quad"} /-->

CSS:
.section-cards-outline-quad { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-cards-outline-quad').forEach((el) => el.dataset.ready = 'true');

Cards — EX01 Icon Card Trio

card-layout-ex01-icon-3

Copy

Link

🏡

住まいの相談

新築からリフォームまで、暮らしの相談窓口。

詳しく見る →

🛠️

修理・補修

建具の不調から水まわりまで即日対応。

詳しく見る →

🌿

外構・庭づくり

手入れしやすい庭を、植栽から照明まで。

詳しく見る →

パターン名: Cards — EX01 Icon Card Trio
概要: Three icon-led service cards with arrow links.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/card-layout-ex01-icon-3"} /-->

CSS:
.section-card-layout-ex01-icon-3 { max-width: 1200px; margin-inline: auto; }

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

Cards — EX02 Bento Mixed Grid

card-layout-ex02-bento

Copy

Link

PICK UP

夏の体験プログラム
受付を開始しました

親子で参加できる全 6 回。先着 20 組まで。

📣 会員向けのお知らせ

7 月から営業時間が変わります。

🎫 紹介キャンペーン

お友だち紹介で双方に 1,000 円分進呈。

パターン名: Cards — EX02 Bento Mixed Grid
概要: Bento layout: one tall feature card plus two stacked cards.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/card-layout-ex02-bento"} /-->

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

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

Cards — EX03 Horizontal Media Card

card-layout-ex03-media-horizontal

Copy

Link

期間限定・ 6/30 まで

初夏の手しごと市、出店者が決まりました

県内外から 32 組が参加。出店マップと見どころを公開しています。

パターン名: Cards — EX03 Horizontal Media Card
概要: Wide media card: photo left, body and meta right.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/card-layout-ex03-media-horizontal"} /-->

CSS:
.section-card-layout-ex03-media-horizontal { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-card-layout-ex03-media-horizontal').forEach((el) => el.dataset.ready = 'true');

Cards — EX04 Quick Link Tiles

card-layout-ex04-link-tiles

Copy

Link

はじめての方へ →

料金のご案内 →

よくあるご質問 →

ご予約はこちら →

パターン名: Cards — EX04 Quick Link Tiles
概要: Compact two-by-two quick link tiles with arrows.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/card-layout-ex04-link-tiles"} /-->

CSS:
.section-card-layout-ex04-link-tiles { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-card-layout-ex04-link-tiles').forEach((el) => el.dataset.ready = 'true');

Cards — EX05 Glass Cards on Dark

card-layout-ex05-glass-dark

Copy

Link

🌙 ナイトプラン

20 時以降のご利用で 15% オフ。仕事帰りにどうぞ。

🌅 モーニングプラン

朝 7 時開始。出勤前の 60 分を有効活用。

パターン名: Cards — EX05 Glass Cards on Dark
概要: Two glass-morphism info cards on a dark gradient.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/card-layout-ex05-glass-dark"} /-->

CSS:
.section-card-layout-ex05-glass-dark { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-card-layout-ex05-glass-dark').forEach((el) => el.dataset.ready = 'true');

Cards — EX06 Image Top Grid Four

card-layout-ex06-image-top-4

Copy

Link

定番の食パン

季節のデニッシュ

焼き菓子

ギフトセット

パターン名: Cards — EX06 Image Top Grid Four
概要: Four compact cards with image tops and labels.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/card-layout-ex06-image-top-4"} /-->

CSS:
.section-card-layout-ex06-image-top-4 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-card-layout-ex06-image-top-4').forEach((el) => el.dataset.ready = 'true');

Cards — EX07 Tagged Info Cards

card-layout-ex07-tag-cards

Copy

Link

法人向け

補助金対象

オフィス向け定期メンテナンス

月 1 回の巡回点検で、突発トラブルを未然に防ぎます。

個人向け

おうち丸ごと点検パック

水回り・電気・建具を半日でまとめて点検します。

パターン名: Cards — EX07 Tagged Info Cards
概要: Two info cards with tag chips and short descriptions.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/card-layout-ex07-tag-cards"} /-->

CSS:
.section-card-layout-ex07-tag-cards { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-card-layout-ex07-tag-cards').forEach((el) => el.dataset.ready = 'true');

Cards — EX08 Zen Paper Cards

card-layout-ex08-zen-paper

Copy

Link

朝の部

7:00 — 9:00
座禅と朝粥の会。
初めての方も歓迎します。

夕の部

17:00 — 19:00
写経と薄茶の会。
一日の終わりを静かに。

パターン名: Cards — EX08 Zen Paper Cards
概要: Two quiet washi-tone cards with vertical-rhythm copy.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/card-layout-ex08-zen-paper"} /-->

CSS:
.section-card-layout-ex08-zen-paper { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-card-layout-ex08-zen-paper').forEach((el) => el.dataset.ready = 'true');

Cards — EX09 Stat Highlight Cards

card-layout-ex09-stat-cards

Copy

Link

48 時間

発酵にかける時間。急がないことが、おいしさの近道です。

毎朝 5 時

窯に火が入る時間。開店までに 40 種を焼き上げます。

パターン名: Cards — EX09 Stat Highlight Cards
概要: Two stat cards combining a number with explanation.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/card-layout-ex09-stat-cards"} /-->

CSS:
.section-card-layout-ex09-stat-cards { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-card-layout-ex09-stat-cards').forEach((el) => el.dataset.ready = 'true');

Cards — EX10 Notice Card Stack

card-layout-ex10-notice-stack

Copy

Link

【重要】6/25(木)は設備点検のため臨時休業します

【お願い】ご来店時は予約番号をお手元にご用意ください

【お知らせ】夏季ギフトの予約受付を開始しました

パターン名: Cards — EX10 Notice Card Stack
概要: Stacked notice cards with severity color coding.
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/card-layout-ex10-notice-stack"} /-->

CSS:
.section-card-layout-ex10-notice-stack { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-card-layout-ex10-notice-stack').forEach((el) => el.dataset.ready = 'true');

Card — FX01 Flip Card

fx-flip-card

Copy

Link

表面

裏面の情報

パターン名: フリップカード — Card — FX01 Flip Card
概要: ホバーで裏面が現れる両面カード
適用シーン: メニュー詳細・スタッフ紹介
使い方: グループに fx-flip-card(表裏2つの子グループ)

メリット: 情報を2倍載せられる
デメリット: タッチではタップ切替
バリエーション案: 回転方向
実装時の注意点: 表裏は同サイズに

使い方: グループに fx-flip-card(表裏2つの子グループ)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

Card — FX02 Sticky Stack

fx-stack

Copy

Link

積層カード 1

積層カード 2

積層カード 3

パターン名: スティッキー積層 — Card — FX02 Sticky Stack
概要: スクロールでカードが順に重なっていく
適用シーン: 特徴・プランの段階提示
使い方: グループに fx-stack(子カードを縦に並べる)

メリット: 物語性のある提示
デメリット: カード枚数×高さが必要
バリエーション案: ずらし量
実装時の注意点: 3〜4枚が適量

使い方: グループに fx-stack(子カードを縦に並べる)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

Card — FX03 Glow Shadow

fx-glow-shadow

Copy

Link

パターン名: 発光シャドウ — Card — FX03 Glow Shadow
概要: カードの裏から色付きの光がにじむ
適用シーン: プレミアムプラン・注目カード
使い方: グループに fx-glow-shadow(中に画像/内容)

メリット: 1枚だけ目立たせられる
デメリット: 多用すると効果が消える
バリエーション案: 光色
実装時の注意点: –

使い方: グループに fx-glow-shadow(中に画像/内容)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

カードレイアウト · Card Layout · Blanc Nail

カードレイアウト

ミニマルデザインの原則

Discover

Design

Deliver

Grow

ドキュメント

CLI ツール

コミュニティ

高速

セキュア

支援体制

調査

設計

実装

運用

住まいの相談

修理 ・ 補修

外構 ・ 庭づくり

夏の体験プログラム受付を開始しました

📣 会員向けのお知らせ

🎫 紹介キャンペーン

初夏の手しごと市、出店者が決まりました

🌙 ナイトプラン

🌅 モーニングプラン

オフィス向け定期メンテナンス

おうち丸ごと点検パック

朝の部

夕の部

修理・補修

外構・庭づくり

夏の体験プログラム
受付を開始しました