チーム · Team · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Content › Team

チーム

メンバー紹介、組織図、寄稿者一覧。人を主役にする型。

15

Patterns

Content

Group

isValid=0

Verified

CSS

Animation

01

Team — 3 Column Member Cards

team-3col-cards

Copy
Link

私たちのチーム

業界のプロフェッショナルが集まり、最高のプロダクトを創ります。

伊藤 直樹

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

02

Team — 4 Column Avatars

team-4col-minimal

Copy
Link

リーダーシップチーム

石川 葉月

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

03

Team — 5 Avatar Grid

team-avatar-stack

Copy
Link

サポートチーム

佐藤

田中

山本

中村

渡辺

  • パターン名: 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');

04

Team — Featured + List

team-featured

Copy
Link

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

05

Team — Leadership Split Layout

team-leadership-split

Copy
Link

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

06

Team — EX01 Three Photo Cards

team-ex01-3col-photo

Copy
Link

スタッフ紹介

山田 太一

代表 ・ 一級技能士

この道 25 年。難しい案件ほど燃えるタイプです。

佐藤 美咲

店長

お客さまの「ちょうどいい」を見つけるのが得意です。

中村 大輔

施工管理

段取りと安全管理の番人。現場の空気を明るくします。

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

CSS:
.section-team-ex01-3col-photo { max-width: 1200px; margin-inline: auto; }

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

07

Team — EX02 Leader Message Split

team-ex02-leader-message

Copy
Link
代表

代表ごあいさつ

小さな困りごとこそ、
遠慮なく持ち込んでください。

創業からずっと、地域の「ありがとう」を糧にやってきました。派手なことはできませんが、誠実な仕事と適正な価格は誰にも負けないつもりです。

代表取締役 山田 太一

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

CSS:
.section-team-ex02-leader-message { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-team-ex02-leader-message').forEach((el) => el.dataset.ready = 'true');

08

Team — EX03 Six Member Grid

team-ex03-grid-6

Copy
Link

チームメンバー

高橋 健

設計

井上 さくら

広報

森 渉

開発

林 美月

カスタマーサクセス

岡田 龍

営業

藤井 葵

経理 ・ 総務

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

CSS:
.section-team-ex03-grid-6 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-team-ex03-grid-6').forEach((el) => el.dataset.ready = 'true');

09

Team — EX04 Dark Roster Rows

team-ex04-dark-roster

Copy
Link

MEMBERS

DIRECTOR

青山 涼

ブランド設計 ・ アートディレクション

ENGINEER

早川 統

フロントエンド ・ アクセシビリティ

WRITER

三浦 ことは

取材 ・ コピーライティング

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

CSS:
.section-team-ex04-dark-roster { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-team-ex04-dark-roster').forEach((el) => el.dataset.ready = 'true');

10

Team — EX05 Join Us Banner

team-ex05-recruit-banner

Copy
Link
チームの様子

JOIN US

この景色を、
一緒につくりませんか。

平均年齢 32 歳、中途入社が 6 割。肩書きより「やってみたい」を尊重するチームです。

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

CSS:
.section-team-ex05-recruit-banner { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-team-ex05-recruit-banner').forEach((el) => el.dataset.ready = 'true');

11

Team — EX06 Two Founders

team-ex06-two-founders

Copy
Link

ふたりで始めた店です

兄 ・ 直人(焙煎担当)

弟いわく「豆のことになると人が変わる」。毎朝 4 時から焙煎機の前にいます。

弟 ・ 健二(菓子担当)

兄いわく「甘さの引き算がうまい」。季節の素材で焼き菓子を仕込みます。

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

CSS:
.section-team-ex06-two-founders { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-team-ex06-two-founders').forEach((el) => el.dataset.ready = 'true');

12

Team — EX07 Team in Numbers

team-ex07-numbers

Copy
Link

数字で見るチーム

12名

スタッフ数

32歳

平均年齢

8つ

保有資格の種類

93%

直近3年の定着率

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

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

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

13

Team — EX08 Craftsman Profile Zen

team-ex08-craftsman

Copy
Link
職人

三代目 ・ 塗師

器は、使われて完成する。

祖父の代から続く工房で、漆と向き合って 30 年。塗りと研ぎを十数回重ねる昔ながらの仕事を、いまも変わらず守っています。

県伝統工芸士 ・ 1974年生まれ

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

CSS:
.section-team-ex08-craftsman { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-team-ex08-craftsman').forEach((el) => el.dataset.ready = 'true');

14

Team — EX09 Member Voice Rows

team-ex09-message-rows

Copy
Link

働くひとの声

「お客さまの名前を覚えるのが、この仕事のいちばんの楽しみです。」

販売スタッフ ・ 入社 3 年目

「未経験で飛び込みましたが、先輩の教え方が丁寧で安心しました。」

製造スタッフ ・ 入社 1 年目

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

CSS:
.section-team-ex09-message-rows { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-team-ex09-message-rows').forEach((el) => el.dataset.ready = 'true');

15

Team — EX10 Mosaic with Intro

team-ex10-mosaic-intro

Copy
Link

ABOUT US

小さなチームの、
大きなこだわり。

企画も製造も発送も、全員でやるのが私たちのやり方。顔の見える距離感だからこそ、細部まで責任を持てます。

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

CSS:
.section-team-ex10-mosaic-intro { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-team-ex10-mosaic-intro').forEach((el) => el.dataset.ready = 'true');