検索…

カタログ統計

CATALOG › Expression › Media Rich

メディアリッチ

パララックス、デュオトーン、マーキー、横スクロール。動きのある表現。

Patterns

Expression

Group

isValid=0

Verified

CSS

Animation

Media — EX01 Parallax Hero

media-rich-ex01-parallax-hero

Copy

Link

OUTDOOR SAUNA FIELD

森ごと、ととのう。

湖畔のプライベートサウナ。スクロールしても、景色はここに残ります。

予約カレンダーを見る

パターン名: Media — EX01 Parallax Hero
概要: Fixed-background cover hero with center copy and button.
使用目的: Media Rich領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/media-rich-ex01-parallax-hero"} /-->

CSS:
.section-media-rich-ex01-parallax-hero { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-media-rich-ex01-parallax-hero').forEach((el) => el.dataset.ready = 'true');

Media — EX02 Duotone Recruit Split

media-rich-ex02-duotone-split

Copy

Link

RECRUIT 2027

一生ものの、
仕事を選ぼう。

配属ガチャ、なし。手を挙げた人から、やりたい仕事へ。説明会は毎週金曜オンライン開催です。

パターン名: Media — EX02 Duotone Recruit Split
概要: Blue duotone photo beside a dark message column.
使用目的: Media Rich領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/media-rich-ex02-duotone-split"} /-->

CSS:
.section-media-rich-ex02-duotone-split { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-media-rich-ex02-duotone-split').forEach((el) => el.dataset.ready = 'true');

Media — EX03 Duotone Photo Cards

media-rich-ex03-duotone-cards

Copy

Link

設計チーム

図面の向こうの暮らしまで描く 6 名。

施工チーム

現場歴平均 18 年の腕利き 11 名。

アフターチーム

引き渡し後 10 年を見守る 4 名。

パターン名: Media — EX03 Duotone Photo Cards
概要: Three lift-on-hover cards with duotone images.
使用目的: Media Rich領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/media-rich-ex03-duotone-cards"} /-->

CSS:
.section-media-rich-ex03-duotone-cards { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-media-rich-ex03-duotone-cards').forEach((el) => el.dataset.ready = 'true');

Media — EX04 Marquee Logo Strip

media-rich-ex04-marquee-logos

Copy

Link

YAMATO WORKS

aoba foods

KITAYAMA 建設

双葉電業

MARU and CO.

ひかり印刷

YAMATO WORKS

aoba foods

KITAYAMA 建設

双葉電業

MARU and CO.

ひかり印刷

パターン名: Media — EX04 Marquee Logo Strip
概要: Endless scrolling text-logo strip. Edit both repeated sets to keep the loop seamless.
使用目的: Media Rich領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/media-rich-ex04-marquee-logos"} /-->

CSS:
.section-media-rich-ex04-marquee-logos { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-media-rich-ex04-marquee-logos').forEach((el) => el.dataset.ready = 'true');

Media — EX05 Snap Scroll Gallery

media-rich-ex05-snap-gallery

Copy

Link

客室ギャラリー

→ スワイプでご覧いただけます

和洋室「つき」・定員 4 名

露天風呂つき離れ「ほし」・定員 2 名

炉端の食事処・全席個室

檜の大浴場・朝 5 時から入浴可

パターン名: Media — EX05 Snap Scroll Gallery
概要: Horizontal swipe gallery with captions, CSS scroll snap only.
使用目的: Media Rich領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/media-rich-ex05-snap-gallery"} /-->

CSS:
.section-media-rich-ex05-snap-gallery { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-media-rich-ex05-snap-gallery').forEach((el) => el.dataset.ready = 'true');

Media — EX06 Parallax Quote Band

media-rich-ex06-parallax-quote

Copy

Link

畑は、嘘をつかない。
手をかけた分だけ、味になる。

— 二代目園主・桃井治

パターン名: Media — EX06 Parallax Quote Band
概要: Short fixed-background band with a single quote.
使用目的: Media Rich領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/media-rich-ex06-parallax-quote"} /-->

CSS:
.section-media-rich-ex06-parallax-quote { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-media-rich-ex06-parallax-quote').forEach((el) => el.dataset.ready = 'true');

Media — EX07 Duotone CTA Banner

media-rich-ex07-duotone-banner

Copy

Link

焙煎見学ツアー、はじめました。

毎週土曜 11 時・試飲つき 45 分・参加無料(要予約)

見学を予約する

パターン名: Media — EX07 Duotone CTA Banner
概要: Warm duotone image with overlapping CTA card.
使用目的: Media Rich領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/media-rich-ex07-duotone-banner"} /-->

CSS:
.section-media-rich-ex07-duotone-banner { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-media-rich-ex07-duotone-banner').forEach((el) => el.dataset.ready = 'true');

Media — EX08 Marquee Word Band

media-rich-ex08-marquee-words

Copy

Link

WE ARE HIRING

✳

中途採用通年募集

✳

WE ARE HIRING

✳

中途採用通年募集

✳

パターン名: Media — EX08 Marquee Word Band
概要: Large scrolling recruiting words. Edit both repeated sets to keep the loop seamless.
使用目的: Media Rich領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/media-rich-ex08-marquee-words"} /-->

CSS:
.section-media-rich-ex08-marquee-words { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-media-rich-ex08-marquee-words').forEach((el) => el.dataset.ready = 'true');

Media — EX09 Snap Product Row

media-rich-ex09-snap-products

Copy

Link

今週の新作

ナラ材スツール

¥18,700

拭き漆の丸盆

¥9,350

山桜のバターナイフ

¥2,420

粉引きの飯椀

¥4,180

パターン名: Media — EX09 Snap Product Row
概要: Horizontally snapping product cards with prices.
使用目的: Media Rich領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/media-rich-ex09-snap-products"} /-->

CSS:
.section-media-rich-ex09-snap-products { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-media-rich-ex09-snap-products').forEach((el) => el.dataset.ready = 'true');

Media — EX10 Grain Gradient Hero

media-rich-ex10-grain-gradient

Copy

Link

DIGITAL SHOWCASE 2026

つくる人の、祭典。

9/12 — 9/14 ・例町コンベンションホール・入場無料

パターン名: Media — EX10 Grain Gradient Hero
概要: Gradient cover with subtle noise overlay texture.
使用目的: Media Rich領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/media-rich-ex10-grain-gradient"} /-->

CSS:
.section-media-rich-ex10-grain-gradient { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-media-rich-ex10-grain-gradient').forEach((el) => el.dataset.ready = 'true');

メディアリッチ

森ごと、ととのう。

一生ものの、仕事を選ぼう。

設計チーム

施工チーム

アフターチーム

客室ギャラリー

焙煎見学ツアー、はじめました。

今週の新作

つくる人の、祭典。

一生ものの、
仕事を選ぼう。