検索…

カタログ統計

CATALOG › Expression › Collage

コラージュ / スクラップ

ポラロイド、マスキングテープ、回転配置。手づくり感の演出。

10

Patterns

Expression

Group

isValid=0

Verified

CSS

Animation

01

Collage — EX01 Polaroid Trio

collage-ex01-polaroid-trio

きょうの工房から

作業風景

朝いちばんの仕込み

道具の写真

三十年もののヘラ

店先の写真

のれんを出す時間

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/collage-ex01-polaroid-trio"} /-->

CSS:
.section-collage-ex01-polaroid-trio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-collage-ex01-polaroid-trio').forEach((el) => el.dataset.ready = 'true');

02

Collage — EX02 Scattered Photo Hero

collage-ex02-scatter-hero

マルシェの写真

日曜マルシェ、
ひらきます。

毎月第 2 日曜・例町公園にて・雨天決行

出店の写真

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/collage-ex02-scatter-hero"} /-->

CSS:
.section-collage-ex02-scatter-hero { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-collage-ex02-scatter-hero').forEach((el) => el.dataset.ready = 'true');

03

Collage — EX03 Taped Note Cards

collage-ex03-tape-notes

スタッフのひとことメモ

火曜の朝に焼き上がる全粒粉カンパーニュ、実は一番のおすすめです。

— 製造・高井

イートインの窓際席、夕方は西日がきれいです。読書のお供にどうぞ。

— ホール・三輪

予約なしでも、ケーキのお取り置きは当日 15 時まで承れます。

— 店長・福地

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/collage-ex03-tape-notes"} /-->

CSS:
.section-collage-ex03-tape-notes { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-collage-ex03-tape-notes').forEach((el) => el.dataset.ready = 'true');

04

Collage — EX04 Pop Clip Cards

collage-ex04-clip-pop

音楽イベント
毎月開催

入場無料!

キッチンカー
大集合

こども縁日
ひろば

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/collage-ex04-clip-pop"} /-->

CSS:
.section-collage-ex04-clip-pop { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-collage-ex04-clip-pop').forEach((el) => el.dataset.ready = 'true');

05

Collage — EX05 Photo Stack with Text

collage-ex05-stack-text

アトリエ全景

制作の手元

ATELIER NOTE

散らかった机から、
うまれるもの。

完成品だけでは伝わらない、過程のおもしろさを残したくて、制作日誌を毎週更新しています。失敗作も、そのまま載せます。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/collage-ex05-stack-text"} /-->

CSS:
.section-collage-ex05-stack-text { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-collage-ex05-stack-text').forEach((el) => el.dataset.ready = 'true');

06

Collage — EX06 Event Date Board

collage-ex06-event-board

JUNE

28

SAT 10:00 — 16:00

会場の様子

うみまち蚤の市

出店 42 組・古道具と本と焼き菓子。
会場は旧倉庫ひろば、入場無料です。

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/collage-ex06-event-board"} /-->

CSS:
.section-collage-ex06-event-board { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-collage-ex06-event-board').forEach((el) => el.dataset.ready = 'true');

07

Collage — EX07 Sticker Word Chips

collage-ex07-sticker-words

部活みたいな会社です。

朝会は 10 分だけ

毎週金曜は賄いカレー

社内コンペ年 2 回

道具代は会社持ち

有給取得率 92%

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/collage-ex07-sticker-words"} /-->

CSS:
.section-collage-ex07-sticker-words { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-collage-ex07-sticker-words').forEach((el) => el.dataset.ready = 'true');

08

Collage — EX08 Moodboard Grid

collage-ex08-moodboard

素材サンプル

配色メモ

2026 秋冬の
ムードボード

乾いた土、焚き火、毛糸。
手ざわりのある色だけを集めました。

質感サンプル

風景の切り抜き

試作の写真

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

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

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

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

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

09

Collage — EX09 Receipt Style Card

collage-ex09-receipt

材料費まで、
ぜんぶ見せます。

一杯のコーヒーの中身を、レシートのまま公開。納得して飲んでほしいから。

COFFEE RECEIPT

豆(エチオピア 18g)

¥180

焙煎・抽出の手間

¥220

場所代・光熱費

¥150

一杯のごちそう

¥550

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/collage-ex09-receipt"} /-->

CSS:
.section-collage-ex09-receipt { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-collage-ex09-receipt').forEach((el) => el.dataset.ready = 'true');

10

Collage — EX10 Scrapbook CTA

collage-ex10-scrapbook-cta

教室の風景

体験会のようす

はじめての陶芸、
手ぶらでどうぞ。

所要 90 分・ 3,800 円・焼き上がりは後日郵送

体験会を予約する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/collage-ex10-scrapbook-cta"} /-->

CSS:
.section-collage-ex10-scrapbook-cta { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-collage-ex10-scrapbook-cta').forEach((el) => el.dataset.ready = 'true');