SNS

パターン名: Reference Complete — sns 01 Sticky Entry
概要: 参照サンプル再確認から追加したsns向け部品。固定導線つきの大判ファーストビュー。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 25% / 75%、推奨コンテンツ幅 49583px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-sns-01-sticky-entry-iamwithyou"} /-->

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

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

Reference Complete — sns 02 Editorial Issue

reference-complete-sns-02-editorial-issue-nothing-tech

Copy

Link

Editorial

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

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

背景を伝える
選ぶ理由を示す
次の行動へ進める

パターン名: Reference Complete — sns 02 Editorial Issue
概要: 参照サンプル再確認から追加したsns向け部品。雑誌的な見出しと導入文の編集レイアウト。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 17222px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-sns-02-editorial-issue-nothing-tech"} /-->

CSS:
.section-reference-complete-sns-02-editorial-issue-nothing-tech { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-sns-02-editorial-issue-nothing-tech').forEach((el) => el.dataset.ready = 'true');

Reference Complete — sns 03 Brand Index

reference-complete-sns-03-brand-index-fujiya1935

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

パターン名: Reference Complete — sns 03 Brand Index
概要: 参照サンプル再確認から追加したsns向け部品。複数ブランドやサービスを迷わせず並べる索引。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 17283px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-sns-03-brand-index-fujiya1935"} /-->

CSS:
.section-reference-complete-sns-03-brand-index-fujiya1935 { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-sns-03-brand-index-fujiya1935').forEach((el) => el.dataset.ready = 'true');

Reference Complete — sns 04 Recruit Story

reference-complete-sns-04-recruit-story-montblanc-pictures

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

パターン名: Reference Complete — sns 04 Recruit Story
概要: 参照サンプル再確認から追加したsns向け部品。採用・企業紹介に使える人物/思想の分割構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 17244px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-sns-04-recruit-story-montblanc-pictures"} /-->

CSS:
.section-reference-complete-sns-04-recruit-story-montblanc-pictures { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-sns-04-recruit-story-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');

Reference Complete — sns 05 Commerce Compare

reference-complete-sns-05-commerce-compare-tsuchitokaze

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

パターン名: Reference Complete — sns 05 Commerce Compare
概要: 参照サンプル再確認から追加したsns向け部品。料金・商品・プランを比較しやすい構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 17305px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-sns-05-commerce-compare-tsuchitokaze"} /-->

CSS:
.section-reference-complete-sns-05-commerce-compare-tsuchitokaze { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-sns-05-commerce-compare-tsuchitokaze').forEach((el) => el.dataset.ready = 'true');

Reference Complete — sns 06 Timeline Proof

reference-complete-sns-06-timeline-proof-dodasports

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

パターン名: Reference Complete — sns 06 Timeline Proof
概要: 参照サンプル再確認から追加したsns向け部品。沿革・導入手順・制作工程の時系列。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 17246px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-sns-06-timeline-proof-dodasports"} /-->

CSS:
.section-reference-complete-sns-06-timeline-proof-dodasports { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-sns-06-timeline-proof-dodasports').forEach((el) => el.dataset.ready = 'true');

Reference Complete — sns 07 Gallery Led

reference-complete-sns-07-gallery-led-ichizenbooks

Copy

Link

Detail

パターン名: Reference Complete — sns 07 Gallery Led
概要: 参照サンプル再確認から追加したsns向け部品。写真量の多い商材を見せるギャラリー導線。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 17327px、主要ブロック group, columns, column, image, column, image, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-sns-07-gallery-led-ichizenbooks"} /-->

CSS:
.section-reference-complete-sns-07-gallery-led-ichizenbooks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-sns-07-gallery-led-ichizenbooks').forEach((el) => el.dataset.ready = 'true');

Reference Complete — sns 08 Dashboard Proof

reference-complete-sns-08-dashboard-proof-allureville-elements

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

パターン名: Reference Complete — sns 08 Dashboard Proof
概要: 参照サンプル再確認から追加したsns向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 17288px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-sns-08-dashboard-proof-allureville-elements"} /-->

CSS:
.section-reference-complete-sns-08-dashboard-proof-allureville-elements { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-sns-08-dashboard-proof-allureville-elements').forEach((el) => el.dataset.ready = 'true');

Reference Complete — sns 09 Contact Ready

reference-complete-sns-09-contact-ready-pronets-recruit

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

パターン名: Reference Complete — sns 09 Contact Ready
概要: 参照サンプル再確認から追加したsns向け部品。問い合わせ前の入力項目を整理する導線。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 17269px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-sns-09-contact-ready-pronets-recruit"} /-->

CSS:
.section-reference-complete-sns-09-contact-ready-pronets-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-sns-09-contact-ready-pronets-recruit').forEach((el) => el.dataset.ready = 'true');

Reference Complete — sns 10 Mobile Rail

reference-complete-sns-10-mobile-rail-morinosato-clinic

Copy

Link

Morinosato

About

Works

Journal

Contact

パターン名: Reference Complete — sns 10 Mobile Rail
概要: 参照サンプル再確認から追加したsns向け部品。スマホ閲覧で要点を縦に追えるレール型。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 17390px、主要ブロック group, columns, column, heading, column, columns, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-sns-10-mobile-rail-morinosato-clinic"} /-->

CSS:
.section-reference-complete-sns-10-mobile-rail-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-sns-10-mobile-rail-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 022 Yamakachi

sankou100-022-yamakachi

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

パターン名: SANKOU100 — 022 Yamakachi
概要: SANKOU! sample 022から抽出したsplit型の商用サイト向け構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 1px / 1px / 1px / 60%、推奨コンテンツ幅 1062px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-022-yamakachi"} /-->

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

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

SANKOU100 — 062 Uki Editions

sankou100-062-uki-editions

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

パターン名: SANKOU100 — 062 Uki Editions
概要: SANKOU! sample 062から抽出したsplit型の商用サイト向け構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 1px / 1px / 1px / 60%、推奨コンテンツ幅 1102px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-062-uki-editions"} /-->

CSS:
.section-sankou100-062-uki-editions { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou100-062-uki-editions').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 01 Morohoshi Portfolio

sankoumax-sns-01-morohoshi-portfolio

Copy

Link

NEWS

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

確認する

パターン名: SANKOU Max — sns 01 Morohoshi Portfolio
概要: SANKOU100 sample setから展開したsns向けalert構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4281px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-01-morohoshi-portfolio"} /-->

CSS:
.section-sankoumax-sns-01-morohoshi-portfolio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-01-morohoshi-portfolio').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 02 Vision Structure

sankoumax-sns-02-vision-structure

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

パターン名: SANKOU Max — sns 02 Vision Structure
概要: SANKOU100 sample setから展開したsns向けmap構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4242px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-02-vision-structure"} /-->

CSS:
.section-sankoumax-sns-02-vision-structure { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-02-vision-structure').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 03 Nakiri Shota

sankoumax-sns-03-nakiri-shota

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

パターン名: SANKOU Max — sns 03 Nakiri Shota
概要: SANKOU100 sample setから展開したsns向けform構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4263px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-03-nakiri-shota"} /-->

CSS:
.section-sankoumax-sns-03-nakiri-shota { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-03-nakiri-shota').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 04 Koba Clinic

sankoumax-sns-04-koba-clinic

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

パターン名: SANKOU Max — sns 04 Koba Clinic
概要: SANKOU100 sample setから展開したsns向けtabs構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4184px、主要ブロック group, group, columns, column, group, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-04-koba-clinic"} /-->

CSS:
.section-sankoumax-sns-04-koba-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-04-koba-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 05 Ems Recruit

sankoumax-sns-05-ems-recruit

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

パターン名: SANKOU Max — sns 05 Ems Recruit
概要: SANKOU100 sample setから展開したsns向けdashboard構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 4285px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-05-ems-recruit"} /-->

CSS:
.section-sankoumax-sns-05-ems-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-05-ems-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 06 Felissimo Panda

sankoumax-sns-06-felissimo-panda

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

パターン名: SANKOU Max — sns 06 Felissimo Panda
概要: SANKOU100 sample setから展開したsns向けfaq構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4126px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-06-felissimo-panda"} /-->

CSS:
.section-sankoumax-sns-06-felissimo-panda { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-06-felissimo-panda').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 07 Iriam Miraito

sankoumax-sns-07-iriam-miraito

Copy

Link

Detail

パターン名: SANKOU Max — sns 07 Iriam Miraito
概要: SANKOU100 sample setから展開したsns向けgallery構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4327px、主要ブロック group, columns, column, image, column, image, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-07-iriam-miraito"} /-->

CSS:
.section-sankoumax-sns-07-iriam-miraito { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-07-iriam-miraito').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 08 Gaaboo

sankoumax-sns-08-gaaboo

Copy

Link

People Line

Director

Planner

Designer

パターン名: SANKOU Max — sns 08 Gaaboo
概要: SANKOU100 sample setから展開したsns向けroster構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4328px、主要ブロック group, heading, columns, column, image, paragraph, column, image

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-08-gaaboo"} /-->

CSS:
.section-sankoumax-sns-08-gaaboo { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 09 Violet Patisserie

sankoumax-sns-09-violet-patisserie

Copy

Link

3209

Violet Patisserie

静かな思想を置く

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

パターン名: SANKOU Max — sns 09 Violet Patisserie
概要: SANKOU100 sample setから展開したsns向けmanifesto構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 4109px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-09-violet-patisserie"} /-->

CSS:
.section-sankoumax-sns-09-violet-patisserie { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-09-violet-patisserie').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 10 Nii Recruit

sankoumax-sns-10-nii-recruit

Copy

Link

Sampled Site

3210 / Nii Recruit

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

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

パターン名: SANKOU Max — sns 10 Nii Recruit
概要: SANKOU100 sample setから展開したsns向けcover構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 30% / 70%、推奨コンテンツ幅 10610px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-10-nii-recruit"} /-->

CSS:
.section-sankoumax-sns-10-nii-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-10-nii-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 11 Saranosono

sankoumax-sns-11-saranosono

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

パターン名: SANKOU Max — sns 11 Saranosono
概要: SANKOU100 sample setから展開したsns向けsplit構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 4251px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-11-saranosono"} /-->

CSS:
.section-sankoumax-sns-11-saranosono { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 12 Dac Web

sankoumax-sns-12-dac-web

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

パターン名: SANKOU Max — sns 12 Dac Web
概要: SANKOU100 sample setから展開したsns向けcards構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4292px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-12-dac-web"} /-->

CSS:
.section-sankoumax-sns-12-dac-web { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-12-dac-web').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 13 Asuzac Recruit

sankoumax-sns-13-asuzac-recruit

Copy

Link

Collage

素材感を重ねる

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

3213

パターン名: SANKOU Max — sns 13 Asuzac Recruit
概要: SANKOU100 sample setから展開したsns向けcollage構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 37% / 33% / 1px、推奨コンテンツ幅 4333px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-13-asuzac-recruit"} /-->

CSS:
.section-sankoumax-sns-13-asuzac-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-13-asuzac-recruit').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 14 Suntory Sic

sankoumax-sns-14-suntory-sic

Copy

Link

Suntory

About

Works

Journal

Contact

パターン名: SANKOU Max — sns 14 Suntory Sic
概要: SANKOU100 sample setから展開したsns向けrail構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 4394px、主要ブロック group, columns, column, heading, column, columns, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-14-suntory-sic"} /-->

CSS:
.section-sankoumax-sns-14-suntory-sic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-14-suntory-sic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 15 Amano Clinic

sankoumax-sns-15-amano-clinic

Copy

Link

Editorial

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

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

背景を伝える
選ぶ理由を示す
次の行動へ進める

パターン名: SANKOU Max — sns 15 Amano Clinic
概要: SANKOU100 sample setから展開したsns向けeditorial構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 51% / 49% / 1px、推奨コンテンツ幅 4235px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-15-amano-clinic"} /-->

CSS:
.section-sankoumax-sns-15-amano-clinic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-15-amano-clinic').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 16 Infocus

sankoumax-sns-16-infocus

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

パターン名: SANKOU Max — sns 16 Infocus
概要: SANKOU100 sample setから展開したsns向けproduct構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 4316px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-16-infocus"} /-->

CSS:
.section-sankoumax-sns-16-infocus { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-16-infocus').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 17 Tomore

sankoumax-sns-17-tomore

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

パターン名: SANKOU Max — sns 17 Tomore
概要: SANKOU100 sample setから展開したsns向けtimeline構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4257px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-17-tomore"} /-->

CSS:
.section-sankoumax-sns-17-tomore { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-17-tomore').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 18 Dan Brise Barber

sankoumax-sns-18-dan-brise-barber

Copy

Link

数字で納得させる

88%

改善率

8分

短縮

22626

導入数

パターン名: SANKOU Max — sns 18 Dan Brise Barber
概要: SANKOU100 sample setから展開したsns向けstats構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4178px、主要ブロック group, heading, columns, column, group, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-18-dan-brise-barber"} /-->

CSS:
.section-sankoumax-sns-18-dan-brise-barber { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-18-dan-brise-barber').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 19 Allureville Elements

sankoumax-sns-19-allureville-elements

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

パターン名: SANKOU Max — sns 19 Allureville Elements
概要: SANKOU100 sample setから展開したsns向けcontact構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 55% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4299px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-19-allureville-elements"} /-->

CSS:
.section-sankoumax-sns-19-allureville-elements { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-19-allureville-elements').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 20 Studio Cbr

sankoumax-sns-20-studio-cbr

Copy

Link

Studio Cbr

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

About
Service
Works

News
Recruit
Contact

Sample 3220

パターン名: SANKOU Max — sns 20 Studio Cbr
概要: SANKOU100 sample setから展開したsns向けfooter構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 4340px、主要ブロック group, columns, column, heading, paragraph, column, list, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-20-studio-cbr"} /-->

CSS:
.section-sankoumax-sns-20-studio-cbr { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-20-studio-cbr').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 21 Yamakachi

sankoumax-sns-21-yamakachi

Copy

Link

NEWS

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

確認する

パターン名: SANKOU Max — sns 21 Yamakachi
概要: SANKOU100 sample setから展開したsns向けalert構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4301px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-21-yamakachi"} /-->

CSS:
.section-sankoumax-sns-21-yamakachi { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-21-yamakachi').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 22 Chiikawa Pocket

sankoumax-sns-22-chiikawa-pocket

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

パターン名: SANKOU Max — sns 22 Chiikawa Pocket
概要: SANKOU100 sample setから展開したsns向けmap構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4262px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-22-chiikawa-pocket"} /-->

CSS:
.section-sankoumax-sns-22-chiikawa-pocket { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-22-chiikawa-pocket').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 23 Chiba Dojo

sankoumax-sns-23-chiba-dojo

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

パターン名: SANKOU Max — sns 23 Chiba Dojo
概要: SANKOU100 sample setから展開したsns向けform構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4283px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-23-chiba-dojo"} /-->

CSS:
.section-sankoumax-sns-23-chiba-dojo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-23-chiba-dojo').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 24 Twoe

sankoumax-sns-24-twoe

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

パターン名: SANKOU Max — sns 24 Twoe
概要: SANKOU100 sample setから展開したsns向けtabs構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4204px、主要ブロック group, group, columns, column, group, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-24-twoe"} /-->

CSS:
.section-sankoumax-sns-24-twoe { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-24-twoe').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 25 Kamata Shoyu

sankoumax-sns-25-kamata-shoyu

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

パターン名: SANKOU Max — sns 25 Kamata Shoyu
概要: SANKOU100 sample setから展開したsns向けdashboard構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 4305px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-25-kamata-shoyu"} /-->

CSS:
.section-sankoumax-sns-25-kamata-shoyu { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-25-kamata-shoyu').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 26 Fumino

sankoumax-sns-26-fumino

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

パターン名: SANKOU Max — sns 26 Fumino
概要: SANKOU100 sample setから展開したsns向けfaq構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4146px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-26-fumino"} /-->

CSS:
.section-sankoumax-sns-26-fumino { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-26-fumino').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 27 Anbe Shoten

sankoumax-sns-27-anbe-shoten

Copy

Link

Detail

パターン名: SANKOU Max — sns 27 Anbe Shoten
概要: SANKOU100 sample setから展開したsns向けgallery構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4347px、主要ブロック group, columns, column, image, column, image, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-27-anbe-shoten"} /-->

CSS:
.section-sankoumax-sns-27-anbe-shoten { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-sns-27-anbe-shoten').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — sns 28 Plaid Alpha

sankoumax-sns-28-plaid-alpha

Copy

Link

People Line

Director

Planner

Designer

パターン名: SANKOU Max — sns 28 Plaid Alpha
概要: SANKOU100 sample setから展開したsns向けroster構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4348px、主要ブロック group, heading, columns, column, image, paragraph, column, image

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-28-plaid-alpha"} /-->

CSS:
.section-sankoumax-sns-28-plaid-alpha { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 29 Undimension

sankoumax-sns-29-undimension

Copy

Link

3229

Undimension

静かな思想を置く

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

パターン名: SANKOU Max — sns 29 Undimension
概要: SANKOU100 sample setから展開したsns向けmanifesto構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 4129px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-29-undimension"} /-->

CSS:
.section-sankoumax-sns-29-undimension { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 30 Norikura Hanabi

sankoumax-sns-30-norikura-hanabi

Copy

Link

Sampled Site

3230 / Norikura Hanabi

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

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

パターン名: SANKOU Max — sns 30 Norikura Hanabi
概要: SANKOU100 sample setから展開したsns向けcover構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 32% / 68%、推奨コンテンツ幅 10670px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-30-norikura-hanabi"} /-->

CSS:
.section-sankoumax-sns-30-norikura-hanabi { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 31 Chugaitoen

sankoumax-sns-31-chugaitoen

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

パターン名: SANKOU Max — sns 31 Chugaitoen
概要: SANKOU100 sample setから展開したsns向けsplit構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 4271px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-31-chugaitoen"} /-->

CSS:
.section-sankoumax-sns-31-chugaitoen { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 32 Favtown Wakayama

sankoumax-sns-32-favtown-wakayama

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

パターン名: SANKOU Max — sns 32 Favtown Wakayama
概要: SANKOU100 sample setから展開したsns向けcards構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4312px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-32-favtown-wakayama"} /-->

CSS:
.section-sankoumax-sns-32-favtown-wakayama { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 33 Palcloset Fashion

sankoumax-sns-33-palcloset-fashion

Copy

Link

Collage

素材感を重ねる

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

3233

パターン名: SANKOU Max — sns 33 Palcloset Fashion
概要: SANKOU100 sample setから展開したsns向けcollage構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 31% / 1px / 39% / 31% / 1px、推奨コンテンツ幅 4353px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-33-palcloset-fashion"} /-->

CSS:
.section-sankoumax-sns-33-palcloset-fashion { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 34 Michikusa Art

sankoumax-sns-34-michikusa-art

Copy

Link

Michikusa

About

Works

Journal

Contact

パターン名: SANKOU Max — sns 34 Michikusa Art
概要: SANKOU100 sample setから展開したsns向けrail構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 4414px、主要ブロック group, columns, column, heading, column, columns, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-34-michikusa-art"} /-->

CSS:
.section-sankoumax-sns-34-michikusa-art { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 35 Tenten

sankoumax-sns-35-tenten

Copy

Link

Editorial

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

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

背景を伝える
選ぶ理由を示す
次の行動へ進める

パターン名: SANKOU Max — sns 35 Tenten
概要: SANKOU100 sample setから展開したsns向けeditorial構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 47% / 53% / 1px、推奨コンテンツ幅 4255px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-35-tenten"} /-->

CSS:
.section-sankoumax-sns-35-tenten { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 36 Unipos

sankoumax-sns-36-unipos

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

パターン名: SANKOU Max — sns 36 Unipos
概要: SANKOU100 sample setから展開したsns向けproduct構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 4336px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-36-unipos"} /-->

CSS:
.section-sankoumax-sns-36-unipos { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 37 Trail Inc

sankoumax-sns-37-trail-inc

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

パターン名: SANKOU Max — sns 37 Trail Inc
概要: SANKOU100 sample setから展開したsns向けtimeline構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4277px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-37-trail-inc"} /-->

CSS:
.section-sankoumax-sns-37-trail-inc { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 38 Applebase

sankoumax-sns-38-applebase

Copy

Link

数字で納得させる

38%

改善率

10分

短縮

22766

導入数

パターン名: SANKOU Max — sns 38 Applebase
概要: SANKOU100 sample setから展開したsns向けstats構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4198px、主要ブロック group, heading, columns, column, group, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-38-applebase"} /-->

CSS:
.section-sankoumax-sns-38-applebase { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 39 Meisei Es

sankoumax-sns-39-meisei-es

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

パターン名: SANKOU Max — sns 39 Meisei Es
概要: SANKOU100 sample setから展開したsns向けcontact構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 51% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4319px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-39-meisei-es"} /-->

CSS:
.section-sankoumax-sns-39-meisei-es { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 40 Unicell

sankoumax-sns-40-unicell

Copy

Link

Unicell

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

About
Service
Works

News
Recruit
Contact

Sample 3240

パターン名: SANKOU Max — sns 40 Unicell
概要: SANKOU100 sample setから展開したsns向けfooter構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 4360px、主要ブロック group, columns, column, heading, paragraph, column, list, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-40-unicell"} /-->

CSS:
.section-sankoumax-sns-40-unicell { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 41 Uki Editions

sankoumax-sns-41-uki-editions

Copy

Link

NEWS

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

確認する

パターン名: SANKOU Max — sns 41 Uki Editions
概要: SANKOU100 sample setから展開したsns向けalert構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4321px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-41-uki-editions"} /-->

CSS:
.section-sankoumax-sns-41-uki-editions { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 42 Kikyougaoka

sankoumax-sns-42-kikyougaoka

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

パターン名: SANKOU Max — sns 42 Kikyougaoka
概要: SANKOU100 sample setから展開したsns向けmap構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4282px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-42-kikyougaoka"} /-->

CSS:
.section-sankoumax-sns-42-kikyougaoka { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 43 J Security

sankoumax-sns-43-j-security

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

パターン名: SANKOU Max — sns 43 J Security
概要: SANKOU100 sample setから展開したsns向けform構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4303px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-43-j-security"} /-->

CSS:
.section-sankoumax-sns-43-j-security { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 44 Serious Ceramic

sankoumax-sns-44-serious-ceramic

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

パターン名: SANKOU Max — sns 44 Serious Ceramic
概要: SANKOU100 sample setから展開したsns向けtabs構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4224px、主要ブロック group, group, columns, column, group, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-44-serious-ceramic"} /-->

CSS:
.section-sankoumax-sns-44-serious-ceramic { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 45 Tsumari Chamame

sankoumax-sns-45-tsumari-chamame

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

パターン名: SANKOU Max — sns 45 Tsumari Chamame
概要: SANKOU100 sample setから展開したsns向けdashboard構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 4325px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-45-tsumari-chamame"} /-->

CSS:
.section-sankoumax-sns-45-tsumari-chamame { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 46 Notahotel Architects

sankoumax-sns-46-notahotel-architects

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

パターン名: SANKOU Max — sns 46 Notahotel Architects
概要: SANKOU100 sample setから展開したsns向けfaq構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4166px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-46-notahotel-architects"} /-->

CSS:
.section-sankoumax-sns-46-notahotel-architects { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 47 Montblanc Pictures

sankoumax-sns-47-montblanc-pictures

Copy

Link

Detail

パターン名: SANKOU Max — sns 47 Montblanc Pictures
概要: SANKOU100 sample setから展開したsns向けgallery構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4367px、主要ブロック group, columns, column, image, column, image, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-47-montblanc-pictures"} /-->

CSS:
.section-sankoumax-sns-47-montblanc-pictures { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 48 Tattoo Rays

sankoumax-sns-48-tattoo-rays

Copy

Link

People Line

Director

Planner

Designer

パターン名: SANKOU Max — sns 48 Tattoo Rays
概要: SANKOU100 sample setから展開したsns向けroster構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4368px、主要ブロック group, heading, columns, column, image, paragraph, column, image

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-48-tattoo-rays"} /-->

CSS:
.section-sankoumax-sns-48-tattoo-rays { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 49 Rim Jins

sankoumax-sns-49-rim-jins

Copy

Link

3249

Rim Jins

静かな思想を置く

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

パターン名: SANKOU Max — sns 49 Rim Jins
概要: SANKOU100 sample setから展開したsns向けmanifesto構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 4149px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-49-rim-jins"} /-->

CSS:
.section-sankoumax-sns-49-rim-jins { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 50 Obunko

sankoumax-sns-50-obunko

Copy

Link

Sampled Site

3250 / Obunko

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

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

パターン名: SANKOU Max — sns 50 Obunko
概要: SANKOU100 sample setから展開したsns向けcover構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 25% / 75%、推奨コンテンツ幅 10730px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-50-obunko"} /-->

CSS:
.section-sankoumax-sns-50-obunko { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 51 Pronets Recruit

sankoumax-sns-51-pronets-recruit

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

パターン名: SANKOU Max — sns 51 Pronets Recruit
概要: SANKOU100 sample setから展開したsns向けsplit構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 39% / 1px / 1px / 1px / 61%、推奨コンテンツ幅 4291px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-51-pronets-recruit"} /-->

CSS:
.section-sankoumax-sns-51-pronets-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 52 Glanta

sankoumax-sns-52-glanta

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

パターン名: SANKOU Max — sns 52 Glanta
概要: SANKOU100 sample setから展開したsns向けcards構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4332px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-52-glanta"} /-->

CSS:
.section-sankoumax-sns-52-glanta { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 53 Tashi Portfolio

sankoumax-sns-53-tashi-portfolio

Copy

Link

Collage

素材感を重ねる

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

3253

パターン名: SANKOU Max — sns 53 Tashi Portfolio
概要: SANKOU100 sample setから展開したsns向けcollage構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 35% / 35% / 1px、推奨コンテンツ幅 4373px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-53-tashi-portfolio"} /-->

CSS:
.section-sankoumax-sns-53-tashi-portfolio { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 54 Kitanohashi

sankoumax-sns-54-kitanohashi

Copy

Link

Kitanohashi

About

Works

Journal

Contact

パターン名: SANKOU Max — sns 54 Kitanohashi
概要: SANKOU100 sample setから展開したsns向けrail構成。
使用目的: SNS領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 4434px、主要ブロック group, columns, column, heading, column, columns, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-sns-54-kitanohashi"} /-->

CSS:
.section-sankoumax-sns-54-kitanohashi { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — sns 55 Morinosato Clinic

sankoumax-sns-55-morinosato-clinic

Copy

Link

Editorial

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

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

背景を伝える
選ぶ理由を示す
次の行動へ進める