タブ / セグメント

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-tab-segment-01-sticky-entry-daimatsu"} /-->

CSS:
.section-reference-complete-tab-segment-01-sticky-entry-daimatsu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-tab-segment-01-sticky-entry-daimatsu').forEach((el) => el.dataset.ready = 'true');

Reference Complete — tab-segment 02 Editorial Issue

reference-complete-tab-segment-02-editorial-issue-dodasports

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-tab-segment-02-editorial-issue-dodasports"} /-->

CSS:
.section-reference-complete-tab-segment-02-editorial-issue-dodasports { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-tab-segment-02-editorial-issue-dodasports').forEach((el) => el.dataset.ready = 'true');

Reference Complete — tab-segment 03 Brand Index

reference-complete-tab-segment-03-brand-index-kiyasuku

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-tab-segment-03-brand-index-kiyasuku"} /-->

CSS:
.section-reference-complete-tab-segment-03-brand-index-kiyasuku { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-tab-segment-03-brand-index-kiyasuku').forEach((el) => el.dataset.ready = 'true');

Reference Complete — tab-segment 04 Recruit Story

reference-complete-tab-segment-04-recruit-story-chugaitoen

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-tab-segment-04-recruit-story-chugaitoen"} /-->

CSS:
.section-reference-complete-tab-segment-04-recruit-story-chugaitoen { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-tab-segment-04-recruit-story-chugaitoen').forEach((el) => el.dataset.ready = 'true');

Reference Complete — tab-segment 05 Commerce Compare

reference-complete-tab-segment-05-commerce-compare-tokachi-fruits

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-tab-segment-05-commerce-compare-tokachi-fruits"} /-->

CSS:
.section-reference-complete-tab-segment-05-commerce-compare-tokachi-fruits { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-tab-segment-05-commerce-compare-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');

Reference Complete — tab-segment 06 Timeline Proof

reference-complete-tab-segment-06-timeline-proof-tashi-portfolio

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-tab-segment-06-timeline-proof-tashi-portfolio"} /-->

CSS:
.section-reference-complete-tab-segment-06-timeline-proof-tashi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-tab-segment-06-timeline-proof-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');

Reference Complete — tab-segment 07 Gallery Led

reference-complete-tab-segment-07-gallery-led-junni-newyear

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-tab-segment-07-gallery-led-junni-newyear"} /-->

CSS:
.section-reference-complete-tab-segment-07-gallery-led-junni-newyear { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-tab-segment-07-gallery-led-junni-newyear').forEach((el) => el.dataset.ready = 'true');

Reference Complete — tab-segment 08 Dashboard Proof

reference-complete-tab-segment-08-dashboard-proof-nakiri-shota

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-tab-segment-08-dashboard-proof-nakiri-shota"} /-->

CSS:
.section-reference-complete-tab-segment-08-dashboard-proof-nakiri-shota { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-tab-segment-08-dashboard-proof-nakiri-shota').forEach((el) => el.dataset.ready = 'true');

Reference Complete — tab-segment 09 Contact Ready

reference-complete-tab-segment-09-contact-ready-tenten

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-tab-segment-09-contact-ready-tenten"} /-->

CSS:
.section-reference-complete-tab-segment-09-contact-ready-tenten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-tab-segment-09-contact-ready-tenten').forEach((el) => el.dataset.ready = 'true');

Reference Complete — tab-segment 10 Mobile Rail

reference-complete-tab-segment-10-mobile-rail-meisei-es

Copy

Link

Meisei

About

Works

Journal

Contact

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-tab-segment-10-mobile-rail-meisei-es"} /-->

CSS:
.section-reference-complete-tab-segment-10-mobile-rail-meisei-es { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-tab-segment-10-mobile-rail-meisei-es').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 028 Megamis

sankou100-028-megamis

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-028-megamis"} /-->

CSS:
.section-sankou100-028-megamis { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-028-megamis').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 068 Mindful Connect

sankou100-068-mindful-connect

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-068-mindful-connect"} /-->

CSS:
.section-sankou100-068-mindful-connect { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-068-mindful-connect').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 01 Rim Jins

sankoumax-tab-segment-01-rim-jins

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-01-rim-jins"} /-->

CSS:
.section-sankoumax-tab-segment-01-rim-jins { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-01-rim-jins').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 02 Obunko

sankoumax-tab-segment-02-obunko

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-02-obunko"} /-->

CSS:
.section-sankoumax-tab-segment-02-obunko { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-02-obunko').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 03 Pronets Recruit

sankoumax-tab-segment-03-pronets-recruit

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-03-pronets-recruit"} /-->

CSS:
.section-sankoumax-tab-segment-03-pronets-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-03-pronets-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 04 Glanta

sankoumax-tab-segment-04-glanta

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-04-glanta"} /-->

CSS:
.section-sankoumax-tab-segment-04-glanta { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-04-glanta').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 05 Tashi Portfolio

sankoumax-tab-segment-05-tashi-portfolio

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-05-tashi-portfolio"} /-->

CSS:
.section-sankoumax-tab-segment-05-tashi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-05-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 06 Kitanohashi

sankoumax-tab-segment-06-kitanohashi

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-06-kitanohashi"} /-->

CSS:
.section-sankoumax-tab-segment-06-kitanohashi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-06-kitanohashi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 07 Morinosato Clinic

sankoumax-tab-segment-07-morinosato-clinic

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-07-morinosato-clinic"} /-->

CSS:
.section-sankoumax-tab-segment-07-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-07-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 08 Asuzac Highschool

sankoumax-tab-segment-08-asuzac-highschool

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-08-asuzac-highschool"} /-->

CSS:
.section-sankoumax-tab-segment-08-asuzac-highschool { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-08-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 09 Junni Newyear

sankoumax-tab-segment-09-junni-newyear

Copy

Link

4009

Junni Newyear

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-09-junni-newyear"} /-->

CSS:
.section-sankoumax-tab-segment-09-junni-newyear { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-09-junni-newyear').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 10 Mizota Ks

sankoumax-tab-segment-10-mizota-ks

Copy

Link

Sampled Site

4010 / Mizota Ks

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-10-mizota-ks"} /-->

CSS:
.section-sankoumax-tab-segment-10-mizota-ks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-10-mizota-ks').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 11 Nissan Career

sankoumax-tab-segment-11-nissan-career

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-11-nissan-career"} /-->

CSS:
.section-sankoumax-tab-segment-11-nissan-career { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-11-nissan-career').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 12 Shueisha Recruit

sankoumax-tab-segment-12-shueisha-recruit

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-12-shueisha-recruit"} /-->

CSS:
.section-sankoumax-tab-segment-12-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-12-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 13 Sanu Weekday

sankoumax-tab-segment-13-sanu-weekday

Copy

Link

Collage

素材感を重ねる

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

4013

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-13-sanu-weekday"} /-->

CSS:
.section-sankoumax-tab-segment-13-sanu-weekday { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-13-sanu-weekday').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 14 Newspicks Business

sankoumax-tab-segment-14-newspicks-business

Copy

Link

Newspicks

About

Works

Journal

Contact

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-14-newspicks-business"} /-->

CSS:
.section-sankoumax-tab-segment-14-newspicks-business { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-14-newspicks-business').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 15 Miyakawa Lab

sankoumax-tab-segment-15-miyakawa-lab

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-15-miyakawa-lab"} /-->

CSS:
.section-sankoumax-tab-segment-15-miyakawa-lab { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-15-miyakawa-lab').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 16 Matsuo Komuten

sankoumax-tab-segment-16-matsuo-komuten

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-16-matsuo-komuten"} /-->

CSS:
.section-sankoumax-tab-segment-16-matsuo-komuten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-16-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 17 Yokohama Timberwharf

sankoumax-tab-segment-17-yokohama-timberwharf

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-17-yokohama-timberwharf"} /-->

CSS:
.section-sankoumax-tab-segment-17-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-17-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 18 Janu

sankoumax-tab-segment-18-janu

Copy

Link

数字で納得させる

48%

改善率

7分

短縮

28226

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-18-janu"} /-->

CSS:
.section-sankoumax-tab-segment-18-janu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-18-janu').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 19 Daimatsu

sankoumax-tab-segment-19-daimatsu

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-19-daimatsu"} /-->

CSS:
.section-sankoumax-tab-segment-19-daimatsu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-19-daimatsu').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 20 Omotesando Ortho

sankoumax-tab-segment-20-omotesando-ortho

Copy

Link

Omotesando Ortho

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

About
Service
Works

News
Recruit
Contact

Sample 4020

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-20-omotesando-ortho"} /-->

CSS:
.section-sankoumax-tab-segment-20-omotesando-ortho { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-20-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 21 Dodasports

sankoumax-tab-segment-21-dodasports

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-21-dodasports"} /-->

CSS:
.section-sankoumax-tab-segment-21-dodasports { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-21-dodasports').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 22 Ja Aichi Recruit

sankoumax-tab-segment-22-ja-aichi-recruit

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-22-ja-aichi-recruit"} /-->

CSS:
.section-sankoumax-tab-segment-22-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-22-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 23 Kiyasuku

sankoumax-tab-segment-23-kiyasuku

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-23-kiyasuku"} /-->

CSS:
.section-sankoumax-tab-segment-23-kiyasuku { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-23-kiyasuku').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 24 Hirono Recruit

sankoumax-tab-segment-24-hirono-recruit

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-24-hirono-recruit"} /-->

CSS:
.section-sankoumax-tab-segment-24-hirono-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-24-hirono-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 25 Ichizenbooks

sankoumax-tab-segment-25-ichizenbooks

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-25-ichizenbooks"} /-->

CSS:
.section-sankoumax-tab-segment-25-ichizenbooks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-25-ichizenbooks').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 26 Mec Residence Recruit

sankoumax-tab-segment-26-mec-residence-recruit

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-26-mec-residence-recruit"} /-->

CSS:
.section-sankoumax-tab-segment-26-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-26-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 27 Greenpark Santo

sankoumax-tab-segment-27-greenpark-santo

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-27-greenpark-santo"} /-->

CSS:
.section-sankoumax-tab-segment-27-greenpark-santo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-27-greenpark-santo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 28 Land Sapporo

sankoumax-tab-segment-28-land-sapporo

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-28-land-sapporo"} /-->

CSS:
.section-sankoumax-tab-segment-28-land-sapporo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-28-land-sapporo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 29 Tokachi Fruits

sankoumax-tab-segment-29-tokachi-fruits

Copy

Link

4029

Tokachi Fruits

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-29-tokachi-fruits"} /-->

CSS:
.section-sankoumax-tab-segment-29-tokachi-fruits { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-29-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 30 Echitora

sankoumax-tab-segment-30-echitora

Copy

Link

Sampled Site

4030 / Echitora

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-30-echitora"} /-->

CSS:
.section-sankoumax-tab-segment-30-echitora { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-30-echitora').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 31 Megamis

sankoumax-tab-segment-31-megamis

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-31-megamis"} /-->

CSS:
.section-sankoumax-tab-segment-31-megamis { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-31-megamis').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 32 Kagami

sankoumax-tab-segment-32-kagami

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-32-kagami"} /-->

CSS:
.section-sankoumax-tab-segment-32-kagami { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-32-kagami').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 33 Antscr

sankoumax-tab-segment-33-antscr

Copy

Link

Collage

素材感を重ねる

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

4033

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-33-antscr"} /-->

CSS:
.section-sankoumax-tab-segment-33-antscr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-33-antscr').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 34 Meisei Kg

sankoumax-tab-segment-34-meisei-kg

Copy

Link

Meisei

About

Works

Journal

Contact

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-34-meisei-kg"} /-->

CSS:
.section-sankoumax-tab-segment-34-meisei-kg { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-34-meisei-kg').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 35 Iamwithyou

sankoumax-tab-segment-35-iamwithyou

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-35-iamwithyou"} /-->

CSS:
.section-sankoumax-tab-segment-35-iamwithyou { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-35-iamwithyou').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 36 Depsoa

sankoumax-tab-segment-36-depsoa

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-36-depsoa"} /-->

CSS:
.section-sankoumax-tab-segment-36-depsoa { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-36-depsoa').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 37 Nothing Tech

sankoumax-tab-segment-37-nothing-tech

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-37-nothing-tech"} /-->

CSS:
.section-sankoumax-tab-segment-37-nothing-tech { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-37-nothing-tech').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 38 Upvege

sankoumax-tab-segment-38-upvege

Copy

Link

数字で納得させる

68%

改善率

9分

短縮

28366

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-38-upvege"} /-->

CSS:
.section-sankoumax-tab-segment-38-upvege { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-38-upvege').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 39 Fujiya1935

sankoumax-tab-segment-39-fujiya1935

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-39-fujiya1935"} /-->

CSS:
.section-sankoumax-tab-segment-39-fujiya1935 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-39-fujiya1935').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 40 Omodakaya

sankoumax-tab-segment-40-omodakaya

Copy

Link

Omodakaya

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

About
Service
Works

News
Recruit
Contact

Sample 4040

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-40-omodakaya"} /-->

CSS:
.section-sankoumax-tab-segment-40-omodakaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-40-omodakaya').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 41 Favtown

sankoumax-tab-segment-41-favtown

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-41-favtown"} /-->

CSS:
.section-sankoumax-tab-segment-41-favtown { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-41-favtown').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 42 Mizuya Kyoto

sankoumax-tab-segment-42-mizuya-kyoto

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-42-mizuya-kyoto"} /-->

CSS:
.section-sankoumax-tab-segment-42-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-42-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 43 Allright Inc

sankoumax-tab-segment-43-allright-inc

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-43-allright-inc"} /-->

CSS:
.section-sankoumax-tab-segment-43-allright-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-43-allright-inc').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 44 Jins Holdings

sankoumax-tab-segment-44-jins-holdings

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-44-jins-holdings"} /-->

CSS:
.section-sankoumax-tab-segment-44-jins-holdings { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-44-jins-holdings').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 45 Tsuchitokaze

sankoumax-tab-segment-45-tsuchitokaze

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-45-tsuchitokaze"} /-->

CSS:
.section-sankoumax-tab-segment-45-tsuchitokaze { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-45-tsuchitokaze').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 46 Yamato 50Th

sankoumax-tab-segment-46-yamato-50th

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-46-yamato-50th"} /-->

CSS:
.section-sankoumax-tab-segment-46-yamato-50th { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-46-yamato-50th').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 47 Action Npo

sankoumax-tab-segment-47-action-npo

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-47-action-npo"} /-->

CSS:
.section-sankoumax-tab-segment-47-action-npo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-47-action-npo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 48 Mycampus

sankoumax-tab-segment-48-mycampus

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-48-mycampus"} /-->

CSS:
.section-sankoumax-tab-segment-48-mycampus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-48-mycampus').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 49 Mejinavi

sankoumax-tab-segment-49-mejinavi

Copy

Link

4049

Mejinavi

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-49-mejinavi"} /-->

CSS:
.section-sankoumax-tab-segment-49-mejinavi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-49-mejinavi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 50 Niwaya

sankoumax-tab-segment-50-niwaya

Copy

Link

Sampled Site

4050 / Niwaya

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-50-niwaya"} /-->

CSS:
.section-sankoumax-tab-segment-50-niwaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-50-niwaya').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 51 Mindful Connect

sankoumax-tab-segment-51-mindful-connect

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-51-mindful-connect"} /-->

CSS:
.section-sankoumax-tab-segment-51-mindful-connect { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-51-mindful-connect').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 52 Spicato Daruma

sankoumax-tab-segment-52-spicato-daruma

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-52-spicato-daruma"} /-->

CSS:
.section-sankoumax-tab-segment-52-spicato-daruma { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-52-spicato-daruma').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 53 Morohoshi Portfolio

sankoumax-tab-segment-53-morohoshi-portfolio

Copy

Link

Collage

素材感を重ねる

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

4053

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-tab-segment-53-morohoshi-portfolio"} /-->

CSS:
.section-sankoumax-tab-segment-53-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-tab-segment-53-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — tab-segment 54 Vision Structure

sankoumax-tab-segment-54-vision-structure

Copy

Link

Vision

About

Works

Journal

Contact