検索…
カタログ 統計
CATALOG › Expression › Big Typo
ビッグタイポ / 雑誌風
ジャンプ率特大の見出し、アウトライン文字、誌面的レイアウト。
10
Patterns
Expression
Group
isValid=0
Verified
CSS
Animation
01
Big Typo — EX01 Watermark Section
bigtypo-ex01-watermark
QUALITY
品質が、すべてを語る。
広告よりも、納品物で覚えてもらう。
創業から変わらない、私たちの営業方針です。
- パターン名: Big Typo — EX01 Watermark Section
- 概要: Giant pale watermark word behind the section heading.
- 使用目的: Big Typo領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/bigtypo-ex01-watermark"} /-->
CSS:
.section-bigtypo-ex01-watermark { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-bigtypo-ex01-watermark').forEach((el) => el.dataset.ready = 'true');
02
Big Typo — EX02 Outline Text Hero
bigtypo-ex02-outline-hero
CRAFTSMAN
手を抜く理由が、見つからない。
県内施工実績 1,200 件。住まいの困りごとは、現場一筋の職人チームへ。
- パターン名: Big Typo — EX02 Outline Text Hero
- 概要: Dark hero with stroke-only giant word and filled Japanese subtitle.
- 使用目的: Big Typo領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/bigtypo-ex02-outline-hero"} /-->
CSS:
.section-bigtypo-ex02-outline-hero { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-bigtypo-ex02-outline-hero').forEach((el) => el.dataset.ready = 'true');
03
Big Typo — EX03 Extreme Jump Rate
bigtypo-ex03-jump-rate
SINCE 1968 ・ 製麺所直営
うまい、が先。
理屈はあとから。まずは一杯、食べに来てください。
- パターン名: Big Typo — EX03 Extreme Jump Rate
- 概要: Tiny eyebrow, one huge statement line, tiny caption.
- 使用目的: Big Typo領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/bigtypo-ex03-jump-rate"} /-->
CSS:
.section-bigtypo-ex03-jump-rate { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-bigtypo-ex03-jump-rate').forEach((el) => el.dataset.ready = 'true');
04
Big Typo — EX04 Magazine Cover Section
bigtypo-ex04-magazine-cover
VOL. 12
2026 SUMMER
街と、人と、
つづく仕事。
特集 ・ 商店街のあたらしい朝
取材ノート 12 篇
写真 ・ 例町スタジオ
文 ・ 編集部
発行 ・ 株式会社サンプル
季刊 ・ 年 4 回発行
- パターン名: Big Typo — EX04 Magazine Cover Section
- 概要: Issue label row, huge title and credit columns like a magazine cover.
- 使用目的: Big Typo領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/bigtypo-ex04-magazine-cover"} /-->
CSS:
.section-bigtypo-ex04-magazine-cover { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-bigtypo-ex04-magazine-cover').forEach((el) => el.dataset.ready = 'true');
05
Big Typo — EX05 Giant Numbered Index
bigtypo-ex05-giant-index
01
現地調査とヒアリング
図面ではなく、暮らしを見る。最初の訪問に一番時間をかけます。
02
設計と見積もり
代替案は必ず二つ。金額の理由まで、すべて開示します。
03
施工と一年点検
引き渡しはゴールではなく中間地点。一年後に必ず伺います。
- パターン名: Big Typo — EX05 Giant Numbered Index
- 概要: Index rows with oversized numerals and right-aligned descriptions.
- 使用目的: Big Typo領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/bigtypo-ex05-giant-index"} /-->
CSS:
.section-bigtypo-ex05-giant-index { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-bigtypo-ex05-giant-index').forEach((el) => el.dataset.ready = 'true');
06
Big Typo — EX06 Alternating Alignment
bigtypo-ex06-alternate-align
枠にはまるな、
枠をつくれ。
中途採用 ・ 通年募集 ・ 職種不問
- パターン名: Big Typo — EX06 Alternating Alignment
- 概要: Two giant statement lines aligned left then right.
- 使用目的: Big Typo領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/bigtypo-ex06-alternate-align"} /-->
CSS:
.section-bigtypo-ex06-alternate-align { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-bigtypo-ex06-alternate-align').forEach((el) => el.dataset.ready = 'true');
07
Big Typo — EX07 Mixed Fill Giant Number
bigtypo-ex07-mixed-fill-number
48
hours
お見積もりは、
最短 48 時間以内にお届け。
- パターン名: Big Typo — EX07 Mixed Fill Giant Number
- 概要: Giant figure combining filled and outline digits.
- 使用目的: Big Typo領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/bigtypo-ex07-mixed-fill-number"} /-->
CSS:
.section-bigtypo-ex07-mixed-fill-number { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-bigtypo-ex07-mixed-fill-number').forEach((el) => el.dataset.ready = 'true');
08
Big Typo — EX08 Sideways Section Label
bigtypo-ex08-side-label
ABOUT US
小さな会社の、大きな責任。
社員九名、全員が現場に出ます。窓口も、設計も、施工も、アフターも。担当が変わらないことが、私たちの品質管理です。
- パターン名: Big Typo — EX08 Sideways Section Label
- 概要: Rotated English section label beside the content column.
- 使用目的: Big Typo領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/bigtypo-ex08-side-label"} /-->
CSS:
.section-bigtypo-ex08-side-label { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-bigtypo-ex08-side-label').forEach((el) => el.dataset.ready = 'true');
09
Big Typo — EX09 Value Words Band
bigtypo-ex09-word-band
挑戦 ・ 誠実 ・ 遊心
- パターン名: Big Typo — EX09 Value Words Band
- 概要: Single large divider band listing three brand words.
- 使用目的: Big Typo領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/bigtypo-ex09-word-band"} /-->
CSS:
.section-bigtypo-ex09-word-band { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-bigtypo-ex09-word-band').forEach((el) => el.dataset.ready = 'true');
10
Big Typo — EX10 Inline Color Accent Heading
bigtypo-ex10-inline-accent
デザインに、体温を。
きれいなだけのサイトは、もうつくらない。
会いに行き、話を聞き、その人の言葉で組み立てます。
- パターン名: Big Typo — EX10 Inline Color Accent Heading
- 概要: Large heading with a single warm-colored inline word.
- 使用目的: Big Typo領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/bigtypo-ex10-inline-accent"} /-->
CSS:
.section-bigtypo-ex10-inline-accent { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-bigtypo-ex10-inline-accent').forEach((el) => el.dataset.ready = 'true');