検索…

カタログ統計

CATALOG › Expression › Big Typo

ビッグタイポ / 雑誌風

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

Patterns

Expression

Group

isValid=0

Verified

CSS

Animation

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

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

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

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

Big Typo — EX05 Giant Numbered Index

bigtypo-ex05-giant-index

Copy

Link

現地調査とヒアリング

図面ではなく、暮らしを見る。最初の訪問に一番時間をかけます。

設計と見積もり

代替案は必ず二つ。金額の理由まで、すべて開示します。

施工と一年点検

引き渡しはゴールではなく中間地点。一年後に必ず伺います。

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

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

Big Typo — EX07 Mixed Fill Giant Number

bigtypo-ex07-mixed-fill-number

Copy

Link

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

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

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

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

BigTypo — FX01 Ghost Text

fx-ghost-text

Copy

Link

MACHIYA

パターン名: 巨大ゴーストテキスト — BigTypo — FX01 Ghost Text
概要: 画面幅級の縁取り文字がスクロールで横流れする
適用シーン: 章の背景・ブランド名の刷り込み
使い方: 段落に fx-ghost-text(横流れ・はみ出し対策済み)

メリット: 誌面のような迫力
デメリット: 本文とは併走させない
バリエーション案: 色・サイズ
実装時の注意点: 装飾文字として使う(読ませない)

使い方: 段落に fx-ghost-text(横流れ・はみ出し対策済み)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

BigTypo — FX02 Type Fill

fx-text-mask

Copy

Link

BLANC NAIL

パターン名: 文字マスク — BigTypo — FX02 Type Fill
概要: 太字見出しの中をブランド色が流れる
適用シーン: キービジュアル代替・章扉
使い方: 見出しに fx-text-mask(–fx-tm-imgで写真も)

メリット: 文字は編集自由
デメリット: 細字では映えない
バリエーション案: 写真版
実装時の注意点: 太字4rem以上

使い方: 見出しに fx-text-mask(--fx-tm-imgで写真も)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

BigTypo — FX03 Outline Fill

fx-outline-fill

Copy

Link

OUTLINE FILL

パターン名: 袋文字充填 — BigTypo — FX03 Outline Fill
概要: 袋文字がスクロールで左から塗られていく
適用シーン: 章番号・キャッチコピー
使い方: 見出しに fx-outline-fill

メリット: 読む速度と同期する快感
デメリット: –
バリエーション案: 塗り色
実装時の注意点: 太字推奨

使い方: 見出しに fx-outline-fill
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

BigTypo — FX04 Wave Text

fx-wave-text

Copy

Link

ゆらゆらと波打つ

パターン名: 波打ち文字 — BigTypo — FX04 Wave Text
概要: 一文字ずつ波のように上下する
適用シーン: カジュアルな見出し・ロゴ周り
使い方: 見出しに fx-wave-text(文字はspan区切り・コードエディタ)

メリット: 楽しさが出る
デメリット: span区切りの手間
バリエーション案: 振幅
実装時の注意点: 短い単語向け

使い方: 見出しに fx-wave-text(文字はspan区切り・コードエディタ)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

BigTypo — FX05 Char Stagger

fx-chars

Copy

Link

結のおもてなし

パターン名: 一文字ずつ登場 — BigTypo — FX05 Char Stagger
概要: ロード時に文字が順に立ち上がる
適用シーン: ヒーローのキャッチ
使い方: 見出しに fx-chars(文字はspan区切り・コードエディタ)

メリット: 開幕の定番
デメリット: ロード時演出(スクロールでは再生されない)
バリエーション案: 間隔
実装時の注意点: ファーストビュー内で使う

使い方: 見出しに fx-chars(文字はspan区切り・コードエディタ)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

BigTypo — FX06 Untangle

fx-untangle

Copy

Link

ほどける、ことば。

パターン名: 文字がほどける — BigTypo — FX06 Untangle
概要: 潰れて重なった見出しが正しい字間へほどける
適用シーン: コンセプト見出し・章扉
使い方: 見出しに fx-untangle(v7.3新規)

メリット: span不要で1クラス
デメリット: 長文不向き
バリエーション案: 初期潰し量(-0.38em)
実装時の注意点: 太字・大サイズで映える

使い方: 見出しに fx-untangle(v7.3新規)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

ビッグタイポ / 雑誌風 · Big Typo · Blanc Nail

ビッグタイポ / 雑誌風

品質が、すべてを語る。

手を抜く理由が、見つからない。

うまい、が先。

街と、人と、つづく仕事。

現地調査とヒアリング

設計と見積もり

施工と一年点検

枠にはまるな、

枠をつくれ。

小さな会社の、大きな責任。

デザインに、体温を。

BLANC NAIL

OUTLINE FILL

結のおもてなし

ほどける、ことば。

街と、人と、
つづく仕事。