検索…
カタログ 統計
CATALOG › Content › Team
チーム
メンバー紹介、組織図、寄稿者一覧。人を主役にする型。
70
Patterns
Content
Group
isValid=0
Verified
CSS
Animation
01
Reference Complete — team 01 Sticky Entry
reference-complete-team-01-sticky-entry-amano-clinic
Sampled Site
14601 / Amano Clinic
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: Reference Complete — team 01 Sticky Entry
- 概要: 参照サンプル再確認から追加したteam向け部品。固定導線つきの大判ファーストビュー。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 27% / 73%、推奨コンテンツ幅 44783px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-team-01-sticky-entry-amano-clinic"} /-->
CSS:
.section-reference-complete-team-01-sticky-entry-amano-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-team-01-sticky-entry-amano-clinic').forEach((el) => el.dataset.ready = 'true');
02
Reference Complete — team 02 Editorial Issue
reference-complete-team-02-editorial-issue-tomore
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: Reference Complete — team 02 Editorial Issue
- 概要: 参照サンプル再確認から追加したteam向け部品。雑誌的な見出しと導入文の編集レイアウト。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 15622px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-team-02-editorial-issue-tomore"} /-->
CSS:
.section-reference-complete-team-02-editorial-issue-tomore { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-team-02-editorial-issue-tomore').forEach((el) => el.dataset.ready = 'true');
03
Reference Complete — team 03 Brand Index
reference-complete-team-03-brand-index-allureville-elements
Card Flow
迷わない比較カード
Allureville Elements から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: Reference Complete — team 03 Brand Index
- 概要: 参照サンプル再確認から追加したteam向け部品。複数ブランドやサービスを迷わせず並べる索引。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 15683px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-team-03-brand-index-allureville-elements"} /-->
CSS:
.section-reference-complete-team-03-brand-index-allureville-elements { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-team-03-brand-index-allureville-elements').forEach((el) => el.dataset.ready = 'true');
04
Reference Complete — team 04 Recruit Story
reference-complete-team-04-recruit-story-megamis
Split Story
写真と要点で信頼を作る
Megamis の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: Reference Complete — team 04 Recruit Story
- 概要: 参照サンプル再確認から追加したteam向け部品。採用・企業紹介に使える人物/思想の分割構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 15644px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-team-04-recruit-story-megamis"} /-->
CSS:
.section-reference-complete-team-04-recruit-story-megamis { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-team-04-recruit-story-megamis').forEach((el) => el.dataset.ready = 'true');
05
Reference Complete — team 05 Commerce Compare
reference-complete-team-05-commerce-compare-kamata-shoyu
Collection Selector
Kamata Shoyu の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: Reference Complete — team 05 Commerce Compare
- 概要: 参照サンプル再確認から追加したteam向け部品。料金・商品・プランを比較しやすい構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 15705px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-team-05-commerce-compare-kamata-shoyu"} /-->
CSS:
.section-reference-complete-team-05-commerce-compare-kamata-shoyu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-team-05-commerce-compare-kamata-shoyu').forEach((el) => el.dataset.ready = 'true');
06
Reference Complete — team 06 Timeline Proof
reference-complete-team-06-timeline-proof-morohoshi-portfolio
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: Reference Complete — team 06 Timeline Proof
- 概要: 参照サンプル再確認から追加したteam向け部品。沿革・導入手順・制作工程の時系列。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 15646px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-team-06-timeline-proof-morohoshi-portfolio"} /-->
CSS:
.section-reference-complete-team-06-timeline-proof-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-team-06-timeline-proof-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');
07
Reference Complete — team 07 Gallery Led
reference-complete-team-07-gallery-led-ems-recruit
Detail
- パターン名: Reference Complete — team 07 Gallery Led
- 概要: 参照サンプル再確認から追加したteam向け部品。写真量の多い商材を見せるギャラリー導線。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 15727px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-team-07-gallery-led-ems-recruit"} /-->
CSS:
.section-reference-complete-team-07-gallery-led-ems-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-team-07-gallery-led-ems-recruit').forEach((el) => el.dataset.ready = 'true');
08
Reference Complete — team 08 Dashboard Proof
reference-complete-team-08-dashboard-proof-pronets-recruit
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: Reference Complete — team 08 Dashboard Proof
- 概要: 参照サンプル再確認から追加したteam向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 15688px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-team-08-dashboard-proof-pronets-recruit"} /-->
CSS:
.section-reference-complete-team-08-dashboard-proof-pronets-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-team-08-dashboard-proof-pronets-recruit').forEach((el) => el.dataset.ready = 'true');
09
Reference Complete — team 09 Contact Ready
reference-complete-team-09-contact-ready-iamwithyou
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: Reference Complete — team 09 Contact Ready
- 概要: 参照サンプル再確認から追加したteam向け部品。問い合わせ前の入力項目を整理する導線。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 15669px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-team-09-contact-ready-iamwithyou"} /-->
CSS:
.section-reference-complete-team-09-contact-ready-iamwithyou { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-team-09-contact-ready-iamwithyou').forEach((el) => el.dataset.ready = 'true');
10
Reference Complete — team 10 Mobile Rail
reference-complete-team-10-mobile-rail-fujiya1935
Fujiya1935
About
Works
Journal
Contact
- パターン名: Reference Complete — team 10 Mobile Rail
- 概要: 参照サンプル再確認から追加したteam向け部品。スマホ閲覧で要点を縦に追えるレール型。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 15790px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-team-10-mobile-rail-fujiya1935"} /-->
CSS:
.section-reference-complete-team-10-mobile-rail-fujiya1935 { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-team-10-mobile-rail-fujiya1935').forEach((el) => el.dataset.ready = 'true');
11
SANKOU100 — 019 Jins Holdings
sankou100-019-jins-holdings
People Line
Director
Planner
Designer
- パターン名: SANKOU100 — 019 Jins Holdings
- 概要: SANKOU! sample 019から抽出したroster型の商用サイト向け構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1139px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-019-jins-holdings"} /-->
CSS:
.section-sankou100-019-jins-holdings { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-019-jins-holdings').forEach((el) => el.dataset.ready = 'true');
12
SANKOU100 — 059 Dac Web
sankou100-059-dac-web
People Line
Director
Planner
Designer
- パターン名: SANKOU100 — 059 Dac Web
- 概要: SANKOU! sample 059から抽出したroster型の商用サイト向け構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1179px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-059-dac-web"} /-->
CSS:
.section-sankou100-059-dac-web { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-059-dac-web').forEach((el) => el.dataset.ready = 'true');
13
SANKOU100 — 099 Favtown Wakayama
sankou100-099-favtown-wakayama
People Line
Director
Planner
Designer
- パターン名: SANKOU100 — 099 Favtown Wakayama
- 概要: SANKOU! sample 099から抽出したroster型の商用サイト向け構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1219px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-099-favtown-wakayama"} /-->
CSS:
.section-sankou100-099-favtown-wakayama { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-099-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');
14
SANKOU Max — team 01 Ems Recruit
sankoumax-team-01-ems-recruit
NEWS
Ems Recruit から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — team 01 Ems Recruit
- 概要: SANKOU100 sample setから展開したteam向けalert構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 2681px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-01-ems-recruit"} /-->
CSS:
.section-sankoumax-team-01-ems-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-01-ems-recruit').forEach((el) => el.dataset.ready = 'true');
15
SANKOU Max — team 02 Felissimo Panda
sankoumax-team-02-felissimo-panda
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — team 02 Felissimo Panda
- 概要: SANKOU100 sample setから展開したteam向けmap構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2642px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-02-felissimo-panda"} /-->
CSS:
.section-sankoumax-team-02-felissimo-panda { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-02-felissimo-panda').forEach((el) => el.dataset.ready = 'true');
16
SANKOU Max — team 03 Iriam Miraito
sankoumax-team-03-iriam-miraito
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — team 03 Iriam Miraito
- 概要: SANKOU100 sample setから展開したteam向けform構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 2663px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-03-iriam-miraito"} /-->
CSS:
.section-sankoumax-team-03-iriam-miraito { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-03-iriam-miraito').forEach((el) => el.dataset.ready = 'true');
17
SANKOU Max — team 04 Gaaboo
sankoumax-team-04-gaaboo
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — team 04 Gaaboo
- 概要: SANKOU100 sample setから展開したteam向けtabs構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2584px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-04-gaaboo"} /-->
CSS:
.section-sankoumax-team-04-gaaboo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-04-gaaboo').forEach((el) => el.dataset.ready = 'true');
18
SANKOU Max — team 05 Violet Patisserie
sankoumax-team-05-violet-patisserie
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — team 05 Violet Patisserie
- 概要: SANKOU100 sample setから展開したteam向けdashboard構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 2685px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-05-violet-patisserie"} /-->
CSS:
.section-sankoumax-team-05-violet-patisserie { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-05-violet-patisserie').forEach((el) => el.dataset.ready = 'true');
19
SANKOU Max — team 06 Nii Recruit
sankoumax-team-06-nii-recruit
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — team 06 Nii Recruit
- 概要: SANKOU100 sample setから展開したteam向けfaq構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2526px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-06-nii-recruit"} /-->
CSS:
.section-sankoumax-team-06-nii-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-06-nii-recruit').forEach((el) => el.dataset.ready = 'true');
20
SANKOU Max — team 07 Saranosono
sankoumax-team-07-saranosono
Detail
- パターン名: SANKOU Max — team 07 Saranosono
- 概要: SANKOU100 sample setから展開したteam向けgallery構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2727px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-07-saranosono"} /-->
CSS:
.section-sankoumax-team-07-saranosono { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-07-saranosono').forEach((el) => el.dataset.ready = 'true');
21
SANKOU Max — team 08 Dac Web
sankoumax-team-08-dac-web
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — team 08 Dac Web
- 概要: SANKOU100 sample setから展開したteam向けroster構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 2728px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-08-dac-web"} /-->
CSS:
.section-sankoumax-team-08-dac-web { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-08-dac-web').forEach((el) => el.dataset.ready = 'true');
22
SANKOU Max — team 09 Asuzac Recruit
sankoumax-team-09-asuzac-recruit
1609
Asuzac Recruit
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — team 09 Asuzac Recruit
- 概要: SANKOU100 sample setから展開したteam向けmanifesto構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 2509px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-09-asuzac-recruit"} /-->
CSS:
.section-sankoumax-team-09-asuzac-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-09-asuzac-recruit').forEach((el) => el.dataset.ready = 'true');
23
SANKOU Max — team 10 Suntory Sic
sankoumax-team-10-suntory-sic
Sampled Site
1610 / Suntory Sic
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — team 10 Suntory Sic
- 概要: SANKOU100 sample setから展開したteam向けcover構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 32% / 68%、推奨コンテンツ幅 5810px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-10-suntory-sic"} /-->
CSS:
.section-sankoumax-team-10-suntory-sic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-10-suntory-sic').forEach((el) => el.dataset.ready = 'true');
24
SANKOU Max — team 11 Amano Clinic
sankoumax-team-11-amano-clinic
Split Story
写真と要点で信頼を作る
Amano Clinic の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — team 11 Amano Clinic
- 概要: SANKOU100 sample setから展開したteam向けsplit構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 2651px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-11-amano-clinic"} /-->
CSS:
.section-sankoumax-team-11-amano-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-11-amano-clinic').forEach((el) => el.dataset.ready = 'true');
25
SANKOU Max — team 12 Infocus
sankoumax-team-12-infocus
Card Flow
迷わない比較カード
Infocus から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — team 12 Infocus
- 概要: SANKOU100 sample setから展開したteam向けcards構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2692px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-12-infocus"} /-->
CSS:
.section-sankoumax-team-12-infocus { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-12-infocus').forEach((el) => el.dataset.ready = 'true');
26
SANKOU Max — team 13 Tomore
sankoumax-team-13-tomore
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
1613
- パターン名: SANKOU Max — team 13 Tomore
- 概要: SANKOU100 sample setから展開したteam向けcollage構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 39% / 31% / 1px、推奨コンテンツ幅 2733px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-13-tomore"} /-->
CSS:
.section-sankoumax-team-13-tomore { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-13-tomore').forEach((el) => el.dataset.ready = 'true');
27
SANKOU Max — team 14 Dan Brise Barber
sankoumax-team-14-dan-brise-barber
Dan
About
Works
Journal
Contact
- パターン名: SANKOU Max — team 14 Dan Brise Barber
- 概要: SANKOU100 sample setから展開したteam向けrail構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 2794px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-14-dan-brise-barber"} /-->
CSS:
.section-sankoumax-team-14-dan-brise-barber { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-14-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');
28
SANKOU Max — team 15 Allureville Elements
sankoumax-team-15-allureville-elements
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — team 15 Allureville Elements
- 概要: SANKOU100 sample setから展開したteam向けeditorial構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 51% / 49% / 1px、推奨コンテンツ幅 2635px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-15-allureville-elements"} /-->
CSS:
.section-sankoumax-team-15-allureville-elements { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-15-allureville-elements').forEach((el) => el.dataset.ready = 'true');
29
SANKOU Max — team 16 Studio Cbr
sankoumax-team-16-studio-cbr
Collection Selector
Studio Cbr の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — team 16 Studio Cbr
- 概要: SANKOU100 sample setから展開したteam向けproduct構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 2716px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-16-studio-cbr"} /-->
CSS:
.section-sankoumax-team-16-studio-cbr { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-16-studio-cbr').forEach((el) => el.dataset.ready = 'true');
30
SANKOU Max — team 17 Yamakachi
sankoumax-team-17-yamakachi
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — team 17 Yamakachi
- 概要: SANKOU100 sample setから展開したteam向けtimeline構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2657px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-17-yamakachi"} /-->
CSS:
.section-sankoumax-team-17-yamakachi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-17-yamakachi').forEach((el) => el.dataset.ready = 'true');
31
SANKOU Max — team 18 Chiikawa Pocket
sankoumax-team-18-chiikawa-pocket
数字で納得させる
28%
改善率
10分
短縮
11426
導入数
- パターン名: SANKOU Max — team 18 Chiikawa Pocket
- 概要: SANKOU100 sample setから展開したteam向けstats構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2578px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-18-chiikawa-pocket"} /-->
CSS:
.section-sankoumax-team-18-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-18-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');
32
SANKOU Max — team 19 Chiba Dojo
sankoumax-team-19-chiba-dojo
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — team 19 Chiba Dojo
- 概要: SANKOU100 sample setから展開したteam向けcontact構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 55% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2699px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-19-chiba-dojo"} /-->
CSS:
.section-sankoumax-team-19-chiba-dojo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-19-chiba-dojo').forEach((el) => el.dataset.ready = 'true');
33
SANKOU Max — team 20 Twoe
sankoumax-team-20-twoe
Twoe
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 1620
- パターン名: SANKOU Max — team 20 Twoe
- 概要: SANKOU100 sample setから展開したteam向けfooter構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 2740px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-20-twoe"} /-->
CSS:
.section-sankoumax-team-20-twoe { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-20-twoe').forEach((el) => el.dataset.ready = 'true');
34
SANKOU Max — team 21 Kamata Shoyu
sankoumax-team-21-kamata-shoyu
NEWS
Kamata Shoyu から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — team 21 Kamata Shoyu
- 概要: SANKOU100 sample setから展開したteam向けalert構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 2701px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-21-kamata-shoyu"} /-->
CSS:
.section-sankoumax-team-21-kamata-shoyu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-21-kamata-shoyu').forEach((el) => el.dataset.ready = 'true');
35
SANKOU Max — team 22 Fumino
sankoumax-team-22-fumino
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — team 22 Fumino
- 概要: SANKOU100 sample setから展開したteam向けmap構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2662px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-22-fumino"} /-->
CSS:
.section-sankoumax-team-22-fumino { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-22-fumino').forEach((el) => el.dataset.ready = 'true');
36
SANKOU Max — team 23 Anbe Shoten
sankoumax-team-23-anbe-shoten
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — team 23 Anbe Shoten
- 概要: SANKOU100 sample setから展開したteam向けform構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 2683px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-23-anbe-shoten"} /-->
CSS:
.section-sankoumax-team-23-anbe-shoten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-23-anbe-shoten').forEach((el) => el.dataset.ready = 'true');
37
SANKOU Max — team 24 Plaid Alpha
sankoumax-team-24-plaid-alpha
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — team 24 Plaid Alpha
- 概要: SANKOU100 sample setから展開したteam向けtabs構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2604px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-24-plaid-alpha"} /-->
CSS:
.section-sankoumax-team-24-plaid-alpha { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-24-plaid-alpha').forEach((el) => el.dataset.ready = 'true');
38
SANKOU Max — team 25 Undimension
sankoumax-team-25-undimension
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — team 25 Undimension
- 概要: SANKOU100 sample setから展開したteam向けdashboard構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 2705px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-25-undimension"} /-->
CSS:
.section-sankoumax-team-25-undimension { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-25-undimension').forEach((el) => el.dataset.ready = 'true');
39
SANKOU Max — team 26 Norikura Hanabi
sankoumax-team-26-norikura-hanabi
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — team 26 Norikura Hanabi
- 概要: SANKOU100 sample setから展開したteam向けfaq構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2546px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-26-norikura-hanabi"} /-->
CSS:
.section-sankoumax-team-26-norikura-hanabi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-26-norikura-hanabi').forEach((el) => el.dataset.ready = 'true');
40
SANKOU Max — team 27 Chugaitoen
sankoumax-team-27-chugaitoen
Detail
- パターン名: SANKOU Max — team 27 Chugaitoen
- 概要: SANKOU100 sample setから展開したteam向けgallery構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2747px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-27-chugaitoen"} /-->
CSS:
.section-sankoumax-team-27-chugaitoen { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-27-chugaitoen').forEach((el) => el.dataset.ready = 'true');
41
SANKOU Max — team 28 Favtown Wakayama
sankoumax-team-28-favtown-wakayama
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — team 28 Favtown Wakayama
- 概要: SANKOU100 sample setから展開したteam向けroster構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 2748px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-28-favtown-wakayama"} /-->
CSS:
.section-sankoumax-team-28-favtown-wakayama { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-28-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');
42
SANKOU Max — team 29 Palcloset Fashion
sankoumax-team-29-palcloset-fashion
1629
Palcloset Fashion
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — team 29 Palcloset Fashion
- 概要: SANKOU100 sample setから展開したteam向けmanifesto構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 2529px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-29-palcloset-fashion"} /-->
CSS:
.section-sankoumax-team-29-palcloset-fashion { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-29-palcloset-fashion').forEach((el) => el.dataset.ready = 'true');
43
SANKOU Max — team 30 Michikusa Art
sankoumax-team-30-michikusa-art
Sampled Site
1630 / Michikusa Art
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — team 30 Michikusa Art
- 概要: SANKOU100 sample setから展開したteam向けcover構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 25% / 75%、推奨コンテンツ幅 5870px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-30-michikusa-art"} /-->
CSS:
.section-sankoumax-team-30-michikusa-art { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-30-michikusa-art').forEach((el) => el.dataset.ready = 'true');
44
SANKOU Max — team 31 Tenten
sankoumax-team-31-tenten
Split Story
写真と要点で信頼を作る
Tenten の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — team 31 Tenten
- 概要: SANKOU100 sample setから展開したteam向けsplit構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 2671px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-31-tenten"} /-->
CSS:
.section-sankoumax-team-31-tenten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-31-tenten').forEach((el) => el.dataset.ready = 'true');
45
SANKOU Max — team 32 Unipos
sankoumax-team-32-unipos
Card Flow
迷わない比較カード
Unipos から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — team 32 Unipos
- 概要: SANKOU100 sample setから展開したteam向けcards構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2712px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-32-unipos"} /-->
CSS:
.section-sankoumax-team-32-unipos { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-32-unipos').forEach((el) => el.dataset.ready = 'true');
46
SANKOU Max — team 33 Trail Inc
sankoumax-team-33-trail-inc
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
1633
- パターン名: SANKOU Max — team 33 Trail Inc
- 概要: SANKOU100 sample setから展開したteam向けcollage構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 31% / 1px / 35% / 35% / 1px、推奨コンテンツ幅 2753px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-33-trail-inc"} /-->
CSS:
.section-sankoumax-team-33-trail-inc { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-33-trail-inc').forEach((el) => el.dataset.ready = 'true');
47
SANKOU Max — team 34 Applebase
sankoumax-team-34-applebase
Applebase
About
Works
Journal
Contact
- パターン名: SANKOU Max — team 34 Applebase
- 概要: SANKOU100 sample setから展開したteam向けrail構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 2814px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-34-applebase"} /-->
CSS:
.section-sankoumax-team-34-applebase { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-34-applebase').forEach((el) => el.dataset.ready = 'true');
48
SANKOU Max — team 35 Meisei Es
sankoumax-team-35-meisei-es
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — team 35 Meisei Es
- 概要: SANKOU100 sample setから展開したteam向けeditorial構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 47% / 53% / 1px、推奨コンテンツ幅 2655px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-35-meisei-es"} /-->
CSS:
.section-sankoumax-team-35-meisei-es { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-35-meisei-es').forEach((el) => el.dataset.ready = 'true');
49
SANKOU Max — team 36 Unicell
sankoumax-team-36-unicell
Collection Selector
Unicell の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — team 36 Unicell
- 概要: SANKOU100 sample setから展開したteam向けproduct構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 2736px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-36-unicell"} /-->
CSS:
.section-sankoumax-team-36-unicell { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-36-unicell').forEach((el) => el.dataset.ready = 'true');
50
SANKOU Max — team 37 Uki Editions
sankoumax-team-37-uki-editions
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — team 37 Uki Editions
- 概要: SANKOU100 sample setから展開したteam向けtimeline構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2677px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-37-uki-editions"} /-->
CSS:
.section-sankoumax-team-37-uki-editions { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-37-uki-editions').forEach((el) => el.dataset.ready = 'true');
51
SANKOU Max — team 38 Kikyougaoka
sankoumax-team-38-kikyougaoka
数字で納得させる
48%
改善率
3分
短縮
11566
導入数
- パターン名: SANKOU Max — team 38 Kikyougaoka
- 概要: SANKOU100 sample setから展開したteam向けstats構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2598px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-38-kikyougaoka"} /-->
CSS:
.section-sankoumax-team-38-kikyougaoka { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-38-kikyougaoka').forEach((el) => el.dataset.ready = 'true');
52
SANKOU Max — team 39 J Security
sankoumax-team-39-j-security
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — team 39 J Security
- 概要: SANKOU100 sample setから展開したteam向けcontact構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 51% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2719px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-39-j-security"} /-->
CSS:
.section-sankoumax-team-39-j-security { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-39-j-security').forEach((el) => el.dataset.ready = 'true');
53
SANKOU Max — team 40 Serious Ceramic
sankoumax-team-40-serious-ceramic
Serious Ceramic
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 1640
- パターン名: SANKOU Max — team 40 Serious Ceramic
- 概要: SANKOU100 sample setから展開したteam向けfooter構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 2760px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-40-serious-ceramic"} /-->
CSS:
.section-sankoumax-team-40-serious-ceramic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-40-serious-ceramic').forEach((el) => el.dataset.ready = 'true');
54
SANKOU Max — team 41 Tsumari Chamame
sankoumax-team-41-tsumari-chamame
NEWS
Tsumari Chamame から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — team 41 Tsumari Chamame
- 概要: SANKOU100 sample setから展開したteam向けalert構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 2721px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-41-tsumari-chamame"} /-->
CSS:
.section-sankoumax-team-41-tsumari-chamame { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-41-tsumari-chamame').forEach((el) => el.dataset.ready = 'true');
55
SANKOU Max — team 42 Notahotel Architects
sankoumax-team-42-notahotel-architects
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — team 42 Notahotel Architects
- 概要: SANKOU100 sample setから展開したteam向けmap構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2682px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-42-notahotel-architects"} /-->
CSS:
.section-sankoumax-team-42-notahotel-architects { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-42-notahotel-architects').forEach((el) => el.dataset.ready = 'true');
56
SANKOU Max — team 43 Montblanc Pictures
sankoumax-team-43-montblanc-pictures
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — team 43 Montblanc Pictures
- 概要: SANKOU100 sample setから展開したteam向けform構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 2703px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-43-montblanc-pictures"} /-->
CSS:
.section-sankoumax-team-43-montblanc-pictures { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-43-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');
57
SANKOU Max — team 44 Tattoo Rays
sankoumax-team-44-tattoo-rays
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — team 44 Tattoo Rays
- 概要: SANKOU100 sample setから展開したteam向けtabs構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 2624px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-44-tattoo-rays"} /-->
CSS:
.section-sankoumax-team-44-tattoo-rays { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-44-tattoo-rays').forEach((el) => el.dataset.ready = 'true');
58
SANKOU Max — team 45 Rim Jins
sankoumax-team-45-rim-jins
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — team 45 Rim Jins
- 概要: SANKOU100 sample setから展開したteam向けdashboard構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 2725px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-45-rim-jins"} /-->
CSS:
.section-sankoumax-team-45-rim-jins { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-45-rim-jins').forEach((el) => el.dataset.ready = 'true');
59
SANKOU Max — team 46 Obunko
sankoumax-team-46-obunko
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — team 46 Obunko
- 概要: SANKOU100 sample setから展開したteam向けfaq構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2566px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-46-obunko"} /-->
CSS:
.section-sankoumax-team-46-obunko { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-46-obunko').forEach((el) => el.dataset.ready = 'true');
60
SANKOU Max — team 47 Pronets Recruit
sankoumax-team-47-pronets-recruit
Detail
- パターン名: SANKOU Max — team 47 Pronets Recruit
- 概要: SANKOU100 sample setから展開したteam向けgallery構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 2767px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-47-pronets-recruit"} /-->
CSS:
.section-sankoumax-team-47-pronets-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-47-pronets-recruit').forEach((el) => el.dataset.ready = 'true');
61
SANKOU Max — team 48 Glanta
sankoumax-team-48-glanta
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — team 48 Glanta
- 概要: SANKOU100 sample setから展開したteam向けroster構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 2768px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-48-glanta"} /-->
CSS:
.section-sankoumax-team-48-glanta { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-48-glanta').forEach((el) => el.dataset.ready = 'true');
62
SANKOU Max — team 49 Tashi Portfolio
sankoumax-team-49-tashi-portfolio
1649
Tashi Portfolio
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — team 49 Tashi Portfolio
- 概要: SANKOU100 sample setから展開したteam向けmanifesto構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 2549px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-49-tashi-portfolio"} /-->
CSS:
.section-sankoumax-team-49-tashi-portfolio { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-49-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');
63
SANKOU Max — team 50 Kitanohashi
sankoumax-team-50-kitanohashi
Sampled Site
1650 / Kitanohashi
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — team 50 Kitanohashi
- 概要: SANKOU100 sample setから展開したteam向けcover構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 27% / 73%、推奨コンテンツ幅 5930px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-50-kitanohashi"} /-->
CSS:
.section-sankoumax-team-50-kitanohashi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-50-kitanohashi').forEach((el) => el.dataset.ready = 'true');
64
SANKOU Max — team 51 Morinosato Clinic
sankoumax-team-51-morinosato-clinic
Split Story
写真と要点で信頼を作る
Morinosato Clinic の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — team 51 Morinosato Clinic
- 概要: SANKOU100 sample setから展開したteam向けsplit構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 2691px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-51-morinosato-clinic"} /-->
CSS:
.section-sankoumax-team-51-morinosato-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-51-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');
65
SANKOU Max — team 52 Asuzac Highschool
sankoumax-team-52-asuzac-highschool
Card Flow
迷わない比較カード
Asuzac Highschool から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — team 52 Asuzac Highschool
- 概要: SANKOU100 sample setから展開したteam向けcards構成。
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 2732px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-team-52-asuzac-highschool"} /-->
CSS:
.section-sankoumax-team-52-asuzac-highschool { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-team-52-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');
66
Team — 3 Column Member Cards
team-3col-cards
私たちのチーム
業界のプロフェッショナルが集まり、最高のプロダクトを創ります。
伊藤 直樹
Co-Founder & CEO
前職は GAFA 系での 10 年。プロダクト戦略のスペシャリスト。
松本 さくら
VP of Design
Awwwards 受賞経験。世界中のスタートアップに UX を提供。
岡田 涼太
Head of Engineering
分散システムの専門家。スケーラビリティとパフォーマンスを設計。
- パターン名: Team — 3 Column Member Cards
- 概要: Three team member cards with photo, name, role and short bio.
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1180px、主要ブロック group, heading, paragraph, columns, column, group, image, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版 / Teamをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/team-3col-cards"} /-->
CSS:
.section-team-3col-cards { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-team-3col-cards').forEach((el) => el.dataset.ready = 'true');
67
Team — 4 Column Avatars
team-4col-minimal
リーダーシップチーム
石川 葉月
Founder
前田 俊一
CTO
藤原 美雪
VP Marketing
三浦 拓郎
CFO
- パターン名: Team — 4 Column Avatars
- 概要: Compact 4-column team avatars with name and role.
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 112px / 112px / 112px / 112px、推奨コンテンツ幅 1080px、主要ブロック group, heading, columns, column, image, paragraph, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/team-4col-minimal"} /-->
CSS:
.section-team-4col-minimal { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-team-4col-minimal').forEach((el) => el.dataset.ready = 'true');
68
Team — 5 Avatar Grid
team-avatar-stack
サポートチーム
佐藤
田中
山本
中村
渡辺
- パターン名: Team — 5 Avatar Grid
- 概要: Five circular team avatars in a compact grid (support/ops team visual).
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 640px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/team-avatar-stack"} /-->
CSS:
.section-team-avatar-stack { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-team-avatar-stack').forEach((el) => el.dataset.ready = 'true');
69
Team — Featured + List
team-featured
FOUNDER
青木 健太郎
Founder & CEO
15 年以上にわたり、テクノロジー業界で複数の企業を成功に導いてきました。創業の理念は「すべてのチームに、最高の道具を」。
桜井 美香
Chief Product Officer
林 雄一
VP of Engineering
坂本 麻衣
Head of Design
- パターン名: Team — Featured + List
- 概要: Featured founder photo + bio with secondary team list on right.
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 55% / 45% / 72px / 72px / 72px、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, image, paragraph, heading, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/team-featured"} /-->
CSS:
.section-team-featured { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-team-featured').forEach((el) => el.dataset.ready = 'true');
70
Team — Leadership Split Layout
team-leadership-split
FOUNDER / CEO
山田 美咲
元 Google プロダクトマネージャー。10 年以上の SaaS 開発経験を経て、2020 年に弊社を創業。
- パターン名: Team — Leadership Split Layout
- 概要: Two-column leadership intro: circular portrait left, role/name/bio right.
- 使用目的: Team領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 220px、推奨コンテンツ幅 880px、主要ブロック group, columns, column, image, column, paragraph, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Teamをミニマルに見せる余白重視版 / Teamをリッチに見せるカバー/カード強調版 / Teamをコーポレート向けに整える情報密度高め版 / Teamをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/team-leadership-split"} /-->
CSS:
.section-team-leadership-split { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-team-leadership-split').forEach((el) => el.dataset.ready = 'true');
← Previous
Testimonials
レビュー / 推薦
Next →
Blog
ブログ / 記事
◈ Blanc Nail
Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。
Foundations
- ヒーロー
- ヘッダー
- フッター
- ナビゲーション
- タイポグラフィ
Content
- フィーチャー
- スタッツ
- コール トゥ アクション
- レビュー / 推薦
- チーム
Business
- 料金プラン
- 商品 / EC
- アクセス / 営業時間
- メニュー (飲食)
- コンタクト
UI Components
- カードレイアウト
- モーダル / アコーディオン
- タブ / セグメント
- バナー / アラート
- SNS
© 2026 Blanc Nail · Built with WordPress + Block Editor v1.0 · isValid=0