検索…

カタログ統計

CATALOG › Motion › Scroll Animation

スクロール演出

スクロール連動でフェード、視差、変形が起きるブロック。

Patterns

Motion

Group

isValid=0

Verified

CSS

Animation

Reference Complete — scroll-animation 01 Sticky Entry

reference-complete-scroll-animation-01-sticky-entry-mejinavi

Copy

Link

Sampled Site

18001 / Mejinavi

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-scroll-animation-01-sticky-entry-mejinavi"} /-->

CSS:
.section-reference-complete-scroll-animation-01-sticky-entry-mejinavi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-scroll-animation-01-sticky-entry-mejinavi').forEach((el) => el.dataset.ready = 'true');

Reference Complete — scroll-animation 02 Editorial Issue

reference-complete-scroll-animation-02-editorial-issue-mindful-connect

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-scroll-animation-02-editorial-issue-mindful-connect"} /-->

CSS:
.section-reference-complete-scroll-animation-02-editorial-issue-mindful-connect { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-scroll-animation-02-editorial-issue-mindful-connect').forEach((el) => el.dataset.ready = 'true');

Reference Complete — scroll-animation 03 Brand Index

reference-complete-scroll-animation-03-brand-index-morohoshi-portfolio

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-scroll-animation-03-brand-index-morohoshi-portfolio"} /-->

CSS:
.section-reference-complete-scroll-animation-03-brand-index-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-scroll-animation-03-brand-index-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');

Reference Complete — scroll-animation 04 Recruit Story

reference-complete-scroll-animation-04-recruit-story-sanu-weekday

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-scroll-animation-04-recruit-story-sanu-weekday"} /-->

CSS:
.section-reference-complete-scroll-animation-04-recruit-story-sanu-weekday { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-scroll-animation-04-recruit-story-sanu-weekday').forEach((el) => el.dataset.ready = 'true');

Reference Complete — scroll-animation 05 Commerce Compare

reference-complete-scroll-animation-05-commerce-compare-iriam-miraito

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-scroll-animation-05-commerce-compare-iriam-miraito"} /-->

CSS:
.section-reference-complete-scroll-animation-05-commerce-compare-iriam-miraito { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-scroll-animation-05-commerce-compare-iriam-miraito').forEach((el) => el.dataset.ready = 'true');

Reference Complete — scroll-animation 06 Timeline Proof

reference-complete-scroll-animation-06-timeline-proof-iamwithyou

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-scroll-animation-06-timeline-proof-iamwithyou"} /-->

CSS:
.section-reference-complete-scroll-animation-06-timeline-proof-iamwithyou { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-scroll-animation-06-timeline-proof-iamwithyou').forEach((el) => el.dataset.ready = 'true');

Reference Complete — scroll-animation 07 Gallery Led

reference-complete-scroll-animation-07-gallery-led-fujiya1935

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-scroll-animation-07-gallery-led-fujiya1935"} /-->

CSS:
.section-reference-complete-scroll-animation-07-gallery-led-fujiya1935 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-scroll-animation-07-gallery-led-fujiya1935').forEach((el) => el.dataset.ready = 'true');

Reference Complete — scroll-animation 08 Dashboard Proof

reference-complete-scroll-animation-08-dashboard-proof-palcloset-fashion

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-scroll-animation-08-dashboard-proof-palcloset-fashion"} /-->

CSS:
.section-reference-complete-scroll-animation-08-dashboard-proof-palcloset-fashion { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-scroll-animation-08-dashboard-proof-palcloset-fashion').forEach((el) => el.dataset.ready = 'true');

Reference Complete — scroll-animation 09 Contact Ready

reference-complete-scroll-animation-09-contact-ready-yokohama-timberwharf

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-scroll-animation-09-contact-ready-yokohama-timberwharf"} /-->

CSS:
.section-reference-complete-scroll-animation-09-contact-ready-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-scroll-animation-09-contact-ready-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');

Reference Complete — scroll-animation 10 Mobile Rail

reference-complete-scroll-animation-10-mobile-rail-dodasports

Copy

Link

Dodasports

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-scroll-animation-10-mobile-rail-dodasports"} /-->

CSS:
.section-reference-complete-scroll-animation-10-mobile-rail-dodasports { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-scroll-animation-10-mobile-rail-dodasports').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 038 Violet Patisserie

sankou100-038-violet-patisserie

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-038-violet-patisserie"} /-->

CSS:
.section-sankou100-038-violet-patisserie { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-038-violet-patisserie').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 078 Undimension

sankou100-078-undimension

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — scroll-animation 01 Nissan Career

sankoumax-scroll-animation-01-nissan-career

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-01-nissan-career"} /-->

CSS:
.section-sankoumax-scroll-animation-01-nissan-career { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-01-nissan-career').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 02 Shueisha Recruit

sankoumax-scroll-animation-02-shueisha-recruit

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-02-shueisha-recruit"} /-->

CSS:
.section-sankoumax-scroll-animation-02-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-02-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 03 Sanu Weekday

sankoumax-scroll-animation-03-sanu-weekday

Copy

Link

Collage

素材感を重ねる

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

5003

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-03-sanu-weekday"} /-->

CSS:
.section-sankoumax-scroll-animation-03-sanu-weekday { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-03-sanu-weekday').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 04 Newspicks Business

sankoumax-scroll-animation-04-newspicks-business

Copy

Link

Newspicks

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-04-newspicks-business"} /-->

CSS:
.section-sankoumax-scroll-animation-04-newspicks-business { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-04-newspicks-business').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 05 Miyakawa Lab

sankoumax-scroll-animation-05-miyakawa-lab

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-05-miyakawa-lab"} /-->

CSS:
.section-sankoumax-scroll-animation-05-miyakawa-lab { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-05-miyakawa-lab').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 06 Matsuo Komuten

sankoumax-scroll-animation-06-matsuo-komuten

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-06-matsuo-komuten"} /-->

CSS:
.section-sankoumax-scroll-animation-06-matsuo-komuten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-06-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 07 Yokohama Timberwharf

sankoumax-scroll-animation-07-yokohama-timberwharf

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-07-yokohama-timberwharf"} /-->

CSS:
.section-sankoumax-scroll-animation-07-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-07-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 08 Janu

sankoumax-scroll-animation-08-janu

Copy

Link

数字で納得させる

58%

改善率

7分

短縮

35156

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-08-janu"} /-->

CSS:
.section-sankoumax-scroll-animation-08-janu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-08-janu').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 09 Daimatsu

sankoumax-scroll-animation-09-daimatsu

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-09-daimatsu"} /-->

CSS:
.section-sankoumax-scroll-animation-09-daimatsu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-09-daimatsu').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 10 Omotesando Ortho

sankoumax-scroll-animation-10-omotesando-ortho

Copy

Link

Omotesando Ortho

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

About
Service
Works

News
Recruit
Contact

Sample 5010

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-10-omotesando-ortho"} /-->

CSS:
.section-sankoumax-scroll-animation-10-omotesando-ortho { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-10-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 11 Dodasports

sankoumax-scroll-animation-11-dodasports

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-11-dodasports"} /-->

CSS:
.section-sankoumax-scroll-animation-11-dodasports { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-11-dodasports').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 12 Ja Aichi Recruit

sankoumax-scroll-animation-12-ja-aichi-recruit

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-12-ja-aichi-recruit"} /-->

CSS:
.section-sankoumax-scroll-animation-12-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-12-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 13 Kiyasuku

sankoumax-scroll-animation-13-kiyasuku

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-13-kiyasuku"} /-->

CSS:
.section-sankoumax-scroll-animation-13-kiyasuku { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-13-kiyasuku').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 14 Hirono Recruit

sankoumax-scroll-animation-14-hirono-recruit

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-14-hirono-recruit"} /-->

CSS:
.section-sankoumax-scroll-animation-14-hirono-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-14-hirono-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 15 Ichizenbooks

sankoumax-scroll-animation-15-ichizenbooks

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-15-ichizenbooks"} /-->

CSS:
.section-sankoumax-scroll-animation-15-ichizenbooks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-15-ichizenbooks').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 16 Mec Residence Recruit

sankoumax-scroll-animation-16-mec-residence-recruit

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-16-mec-residence-recruit"} /-->

CSS:
.section-sankoumax-scroll-animation-16-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-16-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 17 Greenpark Santo

sankoumax-scroll-animation-17-greenpark-santo

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-17-greenpark-santo"} /-->

CSS:
.section-sankoumax-scroll-animation-17-greenpark-santo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-17-greenpark-santo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 18 Land Sapporo

sankoumax-scroll-animation-18-land-sapporo

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-18-land-sapporo"} /-->

CSS:
.section-sankoumax-scroll-animation-18-land-sapporo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-18-land-sapporo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 19 Tokachi Fruits

sankoumax-scroll-animation-19-tokachi-fruits

Copy

Link

5019

Tokachi Fruits

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-19-tokachi-fruits"} /-->

CSS:
.section-sankoumax-scroll-animation-19-tokachi-fruits { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-19-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 20 Echitora

sankoumax-scroll-animation-20-echitora

Copy

Link

Sampled Site

5020 / Echitora

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-20-echitora"} /-->

CSS:
.section-sankoumax-scroll-animation-20-echitora { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-20-echitora').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 21 Megamis

sankoumax-scroll-animation-21-megamis

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-21-megamis"} /-->

CSS:
.section-sankoumax-scroll-animation-21-megamis { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-21-megamis').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 22 Kagami

sankoumax-scroll-animation-22-kagami

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-22-kagami"} /-->

CSS:
.section-sankoumax-scroll-animation-22-kagami { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-22-kagami').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 23 Antscr

sankoumax-scroll-animation-23-antscr

Copy

Link

Collage

素材感を重ねる

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

5023

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-23-antscr"} /-->

CSS:
.section-sankoumax-scroll-animation-23-antscr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-23-antscr').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 24 Meisei Kg

sankoumax-scroll-animation-24-meisei-kg

Copy

Link

Meisei

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-24-meisei-kg"} /-->

CSS:
.section-sankoumax-scroll-animation-24-meisei-kg { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-24-meisei-kg').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 25 Iamwithyou

sankoumax-scroll-animation-25-iamwithyou

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-25-iamwithyou"} /-->

CSS:
.section-sankoumax-scroll-animation-25-iamwithyou { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-25-iamwithyou').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 26 Depsoa

sankoumax-scroll-animation-26-depsoa

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-26-depsoa"} /-->

CSS:
.section-sankoumax-scroll-animation-26-depsoa { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-26-depsoa').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 27 Nothing Tech

sankoumax-scroll-animation-27-nothing-tech

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-27-nothing-tech"} /-->

CSS:
.section-sankoumax-scroll-animation-27-nothing-tech { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-27-nothing-tech').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 28 Upvege

sankoumax-scroll-animation-28-upvege

Copy

Link

数字で納得させる

78%

改善率

9分

短縮

35296

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-28-upvege"} /-->

CSS:
.section-sankoumax-scroll-animation-28-upvege { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-28-upvege').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 29 Fujiya1935

sankoumax-scroll-animation-29-fujiya1935

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-29-fujiya1935"} /-->

CSS:
.section-sankoumax-scroll-animation-29-fujiya1935 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-29-fujiya1935').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 30 Omodakaya

sankoumax-scroll-animation-30-omodakaya

Copy

Link

Omodakaya

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

About
Service
Works

News
Recruit
Contact

Sample 5030

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-30-omodakaya"} /-->

CSS:
.section-sankoumax-scroll-animation-30-omodakaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-30-omodakaya').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 31 Favtown

sankoumax-scroll-animation-31-favtown

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-31-favtown"} /-->

CSS:
.section-sankoumax-scroll-animation-31-favtown { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-31-favtown').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 32 Mizuya Kyoto

sankoumax-scroll-animation-32-mizuya-kyoto

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-32-mizuya-kyoto"} /-->

CSS:
.section-sankoumax-scroll-animation-32-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-32-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 33 Allright Inc

sankoumax-scroll-animation-33-allright-inc

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-33-allright-inc"} /-->

CSS:
.section-sankoumax-scroll-animation-33-allright-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-33-allright-inc').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 34 Jins Holdings

sankoumax-scroll-animation-34-jins-holdings

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-34-jins-holdings"} /-->

CSS:
.section-sankoumax-scroll-animation-34-jins-holdings { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-34-jins-holdings').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 35 Tsuchitokaze

sankoumax-scroll-animation-35-tsuchitokaze

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-35-tsuchitokaze"} /-->

CSS:
.section-sankoumax-scroll-animation-35-tsuchitokaze { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-35-tsuchitokaze').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 36 Yamato 50Th

sankoumax-scroll-animation-36-yamato-50th

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-36-yamato-50th"} /-->

CSS:
.section-sankoumax-scroll-animation-36-yamato-50th { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-36-yamato-50th').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 37 Action Npo

sankoumax-scroll-animation-37-action-npo

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-37-action-npo"} /-->

CSS:
.section-sankoumax-scroll-animation-37-action-npo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-37-action-npo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 38 Mycampus

sankoumax-scroll-animation-38-mycampus

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-38-mycampus"} /-->

CSS:
.section-sankoumax-scroll-animation-38-mycampus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-38-mycampus').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 39 Mejinavi

sankoumax-scroll-animation-39-mejinavi

Copy

Link

5039

Mejinavi

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-39-mejinavi"} /-->

CSS:
.section-sankoumax-scroll-animation-39-mejinavi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-39-mejinavi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 40 Niwaya

sankoumax-scroll-animation-40-niwaya

Copy

Link

Sampled Site

5040 / Niwaya

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-40-niwaya"} /-->

CSS:
.section-sankoumax-scroll-animation-40-niwaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-40-niwaya').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 41 Mindful Connect

sankoumax-scroll-animation-41-mindful-connect

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-41-mindful-connect"} /-->

CSS:
.section-sankoumax-scroll-animation-41-mindful-connect { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-41-mindful-connect').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 42 Spicato Daruma

sankoumax-scroll-animation-42-spicato-daruma

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-42-spicato-daruma"} /-->

CSS:
.section-sankoumax-scroll-animation-42-spicato-daruma { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-42-spicato-daruma').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 43 Morohoshi Portfolio

sankoumax-scroll-animation-43-morohoshi-portfolio

Copy

Link

Collage

素材感を重ねる

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

5043

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-43-morohoshi-portfolio"} /-->

CSS:
.section-sankoumax-scroll-animation-43-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-43-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 44 Vision Structure

sankoumax-scroll-animation-44-vision-structure

Copy

Link

Vision

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-44-vision-structure"} /-->

CSS:
.section-sankoumax-scroll-animation-44-vision-structure { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-44-vision-structure').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 45 Nakiri Shota

sankoumax-scroll-animation-45-nakiri-shota

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-45-nakiri-shota"} /-->

CSS:
.section-sankoumax-scroll-animation-45-nakiri-shota { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-45-nakiri-shota').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 46 Koba Clinic

sankoumax-scroll-animation-46-koba-clinic

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-46-koba-clinic"} /-->

CSS:
.section-sankoumax-scroll-animation-46-koba-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-46-koba-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 47 Ems Recruit

sankoumax-scroll-animation-47-ems-recruit

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-47-ems-recruit"} /-->

CSS:
.section-sankoumax-scroll-animation-47-ems-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-47-ems-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 48 Felissimo Panda

sankoumax-scroll-animation-48-felissimo-panda

Copy

Link

数字で納得させる

28%

改善率

11分

短縮

35436

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-48-felissimo-panda"} /-->

CSS:
.section-sankoumax-scroll-animation-48-felissimo-panda { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-48-felissimo-panda').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 49 Iriam Miraito

sankoumax-scroll-animation-49-iriam-miraito

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-49-iriam-miraito"} /-->

CSS:
.section-sankoumax-scroll-animation-49-iriam-miraito { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-49-iriam-miraito').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 50 Gaaboo

sankoumax-scroll-animation-50-gaaboo

Copy

Link

Gaaboo

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

About
Service
Works

News
Recruit
Contact

Sample 5050

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-50-gaaboo"} /-->

CSS:
.section-sankoumax-scroll-animation-50-gaaboo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-50-gaaboo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 51 Violet Patisserie

sankoumax-scroll-animation-51-violet-patisserie

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-51-violet-patisserie"} /-->

CSS:
.section-sankoumax-scroll-animation-51-violet-patisserie { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-51-violet-patisserie').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 52 Nii Recruit

sankoumax-scroll-animation-52-nii-recruit

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-52-nii-recruit"} /-->

CSS:
.section-sankoumax-scroll-animation-52-nii-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-52-nii-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 53 Saranosono

sankoumax-scroll-animation-53-saranosono

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-53-saranosono"} /-->

CSS:
.section-sankoumax-scroll-animation-53-saranosono { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-53-saranosono').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — scroll-animation 54 Dac Web

sankoumax-scroll-animation-54-dac-web

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-scroll-animation-54-dac-web"} /-->

CSS:
.section-sankoumax-scroll-animation-54-dac-web { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-scroll-animation-54-dac-web').forEach((el) => el.dataset.ready = 'true');

Scroll — Animation Class Demo

scroll-animation-demo

Copy

Link