検索…

カタログ統計

CATALOG › Foundations › Navigation

パターン名: 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');

Nav — Breadcrumb Trail

nav-breadcrumb

Copy

Link

ホーム・商品一覧・ウェア・コート・ジャケット

パターン名: 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');

Nav — Numbered Pagination

nav-pagination

Copy

Link

←

…

→

パターン名: 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');

Navigation — Segmented Pill Switch

nav-pill-segmented

Copy

Link

月額

年額（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');

Navigation — Underlined Tabs Row

nav-tabs-row

Copy

Link

概要

仕様

価格

レビュー

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');

Navigation — EX01 Centered Pill Nav

navigation-menu-ex01-center-pills

Copy

Link

トップ

メニュー

店舗案内

採用

お問い合わせ

パターン名: Navigation — EX01 Centered Pill Nav
概要: Centered pill-style section navigation row.
使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/navigation-menu-ex01-center-pills"} /-->

CSS:
.section-navigation-menu-ex01-center-pills { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-navigation-menu-ex01-center-pills').forEach((el) => el.dataset.ready = 'true');

Navigation — EX02 Breadcrumb Bar

navigation-menu-ex02-breadcrumb

Copy

Link

ホーム › サービス › 料金プラン

パターン名: Navigation — EX02 Breadcrumb Bar
概要: Simple breadcrumb trail bar for sub pages.
使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/navigation-menu-ex02-breadcrumb"} /-->

CSS:
.section-navigation-menu-ex02-breadcrumb { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-navigation-menu-ex02-breadcrumb').forEach((el) => el.dataset.ready = 'true');

Navigation — EX03 In-Page Anchor Tabs

navigation-menu-ex03-anchor-tabs

Copy

Link

特徴

料金

導入事例

よくある質問

パターン名: Navigation — EX03 In-Page Anchor Tabs
概要: Underlined in-page anchor tabs with active state.
使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/navigation-menu-ex03-anchor-tabs"} /-->

CSS:
.section-navigation-menu-ex03-anchor-tabs { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-navigation-menu-ex03-anchor-tabs').forEach((el) => el.dataset.ready = 'true');

Navigation — EX04 Category Tile Nav

navigation-menu-ex04-category-tiles

Copy

Link

🍞

パンメニュー

VIEW →

🏠

店舗のこと

VIEW →

📖

読みもの

VIEW →

📍

アクセス

VIEW →

パターン名: Navigation — EX04 Category Tile Nav
概要: Four large tappable category tiles for top-page navigation.
使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/navigation-menu-ex04-category-tiles"} /-->

CSS:
.section-navigation-menu-ex04-category-tiles { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-navigation-menu-ex04-category-tiles').forEach((el) => el.dataset.ready = 'true');

Navigation — EX05 Minimal Spread Nav

navigation-menu-ex05-minimal-underline

Copy

Link

商品

物語

店舗

便り

パターン名: Navigation — EX05 Minimal Spread Nav
概要: Wide-tracking minimal nav row for quiet brands.
使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/navigation-menu-ex05-minimal-underline"} /-->

CSS:
.section-navigation-menu-ex05-minimal-underline { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-navigation-menu-ex05-minimal-underline').forEach((el) => el.dataset.ready = 'true');

Navigation — EX06 Step Progress Nav

navigation-menu-ex06-step-progress

Copy

Link

1 入力

———

2 確認

———

3 完了

パターン名: Navigation — EX06 Step Progress Nav
概要: Checkout-style three step progress indicator.
使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/navigation-menu-ex06-step-progress"} /-->

CSS:
.section-navigation-menu-ex06-step-progress { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-navigation-menu-ex06-step-progress').forEach((el) => el.dataset.ready = 'true');

Navigation — EX07 Dark Quick Links

navigation-menu-ex07-dark-quicklinks

Copy

Link

QUICK LINKS

ご予約 →

本日の空席 →

テイクアウト →

アクセス →

パターン名: Navigation — EX07 Dark Quick Links
概要: Dark quick-link band with label and four arrow links.
使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/navigation-menu-ex07-dark-quicklinks"} /-->

CSS:
.section-navigation-menu-ex07-dark-quicklinks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-navigation-menu-ex07-dark-quicklinks').forEach((el) => el.dataset.ready = 'true');

Navigation — EX08 Sitemap Columns

navigation-menu-ex08-sitemap-cols

Copy

Link

サイトマップ

サービス

事業内容
料金プラン
導入の流れ
導入事例

会社情報

会社概要
代表ごあいさつ
採用情報
お知らせ

サポート

よくある質問
お問い合わせ
資料ダウンロード
プライバシーポリシー

パターン名: Navigation — EX08 Sitemap Columns
概要: Three-column sitemap block for lower pages.
使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/navigation-menu-ex08-sitemap-cols"} /-->

CSS:
.section-navigation-menu-ex08-sitemap-cols { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-navigation-menu-ex08-sitemap-cols').forEach((el) => el.dataset.ready = 'true');

Navigation — EX09 Nav with CTA Button

navigation-menu-ex09-cta-bar

Copy

Link

◆ ATELIER

作品

教室

プロフィール

体験申込

パターン名: Navigation — EX09 Nav with CTA Button
概要: Simple nav row with brand left, links center and CTA right.
使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/navigation-menu-ex09-cta-bar"} /-->

CSS:
.section-navigation-menu-ex09-cta-bar { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-navigation-menu-ex09-cta-bar').forEach((el) => el.dataset.ready = 'true');

Navigation — EX10 Page Index Card

navigation-menu-ex10-side-index

Copy

Link

この記事の目次

01. まず結論から
02. 必要な道具と費用
03. 手順を写真つきで解説
04. よくある失敗と対処法

パターン名: Navigation — EX10 Page Index Card
概要: In-page table of contents card with numbered entries.
使用目的: Navigation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/navigation-menu-ex10-side-index"} /-->

CSS:
.section-navigation-menu-ex10-side-index { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-navigation-menu-ex10-side-index').forEach((el) => el.dataset.ready = 'true');

ナビゲーション · Navigation · Blanc Nail

ナビゲーション

目次

サイトマップ