◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Expression › Big Typo

ビッグタイポ / 雑誌風

ジャンプ率特大の見出し、アウトライン文字、誌面的レイアウト。

10

Patterns

Expression

Group

isValid=0

Verified

CSS

Animation

01

Big Typo — EX01 Watermark Section

bigtypo-ex01-watermark

Copy
Link

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

Copy
Link

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

Copy
Link

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

Copy
Link

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

Copy
Link

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

Copy
Link

枠にはまるな、

枠をつくれ。

中途採用 ・ 通年募集 ・ 職種不問

  • パターン名: 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

Copy
Link

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

Copy
Link

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

Copy
Link

挑戦 ・ 誠実 ・ 遊心

  • パターン名: 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

Copy
Link

デザインに、体温を。

きれいなだけのサイトは、もうつくらない。
会いに行き、話を聞き、その人の言葉で組み立てます。

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