検索…

カタログ統計

CATALOG › Foundations › Hero

ヒーロー

ファーストビュー。価値提案を 0.3 秒で伝える 30 種の構図。

Patterns

Foundations

Group

isValid=0

Verified

CSS

Animation

Hero — Dark with Glass Card

hero-dark-glass

Copy

Link

⚡ Performance First

速度と精度を、
すべてのプロジェクトに

エンタープライズ向けに最適化された設計。チームの規模に関わらず、ミリ秒単位のレスポンスを実現します。

デモを予約

Live Metrics

99.99%

過去 30 日間の稼働率

⚡ 平均応答 24ms
🔒 SOC 2 Type II 認定
🌍 グローバル CDN 配信

パターン名: Hero — Dark with Glass Card
概要: Dark gradient hero with glass-morphism feature card.
使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 58% / 42%、推奨コンテンツ幅 1100px、主要ブロック group, columns, column, paragraph, heading, paragraph, buttons, button

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-dark-glass"} /-->

CSS:
.section-hero-dark-glass { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-hero-dark-glass').forEach((el) => el.dataset.ready = 'true');

Hero — Gradient Purple

hero-gradient-purple

Copy

Link

✨ Next Generation Platform

未来のビジネスを
今、ここから始めよう

最先端のテクノロジーと洗練されたデザインで
あなたのビジネスを次のステージへ。

無料で始める →

詳細を見る

パターン名: Hero — Gradient Purple
概要: Bold full-width gradient hero with eyebrow, big heading and dual CTAs.
使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 960px、主要ブロック group, paragraph, heading, paragraph, buttons, button, button

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-gradient-purple"} /-->

CSS:
.section-hero-gradient-purple { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-hero-gradient-purple').forEach((el) => el.dataset.ready = 'true');

Hero — Minimal Centered

hero-minimal-centered

Copy

Link

— ANNOUNCING v2.0 —

シンプルさの中の
圧倒的なパワー

必要なものだけを、最高の形で。
余計な複雑さを排除した、本物の体験を。

今すぐ始める

パターン名: Hero — Minimal Centered
概要: Minimalist centered hero with huge typography on white.
使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, paragraph, heading, paragraph, buttons, button

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-minimal-centered"} /-->

CSS:
.section-hero-minimal-centered { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-hero-minimal-centered').forEach((el) => el.dataset.ready = 'true');

Hero — Split Image

hero-split-image

Copy

Link

🚀 Welcome to a new era

デザインと技術が
出会う場所

私たちは、優れたユーザー体験を生み出すための最先端ツールセットを提供します。あなたのアイデアを、世界中のユーザーへ届けましょう。

無料トライアル

資料請求

パターン名: Hero — Split Image
概要: Two-column hero with copy on the left and image on the right.
使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 55% / 1px / 45%、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, paragraph, heading, paragraph, buttons, button

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-split-image"} /-->

CSS:
.section-hero-split-image { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-hero-split-image').forEach((el) => el.dataset.ready = 'true');

Reference Brand — Cinematic Photo Hero

reference-brand-cinematic-hero

Copy

Link

City journal / Culture / People / Local memory

この街には、なぜがある。

静かな写真を背景に、余白と大きな言葉でブランドの世界観を先に伝えるヒーローです。

scroll

下層導線やキャンペーンを薄く添えます。

パターン名: Reference Brand — Cinematic Photo Hero
概要: 参照サイト風の暗い写真背景と巨大コピーの没入ヒーロー。
使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 22% / 78% / 64% / 36% / 1px、推奨コンテンツ幅 1180px、主要ブロック cover, group, columns, column, paragraph, column, paragraph, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-brand-cinematic-hero"} /-->

CSS:
.section-reference-brand-cinematic-hero { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-brand-cinematic-hero').forEach((el) => el.dataset.ready = 'true');

Reference Complete — hero 01 Sticky Entry

reference-complete-hero-01-sticky-entry-obunko

Copy

Link

Sampled Site

14101 / Obunko

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

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

詳しく見る

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

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

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

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

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

Reference Complete — hero 02 Editorial Issue

reference-complete-hero-02-editorial-issue-glanta

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

Reference Complete — hero 03 Brand Index

reference-complete-hero-03-brand-index-kitanohashi

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

Reference Complete — hero 04 Recruit Story

reference-complete-hero-04-recruit-story-suntory-sic

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hero-04-recruit-story-suntory-sic"} /-->

CSS:
.section-reference-complete-hero-04-recruit-story-suntory-sic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hero-04-recruit-story-suntory-sic').forEach((el) => el.dataset.ready = 'true');

Reference Complete — hero 05 Commerce Compare

reference-complete-hero-05-commerce-compare-shueisha-recruit

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hero-05-commerce-compare-shueisha-recruit"} /-->

CSS:
.section-reference-complete-hero-05-commerce-compare-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hero-05-commerce-compare-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');

Reference Complete — hero 06 Timeline Proof

reference-complete-hero-06-timeline-proof-unipos

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

Reference Complete — hero 07 Gallery Led

reference-complete-hero-07-gallery-led-unicell

Copy

Link

Detail

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

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

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

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

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

Reference Complete — hero 08 Dashboard Proof

reference-complete-hero-08-dashboard-proof-upvege

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

Reference Complete — hero 09 Contact Ready

reference-complete-hero-09-contact-ready-dan-brise-barber

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hero-09-contact-ready-dan-brise-barber"} /-->

CSS:
.section-reference-complete-hero-09-contact-ready-dan-brise-barber { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hero-09-contact-ready-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');

Reference Complete — hero 10 Mobile Rail

reference-complete-hero-10-mobile-rail-chiikawa-pocket

Copy

Link

Chiikawa

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hero-10-mobile-rail-chiikawa-pocket"} /-->

CSS:
.section-reference-complete-hero-10-mobile-rail-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hero-10-mobile-rail-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');

Reference Recruit — Layered Visual Hero

reference-recruit-layered-visual-hero

Copy

Link

recruit site

森と生きる商社がある。

大きな自然写真、余白のあるコピー、採用導線を組み合わせたブランド採用向けヒーロー。

仕事を知る

人を知る

パターン名: Reference Recruit — Layered Visual Hero
概要: 採用サイト向けの大判写真と大型コピーを組み合わせたヒーロー。
使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58%、推奨コンテンツ幅 1240px、主要ブロック group, columns, column, paragraph, heading, paragraph, buttons, button

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-recruit-layered-visual-hero"} /-->

CSS:
.section-reference-recruit-layered-visual-hero { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-recruit-layered-visual-hero').forEach((el) => el.dataset.ready = 'true');

SANKOU — Monochrome Serif Hero

sankou-barber-mono-serif-hero

Copy

Link

Craft / Reserve

静かな緊張感を作る、黒背景と大判写真のファーストビュー。

The Real Standard

一枚の写真と巨大な見出しだけで世界観を伝えるヒーロー。

パターン名: SANKOU — Monochrome Serif Hero
概要: 大判写真と巨大タイポで職人性を強く出すヒーロー。
使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 28% / 72%、推奨コンテンツ幅 1240px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-barber-mono-serif-hero"} /-->

CSS:
.section-sankou-barber-mono-serif-hero { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-barber-mono-serif-hero').forEach((el) => el.dataset.ready = 'true');

SANKOU — Fashion Poster Ribbon Hero

sankou-fashion-poster-ribbon-hero

Copy

Link

One Room Look

淡い背景、人物写真、縦ラベルを組み合わせたシーズンLP型。

SPRING EDITION

パターン名: SANKOU — Fashion Poster Ribbon Hero
概要: 淡色ポスターと縦ラベルで季節キャンペーンを見せるヒーロー。
使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 54% / 1px / 1px / 46%、推奨コンテンツ幅 1160px、主要ブロック group, columns, column, group, heading, paragraph, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-fashion-poster-ribbon-hero"} /-->

CSS:
.section-sankou-fashion-poster-ribbon-hero { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-fashion-poster-ribbon-hero').forEach((el) => el.dataset.ready = 'true');

SANKOU — Neon Comic Campaign Hero

sankou-neon-comic-campaign-hero

Copy

Link

SPARK YOUR IDEA

イベントLPやキャンペーンで使える、ネオン見出しと下部ストリップの構成。

SCENE 01

入口の驚き

SCENE 02

商品体験

SCENE 03

SNS拡散

パターン名: SANKOU — Neon Comic Campaign Hero
概要: 派手なキャンペーンや特設ページ向けのネオン見出しヒーロー。
使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1120px、主要ブロック cover, group, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-neon-comic-campaign-hero"} /-->

CSS:
.section-sankou-neon-comic-campaign-hero { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-neon-comic-campaign-hero').forEach((el) => el.dataset.ready = 'true');

SANKOU — Recruit Corner Block Hero

sankou-recruit-corner-block-hero

Copy

Link

Recruit

会社のつづきを守る仕事

角丸の写真、角に置いた小カード、太いコピーで採用ページの印象を作ります。

ENTRY

STORY

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-recruit-corner-block-hero"} /-->

CSS:
.section-sankou-recruit-corner-block-hero { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-recruit-corner-block-hero').forEach((el) => el.dataset.ready = 'true');

SANKOU — Retreat Booking Rail Hero

sankou-retreat-vertical-booking-hero

Copy

Link

Nature in the weekday

写真の余白に短い説明とCTAを重ねる宿泊・体験向け構成。

平日だけの余白

滞在日数 / 料金 / 空室を縦に読ませる予約導線。

空室を見る

パターン名: SANKOU — Retreat Booking Rail Hero
概要: 宿泊・予約サービス向けのサイド導線付き写真ヒーロー。
使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 64% / 36% / 1px、推奨コンテンツ幅 1160px、主要ブロック cover, group, columns, column, heading, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-retreat-vertical-booking-hero"} /-->

CSS:
.section-sankou-retreat-vertical-booking-hero { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-retreat-vertical-booking-hero').forEach((el) => el.dataset.ready = 'true');

SANKOU — SaaS Floating Proof Hero

sankou-saas-floating-proof-hero

Copy

Link

Business SaaS

挑む人を育てるダッシュボード

メインコピーの周囲に実績カードを浮かせるBtoB向けヒーロー。

資料をダウンロード

利用企業

1,200+

継続率

96%

パターン名: SANKOU — SaaS Floating Proof Hero
概要: BtoB SaaS向けの実績カード付きヒーロー。
使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 48% / 52% / 1px / 1px、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, paragraph, heading, paragraph, buttons, button

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-saas-floating-proof-hero"} /-->

CSS:
.section-sankou-saas-floating-proof-hero { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-saas-floating-proof-hero').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 001 Dan Brise Barber

sankou100-001-dan-brise-barber

Copy

Link

Sampled Site

001 / Dan Brise Barber

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-001-dan-brise-barber"} /-->

CSS:
.section-sankou100-001-dan-brise-barber { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-001-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 041 Applebase

sankou100-041-applebase

Copy

Link

Sampled Site

041 / Applebase

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

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

詳しく見る

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

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

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

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

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

SANKOU100 — 081 Mizota Ks

sankou100-081-mizota-ks

Copy

Link

Sampled Site

081 / Mizota Ks

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-081-mizota-ks"} /-->

CSS:
.section-sankou100-081-mizota-ks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-081-mizota-ks').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — hero 01 Obunko

sankoumax-hero-01-obunko

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-01-obunko"} /-->

CSS:
.section-sankoumax-hero-01-obunko { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 02 Pronets Recruit

sankoumax-hero-02-pronets-recruit

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-02-pronets-recruit"} /-->

CSS:
.section-sankoumax-hero-02-pronets-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 03 Glanta

sankoumax-hero-03-glanta

Copy

Link

数字で納得させる

73%

改善率

8分

短縮

7821

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-03-glanta"} /-->

CSS:
.section-sankoumax-hero-03-glanta { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 04 Tashi Portfolio

sankoumax-hero-04-tashi-portfolio

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-04-tashi-portfolio"} /-->

CSS:
.section-sankoumax-hero-04-tashi-portfolio { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 05 Kitanohashi

sankoumax-hero-05-kitanohashi

Copy

Link

Kitanohashi

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

About
Service
Works

News
Recruit
Contact

Sample 1105

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-05-kitanohashi"} /-->

CSS:
.section-sankoumax-hero-05-kitanohashi { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 06 Morinosato Clinic

sankoumax-hero-06-morinosato-clinic

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-06-morinosato-clinic"} /-->

CSS:
.section-sankoumax-hero-06-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 07 Asuzac Highschool

sankoumax-hero-07-asuzac-highschool

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-07-asuzac-highschool"} /-->

CSS:
.section-sankoumax-hero-07-asuzac-highschool { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 08 Junni Newyear

sankoumax-hero-08-junni-newyear

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-08-junni-newyear"} /-->

CSS:
.section-sankoumax-hero-08-junni-newyear { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 09 Mizota Ks

sankoumax-hero-09-mizota-ks

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-09-mizota-ks"} /-->

CSS:
.section-sankoumax-hero-09-mizota-ks { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 10 Nissan Career

sankoumax-hero-10-nissan-career

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-10-nissan-career"} /-->

CSS:
.section-sankoumax-hero-10-nissan-career { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 11 Shueisha Recruit

sankoumax-hero-11-shueisha-recruit

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-11-shueisha-recruit"} /-->

CSS:
.section-sankoumax-hero-11-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 12 Sanu Weekday

sankoumax-hero-12-sanu-weekday

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-12-sanu-weekday"} /-->

CSS:
.section-sankoumax-hero-12-sanu-weekday { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 13 Newspicks Business

sankoumax-hero-13-newspicks-business

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-13-newspicks-business"} /-->

CSS:
.section-sankoumax-hero-13-newspicks-business { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 14 Miyakawa Lab

sankoumax-hero-14-miyakawa-lab

Copy

Link

1114

Miyakawa Lab

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-14-miyakawa-lab"} /-->

CSS:
.section-sankoumax-hero-14-miyakawa-lab { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 15 Matsuo Komuten

sankoumax-hero-15-matsuo-komuten

Copy

Link

Sampled Site

1115 / Matsuo Komuten

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-15-matsuo-komuten"} /-->

CSS:
.section-sankoumax-hero-15-matsuo-komuten { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 16 Yokohama Timberwharf

sankoumax-hero-16-yokohama-timberwharf

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-16-yokohama-timberwharf"} /-->

CSS:
.section-sankoumax-hero-16-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 17 Janu

sankoumax-hero-17-janu

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-17-janu"} /-->

CSS:
.section-sankoumax-hero-17-janu { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 18 Daimatsu

sankoumax-hero-18-daimatsu

Copy

Link

Collage

素材感を重ねる

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

1118

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-18-daimatsu"} /-->

CSS:
.section-sankoumax-hero-18-daimatsu { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 19 Omotesando Ortho

sankoumax-hero-19-omotesando-ortho

Copy

Link

Omotesando

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-19-omotesando-ortho"} /-->

CSS:
.section-sankoumax-hero-19-omotesando-ortho { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 20 Dodasports

sankoumax-hero-20-dodasports

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-20-dodasports"} /-->

CSS:
.section-sankoumax-hero-20-dodasports { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 21 Ja Aichi Recruit

sankoumax-hero-21-ja-aichi-recruit

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-21-ja-aichi-recruit"} /-->

CSS:
.section-sankoumax-hero-21-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 22 Kiyasuku

sankoumax-hero-22-kiyasuku

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-22-kiyasuku"} /-->

CSS:
.section-sankoumax-hero-22-kiyasuku { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 23 Hirono Recruit

sankoumax-hero-23-hirono-recruit

Copy

Link

数字で納得させる

23%

改善率

10分

短縮

7961

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-23-hirono-recruit"} /-->

CSS:
.section-sankoumax-hero-23-hirono-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 24 Ichizenbooks

sankoumax-hero-24-ichizenbooks

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-24-ichizenbooks"} /-->

CSS:
.section-sankoumax-hero-24-ichizenbooks { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 25 Mec Residence Recruit

sankoumax-hero-25-mec-residence-recruit

Copy

Link

Mec Residence Recruit

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

About
Service
Works

News
Recruit
Contact

Sample 1125

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-25-mec-residence-recruit"} /-->

CSS:
.section-sankoumax-hero-25-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 26 Greenpark Santo

sankoumax-hero-26-greenpark-santo

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-26-greenpark-santo"} /-->

CSS:
.section-sankoumax-hero-26-greenpark-santo { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 27 Land Sapporo

sankoumax-hero-27-land-sapporo

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-27-land-sapporo"} /-->

CSS:
.section-sankoumax-hero-27-land-sapporo { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 28 Tokachi Fruits

sankoumax-hero-28-tokachi-fruits

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-28-tokachi-fruits"} /-->

CSS:
.section-sankoumax-hero-28-tokachi-fruits { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 29 Echitora

sankoumax-hero-29-echitora

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-29-echitora"} /-->

CSS:
.section-sankoumax-hero-29-echitora { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 30 Megamis

sankoumax-hero-30-megamis

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-30-megamis"} /-->

CSS:
.section-sankoumax-hero-30-megamis { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 31 Kagami

sankoumax-hero-31-kagami

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-31-kagami"} /-->

CSS:
.section-sankoumax-hero-31-kagami { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 32 Antscr

sankoumax-hero-32-antscr

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-32-antscr"} /-->

CSS:
.section-sankoumax-hero-32-antscr { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 33 Meisei Kg

sankoumax-hero-33-meisei-kg

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-33-meisei-kg"} /-->

CSS:
.section-sankoumax-hero-33-meisei-kg { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 34 Iamwithyou

sankoumax-hero-34-iamwithyou

Copy

Link

1134

Iamwithyou

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-34-iamwithyou"} /-->

CSS:
.section-sankoumax-hero-34-iamwithyou { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 35 Depsoa

sankoumax-hero-35-depsoa

Copy

Link

Sampled Site

1135 / Depsoa

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-35-depsoa"} /-->

CSS:
.section-sankoumax-hero-35-depsoa { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 36 Nothing Tech

sankoumax-hero-36-nothing-tech

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-36-nothing-tech"} /-->

CSS:
.section-sankoumax-hero-36-nothing-tech { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 37 Upvege

sankoumax-hero-37-upvege

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-37-upvege"} /-->

CSS:
.section-sankoumax-hero-37-upvege { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 38 Fujiya1935

sankoumax-hero-38-fujiya1935

Copy

Link

Collage

素材感を重ねる

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

1138

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-38-fujiya1935"} /-->

CSS:
.section-sankoumax-hero-38-fujiya1935 { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 39 Omodakaya

sankoumax-hero-39-omodakaya

Copy

Link

Omodakaya

About

Works

Journal

Contact

Reserve

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-39-omodakaya"} /-->

CSS:
.section-sankoumax-hero-39-omodakaya { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 40 Favtown

sankoumax-hero-40-favtown

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-40-favtown"} /-->

CSS:
.section-sankoumax-hero-40-favtown { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 41 Mizuya Kyoto

sankoumax-hero-41-mizuya-kyoto

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-41-mizuya-kyoto"} /-->

CSS:
.section-sankoumax-hero-41-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 42 Allright Inc

sankoumax-hero-42-allright-inc

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-42-allright-inc"} /-->

CSS:
.section-sankoumax-hero-42-allright-inc { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 43 Jins Holdings

sankoumax-hero-43-jins-holdings

Copy

Link

数字で納得させる

43%

改善率

3分

短縮

8101

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-43-jins-holdings"} /-->

CSS:
.section-sankoumax-hero-43-jins-holdings { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 44 Tsuchitokaze

sankoumax-hero-44-tsuchitokaze

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-44-tsuchitokaze"} /-->

CSS:
.section-sankoumax-hero-44-tsuchitokaze { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — hero 45 Yamato 50Th

sankoumax-hero-45-yamato-50th

Copy

Link

Yamato 50Th

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

About
Service
Works

News
Recruit
Contact

Sample 1145

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hero-45-yamato-50th"} /-->

CSS:
.section-sankoumax-hero-45-yamato-50th { max-width: 1200px; margin-inline: auto; }

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

◈ Blanc Nail

Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。

Foundations

ヒーロー
ヘッダー
フッター
ナビゲーション
タイポグラフィ

Content

フィーチャー
スタッツ
コールトゥアクション
レビュー / 推薦
チーム

Business

料金プラン
商品 / EC
アクセス / 営業時間
メニュー (飲食)
コンタクト

UI Components

カードレイアウト
モーダル / アコーディオン
タブ / セグメント
バナー / アラート
SNS

ヒーロー · Hero · Blanc Nail

ヒーロー

速度と精度を、すべてのプロジェクトに

99.99%

未来のビジネスを今、ここから始めよう

シンプルさの中の圧倒的なパワー

デザインと技術が出会う場所

この街には、なぜがある。

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

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

迷わない比較カード

見つける

選ぶ

進む

写真と要点で信頼を作る

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

状況を即座に把握する

72

入力前に安心させる

Chiikawa

森と生きる商社がある。

The Real Standard

One Room Look

SPARK YOUR IDEA

会社のつづきを守る仕事

Nature in the weekday

挑む人を育てるダッシュボード

1,200+

96%

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

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

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

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

73%

8分

7821

次の相談先を明確にする

Kitanohashi

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

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

People Line

静かな思想を置く

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

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Omotesando

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

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

23%

10分

7961

次の相談先を明確にする

Mec Residence Recruit

迷わないアクセス案内

入力前に安心させる

速度と精度を、
すべてのプロジェクトに

未来のビジネスを
今、ここから始めよう

シンプルさの中の
圧倒的なパワー

デザインと技術が
出会う場所