白蓮堂

ホバー演出 · Hover Interaction · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Motion › Hover Interaction

ホバー演出

マウスオーバーで反応する装飾。カード、ボタン、画像。

70

Patterns

Motion

Group

isValid=0

Verified

CSS

Animation

01

Hover — 4 Animated Button Set

hover-button-set

Copy
Link

ボタン ・ ホバー演出 集

Shine →
Grow ↑
Arrow →
Sunny ☀
  • パターン名: Hover — 4 Animated Button Set
  • 概要: Four buttons with shine / grow / arrow-shift hover effects.
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 720px、主要ブロック group, heading, buttons, button, button, button, button
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hover-button-set"} /-->

CSS:
.section-hover-button-set { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-hover-button-set').forEach((el) => el.dataset.ready = 'true');

02

Hover — 3 Hover Effect Demo

hover-card-demo

Copy
Link

マウスを乗せてみてください

CSS のホバー演出 (.tf-card-hover) を 3 種類 比較

⬆

Lift

少しだけ持ち上がる、定番の演出。

✨

Shine

表面を光が斜めに走るシャイン効果。

↻

Tilt

わずかに 3D 回転する、遊び心のある演出。

  • パターン名: Hover — 3 Hover Effect Demo
  • 概要: Three card-hover effects (Lift / Shine / Tilt) demonstrating tf-card-hover variants.
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px、推奨コンテンツ幅 1080px、主要ブロック group, heading, paragraph, columns, column, group, paragraph, heading
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hover-card-demo"} /-->

CSS:
.section-hover-card-demo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-hover-card-demo').forEach((el) => el.dataset.ready = 'true');

03

Hover — 3 Image Hover Effects

hover-image-zoom

Copy
Link

画像 ・ ズーム ホバー

ズームイン

3D ティルト

フェード ・ オーバーレイ

  • パターン名: Hover — 3 Image Hover Effects
  • 概要: Three image cards with zoom / tilt / fade-overlay hover treatments.
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, heading, columns, column, group, image, paragraph, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hover-image-zoom"} /-->

CSS:
.section-hover-image-zoom { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-hover-image-zoom').forEach((el) => el.dataset.ready = 'true');

04

Hover — 4 Link Hover Styles

hover-link-styles

Copy
Link

テキスト ・ リンク ホバー

  • パターン名: Hover — 4 Link Hover Styles
  • 概要: Four inline link hover styles (underline slide / arrow grow / highlight fill / color shift).
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 640px、主要ブロック group, heading, list, list-item, list-item, list-item, list-item
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/hover-link-styles"} /-->

CSS:
.section-hover-link-styles { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-hover-link-styles').forEach((el) => el.dataset.ready = 'true');

05

Reference Complete — hover-interaction 01 Sticky Entry

reference-complete-hover-interaction-01-sticky-entry-twoe

Copy
Link
SANKOU sampling inspired hero image

Sampled Site

17901 / Twoe

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

詳しく見る
  • パターン名: Reference Complete — hover-interaction 01 Sticky Entry
  • 概要: 参照サンプル再確認から追加したhover-interaction向け部品。固定導線つきの大判ファーストビュー。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 24% / 76%、推奨コンテンツ幅 54683px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hover-interaction-01-sticky-entry-twoe"} /-->

CSS:
.section-reference-complete-hover-interaction-01-sticky-entry-twoe { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hover-interaction-01-sticky-entry-twoe').forEach((el) => el.dataset.ready = 'true');

06

Reference Complete — hover-interaction 02 Editorial Issue

reference-complete-hover-interaction-02-editorial-issue-fumino

Copy
Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

  • 背景を伝える
  • 選ぶ理由を示す
  • 次の行動へ進める
記事を見る
  • パターン名: Reference Complete — hover-interaction 02 Editorial Issue
  • 概要: 参照サンプル再確認から追加したhover-interaction向け部品。雑誌的な見出しと導入文の編集レイアウト。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 18922px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hover-interaction-02-editorial-issue-fumino"} /-->

CSS:
.section-reference-complete-hover-interaction-02-editorial-issue-fumino { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hover-interaction-02-editorial-issue-fumino').forEach((el) => el.dataset.ready = 'true');

07

Reference Complete — hover-interaction 03 Brand Index

reference-complete-hover-interaction-03-brand-index-plaid-alpha

Copy
Link

Card Flow

迷わない比較カード

Plaid Alpha から抽出した、選択を促すカード群。

01

見つける

導線を小さな判断単位に分解します。

02

選ぶ

導線を小さな判断単位に分解します。

03

進む

導線を小さな判断単位に分解します。

  • パターン名: Reference Complete — hover-interaction 03 Brand Index
  • 概要: 参照サンプル再確認から追加したhover-interaction向け部品。複数ブランドやサービスを迷わせず並べる索引。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 18983px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hover-interaction-03-brand-index-plaid-alpha"} /-->

CSS:
.section-reference-complete-hover-interaction-03-brand-index-plaid-alpha { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hover-interaction-03-brand-index-plaid-alpha').forEach((el) => el.dataset.ready = 'true');

08

Reference Complete — hover-interaction 04 Recruit Story

reference-complete-hover-interaction-04-recruit-story-omodakaya

Copy
Link

Split Story

写真と要点で信頼を作る

Omodakaya の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

split layout image
  • パターン名: Reference Complete — hover-interaction 04 Recruit Story
  • 概要: 参照サンプル再確認から追加したhover-interaction向け部品。採用・企業紹介に使える人物/思想の分割構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 18944px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hover-interaction-04-recruit-story-omodakaya"} /-->

CSS:
.section-reference-complete-hover-interaction-04-recruit-story-omodakaya { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hover-interaction-04-recruit-story-omodakaya').forEach((el) => el.dataset.ready = 'true');

09

Reference Complete — hover-interaction 05 Commerce Compare

reference-complete-hover-interaction-05-commerce-compare-michikusa-art

Copy
Link

Collection Selector

Michikusa Art の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

product selector image

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

  • パターン名: Reference Complete — hover-interaction 05 Commerce Compare
  • 概要: 参照サンプル再確認から追加したhover-interaction向け部品。料金・商品・プランを比較しやすい構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 19005px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hover-interaction-05-commerce-compare-michikusa-art"} /-->

CSS:
.section-reference-complete-hover-interaction-05-commerce-compare-michikusa-art { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hover-interaction-05-commerce-compare-michikusa-art').forEach((el) => el.dataset.ready = 'true');

10

Reference Complete — hover-interaction 06 Timeline Proof

reference-complete-hover-interaction-06-timeline-proof-nii-recruit

Copy
Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

  • パターン名: Reference Complete — hover-interaction 06 Timeline Proof
  • 概要: 参照サンプル再確認から追加したhover-interaction向け部品。沿革・導入手順・制作工程の時系列。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 18946px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hover-interaction-06-timeline-proof-nii-recruit"} /-->

CSS:
.section-reference-complete-hover-interaction-06-timeline-proof-nii-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hover-interaction-06-timeline-proof-nii-recruit').forEach((el) => el.dataset.ready = 'true');

11

Reference Complete — hover-interaction 07 Gallery Led

reference-complete-hover-interaction-07-gallery-led-suntory-sic

Copy
Link
gallery primary image
gallery sub image

Detail

gallery sub image
  • パターン名: Reference Complete — hover-interaction 07 Gallery Led
  • 概要: 参照サンプル再確認から追加したhover-interaction向け部品。写真量の多い商材を見せるギャラリー導線。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 19027px、主要ブロック group, columns, column, image, column, image, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hover-interaction-07-gallery-led-suntory-sic"} /-->

CSS:
.section-reference-complete-hover-interaction-07-gallery-led-suntory-sic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hover-interaction-07-gallery-led-suntory-sic').forEach((el) => el.dataset.ready = 'true');

12

Reference Complete — hover-interaction 08 Dashboard Proof

reference-complete-hover-interaction-08-dashboard-proof-shueisha-recruit

Copy
Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

  • パターン名: Reference Complete — hover-interaction 08 Dashboard Proof
  • 概要: 参照サンプル再確認から追加したhover-interaction向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 18988px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hover-interaction-08-dashboard-proof-shueisha-recruit"} /-->

CSS:
.section-reference-complete-hover-interaction-08-dashboard-proof-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hover-interaction-08-dashboard-proof-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');

13

Reference Complete — hover-interaction 09 Contact Ready

reference-complete-hover-interaction-09-contact-ready-jins-holdings

Copy
Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

送信する
  • パターン名: Reference Complete — hover-interaction 09 Contact Ready
  • 概要: 参照サンプル再確認から追加したhover-interaction向け部品。問い合わせ前の入力項目を整理する導線。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 18969px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hover-interaction-09-contact-ready-jins-holdings"} /-->

CSS:
.section-reference-complete-hover-interaction-09-contact-ready-jins-holdings { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hover-interaction-09-contact-ready-jins-holdings').forEach((el) => el.dataset.ready = 'true');

14

Reference Complete — hover-interaction 10 Mobile Rail

reference-complete-hover-interaction-10-mobile-rail-mycampus

Copy
Link

Mycampus

About

Works

Journal

Contact

Reserve
  • パターン名: Reference Complete — hover-interaction 10 Mobile Rail
  • 概要: 参照サンプル再確認から追加したhover-interaction向け部品。スマホ閲覧で要点を縦に追えるレール型。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 19090px、主要ブロック group, columns, column, heading, column, columns, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-hover-interaction-10-mobile-rail-mycampus"} /-->

CSS:
.section-reference-complete-hover-interaction-10-mobile-rail-mycampus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-hover-interaction-10-mobile-rail-mycampus').forEach((el) => el.dataset.ready = 'true');

15

SANKOU100 — 037 Janu

sankou100-037-janu

Copy
Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

  • パターン名: SANKOU100 — 037 Janu
  • 概要: SANKOU! sample 037から抽出したfaq型の商用サイト向け構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 957px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-037-janu"} /-->

CSS:
.section-sankou100-037-janu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-037-janu').forEach((el) => el.dataset.ready = 'true');

16

SANKOU100 — 077 Upvege

sankou100-077-upvege

Copy
Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

  • パターン名: SANKOU100 — 077 Upvege
  • 概要: SANKOU! sample 077から抽出したfaq型の商用サイト向け構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 997px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-077-upvege"} /-->

CSS:
.section-sankou100-077-upvege { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-077-upvege').forEach((el) => el.dataset.ready = 'true');

17

SANKOU Max — hover-interaction 01 Plaid Alpha

sankoumax-hover-interaction-01-plaid-alpha

Copy
Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

  • パターン名: SANKOU Max — hover-interaction 01 Plaid Alpha
  • 概要: SANKOU100 sample setから展開したhover-interaction向けfaq構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5821px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-01-plaid-alpha"} /-->

CSS:
.section-sankoumax-hover-interaction-01-plaid-alpha { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-01-plaid-alpha').forEach((el) => el.dataset.ready = 'true');

18

SANKOU Max — hover-interaction 02 Undimension

sankoumax-hover-interaction-02-undimension

Copy
Link
gallery primary image
gallery sub image

Detail

gallery sub image
  • パターン名: SANKOU Max — hover-interaction 02 Undimension
  • 概要: SANKOU100 sample setから展開したhover-interaction向けgallery構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 6022px、主要ブロック group, columns, column, image, column, image, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-02-undimension"} /-->

CSS:
.section-sankoumax-hover-interaction-02-undimension { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-02-undimension').forEach((el) => el.dataset.ready = 'true');

19

SANKOU Max — hover-interaction 03 Norikura Hanabi

sankoumax-hover-interaction-03-norikura-hanabi

Copy
Link

People Line

person a

Director

person b

Planner

person c

Designer

  • パターン名: SANKOU Max — hover-interaction 03 Norikura Hanabi
  • 概要: SANKOU100 sample setから展開したhover-interaction向けroster構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 6023px、主要ブロック group, heading, columns, column, image, paragraph, column, image
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-03-norikura-hanabi"} /-->

CSS:
.section-sankoumax-hover-interaction-03-norikura-hanabi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-03-norikura-hanabi').forEach((el) => el.dataset.ready = 'true');

20

SANKOU Max — hover-interaction 04 Chugaitoen

sankoumax-hover-interaction-04-chugaitoen

Copy
Link

4904

Chugaitoen

静かな思想を置く

余白、短文、少ない選択肢で印象を残します。

  • パターン名: SANKOU Max — hover-interaction 04 Chugaitoen
  • 概要: SANKOU100 sample setから展開したhover-interaction向けmanifesto構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 5804px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-04-chugaitoen"} /-->

CSS:
.section-sankoumax-hover-interaction-04-chugaitoen { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-04-chugaitoen').forEach((el) => el.dataset.ready = 'true');

21

SANKOU Max — hover-interaction 05 Favtown Wakayama

sankoumax-hover-interaction-05-favtown-wakayama

Copy
Link
SANKOU sampling inspired hero image

Sampled Site

4905 / Favtown Wakayama

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

詳しく見る
  • パターン名: SANKOU Max — hover-interaction 05 Favtown Wakayama
  • 概要: SANKOU100 sample setから展開したhover-interaction向けcover構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 24% / 76%、推奨コンテンツ幅 15695px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-05-favtown-wakayama"} /-->

CSS:
.section-sankoumax-hover-interaction-05-favtown-wakayama { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-05-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');

22

SANKOU Max — hover-interaction 06 Palcloset Fashion

sankoumax-hover-interaction-06-palcloset-fashion

Copy
Link

Split Story

写真と要点で信頼を作る

Palcloset Fashion の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

split layout image
  • パターン名: SANKOU Max — hover-interaction 06 Palcloset Fashion
  • 概要: SANKOU100 sample setから展開したhover-interaction向けsplit構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 5946px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-06-palcloset-fashion"} /-->

CSS:
.section-sankoumax-hover-interaction-06-palcloset-fashion { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-06-palcloset-fashion').forEach((el) => el.dataset.ready = 'true');

23

SANKOU Max — hover-interaction 07 Michikusa Art

sankoumax-hover-interaction-07-michikusa-art

Copy
Link

Card Flow

迷わない比較カード

Michikusa Art から抽出した、選択を促すカード群。

01

見つける

導線を小さな判断単位に分解します。

02

選ぶ

導線を小さな判断単位に分解します。

03

進む

導線を小さな判断単位に分解します。

  • パターン名: SANKOU Max — hover-interaction 07 Michikusa Art
  • 概要: SANKOU100 sample setから展開したhover-interaction向けcards構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5987px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-07-michikusa-art"} /-->

CSS:
.section-sankoumax-hover-interaction-07-michikusa-art { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-07-michikusa-art').forEach((el) => el.dataset.ready = 'true');

24

SANKOU Max — hover-interaction 08 Tenten

sankoumax-hover-interaction-08-tenten

Copy
Link

Collage

素材感を重ねる

写真、番号、短文をずらして一枚の編集面にします。

collage image a
collage image b

4908

  • パターン名: SANKOU Max — hover-interaction 08 Tenten
  • 概要: SANKOU100 sample setから展開したhover-interaction向けcollage構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 34% / 36% / 1px、推奨コンテンツ幅 6028px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-08-tenten"} /-->

CSS:
.section-sankoumax-hover-interaction-08-tenten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-08-tenten').forEach((el) => el.dataset.ready = 'true');

25

SANKOU Max — hover-interaction 09 Unipos

sankoumax-hover-interaction-09-unipos

Copy
Link

Unipos

About

Works

Journal

Contact

Reserve
  • パターン名: SANKOU Max — hover-interaction 09 Unipos
  • 概要: SANKOU100 sample setから展開したhover-interaction向けrail構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 6089px、主要ブロック group, columns, column, heading, column, columns, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-09-unipos"} /-->

CSS:
.section-sankoumax-hover-interaction-09-unipos { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-09-unipos').forEach((el) => el.dataset.ready = 'true');

26

SANKOU Max — hover-interaction 10 Trail Inc

sankoumax-hover-interaction-10-trail-inc

Copy
Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

  • 背景を伝える
  • 選ぶ理由を示す
  • 次の行動へ進める
記事を見る
  • パターン名: SANKOU Max — hover-interaction 10 Trail Inc
  • 概要: SANKOU100 sample setから展開したhover-interaction向けeditorial構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 5930px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-10-trail-inc"} /-->

CSS:
.section-sankoumax-hover-interaction-10-trail-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-10-trail-inc').forEach((el) => el.dataset.ready = 'true');

27

SANKOU Max — hover-interaction 11 Applebase

sankoumax-hover-interaction-11-applebase

Copy
Link

Collection Selector

Applebase の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

product selector image

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

  • パターン名: SANKOU Max — hover-interaction 11 Applebase
  • 概要: SANKOU100 sample setから展開したhover-interaction向けproduct構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 6011px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-11-applebase"} /-->

CSS:
.section-sankoumax-hover-interaction-11-applebase { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-11-applebase').forEach((el) => el.dataset.ready = 'true');

28

SANKOU Max — hover-interaction 12 Meisei Es

sankoumax-hover-interaction-12-meisei-es

Copy
Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

  • パターン名: SANKOU Max — hover-interaction 12 Meisei Es
  • 概要: SANKOU100 sample setから展開したhover-interaction向けtimeline構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5952px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-12-meisei-es"} /-->

CSS:
.section-sankoumax-hover-interaction-12-meisei-es { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-12-meisei-es').forEach((el) => el.dataset.ready = 'true');

29

SANKOU Max — hover-interaction 13 Unicell

sankoumax-hover-interaction-13-unicell

Copy
Link

数字で納得させる

33%

改善率

11分

短縮

34491

導入数

  • パターン名: SANKOU Max — hover-interaction 13 Unicell
  • 概要: SANKOU100 sample setから展開したhover-interaction向けstats構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5873px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-13-unicell"} /-->

CSS:
.section-sankoumax-hover-interaction-13-unicell { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-13-unicell').forEach((el) => el.dataset.ready = 'true');

30

SANKOU Max — hover-interaction 14 Uki Editions

sankoumax-hover-interaction-14-uki-editions

Copy
Link

Contact

次の相談先を明確にする

電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。

Tel

Form

Map

contact image
  • パターン名: SANKOU Max — hover-interaction 14 Uki Editions
  • 概要: SANKOU100 sample setから展開したhover-interaction向けcontact構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 56% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 5994px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-14-uki-editions"} /-->

CSS:
.section-sankoumax-hover-interaction-14-uki-editions { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-14-uki-editions').forEach((el) => el.dataset.ready = 'true');

31

SANKOU Max — hover-interaction 15 Kikyougaoka

sankoumax-hover-interaction-15-kikyougaoka

Copy
Link

Kikyougaoka

商用サイトの締めに必要な主要リンクを整理します。

  • About
  • Service
  • Works
  • News
  • Recruit
  • Contact

Sample 4915

  • パターン名: SANKOU Max — hover-interaction 15 Kikyougaoka
  • 概要: SANKOU100 sample setから展開したhover-interaction向けfooter構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 6035px、主要ブロック group, columns, column, heading, paragraph, column, list, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-15-kikyougaoka"} /-->

CSS:
.section-sankoumax-hover-interaction-15-kikyougaoka { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-15-kikyougaoka').forEach((el) => el.dataset.ready = 'true');

32

SANKOU Max — hover-interaction 16 J Security

sankoumax-hover-interaction-16-j-security

Copy
Link

NEWS

J Security から抽出した告知導線。重要なお知らせを短く表示します。

確認する
  • パターン名: SANKOU Max — hover-interaction 16 J Security
  • 概要: SANKOU100 sample setから展開したhover-interaction向けalert構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 5996px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-16-j-security"} /-->

CSS:
.section-sankoumax-hover-interaction-16-j-security { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-16-j-security').forEach((el) => el.dataset.ready = 'true');

33

SANKOU Max — hover-interaction 17 Serious Ceramic

sankoumax-hover-interaction-17-serious-ceramic

Copy
Link

Access

迷わないアクセス案内

01

駅を固定

02

目印を指定

03

入口を明示

  • パターン名: SANKOU Max — hover-interaction 17 Serious Ceramic
  • 概要: SANKOU100 sample setから展開したhover-interaction向けmap構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5957px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-17-serious-ceramic"} /-->

CSS:
.section-sankoumax-hover-interaction-17-serious-ceramic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-17-serious-ceramic').forEach((el) => el.dataset.ready = 'true');

34

SANKOU Max — hover-interaction 18 Tsumari Chamame

sankoumax-hover-interaction-18-tsumari-chamame

Copy
Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

送信する
  • パターン名: SANKOU Max — hover-interaction 18 Tsumari Chamame
  • 概要: SANKOU100 sample setから展開したhover-interaction向けform構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 5978px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-18-tsumari-chamame"} /-->

CSS:
.section-sankoumax-hover-interaction-18-tsumari-chamame { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-18-tsumari-chamame').forEach((el) => el.dataset.ready = 'true');

35

SANKOU Max — hover-interaction 19 Notahotel Architects

sankoumax-hover-interaction-19-notahotel-architects

Copy
Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

商品、採用、サービス紹介で情報量を抑えて見せるタブ型。

  • パターン名: SANKOU Max — hover-interaction 19 Notahotel Architects
  • 概要: SANKOU100 sample setから展開したhover-interaction向けtabs構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 5899px、主要ブロック group, group, columns, column, group, paragraph, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-19-notahotel-architects"} /-->

CSS:
.section-sankoumax-hover-interaction-19-notahotel-architects { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-19-notahotel-architects').forEach((el) => el.dataset.ready = 'true');

36

SANKOU Max — hover-interaction 20 Montblanc Pictures

sankoumax-hover-interaction-20-montblanc-pictures

Copy
Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

  • パターン名: SANKOU Max — hover-interaction 20 Montblanc Pictures
  • 概要: SANKOU100 sample setから展開したhover-interaction向けdashboard構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 6000px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-20-montblanc-pictures"} /-->

CSS:
.section-sankoumax-hover-interaction-20-montblanc-pictures { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-20-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');

37

SANKOU Max — hover-interaction 21 Tattoo Rays

sankoumax-hover-interaction-21-tattoo-rays

Copy
Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

  • パターン名: SANKOU Max — hover-interaction 21 Tattoo Rays
  • 概要: SANKOU100 sample setから展開したhover-interaction向けfaq構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5841px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-21-tattoo-rays"} /-->

CSS:
.section-sankoumax-hover-interaction-21-tattoo-rays { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-21-tattoo-rays').forEach((el) => el.dataset.ready = 'true');

38

SANKOU Max — hover-interaction 22 Rim Jins

sankoumax-hover-interaction-22-rim-jins

Copy
Link
gallery primary image
gallery sub image

Detail

gallery sub image
  • パターン名: SANKOU Max — hover-interaction 22 Rim Jins
  • 概要: SANKOU100 sample setから展開したhover-interaction向けgallery構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 6042px、主要ブロック group, columns, column, image, column, image, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-22-rim-jins"} /-->

CSS:
.section-sankoumax-hover-interaction-22-rim-jins { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-22-rim-jins').forEach((el) => el.dataset.ready = 'true');

39

SANKOU Max — hover-interaction 23 Obunko

sankoumax-hover-interaction-23-obunko

Copy
Link

People Line

person a

Director

person b

Planner

person c

Designer

  • パターン名: SANKOU Max — hover-interaction 23 Obunko
  • 概要: SANKOU100 sample setから展開したhover-interaction向けroster構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 6043px、主要ブロック group, heading, columns, column, image, paragraph, column, image
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-23-obunko"} /-->

CSS:
.section-sankoumax-hover-interaction-23-obunko { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-23-obunko').forEach((el) => el.dataset.ready = 'true');

40

SANKOU Max — hover-interaction 24 Pronets Recruit

sankoumax-hover-interaction-24-pronets-recruit

Copy
Link

4924

Pronets Recruit

静かな思想を置く

余白、短文、少ない選択肢で印象を残します。

  • パターン名: SANKOU Max — hover-interaction 24 Pronets Recruit
  • 概要: SANKOU100 sample setから展開したhover-interaction向けmanifesto構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 5824px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-24-pronets-recruit"} /-->

CSS:
.section-sankoumax-hover-interaction-24-pronets-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-24-pronets-recruit').forEach((el) => el.dataset.ready = 'true');

41

SANKOU Max — hover-interaction 25 Glanta

sankoumax-hover-interaction-25-glanta

Copy
Link
SANKOU sampling inspired hero image

Sampled Site

4925 / Glanta

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

詳しく見る
  • パターン名: SANKOU Max — hover-interaction 25 Glanta
  • 概要: SANKOU100 sample setから展開したhover-interaction向けcover構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 26% / 74%、推奨コンテンツ幅 15755px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-25-glanta"} /-->

CSS:
.section-sankoumax-hover-interaction-25-glanta { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-25-glanta').forEach((el) => el.dataset.ready = 'true');

42

SANKOU Max — hover-interaction 26 Tashi Portfolio

sankoumax-hover-interaction-26-tashi-portfolio

Copy
Link

Split Story

写真と要点で信頼を作る

Tashi Portfolio の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

split layout image
  • パターン名: SANKOU Max — hover-interaction 26 Tashi Portfolio
  • 概要: SANKOU100 sample setから展開したhover-interaction向けsplit構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 5966px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-26-tashi-portfolio"} /-->

CSS:
.section-sankoumax-hover-interaction-26-tashi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-26-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');

43

SANKOU Max — hover-interaction 27 Kitanohashi

sankoumax-hover-interaction-27-kitanohashi

Copy
Link

Card Flow

迷わない比較カード

Kitanohashi から抽出した、選択を促すカード群。

01

見つける

導線を小さな判断単位に分解します。

02

選ぶ

導線を小さな判断単位に分解します。

03

進む

導線を小さな判断単位に分解します。

  • パターン名: SANKOU Max — hover-interaction 27 Kitanohashi
  • 概要: SANKOU100 sample setから展開したhover-interaction向けcards構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 6007px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-27-kitanohashi"} /-->

CSS:
.section-sankoumax-hover-interaction-27-kitanohashi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-27-kitanohashi').forEach((el) => el.dataset.ready = 'true');

44

SANKOU Max — hover-interaction 28 Morinosato Clinic

sankoumax-hover-interaction-28-morinosato-clinic

Copy
Link

Collage

素材感を重ねる

写真、番号、短文をずらして一枚の編集面にします。

collage image a
collage image b

4928

  • パターン名: SANKOU Max — hover-interaction 28 Morinosato Clinic
  • 概要: SANKOU100 sample setから展開したhover-interaction向けcollage構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 1px / 36% / 34% / 1px、推奨コンテンツ幅 6048px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-28-morinosato-clinic"} /-->

CSS:
.section-sankoumax-hover-interaction-28-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-28-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');

45

SANKOU Max — hover-interaction 29 Asuzac Highschool

sankoumax-hover-interaction-29-asuzac-highschool

Copy
Link

Asuzac

About

Works

Journal

Contact

Reserve
  • パターン名: SANKOU Max — hover-interaction 29 Asuzac Highschool
  • 概要: SANKOU100 sample setから展開したhover-interaction向けrail構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 6109px、主要ブロック group, columns, column, heading, column, columns, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-29-asuzac-highschool"} /-->

CSS:
.section-sankoumax-hover-interaction-29-asuzac-highschool { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-29-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');

46

SANKOU Max — hover-interaction 30 Junni Newyear

sankoumax-hover-interaction-30-junni-newyear

Copy
Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

  • 背景を伝える
  • 選ぶ理由を示す
  • 次の行動へ進める
記事を見る
  • パターン名: SANKOU Max — hover-interaction 30 Junni Newyear
  • 概要: SANKOU100 sample setから展開したhover-interaction向けeditorial構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 5950px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-30-junni-newyear"} /-->

CSS:
.section-sankoumax-hover-interaction-30-junni-newyear { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-30-junni-newyear').forEach((el) => el.dataset.ready = 'true');

47

SANKOU Max — hover-interaction 31 Mizota Ks

sankoumax-hover-interaction-31-mizota-ks

Copy
Link

Collection Selector

Mizota Ks の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

product selector image

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

  • パターン名: SANKOU Max — hover-interaction 31 Mizota Ks
  • 概要: SANKOU100 sample setから展開したhover-interaction向けproduct構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 6031px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-31-mizota-ks"} /-->

CSS:
.section-sankoumax-hover-interaction-31-mizota-ks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-31-mizota-ks').forEach((el) => el.dataset.ready = 'true');

48

SANKOU Max — hover-interaction 32 Nissan Career

sankoumax-hover-interaction-32-nissan-career

Copy
Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

  • パターン名: SANKOU Max — hover-interaction 32 Nissan Career
  • 概要: SANKOU100 sample setから展開したhover-interaction向けtimeline構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5972px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-32-nissan-career"} /-->

CSS:
.section-sankoumax-hover-interaction-32-nissan-career { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-32-nissan-career').forEach((el) => el.dataset.ready = 'true');

49

SANKOU Max — hover-interaction 33 Shueisha Recruit

sankoumax-hover-interaction-33-shueisha-recruit

Copy
Link

数字で納得させる

53%

改善率

4分

短縮

34631

導入数

  • パターン名: SANKOU Max — hover-interaction 33 Shueisha Recruit
  • 概要: SANKOU100 sample setから展開したhover-interaction向けstats構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5893px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-33-shueisha-recruit"} /-->

CSS:
.section-sankoumax-hover-interaction-33-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-33-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');

50

SANKOU Max — hover-interaction 34 Sanu Weekday

sankoumax-hover-interaction-34-sanu-weekday

Copy
Link

Contact

次の相談先を明確にする

電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。

Tel

Form

Map

contact image
  • パターン名: SANKOU Max — hover-interaction 34 Sanu Weekday
  • 概要: SANKOU100 sample setから展開したhover-interaction向けcontact構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 52% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 6014px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-34-sanu-weekday"} /-->

CSS:
.section-sankoumax-hover-interaction-34-sanu-weekday { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-34-sanu-weekday').forEach((el) => el.dataset.ready = 'true');

51

SANKOU Max — hover-interaction 35 Newspicks Business

sankoumax-hover-interaction-35-newspicks-business

Copy
Link

Newspicks Business

商用サイトの締めに必要な主要リンクを整理します。

  • About
  • Service
  • Works
  • News
  • Recruit
  • Contact

Sample 4935

  • パターン名: SANKOU Max — hover-interaction 35 Newspicks Business
  • 概要: SANKOU100 sample setから展開したhover-interaction向けfooter構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 6055px、主要ブロック group, columns, column, heading, paragraph, column, list, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-35-newspicks-business"} /-->

CSS:
.section-sankoumax-hover-interaction-35-newspicks-business { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-35-newspicks-business').forEach((el) => el.dataset.ready = 'true');

52

SANKOU Max — hover-interaction 36 Miyakawa Lab

sankoumax-hover-interaction-36-miyakawa-lab

Copy
Link

NEWS

Miyakawa Lab から抽出した告知導線。重要なお知らせを短く表示します。

確認する
  • パターン名: SANKOU Max — hover-interaction 36 Miyakawa Lab
  • 概要: SANKOU100 sample setから展開したhover-interaction向けalert構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 6016px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-36-miyakawa-lab"} /-->

CSS:
.section-sankoumax-hover-interaction-36-miyakawa-lab { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-36-miyakawa-lab').forEach((el) => el.dataset.ready = 'true');

53

SANKOU Max — hover-interaction 37 Matsuo Komuten

sankoumax-hover-interaction-37-matsuo-komuten

Copy
Link

Access

迷わないアクセス案内

01

駅を固定

02

目印を指定

03

入口を明示

  • パターン名: SANKOU Max — hover-interaction 37 Matsuo Komuten
  • 概要: SANKOU100 sample setから展開したhover-interaction向けmap構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5977px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-37-matsuo-komuten"} /-->

CSS:
.section-sankoumax-hover-interaction-37-matsuo-komuten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-37-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');

54

SANKOU Max — hover-interaction 38 Yokohama Timberwharf

sankoumax-hover-interaction-38-yokohama-timberwharf

Copy
Link

Form

入力前に安心させる

フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。

お名前

メール

相談内容

送信する
  • パターン名: SANKOU Max — hover-interaction 38 Yokohama Timberwharf
  • 概要: SANKOU100 sample setから展開したhover-interaction向けform構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 5998px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-38-yokohama-timberwharf"} /-->

CSS:
.section-sankoumax-hover-interaction-38-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-38-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');

55

SANKOU Max — hover-interaction 39 Janu

sankoumax-hover-interaction-39-janu

Copy
Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

商品、採用、サービス紹介で情報量を抑えて見せるタブ型。

  • パターン名: SANKOU Max — hover-interaction 39 Janu
  • 概要: SANKOU100 sample setから展開したhover-interaction向けtabs構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 5919px、主要ブロック group, group, columns, column, group, paragraph, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-39-janu"} /-->

CSS:
.section-sankoumax-hover-interaction-39-janu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-39-janu').forEach((el) => el.dataset.ready = 'true');

56

SANKOU Max — hover-interaction 40 Daimatsu

sankoumax-hover-interaction-40-daimatsu

Copy
Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

運用画面の状態をコンパクトに整理します。

  • パターン名: SANKOU Max — hover-interaction 40 Daimatsu
  • 概要: SANKOU100 sample setから展開したhover-interaction向けdashboard構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 6020px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-40-daimatsu"} /-->

CSS:
.section-sankoumax-hover-interaction-40-daimatsu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-40-daimatsu').forEach((el) => el.dataset.ready = 'true');

57

SANKOU Max — hover-interaction 41 Omotesando Ortho

sankoumax-hover-interaction-41-omotesando-ortho

Copy
Link

FAQ

不安を先回りして解消する

予約できますか？

回答は短く、判断に必要な情報だけを表示します。

費用はどれくらい？

回答は短く、判断に必要な情報だけを表示します。

相談だけでも可能？

回答は短く、判断に必要な情報だけを表示します。

  • パターン名: SANKOU Max — hover-interaction 41 Omotesando Ortho
  • 概要: SANKOU100 sample setから展開したhover-interaction向けfaq構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5861px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-41-omotesando-ortho"} /-->

CSS:
.section-sankoumax-hover-interaction-41-omotesando-ortho { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-41-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');

58

SANKOU Max — hover-interaction 42 Dodasports

sankoumax-hover-interaction-42-dodasports

Copy
Link
gallery primary image
gallery sub image

Detail

gallery sub image
  • パターン名: SANKOU Max — hover-interaction 42 Dodasports
  • 概要: SANKOU100 sample setから展開したhover-interaction向けgallery構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 6062px、主要ブロック group, columns, column, image, column, image, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-42-dodasports"} /-->

CSS:
.section-sankoumax-hover-interaction-42-dodasports { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-42-dodasports').forEach((el) => el.dataset.ready = 'true');

59

SANKOU Max — hover-interaction 43 Ja Aichi Recruit

sankoumax-hover-interaction-43-ja-aichi-recruit

Copy
Link

People Line

person a

Director

person b

Planner

person c

Designer

  • パターン名: SANKOU Max — hover-interaction 43 Ja Aichi Recruit
  • 概要: SANKOU100 sample setから展開したhover-interaction向けroster構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 6063px、主要ブロック group, heading, columns, column, image, paragraph, column, image
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-43-ja-aichi-recruit"} /-->

CSS:
.section-sankoumax-hover-interaction-43-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-43-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');

60

SANKOU Max — hover-interaction 44 Kiyasuku

sankoumax-hover-interaction-44-kiyasuku

Copy
Link

4944

Kiyasuku

静かな思想を置く

余白、短文、少ない選択肢で印象を残します。

  • パターン名: SANKOU Max — hover-interaction 44 Kiyasuku
  • 概要: SANKOU100 sample setから展開したhover-interaction向けmanifesto構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 5844px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-44-kiyasuku"} /-->

CSS:
.section-sankoumax-hover-interaction-44-kiyasuku { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-44-kiyasuku').forEach((el) => el.dataset.ready = 'true');

61

SANKOU Max — hover-interaction 45 Hirono Recruit

sankoumax-hover-interaction-45-hirono-recruit

Copy
Link
SANKOU sampling inspired hero image

Sampled Site

4945 / Hirono Recruit

商用サイトの入口を強くする

大判写真、短い説明、明確なCTAを一画面に圧縮します。

詳しく見る
  • パターン名: SANKOU Max — hover-interaction 45 Hirono Recruit
  • 概要: SANKOU100 sample setから展開したhover-interaction向けcover構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 28% / 72%、推奨コンテンツ幅 15815px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-45-hirono-recruit"} /-->

CSS:
.section-sankoumax-hover-interaction-45-hirono-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-45-hirono-recruit').forEach((el) => el.dataset.ready = 'true');

62

SANKOU Max — hover-interaction 46 Ichizenbooks

sankoumax-hover-interaction-46-ichizenbooks

Copy
Link

Split Story

写真と要点で信頼を作る

Ichizenbooks の構成傾向を、事業説明に使いやすい分割面へ抽象化。

Concept

Proof

Action

split layout image
  • パターン名: SANKOU Max — hover-interaction 46 Ichizenbooks
  • 概要: SANKOU100 sample setから展開したhover-interaction向けsplit構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 5986px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-46-ichizenbooks"} /-->

CSS:
.section-sankoumax-hover-interaction-46-ichizenbooks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-46-ichizenbooks').forEach((el) => el.dataset.ready = 'true');

63

SANKOU Max — hover-interaction 47 Mec Residence Recruit

sankoumax-hover-interaction-47-mec-residence-recruit

Copy
Link

Card Flow

迷わない比較カード

Mec Residence Recruit から抽出した、選択を促すカード群。

01

見つける

導線を小さな判断単位に分解します。

02

選ぶ

導線を小さな判断単位に分解します。

03

進む

導線を小さな判断単位に分解します。

  • パターン名: SANKOU Max — hover-interaction 47 Mec Residence Recruit
  • 概要: SANKOU100 sample setから展開したhover-interaction向けcards構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 6027px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-47-mec-residence-recruit"} /-->

CSS:
.section-sankoumax-hover-interaction-47-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-47-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');

64

SANKOU Max — hover-interaction 48 Greenpark Santo

sankoumax-hover-interaction-48-greenpark-santo

Copy
Link

Collage

素材感を重ねる

写真、番号、短文をずらして一枚の編集面にします。

collage image a
collage image b

4948

  • パターン名: SANKOU Max — hover-interaction 48 Greenpark Santo
  • 概要: SANKOU100 sample setから展開したhover-interaction向けcollage構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 38% / 32% / 1px、推奨コンテンツ幅 6068px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-48-greenpark-santo"} /-->

CSS:
.section-sankoumax-hover-interaction-48-greenpark-santo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-48-greenpark-santo').forEach((el) => el.dataset.ready = 'true');

65

SANKOU Max — hover-interaction 49 Land Sapporo

sankoumax-hover-interaction-49-land-sapporo

Copy
Link

Land

About

Works

Journal

Contact

Reserve
  • パターン名: SANKOU Max — hover-interaction 49 Land Sapporo
  • 概要: SANKOU100 sample setから展開したhover-interaction向けrail構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 6129px、主要ブロック group, columns, column, heading, column, columns, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-49-land-sapporo"} /-->

CSS:
.section-sankoumax-hover-interaction-49-land-sapporo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-49-land-sapporo').forEach((el) => el.dataset.ready = 'true');

66

SANKOU Max — hover-interaction 50 Tokachi Fruits

sankoumax-hover-interaction-50-tokachi-fruits

Copy
Link

Editorial

読み物のように理解させる

長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。

  • 背景を伝える
  • 選ぶ理由を示す
  • 次の行動へ進める
記事を見る
  • パターン名: SANKOU Max — hover-interaction 50 Tokachi Fruits
  • 概要: SANKOU100 sample setから展開したhover-interaction向けeditorial構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 5970px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-50-tokachi-fruits"} /-->

CSS:
.section-sankoumax-hover-interaction-50-tokachi-fruits { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-50-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');

67

SANKOU Max — hover-interaction 51 Echitora

sankoumax-hover-interaction-51-echitora

Copy
Link

Collection Selector

Echitora の商品導線を、中央ロゴと選択チップへ抽象化。

Line 01

Line 02

Line 03

product selector image

Lineup

選びやすい商品導線

代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。

Featured

Use case

Detail

  • パターン名: SANKOU Max — hover-interaction 51 Echitora
  • 概要: SANKOU100 sample setから展開したhover-interaction向けproduct構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 6051px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをミニマルに見せる余白重視版 / Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-51-echitora"} /-->

CSS:
.section-sankoumax-hover-interaction-51-echitora { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-51-echitora').forEach((el) => el.dataset.ready = 'true');

68

SANKOU Max — hover-interaction 52 Megamis

sankoumax-hover-interaction-52-megamis

Copy
Link

Journey

体験の流れを一列で見せる

STEP 1

出会う

行動の順番を短く示します。

STEP 2

試す

行動の順番を短く示します。

STEP 3

続ける

行動の順番を短く示します。

  • パターン名: SANKOU Max — hover-interaction 52 Megamis
  • 概要: SANKOU100 sample setから展開したhover-interaction向けtimeline構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5992px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-52-megamis"} /-->

CSS:
.section-sankoumax-hover-interaction-52-megamis { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-52-megamis').forEach((el) => el.dataset.ready = 'true');

69

SANKOU Max — hover-interaction 53 Kagami

sankoumax-hover-interaction-53-kagami

Copy
Link

数字で納得させる

73%

改善率

6分

短縮

34771

導入数

  • パターン名: SANKOU Max — hover-interaction 53 Kagami
  • 概要: SANKOU100 sample setから展開したhover-interaction向けstats構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 5913px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-53-kagami"} /-->

CSS:
.section-sankoumax-hover-interaction-53-kagami { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-53-kagami').forEach((el) => el.dataset.ready = 'true');

70

SANKOU Max — hover-interaction 54 Antscr

sankoumax-hover-interaction-54-antscr

Copy
Link

Contact

次の相談先を明確にする

電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。

Tel

Form

Map

contact image
  • パターン名: SANKOU Max — hover-interaction 54 Antscr
  • 概要: SANKOU100 sample setから展開したhover-interaction向けcontact構成。
  • 使用目的: Hover Interaction領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 複数カラムで情報を分割する構造、幅配分 56% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 6034px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Hover Interactionをリッチに見せるカバー/カード強調版 / Hover Interactionをコーポレート向けに整える情報密度高め版 / Hover Interactionをカジュアルに見せるアイコン/ラベル強調版 / Hover Interactionをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-hover-interaction-54-antscr"} /-->

CSS:
.section-sankoumax-hover-interaction-54-antscr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-hover-interaction-54-antscr').forEach((el) => el.dataset.ready = 'true');

← Previous

Scroll Animation

スクロール演出

←

Next →

Gradient / Glass

グラデ / ガラス

→

◈ Blanc Nail

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

Foundations

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

Content

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

Business

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

UI Components

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

© 2026 Blanc Nail · Built with WordPress + Block Editor v1.0 · isValid=0