検索…

カタログ統計

CATALOG › Foundations › Typography

タイポグラフィ

本文・見出し・引用・コード・リスト。文章組版のテンプレート。

Patterns

Foundations

Group

isValid=0

Verified

CSS

Animation

Typography — Pull Quote Display

typography-display-quote

Copy

Link

“

よい設計とは、ユーザーが思考せずに目的を達成できる状態をつくる工芸である。

— 設計原則について、編集部

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

Typography — Drop Cap Article Opener

typography-drop-cap

Copy

Link

記憶のかたちを残す、ということについて

時間という概念は、文字や写真が発明されるよりずっと前から、確かに人の中に存在していたはずだ。けれど、それを別のかたちに置き換えて、誰かに渡すという行為は、人類が手にした最も静かで強い発明だったと思う。

日々の小さな出来事を、こうして書き留めておくこと。それは、未来の自分に向けた、ひとつの長い手紙のようなものなのだろう。

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

Typography – Editorial Type Console

typography-editorial-type-console

Copy

Link

TYPE

Editorial Type Console

本文、注釈、見出し、引用を一画面で調整するためのタイポグラフィ構成です。

Aa

Scale preview

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

Typography — Kicker + Big Headline

typography-kicker-headline

Copy

Link

速報・ 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');

Typo — FX01 Marker

fx-marker

Copy

Link

大事な言葉に蛍光マーカーが引かれる

パターン名: 蛍光マーカー — Typo — FX01 Marker
概要: スクロールで蛍光マーカーが引かれる
適用シーン: 本文の強調
使い方: 段落に fx-marker(強調語をmarkで囲む)

メリット: 自然な強調
デメリット: –
バリエーション案: 色
実装時の注意点: markはツールバーのハイライトでOK

使い方: 段落に fx-marker(強調語をmarkで囲む)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

Typo — FX02 Typewriter

fx-typewriter

Copy

Link

いらっしゃいませ、町家カフェ結へ

パターン名: タイプライター — Typo — FX02 Typewriter
概要: 文字が打鍵されるように現れる
適用シーン: 導入文・引用
使い方: 見出し/段落に fx-typewriter

メリット: 語りの演出
デメリット: 長文は待たせる
バリエーション案: 速度
実装時の注意点: 1〜2行で

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

Typo — FX03 Neon

fx-neon-pulse

Copy

Link

NEON SIGN

パターン名: ネオン明滅 — Typo — FX03 Neon
概要: ネオン管のように光って明滅する
適用シーン: バー・ナイト系見出し
使い方: 見出しに fx-neon-pulse

メリット: 夜の空気が出る
デメリット: 業種を選ぶ
バリエーション案: 色
実装時の注意点: 暗背景で

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

Typo — FX04 Glitch

fx-glitch

Copy

Link

GLITCH TEXT

パターン名: グリッチ — Typo — FX04 Glitch
概要: 文字がデジタルノイズ的にブレる
適用シーン: テック・イベント告知
使い方: 見出しに fx-glitch

メリット: 目を引く
デメリット: 多用注意
バリエーション案: 頻度
実装時の注意点: 短い単語で

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

Typo — FX05 Blend Invert

fx-blend-invert

Copy

Link

反転する見出し

パターン名: 反転ブレンド — Typo — FX05 Blend Invert
概要: 背景と文字色が反転し合う
適用シーン: デザイン性の高い見出し
使い方: 見出しに fx-blend-invert

メリット: 写真の上でも読める
デメリット: –
バリエーション案: –
実装時の注意点: 背景に写真や色があると効果的

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

Typo — FX06 Gold Shine

fx-shine-text

Copy

Link

GOLDEN SHINE

パターン名: 金文字光沢 — Typo — FX06 Gold Shine
概要: 金の光沢が文字面を流れ続ける
適用シーン: 受賞・プレミアム表記
使い方: 見出しに fx-shine-text

メリット: 高級感が1クラス
デメリット: –
バリエーション案: 色味
実装時の注意点: –

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

Typo — FX07 Read Focus

fx-read-focus

Copy

Link

一段落目。画面の中央に来ると明るくなります。

二段落目。読んでいる場所が視覚的に分かります。

三段落目。長い読み物ページに向いています。

四段落目。中央を過ぎるとまた薄くなります。

パターン名: 読中フォーカス — Typo — FX07 Read Focus
概要: 読んでいる段落だけが濃く、他は淡くなる
適用シーン: 長文記事・こだわり文
使い方: 本文の各段落に fx-read-focus

メリット: 読書体験の質が上がる
デメリット: 短文では効果薄
バリエーション案: 淡さ調整
実装時の注意点: 連続する段落に一括付与

使い方: 本文の各段落に fx-read-focus
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

◈ Blanc Nail

Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。

Foundations

ヒーロー
ヘッダー
フッター
ナビゲーション
タイポグラフィ

Content

フィーチャー
スタッツ
コールトゥアクション
レビュー / 推薦
チーム

Business

料金プラン
商品 / EC
アクセス / 営業時間
メニュー (飲食)
コンタクト

UI Components

カードレイアウト
モーダル / アコーディオン
タブ / セグメント
バナー / アラート
SNS

タイポグラフィ · Typography · Blanc Nail

タイポグラフィ

よい設計とは、ユーザーが思考せずに目的を達成できる状態をつくる工芸である。

記憶のかたちを残す、ということについて

Editorial Type Console

Aa

プラットフォーム機能を全面刷新、生成 AI と統合。

NEON SIGN

GLITCH TEXT

反転する見出し

GOLDEN SHINE