タブ / セグメント · Tab / Segment · Blanc Nail
検索…
カタログ 統計
CATALOG › UI Components › Tab / Segment
タブ / セグメント
セクション切替、ピル型、アンダーライン型のタブ UI。
4
Patterns
UI Components
Group
isValid=0
Verified
CSS
Animation
01
Segment — Large Billing Toggle
segment-large-toggle
請求サイクル
月額
年額 (-20%)
- パターン名: Segment — Large Billing Toggle
- 概要: Large 2-option billing cycle toggle (monthly / yearly with discount badge).
- 使用目的: Tab / Segment領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 480px、主要ブロック group, heading, group, group, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Tab / Segmentをミニマルに見せる余白重視版 / Tab / Segmentをリッチに見せるカバー/カード強調版 / Tab / Segmentをコーポレート向けに整える情報密度高め版 / Tab / Segmentをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/segment-large-toggle"} /-->
CSS:
.section-segment-large-toggle { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-segment-large-toggle').forEach((el) => el.dataset.ready = 'true');
02
Segment — 3-Way Pill Switch
segment-pill-3way
表示モード
グリッド
リスト
タイムライン
- パターン名: Segment — 3-Way Pill Switch
- 概要: Three-way segmented pill control with active state highlighted in dark.
- 使用目的: Tab / Segment領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 640px、主要ブロック group, paragraph, group, paragraph, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Tab / Segmentをミニマルに見せる余白重視版 / Tab / Segmentをリッチに見せるカバー/カード強調版 / Tab / Segmentをコーポレート向けに整える情報密度高め版 / Tab / Segmentをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/segment-pill-3way"} /-->
CSS:
.section-segment-pill-3way { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-segment-pill-3way').forEach((el) => el.dataset.ready = 'true');
03
Tab — Underlined Tabs + Panel
tab-segment-underline
プロフィール
アカウント
通知
セキュリティ
請求
プロフィール設定では、表示名 ・ アバター ・ 自己紹介を変更できます。変更内容はすべての公開コンテンツに反映されます。
- パターン名: Tab — Underlined Tabs + Panel
- 概要: Underlined tab navigation with active state and content panel below.
- 使用目的: Tab / Segment領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 2px、推奨コンテンツ幅 880px、主要ブロック group, group, paragraph, paragraph, paragraph, paragraph, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Tab / Segmentをミニマルに見せる余白重視版 / Tab / Segmentをリッチに見せるカバー/カード強調版 / Tab / Segmentをコーポレート向けに整える情報密度高め版 / Tab / Segmentをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/tab-segment-underline"} /-->
CSS:
.section-tab-segment-underline { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-tab-segment-underline').forEach((el) => el.dataset.ready = 'true');
04
Tabs — Vertical Sidebar Tabs
tab-vertical-sidebar
📊 概要
⚙️ 設定
🔔 通知
🔐 セキュリティ
概要ダッシュボード
左のサイドバータブで各セクションに切り替えられます。デスクトップ向けの設定画面や管理画面に最適です。
- パターン名: Tabs — Vertical Sidebar Tabs
- 概要: Sidebar-style vertical tabs (left list, content right) for settings pages.
- 使用目的: Tab / Segment領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 200px、推奨コンテンツ幅 880px、主要ブロック group, columns, column, group, group, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Tab / Segmentをリッチに見せるカバー/カード強調版 / Tab / Segmentをコーポレート向けに整える情報密度高め版 / Tab / Segmentをカジュアルに見せるアイコン/ラベル強調版 / Tab / Segmentをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/tab-vertical-sidebar"} /-->
CSS:
.section-tab-vertical-sidebar { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-tab-vertical-sidebar').forEach((el) => el.dataset.ready = 'true');
← Previous
Modal / Accordion
モーダル / アコーディオン
Next →
Banner / Alert
バナー / アラート
◈ 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