検索…

カタログ統計

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

Reference Brand — Editorial Index Rows

reference-brand-index-rows

Copy

Link

brand index

カードではなく、行で見せる導線。

Brand

理念、背景、ロゴ、トーンをまとめる導線。

View

Shop

店舗、体験、商品への導線。

View

Recruit

採用情報と社員紹介への導線。

View

パターン名: Reference Brand — Editorial Index Rows
概要: ブランドサイト向けの横長インデックス行。
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 22% / 58% / 20% / 1px、推奨コンテンツ幅 980px、主要ブロック group, paragraph, heading, group, columns, column, heading, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-brand-index-rows"} /-->

CSS:
.section-reference-brand-index-rows { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-brand-index-rows').forEach((el) => el.dataset.ready = 'true');

Reference Complete — card-layout 01 Sticky Entry

reference-complete-card-layout-01-sticky-entry-tsumari-chamame

Copy

Link

Sampled Site

15601 / Tsumari Chamame

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-card-layout-01-sticky-entry-tsumari-chamame"} /-->

CSS:
.section-reference-complete-card-layout-01-sticky-entry-tsumari-chamame { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-card-layout-01-sticky-entry-tsumari-chamame').forEach((el) => el.dataset.ready = 'true');

Reference Complete — card-layout 02 Editorial Issue

reference-complete-card-layout-02-editorial-issue-montblanc-pictures

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-card-layout-02-editorial-issue-montblanc-pictures"} /-->

CSS:
.section-reference-complete-card-layout-02-editorial-issue-montblanc-pictures { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-card-layout-02-editorial-issue-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');

Reference Complete — card-layout 03 Brand Index

reference-complete-card-layout-03-brand-index-rim-jins

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-card-layout-03-brand-index-rim-jins"} /-->

CSS:
.section-reference-complete-card-layout-03-brand-index-rim-jins { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-card-layout-03-brand-index-rim-jins').forEach((el) => el.dataset.ready = 'true');

Reference Complete — card-layout 04 Recruit Story

reference-complete-card-layout-04-recruit-story-violet-patisserie

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-card-layout-04-recruit-story-violet-patisserie"} /-->

CSS:
.section-reference-complete-card-layout-04-recruit-story-violet-patisserie { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-card-layout-04-recruit-story-violet-patisserie').forEach((el) => el.dataset.ready = 'true');

Reference Complete — card-layout 05 Commerce Compare

reference-complete-card-layout-05-commerce-compare-morinosato-clinic

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-card-layout-05-commerce-compare-morinosato-clinic"} /-->

CSS:
.section-reference-complete-card-layout-05-commerce-compare-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-card-layout-05-commerce-compare-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');

Reference Complete — card-layout 06 Timeline Proof

reference-complete-card-layout-06-timeline-proof-chugaitoen

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

CSS:
.section-reference-complete-card-layout-06-timeline-proof-chugaitoen { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-card-layout-06-timeline-proof-chugaitoen').forEach((el) => el.dataset.ready = 'true');

Reference Complete — card-layout 07 Gallery Led

reference-complete-card-layout-07-gallery-led-tenten

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-card-layout-07-gallery-led-tenten"} /-->

CSS:
.section-reference-complete-card-layout-07-gallery-led-tenten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-card-layout-07-gallery-led-tenten').forEach((el) => el.dataset.ready = 'true');

Reference Complete — card-layout 08 Dashboard Proof

reference-complete-card-layout-08-dashboard-proof-antscr

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-card-layout-08-dashboard-proof-antscr"} /-->

CSS:
.section-reference-complete-card-layout-08-dashboard-proof-antscr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-card-layout-08-dashboard-proof-antscr').forEach((el) => el.dataset.ready = 'true');

Reference Complete — card-layout 09 Contact Ready

reference-complete-card-layout-09-contact-ready-asuzac-recruit

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-card-layout-09-contact-ready-asuzac-recruit"} /-->

CSS:
.section-reference-complete-card-layout-09-contact-ready-asuzac-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-card-layout-09-contact-ready-asuzac-recruit').forEach((el) => el.dataset.ready = 'true');

Reference Complete — card-layout 10 Mobile Rail

reference-complete-card-layout-10-mobile-rail-tomore

Copy

Link

Tomore

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-card-layout-10-mobile-rail-tomore"} /-->

CSS:
.section-reference-complete-card-layout-10-mobile-rail-tomore { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-card-layout-10-mobile-rail-tomore').forEach((el) => el.dataset.ready = 'true');

SANKOU — Sticker Collage Brand Board

sankou-sticker-collage-brand-board

Copy

Link

POSTER

ALL MIX

あえて整列させないステッカー感のあるブランドボード。

TYPO / COLOR / PARTS

多彩な素材を一枚に圧縮します。

パターン名: SANKOU — Sticker Collage Brand Board
概要: 制作会社やキャンペーン向けのコラージュブランドボード。
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 32% / 1px / 34%、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, group, paragraph, image, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-sticker-collage-brand-board"} /-->

CSS:
.section-sankou-sticker-collage-brand-board { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-sticker-collage-brand-board').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 009 Newspicks Business

sankou100-009-newspicks-business

Copy

Link

数字で納得させる

29%

改善率

3分

短縮

163

導入数

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

CSS:
.section-sankou100-009-newspicks-business { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-009-newspicks-business').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 049 Meisei Kg

sankou100-049-meisei-kg

Copy

Link

数字で納得させる

69%

改善率

7分

短縮

443

導入数

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

CSS:
.section-sankou100-049-meisei-kg { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-049-meisei-kg').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 089 Vision Structure

sankou100-089-vision-structure

Copy

Link

数字で納得させる

39%

改善率

11分

短縮

723

導入数

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

CSS:
.section-sankou100-089-vision-structure { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-089-vision-structure').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 01 Amano Clinic

sankoumax-card-layout-01-amano-clinic

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-01-amano-clinic"} /-->

CSS:
.section-sankoumax-card-layout-01-amano-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-01-amano-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 02 Infocus

sankoumax-card-layout-02-infocus

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-02-infocus"} /-->

CSS:
.section-sankoumax-card-layout-02-infocus { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 03 Tomore

sankoumax-card-layout-03-tomore

Copy

Link

Collage

素材感を重ねる

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

2603

パターン名: SANKOU Max — card-layout 03 Tomore
概要: SANKOU100 sample setから展開したcard-layout向けcollage構成。
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 33% / 1px / 39% / 31% / 1px、推奨コンテンツ幅 3723px、主要ブロック 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/sankoumax-card-layout-03-tomore"} /-->

CSS:
.section-sankoumax-card-layout-03-tomore { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 04 Dan Brise Barber

sankoumax-card-layout-04-dan-brise-barber

Copy

Link

Dan

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-04-dan-brise-barber"} /-->

CSS:
.section-sankoumax-card-layout-04-dan-brise-barber { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-04-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 05 Allureville Elements

sankoumax-card-layout-05-allureville-elements

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-05-allureville-elements"} /-->

CSS:
.section-sankoumax-card-layout-05-allureville-elements { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-05-allureville-elements').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 06 Studio Cbr

sankoumax-card-layout-06-studio-cbr

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-06-studio-cbr"} /-->

CSS:
.section-sankoumax-card-layout-06-studio-cbr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-06-studio-cbr').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 07 Yamakachi

sankoumax-card-layout-07-yamakachi

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

CSS:
.section-sankoumax-card-layout-07-yamakachi { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 08 Chiikawa Pocket

sankoumax-card-layout-08-chiikawa-pocket

Copy

Link

数字で納得させる

38%

改善率

10分

短縮

18356

導入数

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

CSS:
.section-sankoumax-card-layout-08-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-08-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 09 Chiba Dojo

sankoumax-card-layout-09-chiba-dojo

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-09-chiba-dojo"} /-->

CSS:
.section-sankoumax-card-layout-09-chiba-dojo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-09-chiba-dojo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 10 Twoe

sankoumax-card-layout-10-twoe

Copy

Link

Twoe

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

About
Service
Works

News
Recruit
Contact

Sample 2610

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-10-twoe"} /-->

CSS:
.section-sankoumax-card-layout-10-twoe { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 11 Kamata Shoyu

sankoumax-card-layout-11-kamata-shoyu

Copy

Link

NEWS

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

確認する

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

CSS:
.section-sankoumax-card-layout-11-kamata-shoyu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-11-kamata-shoyu').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 12 Fumino

sankoumax-card-layout-12-fumino

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-12-fumino"} /-->

CSS:
.section-sankoumax-card-layout-12-fumino { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 13 Anbe Shoten

sankoumax-card-layout-13-anbe-shoten

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-13-anbe-shoten"} /-->

CSS:
.section-sankoumax-card-layout-13-anbe-shoten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-13-anbe-shoten').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 14 Plaid Alpha

sankoumax-card-layout-14-plaid-alpha

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-14-plaid-alpha"} /-->

CSS:
.section-sankoumax-card-layout-14-plaid-alpha { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-14-plaid-alpha').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 15 Undimension

sankoumax-card-layout-15-undimension

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-15-undimension"} /-->

CSS:
.section-sankoumax-card-layout-15-undimension { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 16 Norikura Hanabi

sankoumax-card-layout-16-norikura-hanabi

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-16-norikura-hanabi"} /-->

CSS:
.section-sankoumax-card-layout-16-norikura-hanabi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-16-norikura-hanabi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 17 Chugaitoen

sankoumax-card-layout-17-chugaitoen

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-17-chugaitoen"} /-->

CSS:
.section-sankoumax-card-layout-17-chugaitoen { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 18 Favtown Wakayama

sankoumax-card-layout-18-favtown-wakayama

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-18-favtown-wakayama"} /-->

CSS:
.section-sankoumax-card-layout-18-favtown-wakayama { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-18-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 19 Palcloset Fashion

sankoumax-card-layout-19-palcloset-fashion

Copy

Link

2619

Palcloset Fashion

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-19-palcloset-fashion"} /-->

CSS:
.section-sankoumax-card-layout-19-palcloset-fashion { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-19-palcloset-fashion').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 20 Michikusa Art

sankoumax-card-layout-20-michikusa-art

Copy

Link

Sampled Site

2620 / Michikusa Art

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-20-michikusa-art"} /-->

CSS:
.section-sankoumax-card-layout-20-michikusa-art { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-20-michikusa-art').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 21 Tenten

sankoumax-card-layout-21-tenten

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-21-tenten"} /-->

CSS:
.section-sankoumax-card-layout-21-tenten { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 22 Unipos

sankoumax-card-layout-22-unipos

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-22-unipos"} /-->

CSS:
.section-sankoumax-card-layout-22-unipos { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 23 Trail Inc

sankoumax-card-layout-23-trail-inc

Copy

Link

Collage

素材感を重ねる

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

2623

パターン名: SANKOU Max — card-layout 23 Trail Inc
概要: SANKOU100 sample setから展開したcard-layout向けcollage構成。
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 37% / 1px / 35% / 35% / 1px、推奨コンテンツ幅 3743px、主要ブロック 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/sankoumax-card-layout-23-trail-inc"} /-->

CSS:
.section-sankoumax-card-layout-23-trail-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-23-trail-inc').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 24 Applebase

sankoumax-card-layout-24-applebase

Copy

Link

Applebase

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-24-applebase"} /-->

CSS:
.section-sankoumax-card-layout-24-applebase { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 25 Meisei Es

sankoumax-card-layout-25-meisei-es

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-25-meisei-es"} /-->

CSS:
.section-sankoumax-card-layout-25-meisei-es { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-25-meisei-es').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 26 Unicell

sankoumax-card-layout-26-unicell

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-26-unicell"} /-->

CSS:
.section-sankoumax-card-layout-26-unicell { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 27 Uki Editions

sankoumax-card-layout-27-uki-editions

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

CSS:
.section-sankoumax-card-layout-27-uki-editions { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-27-uki-editions').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 28 Kikyougaoka

sankoumax-card-layout-28-kikyougaoka

Copy

Link

数字で納得させる

58%

改善率

3分

短縮

18496

導入数

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

CSS:
.section-sankoumax-card-layout-28-kikyougaoka { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 29 J Security

sankoumax-card-layout-29-j-security

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-29-j-security"} /-->

CSS:
.section-sankoumax-card-layout-29-j-security { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-29-j-security').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 30 Serious Ceramic

sankoumax-card-layout-30-serious-ceramic

Copy

Link

Serious Ceramic

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

About
Service
Works

News
Recruit
Contact

Sample 2630

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-30-serious-ceramic"} /-->

CSS:
.section-sankoumax-card-layout-30-serious-ceramic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-30-serious-ceramic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 31 Tsumari Chamame

sankoumax-card-layout-31-tsumari-chamame

Copy

Link

NEWS

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

確認する

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

CSS:
.section-sankoumax-card-layout-31-tsumari-chamame { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-31-tsumari-chamame').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 32 Notahotel Architects

sankoumax-card-layout-32-notahotel-architects

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-32-notahotel-architects"} /-->

CSS:
.section-sankoumax-card-layout-32-notahotel-architects { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-32-notahotel-architects').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 33 Montblanc Pictures

sankoumax-card-layout-33-montblanc-pictures

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-33-montblanc-pictures"} /-->

CSS:
.section-sankoumax-card-layout-33-montblanc-pictures { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-33-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 34 Tattoo Rays

sankoumax-card-layout-34-tattoo-rays

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-34-tattoo-rays"} /-->

CSS:
.section-sankoumax-card-layout-34-tattoo-rays { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-34-tattoo-rays').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 35 Rim Jins

sankoumax-card-layout-35-rim-jins

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-35-rim-jins"} /-->

CSS:
.section-sankoumax-card-layout-35-rim-jins { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-35-rim-jins').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 36 Obunko

sankoumax-card-layout-36-obunko

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-36-obunko"} /-->

CSS:
.section-sankoumax-card-layout-36-obunko { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 37 Pronets Recruit

sankoumax-card-layout-37-pronets-recruit

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-37-pronets-recruit"} /-->

CSS:
.section-sankoumax-card-layout-37-pronets-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-37-pronets-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 38 Glanta

sankoumax-card-layout-38-glanta

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-38-glanta"} /-->

CSS:
.section-sankoumax-card-layout-38-glanta { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 39 Tashi Portfolio

sankoumax-card-layout-39-tashi-portfolio

Copy

Link

2639

Tashi Portfolio

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-39-tashi-portfolio"} /-->

CSS:
.section-sankoumax-card-layout-39-tashi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-39-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 40 Kitanohashi

sankoumax-card-layout-40-kitanohashi

Copy

Link

Sampled Site

2640 / Kitanohashi

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-40-kitanohashi"} /-->

CSS:
.section-sankoumax-card-layout-40-kitanohashi { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — card-layout 41 Morinosato Clinic

sankoumax-card-layout-41-morinosato-clinic

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-41-morinosato-clinic"} /-->

CSS:
.section-sankoumax-card-layout-41-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-41-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 42 Asuzac Highschool

sankoumax-card-layout-42-asuzac-highschool

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-42-asuzac-highschool"} /-->

CSS:
.section-sankoumax-card-layout-42-asuzac-highschool { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-42-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 43 Junni Newyear

sankoumax-card-layout-43-junni-newyear

Copy

Link

Collage

素材感を重ねる

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

2643

パターン名: SANKOU Max — card-layout 43 Junni Newyear
概要: SANKOU100 sample setから展開したcard-layout向けcollage構成。
使用目的: Card Layout領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 33% / 1px / 37% / 33% / 1px、推奨コンテンツ幅 3763px、主要ブロック 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/sankoumax-card-layout-43-junni-newyear"} /-->

CSS:
.section-sankoumax-card-layout-43-junni-newyear { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-43-junni-newyear').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 44 Mizota Ks

sankoumax-card-layout-44-mizota-ks

Copy

Link

Mizota

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-44-mizota-ks"} /-->

CSS:
.section-sankoumax-card-layout-44-mizota-ks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-44-mizota-ks').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 45 Nissan Career

sankoumax-card-layout-45-nissan-career

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-45-nissan-career"} /-->

CSS:
.section-sankoumax-card-layout-45-nissan-career { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-45-nissan-career').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 46 Shueisha Recruit

sankoumax-card-layout-46-shueisha-recruit

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-46-shueisha-recruit"} /-->

CSS:
.section-sankoumax-card-layout-46-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-46-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 47 Sanu Weekday

sankoumax-card-layout-47-sanu-weekday

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

CSS:
.section-sankoumax-card-layout-47-sanu-weekday { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-47-sanu-weekday').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 48 Newspicks Business

sankoumax-card-layout-48-newspicks-business

Copy

Link

数字で納得させる

78%

改善率

5分

短縮

18636

導入数

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

CSS:
.section-sankoumax-card-layout-48-newspicks-business { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-48-newspicks-business').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 49 Miyakawa Lab

sankoumax-card-layout-49-miyakawa-lab

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-49-miyakawa-lab"} /-->

CSS:
.section-sankoumax-card-layout-49-miyakawa-lab { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-49-miyakawa-lab').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — card-layout 50 Matsuo Komuten

sankoumax-card-layout-50-matsuo-komuten

Copy

Link

Matsuo Komuten

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

About
Service
Works

News
Recruit
Contact

Sample 2650

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-card-layout-50-matsuo-komuten"} /-->

CSS:
.section-sankoumax-card-layout-50-matsuo-komuten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-card-layout-50-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');

◈ Blanc Nail

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

Foundations

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

Content

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

Business

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

UI Components

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

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

カードレイアウト

ミニマルデザインの原則

Discover

Design

Deliver

Grow

ドキュメント

CLI ツール

コミュニティ

高速

セキュア

支援体制

調査

設計

実装

運用

カードではなく、行で見せる導線。

Brand

Shop

Recruit

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

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

迷わない比較カード

見つける

選ぶ

進む

写真と要点で信頼を作る

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

状況を即座に把握する

72

入力前に安心させる

Tomore

ALL MIX

数字で納得させる

29%

3分

163

数字で納得させる

69%

7分

443

数字で納得させる

39%

11分

723

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Dan

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

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

38%

10分

18356

次の相談先を明確にする

Twoe

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

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

People Line

静かな思想を置く

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