ヒーロー · Hero · Blanc Nail
検索…
カタログ 統計
CATALOG › Foundations › Hero
ヒーロー
ファーストビュー。価値提案を 0.3 秒で伝える 30 種の構図。
19
Patterns
Foundations
Group
isValid=0
Verified
CSS
Animation
01
Hero — Dark with Glass Card
hero-dark-glass
⚡ Performance First
速度と精度を、
すべてのプロジェクトに
エンタープライズ向けに最適化された設計。チームの規模に関わらず、ミリ秒単位のレスポンスを実現します。
Live Metrics
99.99%
過去 30 日間の稼働率
⚡ 平均応答 24ms
🔒 SOC 2 Type II 認定
🌍 グローバル CDN 配信
- パターン名: Hero — Dark with Glass Card
- 概要: Dark gradient hero with glass-morphism feature card.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 58% / 42%、推奨コンテンツ幅 1100px、主要ブロック group, columns, column, paragraph, heading, paragraph, buttons, button
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Heroをミニマルに見せる余白重視版 / Heroをリッチに見せるカバー/カード強調版 / Heroをコーポレート向けに整える情報密度高め版 / Heroをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-dark-glass"} /-->
CSS:
.section-hero-dark-glass { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-dark-glass').forEach((el) => el.dataset.ready = 'true');
02
Hero — Gradient Purple
hero-gradient-purple
✨ Next Generation Platform
未来のビジネスを
今、ここから始めよう
最先端のテクノロジーと洗練されたデザインで
あなたのビジネスを次のステージへ。
- パターン名: Hero — Gradient Purple
- 概要: Bold full-width gradient hero with eyebrow, big heading and dual CTAs.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 960px、主要ブロック group, paragraph, heading, paragraph, buttons, button, button
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Heroをミニマルに見せる余白重視版 / Heroをリッチに見せるカバー/カード強調版 / Heroをコーポレート向けに整える情報密度高め版 / Heroをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-gradient-purple"} /-->
CSS:
.section-hero-gradient-purple { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-gradient-purple').forEach((el) => el.dataset.ready = 'true');
03
Hero — Minimal Centered
hero-minimal-centered
— ANNOUNCING v2.0 —
シンプルさの中の
圧倒的なパワー
必要なものだけを、最高の形で。
余計な複雑さを排除した、本物の体験を。
- パターン名: Hero — Minimal Centered
- 概要: Minimalist centered hero with huge typography on white.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, paragraph, heading, paragraph, buttons, button
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Heroをリッチに見せるカバー/カード強調版 / Heroをコーポレート向けに整える情報密度高め版 / Heroをカジュアルに見せるアイコン/ラベル強調版 / Heroをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-minimal-centered"} /-->
CSS:
.section-hero-minimal-centered { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-minimal-centered').forEach((el) => el.dataset.ready = 'true');
04
Hero — Split Image
hero-split-image
🚀 Welcome to a new era
デザインと技術が
出会う場所
私たちは、優れたユーザー体験を生み出すための最先端ツールセットを提供します。あなたのアイデアを、世界中のユーザーへ届けましょう。
- パターン名: Hero — Split Image
- 概要: Two-column hero with copy on the left and image on the right.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 55% / 1px / 45%、推奨コンテンツ幅 1180px、主要ブロック group, columns, column, paragraph, heading, paragraph, buttons, button
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Heroをリッチに見せるカバー/カード強調版 / Heroをコーポレート向けに整える情報密度高め版 / Heroをカジュアルに見せるアイコン/ラベル強調版 / Heroをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-split-image"} /-->
CSS:
.section-hero-split-image { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-split-image').forEach((el) => el.dataset.ready = 'true');
05
Hero — EX01 Zen Minimal Light
hero-ex01-zen-light
— 静けさを、かたちに —
余白が、贅沢になる。
手を動かし、素材と向き合い、丁寧に仕上げる。
その積み重ねだけが届けられる体験があります。
- パターン名: Hero — EX01 Zen Minimal Light
- 概要: Calm Japanese-minimal centered hero on warm paper background with a single CTA.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-ex01-zen-light"} /-->
CSS:
.section-hero-ex01-zen-light { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-ex01-zen-light').forEach((el) => el.dataset.ready = 'true');
06
Hero — EX02 Split with Stats
hero-ex02-split-stats
地域で選ばれて 20 年
確かな技術と、
誠実な仕事を。
初めての方にも分かりやすい説明と、納得いただいてから進める丁寧な対応。地域の皆さまの「困った」に、今日も向き合います。
3,200+
累計対応件数
98%
お客様満足度
20年
地域での実績
- パターン名: Hero — EX02 Split with Stats
- 概要: Split hero: copy left, rounded photo right, three trust stats underneath.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-ex02-split-stats"} /-->
CSS:
.section-hero-ex02-split-stats { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-ex02-split-stats').forEach((el) => el.dataset.ready = 'true');
07
Hero — EX03 Dark Luxe Gold
hero-ex03-dark-gold
SINCE 1932 — 四代目の手仕事
一生に一度を、
一生のものに。
受け継がれてきた技と、現代の感性。
あなただけの一点を、職人がお仕立てします。
- パターン名: Hero — EX03 Dark Luxe Gold
- 概要: Premium dark hero with gold accents, generous spacing and an outline CTA.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-ex03-dark-gold"} /-->
CSS:
.section-hero-ex03-dark-gold { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-ex03-dark-gold').forEach((el) => el.dataset.ready = 'true');
08
Hero — EX04 Centered with Image Below
hero-ex04-image-below
NEW COLLECTION 2026
日常を、すこし特別に。
毎日手に取るものだから、素材も、つくりも、妥協しない。
- パターン名: Hero — EX04 Centered with Image Below
- 概要: Centered launch-style hero with a wide rounded showcase image under the CTAs.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-ex04-image-below"} /-->
CSS:
.section-hero-ex04-image-below { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-ex04-image-below').forEach((el) => el.dataset.ready = 'true');
09
Hero — EX05 Editorial Left
hero-ex05-editorial
ISSUE 14 / SPRING
つくる人の、
言葉と手元。
工房を訪ね、声を聞き、暮らしに寄り添う道具の背景を記録する。読みものから始まる、ものえらびを。
TEXT — 編集部
PHOTO — スタジオ撮影
UPDATED — 毎週金曜
- パターン名: Hero — EX05 Editorial Left
- 概要: Magazine-style left-aligned hero with oversized typography and a meta info row.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-ex05-editorial"} /-->
CSS:
.section-hero-ex05-editorial { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-ex05-editorial').forEach((el) => el.dataset.ready = 'true');
10
Hero — EX06 Salon Pastel
hero-ex06-salon-pastel
Private Salon — 完全予約制
わたしに還る、
90分のご褒美。
肌と髪の状態をカウンセリングで丁寧に見極め、ひとりひとりに合わせた施術をご提案します。
- パターン名: Hero — EX06 Salon Pastel
- 概要: Soft pastel gradient hero for beauty businesses with rounded photo and pill CTAs.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-ex06-salon-pastel"} /-->
CSS:
.section-hero-ex06-salon-pastel { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-ex06-salon-pastel').forEach((el) => el.dataset.ready = 'true');
11
Hero — EX07 Clinic Clean Trust
hero-ex07-clinic-trust
駅徒歩 3 分 ・ 土日も診療
不安に寄り添う、
やさしい医療を。
「聞きやすい」「分かりやすい」を大切に、
納得できる説明と痛みの少ない治療を心がけています。
キッズスペース完備
バリアフリー対応
各種保険診療対応
- パターン名: Hero — EX07 Clinic Clean Trust
- 概要: Clean clinical hero on white and sky blue with reassurance chips under the CTA.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-ex07-clinic-trust"} /-->
CSS:
.section-hero-ex07-clinic-trust { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-ex07-clinic-trust').forEach((el) => el.dataset.ready = 'true');
12
Hero — EX08 Restaurant Mood
hero-ex08-restaurant-mood
季節の食材と、炭火の香り
今日の一皿が、
明日の楽しみになる。
市場から届く旬と、店主の目利き。
カウンター八席だけの、小さな食堂です。
17:30 — 23:00 ／ 日曜・第三月曜 定休
- パターン名: Hero — EX08 Restaurant Mood
- 概要: Atmospheric deep-green dining hero with reservation and menu CTAs plus an hours note.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-ex08-restaurant-mood"} /-->
CSS:
.section-hero-ex08-restaurant-mood { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-ex08-restaurant-mood').forEach((el) => el.dataset.ready = 'true');
13
Hero — EX09 Animated Gradient Glass
hero-ex09-tech-gradient
アイデアを、
その日のうちに形に。
企画から公開まで、ワンチームで伴走します。
最短 2 週間で公開
定額の運用サポート
成果につながる改善提案
- パターン名: Hero — EX09 Animated Gradient Glass
- 概要: Animated gradient hero with a glass info card row for modern digital services.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-ex09-tech-gradient"} /-->
CSS:
.section-hero-ex09-tech-gradient { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-ex09-tech-gradient').forEach((el) => el.dataset.ready = 'true');
14
Hero — EX10 Mono Typographic
hero-ex10-mono-typo
DESIGN
BUILD
DELIVER
Branding / Web / Product
削ぎ落とした表現の中に、ブランドの核を残す。戦略から実装まで、一貫した品質でお届けします。
SCROLL ↓
- パターン名: Hero — EX10 Mono Typographic
- 概要: Stark monochrome typographic hero with offset description column and scroll hint.
- 使用目的: Hero領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hero-ex10-mono-typo"} /-->
CSS:
.section-hero-ex10-mono-typo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-hero-ex10-mono-typo').forEach((el) => el.dataset.ready = 'true');
15
Hero — FX01 Hero Shrink
fx-hero-shrink
- パターン名: ヒーロー縮小 — Hero — FX01 Hero Shrink
- 概要: 通過時にヒーロー画像が縮んで角丸カードになる
- 適用シーン: トップのファーストビュー直下
- 使い方: 画像ブロックに fx-hero-shrink
- メリット: 冒頭の没入→本文への視線移行が滑らか
- デメリット: 直後に本文が必要(退出余白)
- バリエーション案: 縮小率・角丸量
- 実装時の注意点: ページ最上部での使用が前提
使い方: 画像ブロックに fx-hero-shrink
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2
16
Hero — FX02 Zoom Through
fx-zoom-through
- パターン名: ズームスルー — Hero — FX02 Zoom Through
- 概要: 通過中に画像がゆっくり拡大し続ける
- 適用シーン: ヒーロー・章扉
- 使い方: グループに fx-zoom-through(中に画像)
- メリット: 静止画に持続的な生命感
- デメリット: 効果は控えめ(それが上品)
- バリエーション案: 倍率調整
- 実装時の注意点: 高解像度画像推奨
使い方: グループに fx-zoom-through(中に画像)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2
17
Hero — FX03 Ken Burns
fx-kenburns
- パターン名: ケンバーンズ — Hero — FX03 Ken Burns
- 概要: 写真がゆっくりパン+ズームし続ける
- 適用シーン: ヒーロー背景・スライド代替
- 使い方: グループに fx-kenburns(中に画像)
- メリット: 1枚でも飽きない背景に
- デメリット: 常時動くため多用注意
- バリエーション案: パン方向
- 実装時の注意点: 被写体が端に寄った写真向け
使い方: グループに fx-kenburns(中に画像)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2
18
Hero — FX04 Intro Wipe
fx-intro
暗転 → ワイプで開幕
サイト全体に一度だけ掛かる演出のため静的プレビュー。
- パターン名: イントロ暗転ワイプ — Hero — FX04 Intro Wipe
- 概要: ページを開いた瞬間、暗幕が引いて開幕する(サイト全体・初回のみ)
- 適用シーン: トップページの開幕演出
- 使い方: テーマ側でbodyにfx-introを付与(サイト単位の演出。実動作は/fx-demo-baseline/で確認可)
- メリット: ブランドの「幕開け」を演出
- デメリット: 毎回出ると煩わしい(初回のみ推奨)
- バリエーション案: 色・時間
- 実装時の注意点: ここでは静的プレビュー(body級効果のため)
使い方: テーマ側でbodyにfx-introを付与(サイト単位の演出。実動作は/fx-demo-baseline/で確認可)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2
19
Hero — FX05 Intro Counter
fx-intro-count
38%
カウントアップ → 開幕(静的プレビュー)
- パターン名: イントロカウンター — Hero — FX05 Intro Counter
- 概要: 開幕時に%カウンターが回ってから幕が上がる
- 適用シーン: ポートフォリオ・こだわりの強いトップ
- 使い方: テーマ側でbodyにfx-intro-countを付与(実動作は検証済み・38%等の中間値も確認)
- メリット: ローディング風の期待感
- デメリット: 待たせる演出なので賛否あり
- バリエーション案: カウント速度
- 実装時の注意点: ここでは静的プレビュー(body級効果のため)
使い方: テーマ側でbodyにfx-intro-countを付与(実動作は検証済み・38%等の中間値も確認)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2