検索…
カタログ 統計
CATALOG › Foundations › Navigation
ナビゲーション
メガメニュー、ブレッドクラム、サイドナビ。回遊導線の核。
70
Patterns
Foundations
Group
isValid=0
Verified
CSS
Animation
01
Navigation — Anchor TOC
nav-anchor-links
ON THIS PAGE
目次
01 ・ はじめに
02 ・ 環境のセットアップ
03 ・ 主要な API リファレンス
04 ・ よくある落とし穴
05 ・ 次のステップ
- パターン名: Navigation — Anchor TOC
- 概要: Vertical table-of-contents with active border indicator.
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 3px / 3px / 3px / 3px / 3px、推奨コンテンツ幅 760px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/nav-anchor-links"} /-->
CSS:
.section-nav-anchor-links { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-nav-anchor-links').forEach((el) => el.dataset.ready = 'true');
02
Nav — Breadcrumb Trail
nav-breadcrumb
- パターン名: Nav — Breadcrumb Trail
- 概要: Single-line breadcrumb navigation with 4 levels.
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 1080px、主要ブロック group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/nav-breadcrumb"} /-->
CSS:
.section-nav-breadcrumb { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-nav-breadcrumb').forEach((el) => el.dataset.ready = 'true');
03
Nav — Numbered Pagination
nav-pagination
←
1
2
3
…
12
→
- パターン名: Nav — Numbered Pagination
- 概要: Numbered pagination (1, 2 [current], 3, …, 12) with prev/next arrows.
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px、推奨コンテンツ幅 640px、主要ブロック group, group, group, paragraph, group, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/nav-pagination"} /-->
CSS:
.section-nav-pagination { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-nav-pagination').forEach((el) => el.dataset.ready = 'true');
04
Navigation — Segmented Pill Switch
nav-pill-segmented
月額
年額（2 ヶ月分お得）
エンタープライズ
- パターン名: Navigation — Segmented Pill Switch
- 概要: Pill-shaped segmented control with active state, suited for billing or view toggles.
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 1180px、主要ブロック group, group, paragraph, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/nav-pill-segmented"} /-->
CSS:
.section-nav-pill-segmented { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-nav-pill-segmented').forEach((el) => el.dataset.ready = 'true');
05
Navigation — Underlined Tabs Row
nav-tabs-row
概要
仕様
価格
レビュー
FAQ
- パターン名: Navigation — Underlined Tabs Row
- 概要: In-page tab-style navigation with active underline indicator.
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 2px、推奨コンテンツ幅 1180px、主要ブロック group, group, paragraph, paragraph, paragraph, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/nav-tabs-row"} /-->
CSS:
.section-nav-tabs-row { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-nav-tabs-row').forEach((el) => el.dataset.ready = 'true');
06
Reference Complete — navigation-menu 01 Sticky Entry
reference-complete-navigation-menu-01-sticky-entry-mindful-connect
Sampled Site
15401 / Mindful Connect
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: Reference Complete — navigation-menu 01 Sticky Entry
- 概要: 参照サンプル再確認から追加したnavigation-menu向け部品。固定導線つきの大判ファーストビュー。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 26% / 74%、推奨コンテンツ幅 47183px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-navigation-menu-01-sticky-entry-mindful-connect"} /-->
CSS:
.section-reference-complete-navigation-menu-01-sticky-entry-mindful-connect { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-navigation-menu-01-sticky-entry-mindful-connect').forEach((el) => el.dataset.ready = 'true');
07
Reference Complete — navigation-menu 02 Editorial Issue
reference-complete-navigation-menu-02-editorial-issue-morohoshi-portfolio
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: Reference Complete — navigation-menu 02 Editorial Issue
- 概要: 参照サンプル再確認から追加したnavigation-menu向け部品。雑誌的な見出しと導入文の編集レイアウト。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 16422px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-navigation-menu-02-editorial-issue-morohoshi-portfolio"} /-->
CSS:
.section-reference-complete-navigation-menu-02-editorial-issue-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-navigation-menu-02-editorial-issue-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');
08
Reference Complete — navigation-menu 03 Brand Index
reference-complete-navigation-menu-03-brand-index-nakiri-shota
Card Flow
迷わない比較カード
Nakiri Shota から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: Reference Complete — navigation-menu 03 Brand Index
- 概要: 参照サンプル再確認から追加したnavigation-menu向け部品。複数ブランドやサービスを迷わせず並べる索引。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 16483px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-navigation-menu-03-brand-index-nakiri-shota"} /-->
CSS:
.section-reference-complete-navigation-menu-03-brand-index-nakiri-shota { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-navigation-menu-03-brand-index-nakiri-shota').forEach((el) => el.dataset.ready = 'true');
09
Reference Complete — navigation-menu 04 Recruit Story
reference-complete-navigation-menu-04-recruit-story-miyakawa-lab
Split Story
写真と要点で信頼を作る
Miyakawa Lab の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: Reference Complete — navigation-menu 04 Recruit Story
- 概要: 参照サンプル再確認から追加したnavigation-menu向け部品。採用・企業紹介に使える人物/思想の分割構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 16444px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-navigation-menu-04-recruit-story-miyakawa-lab"} /-->
CSS:
.section-reference-complete-navigation-menu-04-recruit-story-miyakawa-lab { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-navigation-menu-04-recruit-story-miyakawa-lab').forEach((el) => el.dataset.ready = 'true');
10
Reference Complete — navigation-menu 05 Commerce Compare
reference-complete-navigation-menu-05-commerce-compare-violet-patisserie
Collection Selector
Violet Patisserie の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: Reference Complete — navigation-menu 05 Commerce Compare
- 概要: 参照サンプル再確認から追加したnavigation-menu向け部品。料金・商品・プランを比較しやすい構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 16505px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-navigation-menu-05-commerce-compare-violet-patisserie"} /-->
CSS:
.section-reference-complete-navigation-menu-05-commerce-compare-violet-patisserie { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-navigation-menu-05-commerce-compare-violet-patisserie').forEach((el) => el.dataset.ready = 'true');
11
Reference Complete — navigation-menu 06 Timeline Proof
reference-complete-navigation-menu-06-timeline-proof-nothing-tech
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: Reference Complete — navigation-menu 06 Timeline Proof
- 概要: 参照サンプル再確認から追加したnavigation-menu向け部品。沿革・導入手順・制作工程の時系列。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 16446px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-navigation-menu-06-timeline-proof-nothing-tech"} /-->
CSS:
.section-reference-complete-navigation-menu-06-timeline-proof-nothing-tech { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-navigation-menu-06-timeline-proof-nothing-tech').forEach((el) => el.dataset.ready = 'true');
12
Reference Complete — navigation-menu 07 Gallery Led
reference-complete-navigation-menu-07-gallery-led-favtown
Detail
- パターン名: Reference Complete — navigation-menu 07 Gallery Led
- 概要: 参照サンプル再確認から追加したnavigation-menu向け部品。写真量の多い商材を見せるギャラリー導線。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 16527px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-navigation-menu-07-gallery-led-favtown"} /-->
CSS:
.section-reference-complete-navigation-menu-07-gallery-led-favtown { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-navigation-menu-07-gallery-led-favtown').forEach((el) => el.dataset.ready = 'true');
13
Reference Complete — navigation-menu 08 Dashboard Proof
reference-complete-navigation-menu-08-dashboard-proof-tenten
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: Reference Complete — navigation-menu 08 Dashboard Proof
- 概要: 参照サンプル再確認から追加したnavigation-menu向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 16488px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-navigation-menu-08-dashboard-proof-tenten"} /-->
CSS:
.section-reference-complete-navigation-menu-08-dashboard-proof-tenten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-navigation-menu-08-dashboard-proof-tenten').forEach((el) => el.dataset.ready = 'true');
14
Reference Complete — navigation-menu 09 Contact Ready
reference-complete-navigation-menu-09-contact-ready-daimatsu
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: Reference Complete — navigation-menu 09 Contact Ready
- 概要: 参照サンプル再確認から追加したnavigation-menu向け部品。問い合わせ前の入力項目を整理する導線。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 16469px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-navigation-menu-09-contact-ready-daimatsu"} /-->
CSS:
.section-reference-complete-navigation-menu-09-contact-ready-daimatsu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-navigation-menu-09-contact-ready-daimatsu').forEach((el) => el.dataset.ready = 'true');
15
Reference Complete — navigation-menu 10 Mobile Rail
reference-complete-navigation-menu-10-mobile-rail-kiyasuku
Kiyasuku
About
Works
Journal
Contact
- パターン名: Reference Complete — navigation-menu 10 Mobile Rail
- 概要: 参照サンプル再確認から追加したnavigation-menu向け部品。スマホ閲覧で要点を縦に追えるレール型。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 16590px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-navigation-menu-10-mobile-rail-kiyasuku"} /-->
CSS:
.section-reference-complete-navigation-menu-10-mobile-rail-kiyasuku { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-navigation-menu-10-mobile-rail-kiyasuku').forEach((el) => el.dataset.ready = 'true');
16
Reference Editorial — Round Action Navigation
reference-editorial-round-action-nav
月刊
Nakazaki
- パターン名: Reference Editorial — Round Action Navigation
- 概要: SNSやメニューボタンを右端に置く編集サイト向けナビ。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 20% / 60% / 20%、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, heading, paragraph, column, buttons, button
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-editorial-round-action-nav"} /-->
CSS:
.section-reference-editorial-round-action-nav { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-editorial-round-action-nav').forEach((el) => el.dataset.ready = 'true');
17
Reference Brand — Mega Navigation Cards
reference-mega-brand-navigation-bar
brand routes
History
ブランドの背景を読む。
Shop
店舗と体験の導線。
Recruit
採用情報へつなぐ。
News
更新情報をまとめる。
- パターン名: Reference Brand — Mega Navigation Cards
- 概要: ブランドサイトの主要導線をカード化したメガナビ。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px、推奨コンテンツ幅 1180px、主要ブロック group, paragraph, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-mega-brand-navigation-bar"} /-->
CSS:
.section-reference-mega-brand-navigation-bar { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-mega-brand-navigation-bar').forEach((el) => el.dataset.ready = 'true');
18
SANKOU — Collection Selector Header
sankou-eyewear-collection-selector
R!M
ブランド名を大きく中央に置き、下にコレクション切替を配置する商品サイト型。
COLLECTION
BASIC
JOURNAL
- パターン名: SANKOU — Collection Selector Header
- 概要: 商品ブランド向けの中央ロゴ＋コレクション切替ナビ。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1160px、主要ブロック group, group, heading, paragraph, columns, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-eyewear-collection-selector"} /-->
CSS:
.section-sankou-eyewear-collection-selector { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou-eyewear-collection-selector').forEach((el) => el.dataset.ready = 'true');
19
SANKOU100 — 004 Montblanc Pictures
sankou100-004-montblanc-pictures
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
004
- パターン名: SANKOU100 — 004 Montblanc Pictures
- 概要: SANKOU! sample 004から抽出したcollage型の商用サイト向け構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 38% / 32% / 1px、推奨コンテンツ幅 1124px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-004-montblanc-pictures"} /-->
CSS:
.section-sankou100-004-montblanc-pictures { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-004-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');
20
SANKOU100 — 044 Daimatsu
sankou100-044-daimatsu
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
044
- パターン名: SANKOU100 — 044 Daimatsu
- 概要: SANKOU! sample 044から抽出したcollage型の商用サイト向け構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 36% / 34% / 1px、推奨コンテンツ幅 1164px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-044-daimatsu"} /-->
CSS:
.section-sankou100-044-daimatsu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-044-daimatsu').forEach((el) => el.dataset.ready = 'true');
21
SANKOU100 — 084 Fujiya1935
sankou100-084-fujiya1935
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
084
- パターン名: SANKOU100 — 084 Fujiya1935
- 概要: SANKOU! sample 084から抽出したcollage型の商用サイト向け構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 34% / 36% / 1px、推奨コンテンツ幅 1204px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-084-fujiya1935"} /-->
CSS:
.section-sankou100-084-fujiya1935 { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-084-fujiya1935').forEach((el) => el.dataset.ready = 'true');
22
SANKOU Max — navigation-menu 01 Tashi Portfolio
sankoumax-navigation-menu-01-tashi-portfolio
NEWS
Tashi Portfolio から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — navigation-menu 01 Tashi Portfolio
- 概要: SANKOU100 sample setから展開したnavigation-menu向けalert構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 3481px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-01-tashi-portfolio"} /-->
CSS:
.section-sankoumax-navigation-menu-01-tashi-portfolio { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-01-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');
23
SANKOU Max — navigation-menu 02 Kitanohashi
sankoumax-navigation-menu-02-kitanohashi
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — navigation-menu 02 Kitanohashi
- 概要: SANKOU100 sample setから展開したnavigation-menu向けmap構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3442px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-02-kitanohashi"} /-->
CSS:
.section-sankoumax-navigation-menu-02-kitanohashi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-02-kitanohashi').forEach((el) => el.dataset.ready = 'true');
24
SANKOU Max — navigation-menu 03 Morinosato Clinic
sankoumax-navigation-menu-03-morinosato-clinic
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — navigation-menu 03 Morinosato Clinic
- 概要: SANKOU100 sample setから展開したnavigation-menu向けform構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 3463px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-03-morinosato-clinic"} /-->
CSS:
.section-sankoumax-navigation-menu-03-morinosato-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-03-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');
25
SANKOU Max — navigation-menu 04 Asuzac Highschool
sankoumax-navigation-menu-04-asuzac-highschool
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — navigation-menu 04 Asuzac Highschool
- 概要: SANKOU100 sample setから展開したnavigation-menu向けtabs構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3384px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-04-asuzac-highschool"} /-->
CSS:
.section-sankoumax-navigation-menu-04-asuzac-highschool { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-04-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');
26
SANKOU Max — navigation-menu 05 Junni Newyear
sankoumax-navigation-menu-05-junni-newyear
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — navigation-menu 05 Junni Newyear
- 概要: SANKOU100 sample setから展開したnavigation-menu向けdashboard構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 3485px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-05-junni-newyear"} /-->
CSS:
.section-sankoumax-navigation-menu-05-junni-newyear { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-05-junni-newyear').forEach((el) => el.dataset.ready = 'true');
27
SANKOU Max — navigation-menu 06 Mizota Ks
sankoumax-navigation-menu-06-mizota-ks
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — navigation-menu 06 Mizota Ks
- 概要: SANKOU100 sample setから展開したnavigation-menu向けfaq構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3326px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-06-mizota-ks"} /-->
CSS:
.section-sankoumax-navigation-menu-06-mizota-ks { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-06-mizota-ks').forEach((el) => el.dataset.ready = 'true');
28
SANKOU Max — navigation-menu 07 Nissan Career
sankoumax-navigation-menu-07-nissan-career
Detail
- パターン名: SANKOU Max — navigation-menu 07 Nissan Career
- 概要: SANKOU100 sample setから展開したnavigation-menu向けgallery構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 3527px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-07-nissan-career"} /-->
CSS:
.section-sankoumax-navigation-menu-07-nissan-career { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-07-nissan-career').forEach((el) => el.dataset.ready = 'true');
29
SANKOU Max — navigation-menu 08 Shueisha Recruit
sankoumax-navigation-menu-08-shueisha-recruit
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — navigation-menu 08 Shueisha Recruit
- 概要: SANKOU100 sample setから展開したnavigation-menu向けroster構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 3528px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-08-shueisha-recruit"} /-->
CSS:
.section-sankoumax-navigation-menu-08-shueisha-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-08-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');
30
SANKOU Max — navigation-menu 09 Sanu Weekday
sankoumax-navigation-menu-09-sanu-weekday
2409
Sanu Weekday
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — navigation-menu 09 Sanu Weekday
- 概要: SANKOU100 sample setから展開したnavigation-menu向けmanifesto構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 3309px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-09-sanu-weekday"} /-->
CSS:
.section-sankoumax-navigation-menu-09-sanu-weekday { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-09-sanu-weekday').forEach((el) => el.dataset.ready = 'true');
31
SANKOU Max — navigation-menu 10 Newspicks Business
sankoumax-navigation-menu-10-newspicks-business
Sampled Site
2410 / Newspicks Business
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — navigation-menu 10 Newspicks Business
- 概要: SANKOU100 sample setから展開したnavigation-menu向けcover構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 31% / 69%、推奨コンテンツ幅 8210px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-10-newspicks-business"} /-->
CSS:
.section-sankoumax-navigation-menu-10-newspicks-business { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-10-newspicks-business').forEach((el) => el.dataset.ready = 'true');
32
SANKOU Max — navigation-menu 11 Miyakawa Lab
sankoumax-navigation-menu-11-miyakawa-lab
Split Story
写真と要点で信頼を作る
Miyakawa Lab の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — navigation-menu 11 Miyakawa Lab
- 概要: SANKOU100 sample setから展開したnavigation-menu向けsplit構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 3451px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-11-miyakawa-lab"} /-->
CSS:
.section-sankoumax-navigation-menu-11-miyakawa-lab { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-11-miyakawa-lab').forEach((el) => el.dataset.ready = 'true');
33
SANKOU Max — navigation-menu 12 Matsuo Komuten
sankoumax-navigation-menu-12-matsuo-komuten
Card Flow
迷わない比較カード
Matsuo Komuten から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — navigation-menu 12 Matsuo Komuten
- 概要: SANKOU100 sample setから展開したnavigation-menu向けcards構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3492px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-12-matsuo-komuten"} /-->
CSS:
.section-sankoumax-navigation-menu-12-matsuo-komuten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-12-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');
34
SANKOU Max — navigation-menu 13 Yokohama Timberwharf
sankoumax-navigation-menu-13-yokohama-timberwharf
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
2413
- パターン名: SANKOU Max — navigation-menu 13 Yokohama Timberwharf
- 概要: SANKOU100 sample setから展開したnavigation-menu向けcollage構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 35% / 35% / 1px、推奨コンテンツ幅 3533px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-13-yokohama-timberwharf"} /-->
CSS:
.section-sankoumax-navigation-menu-13-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-13-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');
35
SANKOU Max — navigation-menu 14 Janu
sankoumax-navigation-menu-14-janu
Janu
About
Works
Journal
Contact
- パターン名: SANKOU Max — navigation-menu 14 Janu
- 概要: SANKOU100 sample setから展開したnavigation-menu向けrail構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 3594px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-14-janu"} /-->
CSS:
.section-sankoumax-navigation-menu-14-janu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-14-janu').forEach((el) => el.dataset.ready = 'true');
36
SANKOU Max — navigation-menu 15 Daimatsu
sankoumax-navigation-menu-15-daimatsu
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — navigation-menu 15 Daimatsu
- 概要: SANKOU100 sample setから展開したnavigation-menu向けeditorial構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 51% / 49% / 1px、推奨コンテンツ幅 3435px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-15-daimatsu"} /-->
CSS:
.section-sankoumax-navigation-menu-15-daimatsu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-15-daimatsu').forEach((el) => el.dataset.ready = 'true');
37
SANKOU Max — navigation-menu 16 Omotesando Ortho
sankoumax-navigation-menu-16-omotesando-ortho
Collection Selector
Omotesando Ortho の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — navigation-menu 16 Omotesando Ortho
- 概要: SANKOU100 sample setから展開したnavigation-menu向けproduct構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 3516px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-16-omotesando-ortho"} /-->
CSS:
.section-sankoumax-navigation-menu-16-omotesando-ortho { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-16-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');
38
SANKOU Max — navigation-menu 17 Dodasports
sankoumax-navigation-menu-17-dodasports
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — navigation-menu 17 Dodasports
- 概要: SANKOU100 sample setから展開したnavigation-menu向けtimeline構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3457px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-17-dodasports"} /-->
CSS:
.section-sankoumax-navigation-menu-17-dodasports { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-17-dodasports').forEach((el) => el.dataset.ready = 'true');
39
SANKOU Max — navigation-menu 18 Ja Aichi Recruit
sankoumax-navigation-menu-18-ja-aichi-recruit
数字で納得させる
58%
改善率
9分
短縮
17026
導入数
- パターン名: SANKOU Max — navigation-menu 18 Ja Aichi Recruit
- 概要: SANKOU100 sample setから展開したnavigation-menu向けstats構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3378px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-18-ja-aichi-recruit"} /-->
CSS:
.section-sankoumax-navigation-menu-18-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-18-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');
40
SANKOU Max — navigation-menu 19 Kiyasuku
sankoumax-navigation-menu-19-kiyasuku
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — navigation-menu 19 Kiyasuku
- 概要: SANKOU100 sample setから展開したnavigation-menu向けcontact構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 55% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3499px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-19-kiyasuku"} /-->
CSS:
.section-sankoumax-navigation-menu-19-kiyasuku { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-19-kiyasuku').forEach((el) => el.dataset.ready = 'true');
41
SANKOU Max — navigation-menu 20 Hirono Recruit
sankoumax-navigation-menu-20-hirono-recruit
Hirono Recruit
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 2420
- パターン名: SANKOU Max — navigation-menu 20 Hirono Recruit
- 概要: SANKOU100 sample setから展開したnavigation-menu向けfooter構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 3540px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-20-hirono-recruit"} /-->
CSS:
.section-sankoumax-navigation-menu-20-hirono-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-20-hirono-recruit').forEach((el) => el.dataset.ready = 'true');
42
SANKOU Max — navigation-menu 21 Ichizenbooks
sankoumax-navigation-menu-21-ichizenbooks
NEWS
Ichizenbooks から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — navigation-menu 21 Ichizenbooks
- 概要: SANKOU100 sample setから展開したnavigation-menu向けalert構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 3501px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-21-ichizenbooks"} /-->
CSS:
.section-sankoumax-navigation-menu-21-ichizenbooks { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-21-ichizenbooks').forEach((el) => el.dataset.ready = 'true');
43
SANKOU Max — navigation-menu 22 Mec Residence Recruit
sankoumax-navigation-menu-22-mec-residence-recruit
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — navigation-menu 22 Mec Residence Recruit
- 概要: SANKOU100 sample setから展開したnavigation-menu向けmap構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3462px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-22-mec-residence-recruit"} /-->
CSS:
.section-sankoumax-navigation-menu-22-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-22-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');
44
SANKOU Max — navigation-menu 23 Greenpark Santo
sankoumax-navigation-menu-23-greenpark-santo
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — navigation-menu 23 Greenpark Santo
- 概要: SANKOU100 sample setから展開したnavigation-menu向けform構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 3483px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-23-greenpark-santo"} /-->
CSS:
.section-sankoumax-navigation-menu-23-greenpark-santo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-23-greenpark-santo').forEach((el) => el.dataset.ready = 'true');
45
SANKOU Max — navigation-menu 24 Land Sapporo
sankoumax-navigation-menu-24-land-sapporo
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — navigation-menu 24 Land Sapporo
- 概要: SANKOU100 sample setから展開したnavigation-menu向けtabs構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3404px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-24-land-sapporo"} /-->
CSS:
.section-sankoumax-navigation-menu-24-land-sapporo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-24-land-sapporo').forEach((el) => el.dataset.ready = 'true');
46
SANKOU Max — navigation-menu 25 Tokachi Fruits
sankoumax-navigation-menu-25-tokachi-fruits
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — navigation-menu 25 Tokachi Fruits
- 概要: SANKOU100 sample setから展開したnavigation-menu向けdashboard構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 3505px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-25-tokachi-fruits"} /-->
CSS:
.section-sankoumax-navigation-menu-25-tokachi-fruits { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-25-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');
47
SANKOU Max — navigation-menu 26 Echitora
sankoumax-navigation-menu-26-echitora
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — navigation-menu 26 Echitora
- 概要: SANKOU100 sample setから展開したnavigation-menu向けfaq構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3346px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-26-echitora"} /-->
CSS:
.section-sankoumax-navigation-menu-26-echitora { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-26-echitora').forEach((el) => el.dataset.ready = 'true');
48
SANKOU Max — navigation-menu 27 Megamis
sankoumax-navigation-menu-27-megamis
Detail
- パターン名: SANKOU Max — navigation-menu 27 Megamis
- 概要: SANKOU100 sample setから展開したnavigation-menu向けgallery構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 3547px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-27-megamis"} /-->
CSS:
.section-sankoumax-navigation-menu-27-megamis { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-27-megamis').forEach((el) => el.dataset.ready = 'true');
49
SANKOU Max — navigation-menu 28 Kagami
sankoumax-navigation-menu-28-kagami
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — navigation-menu 28 Kagami
- 概要: SANKOU100 sample setから展開したnavigation-menu向けroster構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 3548px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-28-kagami"} /-->
CSS:
.section-sankoumax-navigation-menu-28-kagami { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-28-kagami').forEach((el) => el.dataset.ready = 'true');
50
SANKOU Max — navigation-menu 29 Antscr
sankoumax-navigation-menu-29-antscr
2429
Antscr
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — navigation-menu 29 Antscr
- 概要: SANKOU100 sample setから展開したnavigation-menu向けmanifesto構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 3329px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-29-antscr"} /-->
CSS:
.section-sankoumax-navigation-menu-29-antscr { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-29-antscr').forEach((el) => el.dataset.ready = 'true');
51
SANKOU Max — navigation-menu 30 Meisei Kg
sankoumax-navigation-menu-30-meisei-kg
Sampled Site
2430 / Meisei Kg
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — navigation-menu 30 Meisei Kg
- 概要: SANKOU100 sample setから展開したnavigation-menu向けcover構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 24% / 76%、推奨コンテンツ幅 8270px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-30-meisei-kg"} /-->
CSS:
.section-sankoumax-navigation-menu-30-meisei-kg { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-30-meisei-kg').forEach((el) => el.dataset.ready = 'true');
52
SANKOU Max — navigation-menu 31 Iamwithyou
sankoumax-navigation-menu-31-iamwithyou
Split Story
写真と要点で信頼を作る
Iamwithyou の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — navigation-menu 31 Iamwithyou
- 概要: SANKOU100 sample setから展開したnavigation-menu向けsplit構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 3471px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-31-iamwithyou"} /-->
CSS:
.section-sankoumax-navigation-menu-31-iamwithyou { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-31-iamwithyou').forEach((el) => el.dataset.ready = 'true');
53
SANKOU Max — navigation-menu 32 Depsoa
sankoumax-navigation-menu-32-depsoa
Card Flow
迷わない比較カード
Depsoa から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — navigation-menu 32 Depsoa
- 概要: SANKOU100 sample setから展開したnavigation-menu向けcards構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3512px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-32-depsoa"} /-->
CSS:
.section-sankoumax-navigation-menu-32-depsoa { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-32-depsoa').forEach((el) => el.dataset.ready = 'true');
54
SANKOU Max — navigation-menu 33 Nothing Tech
sankoumax-navigation-menu-33-nothing-tech
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
2433
- パターン名: SANKOU Max — navigation-menu 33 Nothing Tech
- 概要: SANKOU100 sample setから展開したnavigation-menu向けcollage構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 31% / 1px / 37% / 33% / 1px、推奨コンテンツ幅 3553px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-33-nothing-tech"} /-->
CSS:
.section-sankoumax-navigation-menu-33-nothing-tech { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-33-nothing-tech').forEach((el) => el.dataset.ready = 'true');
55
SANKOU Max — navigation-menu 34 Upvege
sankoumax-navigation-menu-34-upvege
Upvege
About
Works
Journal
Contact
- パターン名: SANKOU Max — navigation-menu 34 Upvege
- 概要: SANKOU100 sample setから展開したnavigation-menu向けrail構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 3614px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-34-upvege"} /-->
CSS:
.section-sankoumax-navigation-menu-34-upvege { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-34-upvege').forEach((el) => el.dataset.ready = 'true');
56
SANKOU Max — navigation-menu 35 Fujiya1935
sankoumax-navigation-menu-35-fujiya1935
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — navigation-menu 35 Fujiya1935
- 概要: SANKOU100 sample setから展開したnavigation-menu向けeditorial構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 47% / 53% / 1px、推奨コンテンツ幅 3455px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-35-fujiya1935"} /-->
CSS:
.section-sankoumax-navigation-menu-35-fujiya1935 { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-35-fujiya1935').forEach((el) => el.dataset.ready = 'true');
57
SANKOU Max — navigation-menu 36 Omodakaya
sankoumax-navigation-menu-36-omodakaya
Collection Selector
Omodakaya の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — navigation-menu 36 Omodakaya
- 概要: SANKOU100 sample setから展開したnavigation-menu向けproduct構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 3536px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-36-omodakaya"} /-->
CSS:
.section-sankoumax-navigation-menu-36-omodakaya { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-36-omodakaya').forEach((el) => el.dataset.ready = 'true');
58
SANKOU Max — navigation-menu 37 Favtown
sankoumax-navigation-menu-37-favtown
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — navigation-menu 37 Favtown
- 概要: SANKOU100 sample setから展開したnavigation-menu向けtimeline構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3477px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-37-favtown"} /-->
CSS:
.section-sankoumax-navigation-menu-37-favtown { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-37-favtown').forEach((el) => el.dataset.ready = 'true');
59
SANKOU Max — navigation-menu 38 Mizuya Kyoto
sankoumax-navigation-menu-38-mizuya-kyoto
数字で納得させる
78%
改善率
11分
短縮
17166
導入数
- パターン名: SANKOU Max — navigation-menu 38 Mizuya Kyoto
- 概要: SANKOU100 sample setから展開したnavigation-menu向けstats構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3398px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-38-mizuya-kyoto"} /-->
CSS:
.section-sankoumax-navigation-menu-38-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-38-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');
60
SANKOU Max — navigation-menu 39 Allright Inc
sankoumax-navigation-menu-39-allright-inc
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — navigation-menu 39 Allright Inc
- 概要: SANKOU100 sample setから展開したnavigation-menu向けcontact構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 51% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3519px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-39-allright-inc"} /-->
CSS:
.section-sankoumax-navigation-menu-39-allright-inc { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-39-allright-inc').forEach((el) => el.dataset.ready = 'true');
61
SANKOU Max — navigation-menu 40 Jins Holdings
sankoumax-navigation-menu-40-jins-holdings
Jins Holdings
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 2440
- パターン名: SANKOU Max — navigation-menu 40 Jins Holdings
- 概要: SANKOU100 sample setから展開したnavigation-menu向けfooter構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 3560px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-40-jins-holdings"} /-->
CSS:
.section-sankoumax-navigation-menu-40-jins-holdings { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-40-jins-holdings').forEach((el) => el.dataset.ready = 'true');
62
SANKOU Max — navigation-menu 41 Tsuchitokaze
sankoumax-navigation-menu-41-tsuchitokaze
NEWS
Tsuchitokaze から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — navigation-menu 41 Tsuchitokaze
- 概要: SANKOU100 sample setから展開したnavigation-menu向けalert構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 3521px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-41-tsuchitokaze"} /-->
CSS:
.section-sankoumax-navigation-menu-41-tsuchitokaze { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-41-tsuchitokaze').forEach((el) => el.dataset.ready = 'true');
63
SANKOU Max — navigation-menu 42 Yamato 50Th
sankoumax-navigation-menu-42-yamato-50th
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — navigation-menu 42 Yamato 50Th
- 概要: SANKOU100 sample setから展開したnavigation-menu向けmap構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3482px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-42-yamato-50th"} /-->
CSS:
.section-sankoumax-navigation-menu-42-yamato-50th { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-42-yamato-50th').forEach((el) => el.dataset.ready = 'true');
64
SANKOU Max — navigation-menu 43 Action Npo
sankoumax-navigation-menu-43-action-npo
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — navigation-menu 43 Action Npo
- 概要: SANKOU100 sample setから展開したnavigation-menu向けform構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 3503px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-43-action-npo"} /-->
CSS:
.section-sankoumax-navigation-menu-43-action-npo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-43-action-npo').forEach((el) => el.dataset.ready = 'true');
65
SANKOU Max — navigation-menu 44 Mycampus
sankoumax-navigation-menu-44-mycampus
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — navigation-menu 44 Mycampus
- 概要: SANKOU100 sample setから展開したnavigation-menu向けtabs構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3424px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-44-mycampus"} /-->
CSS:
.section-sankoumax-navigation-menu-44-mycampus { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-44-mycampus').forEach((el) => el.dataset.ready = 'true');
66
SANKOU Max — navigation-menu 45 Mejinavi
sankoumax-navigation-menu-45-mejinavi
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — navigation-menu 45 Mejinavi
- 概要: SANKOU100 sample setから展開したnavigation-menu向けdashboard構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 3525px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-45-mejinavi"} /-->
CSS:
.section-sankoumax-navigation-menu-45-mejinavi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-45-mejinavi').forEach((el) => el.dataset.ready = 'true');
67
SANKOU Max — navigation-menu 46 Niwaya
sankoumax-navigation-menu-46-niwaya
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — navigation-menu 46 Niwaya
- 概要: SANKOU100 sample setから展開したnavigation-menu向けfaq構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3366px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-46-niwaya"} /-->
CSS:
.section-sankoumax-navigation-menu-46-niwaya { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-46-niwaya').forEach((el) => el.dataset.ready = 'true');
68
SANKOU Max — navigation-menu 47 Mindful Connect
sankoumax-navigation-menu-47-mindful-connect
Detail
- パターン名: SANKOU Max — navigation-menu 47 Mindful Connect
- 概要: SANKOU100 sample setから展開したnavigation-menu向けgallery構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 3567px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版 / Navigationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-47-mindful-connect"} /-->
CSS:
.section-sankoumax-navigation-menu-47-mindful-connect { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-47-mindful-connect').forEach((el) => el.dataset.ready = 'true');
69
SANKOU Max — navigation-menu 48 Spicato Daruma
sankoumax-navigation-menu-48-spicato-daruma
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — navigation-menu 48 Spicato Daruma
- 概要: SANKOU100 sample setから展開したnavigation-menu向けroster構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 3568px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-48-spicato-daruma"} /-->
CSS:
.section-sankoumax-navigation-menu-48-spicato-daruma { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-48-spicato-daruma').forEach((el) => el.dataset.ready = 'true');
70
SANKOU Max — navigation-menu 49 Morohoshi Portfolio
sankoumax-navigation-menu-49-morohoshi-portfolio
2449
Morohoshi Portfolio
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — navigation-menu 49 Morohoshi Portfolio
- 概要: SANKOU100 sample setから展開したnavigation-menu向けmanifesto構成。
- 使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 3349px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Navigationをミニマルに見せる余白重視版 / Navigationをリッチに見せるカバー/カード強調版 / Navigationをコーポレート向けに整える情報密度高め版 / Navigationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-navigation-menu-49-morohoshi-portfolio"} /-->
CSS:
.section-sankoumax-navigation-menu-49-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-navigation-menu-49-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');
← Previous
Footer
フッター
Next →
Typography
タイポグラフィ
◈ Blanc Nail
Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。
Foundations
- ヒーロー
- ヘッダー
- フッター
- ナビゲーション
- タイポグラフィ
Content
- フィーチャー
- スタッツ
- コール トゥ アクション
- レビュー / 推薦
- チーム
Business
- 料金プラン
- 商品 / EC
- アクセス / 営業時間
- メニュー (飲食)
- コンタクト
UI Components
- カードレイアウト
- モーダル / アコーディオン
- タブ / セグメント
- バナー / アラート
- SNS
© 2026 Blanc Nail · Built with WordPress + Block Editor v1.0 · isValid=0