タイムライン

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-timeline-step-01-sticky-entry-tattoo-rays"} /-->

CSS:
.section-reference-complete-timeline-step-01-sticky-entry-tattoo-rays { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-timeline-step-01-sticky-entry-tattoo-rays').forEach((el) => el.dataset.ready = 'true');

Reference Complete — timeline-step 02 Editorial Issue

reference-complete-timeline-step-02-editorial-issue-obunko

Copy

Link

Editorial

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

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-timeline-step-02-editorial-issue-obunko"} /-->

CSS:
.section-reference-complete-timeline-step-02-editorial-issue-obunko { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-timeline-step-02-editorial-issue-obunko').forEach((el) => el.dataset.ready = 'true');

Reference Complete — timeline-step 03 Brand Index

reference-complete-timeline-step-03-brand-index-glanta

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-timeline-step-03-brand-index-glanta"} /-->

CSS:
.section-reference-complete-timeline-step-03-brand-index-glanta { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-timeline-step-03-brand-index-glanta').forEach((el) => el.dataset.ready = 'true');

Reference Complete — timeline-step 04 Recruit Story

reference-complete-timeline-step-04-recruit-story-dac-web

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-timeline-step-04-recruit-story-dac-web"} /-->

CSS:
.section-reference-complete-timeline-step-04-recruit-story-dac-web { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-timeline-step-04-recruit-story-dac-web').forEach((el) => el.dataset.ready = 'true');

Reference Complete — timeline-step 05 Commerce Compare

reference-complete-timeline-step-05-commerce-compare-mizota-ks

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-timeline-step-05-commerce-compare-mizota-ks"} /-->

CSS:
.section-reference-complete-timeline-step-05-commerce-compare-mizota-ks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-timeline-step-05-commerce-compare-mizota-ks').forEach((el) => el.dataset.ready = 'true');

Reference Complete — timeline-step 06 Timeline Proof

reference-complete-timeline-step-06-timeline-proof-michikusa-art

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-timeline-step-06-timeline-proof-michikusa-art"} /-->

CSS:
.section-reference-complete-timeline-step-06-timeline-proof-michikusa-art { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-timeline-step-06-timeline-proof-michikusa-art').forEach((el) => el.dataset.ready = 'true');

Reference Complete — timeline-step 07 Gallery Led

reference-complete-timeline-step-07-gallery-led-applebase

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-timeline-step-07-gallery-led-applebase"} /-->

CSS:
.section-reference-complete-timeline-step-07-gallery-led-applebase { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-timeline-step-07-gallery-led-applebase').forEach((el) => el.dataset.ready = 'true');

Reference Complete — timeline-step 08 Dashboard Proof

reference-complete-timeline-step-08-dashboard-proof-depsoa

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-timeline-step-08-dashboard-proof-depsoa"} /-->

CSS:
.section-reference-complete-timeline-step-08-dashboard-proof-depsoa { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-timeline-step-08-dashboard-proof-depsoa').forEach((el) => el.dataset.ready = 'true');

Reference Complete — timeline-step 09 Contact Ready

reference-complete-timeline-step-09-contact-ready-infocus

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-timeline-step-09-contact-ready-infocus"} /-->

CSS:
.section-reference-complete-timeline-step-09-contact-ready-infocus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-timeline-step-09-contact-ready-infocus').forEach((el) => el.dataset.ready = 'true');

Reference Complete — timeline-step 10 Mobile Rail

reference-complete-timeline-step-10-mobile-rail-studio-cbr

Copy

Link

Studio

About

Works

Journal

Contact

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-timeline-step-10-mobile-rail-studio-cbr"} /-->

CSS:
.section-reference-complete-timeline-step-10-mobile-rail-studio-cbr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-timeline-step-10-mobile-rail-studio-cbr').forEach((el) => el.dataset.ready = 'true');

Reference Recruit — Scroll Story Chapters

reference-scroll-story-chapters

Copy

Link

story chapters

知る順番を、体験として設計する。

01

会社を知る

理念と背景を伝える章。

02

仕事を知る

業務の流れを伝える章。

03

人を知る

インタビューへつなぐ章。

パターン名: Reference Recruit — Scroll Story Chapters
概要: 採用サイトの章立て導線として使えるステップパターン。
使用目的: Timeline / Step領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1120px、主要ブロック group, paragraph, heading, columns, column, group, heading, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-scroll-story-chapters"} /-->

CSS:
.section-reference-scroll-story-chapters { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-scroll-story-chapters').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 025 Obunko

sankou100-025-obunko

Copy

Link

Obunko

About

Works

Journal

Contact

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

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

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

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

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

SANKOU100 — 065 Ja Aichi Recruit

sankou100-065-ja-aichi-recruit

Copy

Link

Ja

About

Works

Journal

Contact

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-065-ja-aichi-recruit"} /-->

CSS:
.section-sankou100-065-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-065-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 01 Asuzac Highschool

sankoumax-timeline-step-01-asuzac-highschool

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-01-asuzac-highschool"} /-->

CSS:
.section-sankoumax-timeline-step-01-asuzac-highschool { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-01-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 02 Junni Newyear

sankoumax-timeline-step-02-junni-newyear

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-02-junni-newyear"} /-->

CSS:
.section-sankoumax-timeline-step-02-junni-newyear { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-02-junni-newyear').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 03 Mizota Ks

sankoumax-timeline-step-03-mizota-ks

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-03-mizota-ks"} /-->

CSS:
.section-sankoumax-timeline-step-03-mizota-ks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-03-mizota-ks').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 04 Nissan Career

sankoumax-timeline-step-04-nissan-career

Copy

Link

3704

Nissan Career

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-04-nissan-career"} /-->

CSS:
.section-sankoumax-timeline-step-04-nissan-career { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-04-nissan-career').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 05 Shueisha Recruit

sankoumax-timeline-step-05-shueisha-recruit

Copy

Link

Sampled Site

3705 / Shueisha Recruit

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-05-shueisha-recruit"} /-->

CSS:
.section-sankoumax-timeline-step-05-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-05-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 06 Sanu Weekday

sankoumax-timeline-step-06-sanu-weekday

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-06-sanu-weekday"} /-->

CSS:
.section-sankoumax-timeline-step-06-sanu-weekday { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-06-sanu-weekday').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 07 Newspicks Business

sankoumax-timeline-step-07-newspicks-business

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-07-newspicks-business"} /-->

CSS:
.section-sankoumax-timeline-step-07-newspicks-business { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-07-newspicks-business').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 08 Miyakawa Lab

sankoumax-timeline-step-08-miyakawa-lab

Copy

Link

Collage

素材感を重ねる

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

3708

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-08-miyakawa-lab"} /-->

CSS:
.section-sankoumax-timeline-step-08-miyakawa-lab { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-08-miyakawa-lab').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 09 Matsuo Komuten

sankoumax-timeline-step-09-matsuo-komuten

Copy

Link

Matsuo

About

Works

Journal

Contact

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-09-matsuo-komuten"} /-->

CSS:
.section-sankoumax-timeline-step-09-matsuo-komuten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-09-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 10 Yokohama Timberwharf

sankoumax-timeline-step-10-yokohama-timberwharf

Copy

Link

Editorial

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

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-10-yokohama-timberwharf"} /-->

CSS:
.section-sankoumax-timeline-step-10-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-10-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 11 Janu

sankoumax-timeline-step-11-janu

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-11-janu"} /-->

CSS:
.section-sankoumax-timeline-step-11-janu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-11-janu').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 12 Daimatsu

sankoumax-timeline-step-12-daimatsu

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-12-daimatsu"} /-->

CSS:
.section-sankoumax-timeline-step-12-daimatsu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-12-daimatsu').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 13 Omotesando Ortho

sankoumax-timeline-step-13-omotesando-ortho

Copy

Link

数字で納得させる

23%

改善率

8分

短縮

26091

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-13-omotesando-ortho"} /-->

CSS:
.section-sankoumax-timeline-step-13-omotesando-ortho { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-13-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 14 Dodasports

sankoumax-timeline-step-14-dodasports

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-14-dodasports"} /-->

CSS:
.section-sankoumax-timeline-step-14-dodasports { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-14-dodasports').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 15 Ja Aichi Recruit

sankoumax-timeline-step-15-ja-aichi-recruit

Copy

Link

Ja Aichi Recruit

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

About
Service
Works

News
Recruit
Contact

Sample 3715

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-15-ja-aichi-recruit"} /-->

CSS:
.section-sankoumax-timeline-step-15-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-15-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 16 Kiyasuku

sankoumax-timeline-step-16-kiyasuku

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-16-kiyasuku"} /-->

CSS:
.section-sankoumax-timeline-step-16-kiyasuku { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-16-kiyasuku').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 17 Hirono Recruit

sankoumax-timeline-step-17-hirono-recruit

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-17-hirono-recruit"} /-->

CSS:
.section-sankoumax-timeline-step-17-hirono-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-17-hirono-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 18 Ichizenbooks

sankoumax-timeline-step-18-ichizenbooks

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-18-ichizenbooks"} /-->

CSS:
.section-sankoumax-timeline-step-18-ichizenbooks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-18-ichizenbooks').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 19 Mec Residence Recruit

sankoumax-timeline-step-19-mec-residence-recruit

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-19-mec-residence-recruit"} /-->

CSS:
.section-sankoumax-timeline-step-19-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-19-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 20 Greenpark Santo

sankoumax-timeline-step-20-greenpark-santo

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-20-greenpark-santo"} /-->

CSS:
.section-sankoumax-timeline-step-20-greenpark-santo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-20-greenpark-santo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 21 Land Sapporo

sankoumax-timeline-step-21-land-sapporo

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-21-land-sapporo"} /-->

CSS:
.section-sankoumax-timeline-step-21-land-sapporo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-21-land-sapporo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 22 Tokachi Fruits

sankoumax-timeline-step-22-tokachi-fruits

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-22-tokachi-fruits"} /-->

CSS:
.section-sankoumax-timeline-step-22-tokachi-fruits { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-22-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 23 Echitora

sankoumax-timeline-step-23-echitora

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-23-echitora"} /-->

CSS:
.section-sankoumax-timeline-step-23-echitora { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-23-echitora').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 24 Megamis

sankoumax-timeline-step-24-megamis

Copy

Link

3724

Megamis

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-24-megamis"} /-->

CSS:
.section-sankoumax-timeline-step-24-megamis { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-24-megamis').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 25 Kagami

sankoumax-timeline-step-25-kagami

Copy

Link

Sampled Site

3725 / Kagami

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-25-kagami"} /-->

CSS:
.section-sankoumax-timeline-step-25-kagami { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-25-kagami').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 26 Antscr

sankoumax-timeline-step-26-antscr

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-26-antscr"} /-->

CSS:
.section-sankoumax-timeline-step-26-antscr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-26-antscr').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 27 Meisei Kg

sankoumax-timeline-step-27-meisei-kg

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-27-meisei-kg"} /-->

CSS:
.section-sankoumax-timeline-step-27-meisei-kg { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-27-meisei-kg').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 28 Iamwithyou

sankoumax-timeline-step-28-iamwithyou

Copy

Link

Collage

素材感を重ねる

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

3728

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-28-iamwithyou"} /-->

CSS:
.section-sankoumax-timeline-step-28-iamwithyou { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-28-iamwithyou').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 29 Depsoa

sankoumax-timeline-step-29-depsoa

Copy

Link

Depsoa

About

Works

Journal

Contact

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-29-depsoa"} /-->

CSS:
.section-sankoumax-timeline-step-29-depsoa { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-29-depsoa').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 30 Nothing Tech

sankoumax-timeline-step-30-nothing-tech

Copy

Link

Editorial

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

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-30-nothing-tech"} /-->

CSS:
.section-sankoumax-timeline-step-30-nothing-tech { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-30-nothing-tech').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 31 Upvege

sankoumax-timeline-step-31-upvege

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-31-upvege"} /-->

CSS:
.section-sankoumax-timeline-step-31-upvege { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-31-upvege').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 32 Fujiya1935

sankoumax-timeline-step-32-fujiya1935

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-32-fujiya1935"} /-->

CSS:
.section-sankoumax-timeline-step-32-fujiya1935 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-32-fujiya1935').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 33 Omodakaya

sankoumax-timeline-step-33-omodakaya

Copy

Link

数字で納得させる

43%

改善率

10分

短縮

26231

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-33-omodakaya"} /-->

CSS:
.section-sankoumax-timeline-step-33-omodakaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-33-omodakaya').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 34 Favtown

sankoumax-timeline-step-34-favtown

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-34-favtown"} /-->

CSS:
.section-sankoumax-timeline-step-34-favtown { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-34-favtown').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 35 Mizuya Kyoto

sankoumax-timeline-step-35-mizuya-kyoto

Copy

Link

Mizuya Kyoto

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

About
Service
Works

News
Recruit
Contact

Sample 3735

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-35-mizuya-kyoto"} /-->

CSS:
.section-sankoumax-timeline-step-35-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-35-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 36 Allright Inc

sankoumax-timeline-step-36-allright-inc

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-36-allright-inc"} /-->

CSS:
.section-sankoumax-timeline-step-36-allright-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-36-allright-inc').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 37 Jins Holdings

sankoumax-timeline-step-37-jins-holdings

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-37-jins-holdings"} /-->

CSS:
.section-sankoumax-timeline-step-37-jins-holdings { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-37-jins-holdings').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 38 Tsuchitokaze

sankoumax-timeline-step-38-tsuchitokaze

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-38-tsuchitokaze"} /-->

CSS:
.section-sankoumax-timeline-step-38-tsuchitokaze { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-38-tsuchitokaze').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 39 Yamato 50Th

sankoumax-timeline-step-39-yamato-50th

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-39-yamato-50th"} /-->

CSS:
.section-sankoumax-timeline-step-39-yamato-50th { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-39-yamato-50th').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 40 Action Npo

sankoumax-timeline-step-40-action-npo

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-40-action-npo"} /-->

CSS:
.section-sankoumax-timeline-step-40-action-npo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-40-action-npo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 41 Mycampus

sankoumax-timeline-step-41-mycampus

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-41-mycampus"} /-->

CSS:
.section-sankoumax-timeline-step-41-mycampus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-41-mycampus').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 42 Mejinavi

sankoumax-timeline-step-42-mejinavi

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-42-mejinavi"} /-->

CSS:
.section-sankoumax-timeline-step-42-mejinavi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-42-mejinavi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 43 Niwaya

sankoumax-timeline-step-43-niwaya

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-43-niwaya"} /-->

CSS:
.section-sankoumax-timeline-step-43-niwaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-43-niwaya').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 44 Mindful Connect

sankoumax-timeline-step-44-mindful-connect

Copy

Link

3744

Mindful Connect

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-44-mindful-connect"} /-->

CSS:
.section-sankoumax-timeline-step-44-mindful-connect { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-44-mindful-connect').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 45 Spicato Daruma

sankoumax-timeline-step-45-spicato-daruma

Copy

Link

Sampled Site

3745 / Spicato Daruma

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-45-spicato-daruma"} /-->

CSS:
.section-sankoumax-timeline-step-45-spicato-daruma { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-45-spicato-daruma').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 46 Morohoshi Portfolio

sankoumax-timeline-step-46-morohoshi-portfolio

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-46-morohoshi-portfolio"} /-->

CSS:
.section-sankoumax-timeline-step-46-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-46-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 47 Vision Structure

sankoumax-timeline-step-47-vision-structure

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-47-vision-structure"} /-->

CSS:
.section-sankoumax-timeline-step-47-vision-structure { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-47-vision-structure').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 48 Nakiri Shota

sankoumax-timeline-step-48-nakiri-shota

Copy

Link

Collage

素材感を重ねる

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

3748

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-48-nakiri-shota"} /-->

CSS:
.section-sankoumax-timeline-step-48-nakiri-shota { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-48-nakiri-shota').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 49 Koba Clinic

sankoumax-timeline-step-49-koba-clinic

Copy

Link

Koba

About

Works

Journal

Contact

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-timeline-step-49-koba-clinic"} /-->

CSS:
.section-sankoumax-timeline-step-49-koba-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-timeline-step-49-koba-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — timeline-step 50 Ems Recruit

sankoumax-timeline-step-50-ems-recruit

Copy

Link

Editorial

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

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

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