検索…

カタログ統計

CATALOG › Content › Gallery

ギャラリー

画像主体の作品陳列。マソンリー、グリッド、フィーチャード。

Patterns

Content

Group

isValid=0

Verified

CSS

Animation

Gallery — Featured Image + Side Grid

gallery-featured-plus-grid

Copy

Link

パターン名: Gallery — Featured Image + Side Grid
概要: Large featured image on left (60%) + stacked image pair on right (40%).
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 60% / 40%、推奨コンテンツ幅 1080px、主要ブロック group, columns, column, image, column, group, image, image

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-featured-plus-grid"} /-->

CSS:
.section-gallery-featured-plus-grid { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-featured-plus-grid').forEach((el) => el.dataset.ready = 'true');

Gallery — Full-bleed 4-up Strip

gallery-full-bleed-strip

Copy

Link

最近のスナップショット

📸

🎨

🌊

☀️

パターン名: Gallery — Full-bleed 4-up Strip
概要: Edge-to-edge dark gallery strip with four wide tiles.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 auto、推奨コンテンツ幅 auto、主要ブロック group, heading, columns, column, cover, paragraph, column, cover

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-full-bleed-strip"} /-->

CSS:
.section-gallery-full-bleed-strip { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-full-bleed-strip').forEach((el) => el.dataset.ready = 'true');

Gallery — 3 Column Masonry-style Grid

gallery-grid-3×2

Copy

Link

GALLERY

作品集

🌃

🌿

🌅

🏛️

🔥

💎

パターン名: Gallery — 3 Column Masonry-style Grid
概要: Masonry-feel three-column gallery using gradient cover placeholders.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 auto、推奨コンテンツ幅 1180px、主要ブロック group, paragraph, heading, columns, column, cover, paragraph, cover

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-grid-3x2"} /-->

CSS:
.section-gallery-grid-3x2 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-grid-3x2').forEach((el) => el.dataset.ready = 'true');

Gallery — 6 Image Masonry

gallery-masonry-6

Copy

Link

パターン名: Gallery — 6 Image Masonry
概要: Gallery block with 6 images at varying heights for a masonry feel.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, gallery, image, image, image, image, image, image

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-masonry-6"} /-->

CSS:
.section-gallery-masonry-6 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-masonry-6').forEach((el) => el.dataset.ready = 'true');

Gallery — Polaroid Cards

gallery-polaroid-stack

Copy

Link

MOMENTS

瞬間の記録

🌷

京都, 春

🐚

沖縄, 夏

🍁

日光, 秋

パターン名: Gallery — Polaroid Cards
概要: Three polaroid-style cards with caption beneath each photo.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, paragraph, heading, columns, column, group, cover, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-polaroid-stack"} /-->

CSS:
.section-gallery-polaroid-stack { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-polaroid-stack').forEach((el) => el.dataset.ready = 'true');

Gallery — Quality Layout 01

gallery-quality-layout-01

Copy

Link

GALLERY

ギャラリーを商用サイトで使いやすくする

作品や実例を文脈付きで見せる

実例

分類

閲覧

比較

保存

詳細

相談

パターン名: Gallery — Quality Layout 01
概要: ギャラリー category commercial part with a distinct production layout.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 1100px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-quality-layout-01"} /-->

CSS:
.section-gallery-quality-layout-01 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-quality-layout-01').forEach((el) => el.dataset.ready = 'true');

Gallery — Quality Layout 02

gallery-quality-layout-02

Copy

Link

GALLERY

作品や実例を文脈付きで見せる

実例

閲覧

実運用で差し替えやすい短い補足欄です。

分類

保存

実運用で差し替えやすい短い補足欄です。

比較

相談

実運用で差し替えやすい短い補足欄です。

詳細

実運用で差し替えやすい短い補足欄です。

パターン名: Gallery — Quality Layout 02
概要: ギャラリー category commercial part with a distinct production layout.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 25% / 25% / 1px / 25% / 25%、推奨コンテンツ幅 860px、主要ブロック group, cover, paragraph, heading, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-quality-layout-02"} /-->

CSS:
.section-gallery-quality-layout-02 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-quality-layout-02').forEach((el) => el.dataset.ready = 'true');

Gallery — Quality Layout 03

gallery-quality-layout-03

Copy

Link

ギャラリー

用途を固定して内容を展開

左に役割、右に実データを置くため、サイト制作時に差し替えやすい構成です。

GALLERY

ギャラリーを商用サイトで使いやすくする

作品や実例を文脈付きで見せる

実例

閲覧までの判断を短く示します。

分類

保存までの判断を短く示します。

比較

相談までの判断を短く示します。

詳細

共有までの判断を短く示します。

パターン名: Gallery — Quality Layout 03
概要: ギャラリー category commercial part with a distinct production layout.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 38% / 1px / 62%、推奨コンテンツ幅 1020px、主要ブロック group, columns, column, group, group, paragraph, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-quality-layout-03"} /-->

CSS:
.section-gallery-quality-layout-03 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-quality-layout-03').forEach((el) => el.dataset.ready = 'true');

Gallery — Quality Layout 04

gallery-quality-layout-04

Copy

Link

GALLERY

ギャラリー

実例

相談

分類

比較

閲覧

詳細

保存

相談

パターン名: Gallery — Quality Layout 04
概要: ギャラリー category commercial part with a distinct production layout.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px、推奨コンテンツ幅 720px、主要ブロック group, group, group, paragraph, heading, group, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-quality-layout-04"} /-->

CSS:
.section-gallery-quality-layout-04 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-quality-layout-04').forEach((el) => el.dataset.ready = 'true');

Gallery — Quality Layout 05

gallery-quality-layout-05

Copy

Link

GALLERY

ギャラリーを商用サイトで使いやすくする

作品や実例を文脈付きで見せる

実例

実運用で差し替えやすい短い補足欄です。

分類

閲覧

実運用で差し替えやすい短い補足欄です。

比較

保存

実運用で差し替えやすい短い補足欄です。

パターン名: Gallery — Quality Layout 05
概要: ギャラリー category commercial part with a distinct production layout.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 58% / 1px、推奨コンテンツ幅 1260px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-quality-layout-05"} /-->

CSS:
.section-gallery-quality-layout-05 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-quality-layout-05').forEach((el) => el.dataset.ready = 'true');

Gallery – Quality Layout 06

gallery-quality-layout-06

Copy

Link

GALLERY

Gallery layout system

作品や実例を文脈付きで見せる

閲覧

保存

相談

実例

Production-ready block composition.

分類

閲覧

Production-ready block composition.

比較

保存

Production-ready block composition.

詳細

相談

Production-ready block composition.

パターン名: Gallery – Quality Layout 06
概要: Gallery category commercial part with a second distinct layout family.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px、推奨コンテンツ幅 1025px、主要ブロック group, paragraph, heading, paragraph, group, group, paragraph, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-quality-layout-06"} /-->

CSS:
.section-gallery-quality-layout-06 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-quality-layout-06').forEach((el) => el.dataset.ready = 'true');

Gallery – Quality Layout 07

gallery-quality-layout-07

Copy

Link

STATUS

Operational ledger

実例

閲覧

分類

保存

比較

相談

詳細

Gallery

Primary message area

A larger visual field for direction, recovery, proof, or navigation.

パターン名: Gallery – Quality Layout 07
概要: Gallery category commercial part with a second distinct layout family.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 38% / 1px / 62%、推奨コンテンツ幅 1100px、主要ブロック group, columns, column, group, paragraph, heading, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-quality-layout-07"} /-->

CSS:
.section-gallery-quality-layout-07 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-quality-layout-07').forEach((el) => el.dataset.ready = 'true');

Gallery – Quality Layout 08

gallery-quality-layout-08

Copy

Link

INDEX

実例

分類

比較

詳細

GALLERY

Gallery layout system

作品や実例を文脈付きで見せる

実例

保存

Production-ready block composition.

分類

相談

Production-ready block composition.

NOTES

Use this side pane for prerequisites, links, secondary explanation, or local navigation.

パターン名: Gallery – Quality Layout 08
概要: Gallery category commercial part with a second distinct layout family.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 1px / 44% / 1px / 50%、推奨コンテンツ幅 1205px、主要ブロック group, columns, column, group, paragraph, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-quality-layout-08"} /-->

CSS:
.section-gallery-quality-layout-08 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-quality-layout-08').forEach((el) => el.dataset.ready = 'true');

Gallery – Quality Layout 09

gallery-quality-layout-09

Copy

Link

GALLERY

Gallery layout system

作品や実例を文脈付きで見せる

比較

相談

Open

詳細

Open

実例

閲覧

Open

パターン名: Gallery – Quality Layout 09
概要: Gallery category commercial part with a second distinct layout family.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 66% / 1px、推奨コンテンツ幅 1170px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-quality-layout-09"} /-->

CSS:
.section-gallery-quality-layout-09 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-quality-layout-09').forEach((el) => el.dataset.ready = 'true');

Gallery – Quality Layout 10

gallery-quality-layout-10

Copy

Link

GALLERY

Gallery layout system

作品や実例を文脈付きで見せる

実例

Start

Production-ready block composition.

分類

Compare

Production-ready block composition.

比較

Decide

Production-ready block composition.

パターン名: Gallery – Quality Layout 10
概要: Gallery category commercial part with a second distinct layout family.
使用目的: Gallery領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 35% / 35% / 1px / 30%、推奨コンテンツ幅 1240px、主要ブロック group, cover, paragraph, heading, paragraph, columns, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-quality-layout-10"} /-->

CSS:
.section-gallery-quality-layout-10 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-quality-layout-10').forEach((el) => el.dataset.ready = 'true');

Gallery — EX01 3×2 with Captions

gallery-ex01-3×2-captions

Copy

Link

ギャラリー

店内のようす

仕込みの時間

季節のしつらえ

手しごとの道具

window 越しの光

閉店後のひととき

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-ex01-3x2-captions"} /-->

CSS:
.section-gallery-ex01-3x2-captions { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-ex01-3x2-captions').forEach((el) => el.dataset.ready = 'true');

Gallery — EX02 Featured plus Pair

gallery-ex02-featured-pair

Copy

Link

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-ex02-featured-pair"} /-->

CSS:
.section-gallery-ex02-featured-pair { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-ex02-featured-pair').forEach((el) => el.dataset.ready = 'true');

Gallery — EX03 Circle Photo Row

gallery-ex03-circle-row

Copy

Link

春

夏

秋

冬

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-ex03-circle-row"} /-->

CSS:
.section-gallery-ex03-circle-row { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-ex03-circle-row').forEach((el) => el.dataset.ready = 'true');

Gallery — EX04 Dark Works Grid

gallery-ex04-dark-works

Copy

Link

WORKS

町家リノベーション

住宅・ 2025

カフェ内装一式

店舗・ 2025

オフィス移転

オフィス・ 2026

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-ex04-dark-works"} /-->

CSS:
.section-gallery-ex04-dark-works { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-ex04-dark-works').forEach((el) => el.dataset.ready = 'true');

Gallery — EX05 Wide Strip with Note

gallery-ex05-full-strip

Copy

Link

朝いちばんの光が入る、東向きの大きな窓。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-ex05-full-strip"} /-->

CSS:
.section-gallery-ex05-full-strip { max-width: 1200px; margin-inline: auto; }

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

Gallery — EX06 Square Six SNS

gallery-ex06-instagram-6

Copy

Link

日々の記録

📷 Instagram をフォロー

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-ex06-instagram-6"} /-->

CSS:
.section-gallery-ex06-instagram-6 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-ex06-instagram-6').forEach((el) => el.dataset.ready = 'true');

Gallery — EX07 Photo Story Pair

gallery-ex07-story-pair

Copy

Link

夜明け前に火を入れ、生地を起こす。
同じ作業の繰り返しのようで、同じ日はひとつもありません。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-ex07-story-pair"} /-->

CSS:
.section-gallery-ex07-story-pair { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-ex07-story-pair').forEach((el) => el.dataset.ready = 'true');

Gallery — EX08 Before After Photos

gallery-ex08-beforeafter

Copy

Link

施工事例

BEFORE

AFTER

築 40 年の浴室を、断熱・バリアフリー対応へ。工期 5 日・概算 ¥980,000。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-ex08-beforeafter"} /-->

CSS:
.section-gallery-ex08-beforeafter { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-ex08-beforeafter').forEach((el) => el.dataset.ready = 'true');

Gallery — EX09 Polaroid Air

gallery-ex09-polaroid-air

Copy

Link

開店初日の朝

常連さんと一枚

5 周年のお祝い

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-ex09-polaroid-air"} /-->

CSS:
.section-gallery-ex09-polaroid-air { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-ex09-polaroid-air').forEach((el) => el.dataset.ready = 'true');

Gallery — EX10 Process Four Steps

gallery-ex10-process

Copy

Link

できあがるまで

1. 素材選び

2. 下ごしらえ

3. 仕上げ

4. お届け

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/gallery-ex10-process"} /-->

CSS:
.section-gallery-ex10-process { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-gallery-ex10-process').forEach((el) => el.dataset.ready = 'true');

Gallery — FX01 Crossfade

fx-crossfade

Copy

Link

パターン名: クロスフェード — Gallery — FX01 Crossfade
概要: スクロールで2枚の写真が滑らかに入れ替わる
適用シーン: ビフォーアフター・昼夜の対比
使い方: グループに fx-crossfade(中に画像2枚。2枚目が上に溶ける)

メリット: 対比を1枠で語れる
デメリット: 2枚の構図を合わせる必要
バリエーション案: 切替位置(cover 35-65%)
実装時の注意点: 同じアスペクト比の2枚で

使い方: グループに fx-crossfade(中に画像2枚。2枚目が上に溶ける)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2

Gallery — FX02 Auto Slideshow

fx-slideshow

Copy

Link

パターン名: 自動スライドショー — Gallery — FX02 Auto Slideshow
概要: 3枚が自動で切り替わり続ける(18秒ループ)
適用シーン: ヒーロー・店内紹介
使い方: グループに fx-slideshow(スペーサー+画像3枚。figureのままでOK)

メリット: JSなしの自動スライド
デメリット: 枚数は2-3枚設計
バリエーション案: 周期変更
実装時の注意点: 高さはスペーサーで決める

使い方: グループに fx-slideshow(スペーサー+画像3枚。figureのままでOK)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2

Gallery — FX03 Image Marquee

fx-img-loop

Copy

Link

パターン名: 画像マーキー帯 — Gallery — FX03 Image Marquee
概要: 写真の帯が横に流れ続ける
適用シーン: フッター上の実績帯・雰囲気カット
使い方: グループに fx-img-loop(中に同内容のトラック2つ×画像3枚)

メリット: 省スペースで大量の写真
デメリット: トラック複製の初期手間
バリエーション案: 速度・向き
実装時の注意点: 2トラックは同一内容に(継ぎ目対策)

使い方: グループに fx-img-loop(中に同内容のトラック2つ×画像3枚)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2

Gallery — FX04 Before/After

fx-before-after

Copy

Link

パターン名: ビフォーアフター — Gallery — FX04 Before/After
概要: スクロールで施術前→後が切り替わる
適用シーン: ネイル・美容・リフォーム実績
使い方: グループに fx-before-after(中に画像2枚)

メリット: 効果訴求の定番をJSなしで
デメリット: –
バリエーション案: 切替タイミング
実装時の注意点: 前後で同じ構図の写真を使う

使い方: グループに fx-before-after(中に画像2枚)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.2

ギャラリー · Gallery · Blanc Nail

ギャラリー

最近のスナップショット

作品集

瞬間の記録

ギャラリーを商用サイトで使いやすくする

作品や実例を文脈付きで見せる

用途を固定して内容を展開

ギャラリーを商用サイトで使いやすくする

実例

分類

比較

詳細

ギャラリー

ギャラリーを商用サイトで使いやすくする

Gallery layout system

Operational ledger

Primary message area

Gallery layout system

Gallery layout system

比較

詳細

実例

Gallery layout system

ギャラリー

WORKS

日々の記録

施工事例

できあがるまで