検索…
カタログ 統計
CATALOG › Foundations › Typography
タイポグラフィ
本文・見出し・引用・コード・リスト。文章組版のテンプレート。
70
Patterns
Foundations
Group
isValid=0
Verified
CSS
Animation
01
Reference Complete — typography 01 Sticky Entry
reference-complete-typography-01-sticky-entry-dan-brise-barber
Sampled Site
15701 / Dan Brise Barber
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: Reference Complete — typography 01 Sticky Entry
- 概要: 参照サンプル再確認から追加したtypography向け部品。固定導線つきの大判ファーストビュー。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 29% / 71%、推奨コンテンツ幅 48083px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-typography-01-sticky-entry-dan-brise-barber"} /-->
CSS:
.section-reference-complete-typography-01-sticky-entry-dan-brise-barber { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-typography-01-sticky-entry-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');
02
Reference Complete — typography 02 Editorial Issue
reference-complete-typography-02-editorial-issue-studio-cbr
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: Reference Complete — typography 02 Editorial Issue
- 概要: 参照サンプル再確認から追加したtypography向け部品。雑誌的な見出しと導入文の編集レイアウト。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 16722px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-typography-02-editorial-issue-studio-cbr"} /-->
CSS:
.section-reference-complete-typography-02-editorial-issue-studio-cbr { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-typography-02-editorial-issue-studio-cbr').forEach((el) => el.dataset.ready = 'true');
03
Reference Complete — typography 03 Brand Index
reference-complete-typography-03-brand-index-chiikawa-pocket
Card Flow
迷わない比較カード
Chiikawa Pocket から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: Reference Complete — typography 03 Brand Index
- 概要: 参照サンプル再確認から追加したtypography向け部品。複数ブランドやサービスを迷わせず並べる索引。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 16783px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-typography-03-brand-index-chiikawa-pocket"} /-->
CSS:
.section-reference-complete-typography-03-brand-index-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-typography-03-brand-index-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');
04
Reference Complete — typography 04 Recruit Story
reference-complete-typography-04-recruit-story-meisei-kg
Split Story
写真と要点で信頼を作る
Meisei Kg の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: Reference Complete — typography 04 Recruit Story
- 概要: 参照サンプル再確認から追加したtypography向け部品。採用・企業紹介に使える人物/思想の分割構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 16744px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-typography-04-recruit-story-meisei-kg"} /-->
CSS:
.section-reference-complete-typography-04-recruit-story-meisei-kg { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-typography-04-recruit-story-meisei-kg').forEach((el) => el.dataset.ready = 'true');
05
Reference Complete — typography 05 Commerce Compare
reference-complete-typography-05-commerce-compare-plaid-alpha
Collection Selector
Plaid Alpha の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: Reference Complete — typography 05 Commerce Compare
- 概要: 参照サンプル再確認から追加したtypography向け部品。料金・商品・プランを比較しやすい構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 16805px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-typography-05-commerce-compare-plaid-alpha"} /-->
CSS:
.section-reference-complete-typography-05-commerce-compare-plaid-alpha { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-typography-05-commerce-compare-plaid-alpha').forEach((el) => el.dataset.ready = 'true');
06
Reference Complete — typography 06 Timeline Proof
reference-complete-typography-06-timeline-proof-koba-clinic
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: Reference Complete — typography 06 Timeline Proof
- 概要: 参照サンプル再確認から追加したtypography向け部品。沿革・導入手順・制作工程の時系列。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 16746px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-typography-06-timeline-proof-koba-clinic"} /-->
CSS:
.section-reference-complete-typography-06-timeline-proof-koba-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-typography-06-timeline-proof-koba-clinic').forEach((el) => el.dataset.ready = 'true');
07
Reference Complete — typography 07 Gallery Led
reference-complete-typography-07-gallery-led-gaaboo
Detail
- パターン名: Reference Complete — typography 07 Gallery Led
- 概要: 参照サンプル再確認から追加したtypography向け部品。写真量の多い商材を見せるギャラリー導線。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 16827px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-typography-07-gallery-led-gaaboo"} /-->
CSS:
.section-reference-complete-typography-07-gallery-led-gaaboo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-typography-07-gallery-led-gaaboo').forEach((el) => el.dataset.ready = 'true');
08
Reference Complete — typography 08 Dashboard Proof
reference-complete-typography-08-dashboard-proof-kitanohashi
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: Reference Complete — typography 08 Dashboard Proof
- 概要: 参照サンプル再確認から追加したtypography向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 16788px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-typography-08-dashboard-proof-kitanohashi"} /-->
CSS:
.section-reference-complete-typography-08-dashboard-proof-kitanohashi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-typography-08-dashboard-proof-kitanohashi').forEach((el) => el.dataset.ready = 'true');
09
Reference Complete — typography 09 Contact Ready
reference-complete-typography-09-contact-ready-upvege
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: Reference Complete — typography 09 Contact Ready
- 概要: 参照サンプル再確認から追加したtypography向け部品。問い合わせ前の入力項目を整理する導線。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 16769px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-typography-09-contact-ready-upvege"} /-->
CSS:
.section-reference-complete-typography-09-contact-ready-upvege { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-typography-09-contact-ready-upvege').forEach((el) => el.dataset.ready = 'true');
10
Reference Complete — typography 10 Mobile Rail
reference-complete-typography-10-mobile-rail-mizuya-kyoto
Mizuya
About
Works
Journal
Contact
- パターン名: Reference Complete — typography 10 Mobile Rail
- 概要: 参照サンプル再確認から追加したtypography向け部品。スマホ閲覧で要点を縦に追えるレール型。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 16890px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-typography-10-mobile-rail-mizuya-kyoto"} /-->
CSS:
.section-reference-complete-typography-10-mobile-rail-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-typography-10-mobile-rail-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');
11
Reference Editorial — Oversized Copy Wall
reference-oversized-editorial-copy
statement
言葉を主役にした、写真なしでも成立するブランドセクション。
この街には、答えが少しずつ見えてくる。
- パターン名: Reference Editorial — Oversized Copy Wall
- 概要: 月刊系サイトのように巨大コピーで世界観を作るタイポグラフィ。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 28% / 72%、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-oversized-editorial-copy"} /-->
CSS:
.section-reference-oversized-editorial-copy { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-oversized-editorial-copy').forEach((el) => el.dataset.ready = 'true');
12
Reference Recruit — Statement Typography
reference-recruit-statement-marquee
message
森と生きる。人と働く。未来へつなぐ。
採用・ブランド・コーポレートの冒頭で使える、余白重視のステートメントブロック。
- パターン名: Reference Recruit — Statement Typography
- 概要: 採用サイト向けの大きな理念コピー。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 980px、主要ブロック group, paragraph, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-recruit-statement-marquee"} /-->
CSS:
.section-reference-recruit-statement-marquee { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-recruit-statement-marquee').forEach((el) => el.dataset.ready = 'true');
13
SANKOU — Minimal Vertical Manifesto
sankou-minimal-vertical-manifesto
01
余白を残す
大きく語らず、短文を点で置く。
1年後の景色をつくる
02
静かな動機
読み手のスクロールを急かさない。
- パターン名: SANKOU — Minimal Vertical Manifesto
- 概要: 大きな余白と短文だけで思想を見せるミニマルタイポ構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 33% / 1px / 33%、推奨コンテンツ幅 980px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-minimal-vertical-manifesto"} /-->
CSS:
.section-sankou-minimal-vertical-manifesto { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou-minimal-vertical-manifesto').forEach((el) => el.dataset.ready = 'true');
14
SANKOU100 — 005 Mizuya Kyoto
sankou100-005-mizuya-kyoto
Mizuya
About
Works
Journal
Contact
- パターン名: SANKOU100 — 005 Mizuya Kyoto
- 概要: SANKOU! sample 005から抽出したrail型の商用サイト向け構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 1185px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-005-mizuya-kyoto"} /-->
CSS:
.section-sankou100-005-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-005-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');
15
SANKOU100 — 045 Nii Recruit
sankou100-045-nii-recruit
Nii
About
Works
Journal
Contact
- パターン名: SANKOU100 — 045 Nii Recruit
- 概要: SANKOU! sample 045から抽出したrail型の商用サイト向け構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 1225px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-045-nii-recruit"} /-->
CSS:
.section-sankou100-045-nii-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-045-nii-recruit').forEach((el) => el.dataset.ready = 'true');
16
SANKOU100 — 085 Norikura Hanabi
sankou100-085-norikura-hanabi
Norikura
About
Works
Journal
Contact
- パターン名: SANKOU100 — 085 Norikura Hanabi
- 概要: SANKOU! sample 085から抽出したrail型の商用サイト向け構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 1265px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-085-norikura-hanabi"} /-->
CSS:
.section-sankou100-085-norikura-hanabi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-085-norikura-hanabi').forEach((el) => el.dataset.ready = 'true');
17
SANKOU Max — typography 01 Notahotel Architects
sankoumax-typography-01-notahotel-architects
Collection Selector
Notahotel Architects の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — typography 01 Notahotel Architects
- 概要: SANKOU100 sample setから展開したtypography向けproduct構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 3801px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-01-notahotel-architects"} /-->
CSS:
.section-sankoumax-typography-01-notahotel-architects { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-01-notahotel-architects').forEach((el) => el.dataset.ready = 'true');
18
SANKOU Max — typography 02 Montblanc Pictures
sankoumax-typography-02-montblanc-pictures
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — typography 02 Montblanc Pictures
- 概要: SANKOU100 sample setから展開したtypography向けtimeline構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3742px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-02-montblanc-pictures"} /-->
CSS:
.section-sankoumax-typography-02-montblanc-pictures { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-02-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');
19
SANKOU Max — typography 03 Tattoo Rays
sankoumax-typography-03-tattoo-rays
数字で納得させる
63%
改善率
6分
短縮
19021
導入数
- パターン名: SANKOU Max — typography 03 Tattoo Rays
- 概要: SANKOU100 sample setから展開したtypography向けstats構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3663px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-03-tattoo-rays"} /-->
CSS:
.section-sankoumax-typography-03-tattoo-rays { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-03-tattoo-rays').forEach((el) => el.dataset.ready = 'true');
20
SANKOU Max — typography 04 Rim Jins
sankoumax-typography-04-rim-jins
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — typography 04 Rim Jins
- 概要: SANKOU100 sample setから展開したtypography向けcontact構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 58% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3784px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-04-rim-jins"} /-->
CSS:
.section-sankoumax-typography-04-rim-jins { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-04-rim-jins').forEach((el) => el.dataset.ready = 'true');
21
SANKOU Max — typography 05 Obunko
sankoumax-typography-05-obunko
Obunko
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 2705
- パターン名: SANKOU Max — typography 05 Obunko
- 概要: SANKOU100 sample setから展開したtypography向けfooter構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 3825px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-05-obunko"} /-->
CSS:
.section-sankoumax-typography-05-obunko { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-05-obunko').forEach((el) => el.dataset.ready = 'true');
22
SANKOU Max — typography 06 Pronets Recruit
sankoumax-typography-06-pronets-recruit
NEWS
Pronets Recruit から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — typography 06 Pronets Recruit
- 概要: SANKOU100 sample setから展開したtypography向けalert構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 3786px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-06-pronets-recruit"} /-->
CSS:
.section-sankoumax-typography-06-pronets-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-06-pronets-recruit').forEach((el) => el.dataset.ready = 'true');
23
SANKOU Max — typography 07 Glanta
sankoumax-typography-07-glanta
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — typography 07 Glanta
- 概要: SANKOU100 sample setから展開したtypography向けmap構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3747px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-07-glanta"} /-->
CSS:
.section-sankoumax-typography-07-glanta { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-07-glanta').forEach((el) => el.dataset.ready = 'true');
24
SANKOU Max — typography 08 Tashi Portfolio
sankoumax-typography-08-tashi-portfolio
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — typography 08 Tashi Portfolio
- 概要: SANKOU100 sample setから展開したtypography向けform構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 3768px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-08-tashi-portfolio"} /-->
CSS:
.section-sankoumax-typography-08-tashi-portfolio { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-08-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');
25
SANKOU Max — typography 09 Kitanohashi
sankoumax-typography-09-kitanohashi
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — typography 09 Kitanohashi
- 概要: SANKOU100 sample setから展開したtypography向けtabs構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3689px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-09-kitanohashi"} /-->
CSS:
.section-sankoumax-typography-09-kitanohashi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-09-kitanohashi').forEach((el) => el.dataset.ready = 'true');
26
SANKOU Max — typography 10 Morinosato Clinic
sankoumax-typography-10-morinosato-clinic
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — typography 10 Morinosato Clinic
- 概要: SANKOU100 sample setから展開したtypography向けdashboard構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 3790px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-10-morinosato-clinic"} /-->
CSS:
.section-sankoumax-typography-10-morinosato-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-10-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');
27
SANKOU Max — typography 11 Asuzac Highschool
sankoumax-typography-11-asuzac-highschool
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — typography 11 Asuzac Highschool
- 概要: SANKOU100 sample setから展開したtypography向けfaq構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3631px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-11-asuzac-highschool"} /-->
CSS:
.section-sankoumax-typography-11-asuzac-highschool { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-11-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');
28
SANKOU Max — typography 12 Junni Newyear
sankoumax-typography-12-junni-newyear
Detail
- パターン名: SANKOU Max — typography 12 Junni Newyear
- 概要: SANKOU100 sample setから展開したtypography向けgallery構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 3832px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-12-junni-newyear"} /-->
CSS:
.section-sankoumax-typography-12-junni-newyear { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-12-junni-newyear').forEach((el) => el.dataset.ready = 'true');
29
SANKOU Max — typography 13 Mizota Ks
sankoumax-typography-13-mizota-ks
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — typography 13 Mizota Ks
- 概要: SANKOU100 sample setから展開したtypography向けroster構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 3833px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-13-mizota-ks"} /-->
CSS:
.section-sankoumax-typography-13-mizota-ks { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-13-mizota-ks').forEach((el) => el.dataset.ready = 'true');
30
SANKOU Max — typography 14 Nissan Career
sankoumax-typography-14-nissan-career
2714
Nissan Career
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — typography 14 Nissan Career
- 概要: SANKOU100 sample setから展開したtypography向けmanifesto構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 3614px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-14-nissan-career"} /-->
CSS:
.section-sankoumax-typography-14-nissan-career { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-14-nissan-career').forEach((el) => el.dataset.ready = 'true');
31
SANKOU Max — typography 15 Shueisha Recruit
sankoumax-typography-15-shueisha-recruit
Sampled Site
2715 / Shueisha Recruit
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — typography 15 Shueisha Recruit
- 概要: SANKOU100 sample setから展開したtypography向けcover構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 30% / 70%、推奨コンテンツ幅 9125px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-15-shueisha-recruit"} /-->
CSS:
.section-sankoumax-typography-15-shueisha-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-15-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');
32
SANKOU Max — typography 16 Sanu Weekday
sankoumax-typography-16-sanu-weekday
Split Story
写真と要点で信頼を作る
Sanu Weekday の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — typography 16 Sanu Weekday
- 概要: SANKOU100 sample setから展開したtypography向けsplit構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 3756px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-16-sanu-weekday"} /-->
CSS:
.section-sankoumax-typography-16-sanu-weekday { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-16-sanu-weekday').forEach((el) => el.dataset.ready = 'true');
33
SANKOU Max — typography 17 Newspicks Business
sankoumax-typography-17-newspicks-business
Card Flow
迷わない比較カード
Newspicks Business から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — typography 17 Newspicks Business
- 概要: SANKOU100 sample setから展開したtypography向けcards構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3797px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-17-newspicks-business"} /-->
CSS:
.section-sankoumax-typography-17-newspicks-business { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-17-newspicks-business').forEach((el) => el.dataset.ready = 'true');
34
SANKOU Max — typography 18 Miyakawa Lab
sankoumax-typography-18-miyakawa-lab
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
2718
- パターン名: SANKOU Max — typography 18 Miyakawa Lab
- 概要: SANKOU100 sample setから展開したtypography向けcollage構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 36% / 1px / 34% / 36% / 1px、推奨コンテンツ幅 3838px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-18-miyakawa-lab"} /-->
CSS:
.section-sankoumax-typography-18-miyakawa-lab { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-18-miyakawa-lab').forEach((el) => el.dataset.ready = 'true');
35
SANKOU Max — typography 19 Matsuo Komuten
sankoumax-typography-19-matsuo-komuten
Matsuo
About
Works
Journal
Contact
- パターン名: SANKOU Max — typography 19 Matsuo Komuten
- 概要: SANKOU100 sample setから展開したtypography向けrail構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 3899px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-19-matsuo-komuten"} /-->
CSS:
.section-sankoumax-typography-19-matsuo-komuten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-19-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');
36
SANKOU Max — typography 20 Yokohama Timberwharf
sankoumax-typography-20-yokohama-timberwharf
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — typography 20 Yokohama Timberwharf
- 概要: SANKOU100 sample setから展開したtypography向けeditorial構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 56% / 1px、推奨コンテンツ幅 3740px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-20-yokohama-timberwharf"} /-->
CSS:
.section-sankoumax-typography-20-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-20-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');
37
SANKOU Max — typography 21 Janu
sankoumax-typography-21-janu
Collection Selector
Janu の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — typography 21 Janu
- 概要: SANKOU100 sample setから展開したtypography向けproduct構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 3821px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-21-janu"} /-->
CSS:
.section-sankoumax-typography-21-janu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-21-janu').forEach((el) => el.dataset.ready = 'true');
38
SANKOU Max — typography 22 Daimatsu
sankoumax-typography-22-daimatsu
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — typography 22 Daimatsu
- 概要: SANKOU100 sample setから展開したtypography向けtimeline構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3762px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-22-daimatsu"} /-->
CSS:
.section-sankoumax-typography-22-daimatsu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-22-daimatsu').forEach((el) => el.dataset.ready = 'true');
39
SANKOU Max — typography 23 Omotesando Ortho
sankoumax-typography-23-omotesando-ortho
数字で納得させる
83%
改善率
8分
短縮
19161
導入数
- パターン名: SANKOU Max — typography 23 Omotesando Ortho
- 概要: SANKOU100 sample setから展開したtypography向けstats構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3683px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-23-omotesando-ortho"} /-->
CSS:
.section-sankoumax-typography-23-omotesando-ortho { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-23-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');
40
SANKOU Max — typography 24 Dodasports
sankoumax-typography-24-dodasports
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — typography 24 Dodasports
- 概要: SANKOU100 sample setから展開したtypography向けcontact構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 54% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3804px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-24-dodasports"} /-->
CSS:
.section-sankoumax-typography-24-dodasports { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-24-dodasports').forEach((el) => el.dataset.ready = 'true');
41
SANKOU Max — typography 25 Ja Aichi Recruit
sankoumax-typography-25-ja-aichi-recruit
Ja Aichi Recruit
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 2725
- パターン名: SANKOU Max — typography 25 Ja Aichi Recruit
- 概要: SANKOU100 sample setから展開したtypography向けfooter構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 3845px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-25-ja-aichi-recruit"} /-->
CSS:
.section-sankoumax-typography-25-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-25-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');
42
SANKOU Max — typography 26 Kiyasuku
sankoumax-typography-26-kiyasuku
NEWS
Kiyasuku から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — typography 26 Kiyasuku
- 概要: SANKOU100 sample setから展開したtypography向けalert構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 3806px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-26-kiyasuku"} /-->
CSS:
.section-sankoumax-typography-26-kiyasuku { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-26-kiyasuku').forEach((el) => el.dataset.ready = 'true');
43
SANKOU Max — typography 27 Hirono Recruit
sankoumax-typography-27-hirono-recruit
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — typography 27 Hirono Recruit
- 概要: SANKOU100 sample setから展開したtypography向けmap構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3767px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-27-hirono-recruit"} /-->
CSS:
.section-sankoumax-typography-27-hirono-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-27-hirono-recruit').forEach((el) => el.dataset.ready = 'true');
44
SANKOU Max — typography 28 Ichizenbooks
sankoumax-typography-28-ichizenbooks
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — typography 28 Ichizenbooks
- 概要: SANKOU100 sample setから展開したtypography向けform構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 3788px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-28-ichizenbooks"} /-->
CSS:
.section-sankoumax-typography-28-ichizenbooks { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-28-ichizenbooks').forEach((el) => el.dataset.ready = 'true');
45
SANKOU Max — typography 29 Mec Residence Recruit
sankoumax-typography-29-mec-residence-recruit
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — typography 29 Mec Residence Recruit
- 概要: SANKOU100 sample setから展開したtypography向けtabs構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3709px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-29-mec-residence-recruit"} /-->
CSS:
.section-sankoumax-typography-29-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-29-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');
46
SANKOU Max — typography 30 Greenpark Santo
sankoumax-typography-30-greenpark-santo
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — typography 30 Greenpark Santo
- 概要: SANKOU100 sample setから展開したtypography向けdashboard構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 3810px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-30-greenpark-santo"} /-->
CSS:
.section-sankoumax-typography-30-greenpark-santo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-30-greenpark-santo').forEach((el) => el.dataset.ready = 'true');
47
SANKOU Max — typography 31 Land Sapporo
sankoumax-typography-31-land-sapporo
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — typography 31 Land Sapporo
- 概要: SANKOU100 sample setから展開したtypography向けfaq構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3651px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-31-land-sapporo"} /-->
CSS:
.section-sankoumax-typography-31-land-sapporo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-31-land-sapporo').forEach((el) => el.dataset.ready = 'true');
48
SANKOU Max — typography 32 Tokachi Fruits
sankoumax-typography-32-tokachi-fruits
Detail
- パターン名: SANKOU Max — typography 32 Tokachi Fruits
- 概要: SANKOU100 sample setから展開したtypography向けgallery構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 3852px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-32-tokachi-fruits"} /-->
CSS:
.section-sankoumax-typography-32-tokachi-fruits { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-32-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');
49
SANKOU Max — typography 33 Echitora
sankoumax-typography-33-echitora
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — typography 33 Echitora
- 概要: SANKOU100 sample setから展開したtypography向けroster構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 3853px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-33-echitora"} /-->
CSS:
.section-sankoumax-typography-33-echitora { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-33-echitora').forEach((el) => el.dataset.ready = 'true');
50
SANKOU Max — typography 34 Megamis
sankoumax-typography-34-megamis
2734
Megamis
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — typography 34 Megamis
- 概要: SANKOU100 sample setから展開したtypography向けmanifesto構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 3634px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-34-megamis"} /-->
CSS:
.section-sankoumax-typography-34-megamis { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-34-megamis').forEach((el) => el.dataset.ready = 'true');
51
SANKOU Max — typography 35 Kagami
sankoumax-typography-35-kagami
Sampled Site
2735 / Kagami
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — typography 35 Kagami
- 概要: SANKOU100 sample setから展開したtypography向けcover構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 32% / 68%、推奨コンテンツ幅 9185px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-35-kagami"} /-->
CSS:
.section-sankoumax-typography-35-kagami { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-35-kagami').forEach((el) => el.dataset.ready = 'true');
52
SANKOU Max — typography 36 Antscr
sankoumax-typography-36-antscr
Split Story
写真と要点で信頼を作る
Antscr の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — typography 36 Antscr
- 概要: SANKOU100 sample setから展開したtypography向けsplit構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 3776px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-36-antscr"} /-->
CSS:
.section-sankoumax-typography-36-antscr { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-36-antscr').forEach((el) => el.dataset.ready = 'true');
53
SANKOU Max — typography 37 Meisei Kg
sankoumax-typography-37-meisei-kg
Card Flow
迷わない比較カード
Meisei Kg から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — typography 37 Meisei Kg
- 概要: SANKOU100 sample setから展開したtypography向けcards構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3817px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-37-meisei-kg"} /-->
CSS:
.section-sankoumax-typography-37-meisei-kg { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-37-meisei-kg').forEach((el) => el.dataset.ready = 'true');
54
SANKOU Max — typography 38 Iamwithyou
sankoumax-typography-38-iamwithyou
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
2738
- パターン名: SANKOU Max — typography 38 Iamwithyou
- 概要: SANKOU100 sample setから展開したtypography向けcollage構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 32% / 1px / 36% / 34% / 1px、推奨コンテンツ幅 3858px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-38-iamwithyou"} /-->
CSS:
.section-sankoumax-typography-38-iamwithyou { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-38-iamwithyou').forEach((el) => el.dataset.ready = 'true');
55
SANKOU Max — typography 39 Depsoa
sankoumax-typography-39-depsoa
Depsoa
About
Works
Journal
Contact
- パターン名: SANKOU Max — typography 39 Depsoa
- 概要: SANKOU100 sample setから展開したtypography向けrail構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 3919px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-39-depsoa"} /-->
CSS:
.section-sankoumax-typography-39-depsoa { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-39-depsoa').forEach((el) => el.dataset.ready = 'true');
56
SANKOU Max — typography 40 Nothing Tech
sankoumax-typography-40-nothing-tech
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — typography 40 Nothing Tech
- 概要: SANKOU100 sample setから展開したtypography向けeditorial構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 48% / 52% / 1px、推奨コンテンツ幅 3760px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-40-nothing-tech"} /-->
CSS:
.section-sankoumax-typography-40-nothing-tech { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-40-nothing-tech').forEach((el) => el.dataset.ready = 'true');
57
SANKOU Max — typography 41 Upvege
sankoumax-typography-41-upvege
Collection Selector
Upvege の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — typography 41 Upvege
- 概要: SANKOU100 sample setから展開したtypography向けproduct構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 3841px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-41-upvege"} /-->
CSS:
.section-sankoumax-typography-41-upvege { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-41-upvege').forEach((el) => el.dataset.ready = 'true');
58
SANKOU Max — typography 42 Fujiya1935
sankoumax-typography-42-fujiya1935
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — typography 42 Fujiya1935
- 概要: SANKOU100 sample setから展開したtypography向けtimeline構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3782px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-42-fujiya1935"} /-->
CSS:
.section-sankoumax-typography-42-fujiya1935 { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-42-fujiya1935').forEach((el) => el.dataset.ready = 'true');
59
SANKOU Max — typography 43 Omodakaya
sankoumax-typography-43-omodakaya
数字で納得させる
33%
改善率
10分
短縮
19301
導入数
- パターン名: SANKOU Max — typography 43 Omodakaya
- 概要: SANKOU100 sample setから展開したtypography向けstats構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3703px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-43-omodakaya"} /-->
CSS:
.section-sankoumax-typography-43-omodakaya { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-43-omodakaya').forEach((el) => el.dataset.ready = 'true');
60
SANKOU Max — typography 44 Favtown
sankoumax-typography-44-favtown
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — typography 44 Favtown
- 概要: SANKOU100 sample setから展開したtypography向けcontact構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 58% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3824px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-44-favtown"} /-->
CSS:
.section-sankoumax-typography-44-favtown { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-44-favtown').forEach((el) => el.dataset.ready = 'true');
61
SANKOU Max — typography 45 Mizuya Kyoto
sankoumax-typography-45-mizuya-kyoto
Mizuya Kyoto
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 2745
- パターン名: SANKOU Max — typography 45 Mizuya Kyoto
- 概要: SANKOU100 sample setから展開したtypography向けfooter構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 3865px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-45-mizuya-kyoto"} /-->
CSS:
.section-sankoumax-typography-45-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-45-mizuya-kyoto').forEach((el) => el.dataset.ready = 'true');
62
SANKOU Max — typography 46 Allright Inc
sankoumax-typography-46-allright-inc
NEWS
Allright Inc から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — typography 46 Allright Inc
- 概要: SANKOU100 sample setから展開したtypography向けalert構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 3826px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-46-allright-inc"} /-->
CSS:
.section-sankoumax-typography-46-allright-inc { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-46-allright-inc').forEach((el) => el.dataset.ready = 'true');
63
SANKOU Max — typography 47 Jins Holdings
sankoumax-typography-47-jins-holdings
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — typography 47 Jins Holdings
- 概要: SANKOU100 sample setから展開したtypography向けmap構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 3787px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-47-jins-holdings"} /-->
CSS:
.section-sankoumax-typography-47-jins-holdings { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-47-jins-holdings').forEach((el) => el.dataset.ready = 'true');
64
SANKOU Max — typography 48 Tsuchitokaze
sankoumax-typography-48-tsuchitokaze
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — typography 48 Tsuchitokaze
- 概要: SANKOU100 sample setから展開したtypography向けform構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 3808px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-48-tsuchitokaze"} /-->
CSS:
.section-sankoumax-typography-48-tsuchitokaze { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-48-tsuchitokaze').forEach((el) => el.dataset.ready = 'true');
65
SANKOU Max — typography 49 Yamato 50Th
sankoumax-typography-49-yamato-50th
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — typography 49 Yamato 50Th
- 概要: SANKOU100 sample setから展開したtypography向けtabs構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 3729px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-49-yamato-50th"} /-->
CSS:
.section-sankoumax-typography-49-yamato-50th { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-49-yamato-50th').forEach((el) => el.dataset.ready = 'true');
66
SANKOU Max — typography 50 Action Npo
sankoumax-typography-50-action-npo
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — typography 50 Action Npo
- 概要: SANKOU100 sample setから展開したtypography向けdashboard構成。
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 3830px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-typography-50-action-npo"} /-->
CSS:
.section-sankoumax-typography-50-action-npo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-typography-50-action-npo').forEach((el) => el.dataset.ready = 'true');
67
Typography — Pull Quote Display
typography-display-quote
“
よい設計とは、ユーザーが思考せずに目的を達成できる状態をつくる工芸である。
— 設計原則について、編集部
- パターン名: Typography — Pull Quote Display
- 概要: Large editorial pull quote on a soft warm background.
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 960px、主要ブロック group, paragraph, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版 / Typographyをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/typography-display-quote"} /-->
CSS:
.section-typography-display-quote { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-typography-display-quote').forEach((el) => el.dataset.ready = 'true');
68
Typography — Drop Cap Article Opener
typography-drop-cap
記憶のかたちを残す、ということについて
時間という概念は、文字や写真が発明されるよりずっと前から、確かに人の中に存在していたはずだ。けれど、それを別のかたちに置き換えて、誰かに渡すという行為は、人類が手にした最も静かで強い発明だったと思う。
日々の小さな出来事を、こうして書き留めておくこと。それは、未来の自分に向けた、ひとつの長い手紙のようなものなのだろう。
- パターン名: Typography — Drop Cap Article Opener
- 概要: Editorial article opener with drop-cap paragraph, ideal for blog post intros.
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 720px、主要ブロック group, heading, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/typography-drop-cap"} /-->
CSS:
.section-typography-drop-cap { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-typography-drop-cap').forEach((el) => el.dataset.ready = 'true');
69
Typography – Editorial Type Console
typography-editorial-type-console
TYPE
Editorial Type Console
本文、注釈、見出し、引用を一画面で調整するためのタイポグラフィ構成です。
Aa
Scale preview
H1
48px
Body
16px
Note
13px
Readable
Dense
Editorial
- パターン名: Typography – Editorial Type Console
- 概要: Four-pane typography control surface for commercial editorial pages.
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 18% / 1px / 31% / 21% / 1px、推奨コンテンツ幅 1280px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/typography-editorial-type-console"} /-->
CSS:
.section-typography-editorial-type-console { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-typography-editorial-type-console').forEach((el) => el.dataset.ready = 'true');
70
Typography — Kicker + Big Headline
typography-kicker-headline
速報 ・ 2026.04.27
プラットフォーム機能を全面刷新、生成 AI と統合。
本日のアップデートで、これまで別々のツールに分かれていたワークフローが一つの体験に統合されました。詳細は次のセクションで。
- パターン名: Typography — Kicker + Big Headline
- 概要: Newsroom-style kicker label above an oversized headline and lead paragraph.
- 使用目的: Typography領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, paragraph, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Typographyをミニマルに見せる余白重視版 / Typographyをリッチに見せるカバー/カード強調版 / Typographyをコーポレート向けに整える情報密度高め版 / Typographyをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/typography-kicker-headline"} /-->
CSS:
.section-typography-kicker-headline { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-typography-kicker-headline').forEach((el) => el.dataset.ready = 'true');
← Previous
Navigation
ナビゲーション
Next →
Decoration
装飾
◈ 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