ブログ / 記事

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

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

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

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

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

Reference Complete — blog 02 Editorial Issue

reference-complete-blog-02-editorial-issue-meisei-kg

Copy

Link

Editorial

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

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-blog-02-editorial-issue-meisei-kg"} /-->

CSS:
.section-reference-complete-blog-02-editorial-issue-meisei-kg { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-blog-02-editorial-issue-meisei-kg').forEach((el) => el.dataset.ready = 'true');

Reference Complete — blog 03 Brand Index

reference-complete-blog-03-brand-index-depsoa

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

Reference Complete — blog 04 Recruit Story

reference-complete-blog-04-recruit-story-serious-ceramic

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-blog-04-recruit-story-serious-ceramic"} /-->

CSS:
.section-reference-complete-blog-04-recruit-story-serious-ceramic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-blog-04-recruit-story-serious-ceramic').forEach((el) => el.dataset.ready = 'true');

Reference Complete — blog 05 Commerce Compare

reference-complete-blog-05-commerce-compare-mizuya-kyoto

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

Reference Complete — blog 06 Timeline Proof

reference-complete-blog-06-timeline-proof-janu

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

Reference Complete — blog 07 Gallery Led

reference-complete-blog-07-gallery-led-ja-aichi-recruit

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-blog-07-gallery-led-ja-aichi-recruit"} /-->

CSS:
.section-reference-complete-blog-07-gallery-led-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-blog-07-gallery-led-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');

Reference Complete — blog 08 Dashboard Proof

reference-complete-blog-08-dashboard-proof-infocus

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

Reference Complete — blog 09 Contact Ready

reference-complete-blog-09-contact-ready-tattoo-rays

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-blog-09-contact-ready-tattoo-rays"} /-->

CSS:
.section-reference-complete-blog-09-contact-ready-tattoo-rays { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-blog-09-contact-ready-tattoo-rays').forEach((el) => el.dataset.ready = 'true');

Reference Complete — blog 10 Mobile Rail

reference-complete-blog-10-mobile-rail-glanta

Copy

Link

Glanta

About

Works

Journal

Contact

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

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

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

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

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

Reference Editorial — Magazine Story Index

reference-magazine-story-index

Copy

Link

journal

記事一覧を、読み物らしく。

01

歴史と文化

この街のなぜを歩く

大きな余白と番号で記事一覧を編集的に見せます。

Read

02

人に会う

働く人の手元に宿るもの

大きな余白と番号で記事一覧を編集的に見せます。

Read

03

取材記事

静かな店の朝支度

大きな余白と番号で記事一覧を編集的に見せます。

Read

パターン名: Reference Editorial — Magazine Story Index
概要: 月刊メディア風の番号付き記事一覧。
使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 14% / 22% / 48% / 16%、推奨コンテンツ幅 1040px、主要ブロック group, paragraph, heading, group, columns, column, heading, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-magazine-story-index"} /-->

CSS:
.section-reference-magazine-story-index { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-magazine-story-index').forEach((el) => el.dataset.ready = 'true');

SANKOU — Magazine Collage Index

sankou-magazine-collage-index

Copy

Link

Magazine

街の特集を表紙で見せる

最新号
インタビュー
ローカルガイド
イベント

ISSUE 07

New Angle

写真・短文・号数を重ねるマガジン型インデックス。

パターン名: SANKOU — Magazine Collage Index
概要: メディアサイト向けの表紙コラージュ型記事導線。
使用目的: Blog領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 36% / 64% / 1px、推奨コンテンツ幅 1120px、主要ブロック group, columns, column, paragraph, heading, list, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-magazine-collage-index"} /-->

CSS:
.section-sankou-magazine-collage-index { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-magazine-collage-index').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 006 Palcloset Fashion

sankou100-006-palcloset-fashion

Copy

Link

Editorial

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

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-006-palcloset-fashion"} /-->

CSS:
.section-sankou100-006-palcloset-fashion { max-width: 1200px; margin-inline: auto; }

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

SANKOU100 — 046 Tashi Portfolio

sankou100-046-tashi-portfolio

Copy

Link

Editorial

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

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-046-tashi-portfolio"} /-->

CSS:
.section-sankou100-046-tashi-portfolio { max-width: 1200px; margin-inline: auto; }

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

SANKOU100 — 086 Ichizenbooks

sankou100-086-ichizenbooks

Copy

Link

Editorial

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

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

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

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

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

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

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

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

SANKOU Max — blog 01 Shueisha Recruit

sankoumax-blog-01-shueisha-recruit

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-01-shueisha-recruit"} /-->

CSS:
.section-sankoumax-blog-01-shueisha-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 02 Sanu Weekday

sankoumax-blog-02-sanu-weekday

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-02-sanu-weekday"} /-->

CSS:
.section-sankoumax-blog-02-sanu-weekday { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 03 Newspicks Business

sankoumax-blog-03-newspicks-business

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-03-newspicks-business"} /-->

CSS:
.section-sankoumax-blog-03-newspicks-business { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 04 Miyakawa Lab

sankoumax-blog-04-miyakawa-lab

Copy

Link

2104

Miyakawa Lab

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-04-miyakawa-lab"} /-->

CSS:
.section-sankoumax-blog-04-miyakawa-lab { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 05 Matsuo Komuten

sankoumax-blog-05-matsuo-komuten

Copy

Link

Sampled Site

2105 / Matsuo Komuten

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-05-matsuo-komuten"} /-->

CSS:
.section-sankoumax-blog-05-matsuo-komuten { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 06 Yokohama Timberwharf

sankoumax-blog-06-yokohama-timberwharf

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-06-yokohama-timberwharf"} /-->

CSS:
.section-sankoumax-blog-06-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 07 Janu

sankoumax-blog-07-janu

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-07-janu"} /-->

CSS:
.section-sankoumax-blog-07-janu { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 08 Daimatsu

sankoumax-blog-08-daimatsu

Copy

Link

Collage

素材感を重ねる

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

2108

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

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

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

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

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

SANKOU Max — blog 09 Omotesando Ortho

sankoumax-blog-09-omotesando-ortho

Copy

Link

Omotesando

About

Works

Journal

Contact

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-09-omotesando-ortho"} /-->

CSS:
.section-sankoumax-blog-09-omotesando-ortho { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 10 Dodasports

sankoumax-blog-10-dodasports

Copy

Link

Editorial

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

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-10-dodasports"} /-->

CSS:
.section-sankoumax-blog-10-dodasports { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 11 Ja Aichi Recruit

sankoumax-blog-11-ja-aichi-recruit

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-11-ja-aichi-recruit"} /-->

CSS:
.section-sankoumax-blog-11-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 12 Kiyasuku

sankoumax-blog-12-kiyasuku

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-12-kiyasuku"} /-->

CSS:
.section-sankoumax-blog-12-kiyasuku { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 13 Hirono Recruit

sankoumax-blog-13-hirono-recruit

Copy

Link

数字で納得させる

33%

改善率

10分

短縮

14891

導入数

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

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

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

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

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

SANKOU Max — blog 14 Ichizenbooks

sankoumax-blog-14-ichizenbooks

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-14-ichizenbooks"} /-->

CSS:
.section-sankoumax-blog-14-ichizenbooks { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 15 Mec Residence Recruit

sankoumax-blog-15-mec-residence-recruit

Copy

Link

Mec Residence Recruit

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

About
Service
Works

News
Recruit
Contact

Sample 2115

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-15-mec-residence-recruit"} /-->

CSS:
.section-sankoumax-blog-15-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 16 Greenpark Santo

sankoumax-blog-16-greenpark-santo

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-16-greenpark-santo"} /-->

CSS:
.section-sankoumax-blog-16-greenpark-santo { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 17 Land Sapporo

sankoumax-blog-17-land-sapporo

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-17-land-sapporo"} /-->

CSS:
.section-sankoumax-blog-17-land-sapporo { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 18 Tokachi Fruits

sankoumax-blog-18-tokachi-fruits

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-18-tokachi-fruits"} /-->

CSS:
.section-sankoumax-blog-18-tokachi-fruits { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 19 Echitora

sankoumax-blog-19-echitora

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-19-echitora"} /-->

CSS:
.section-sankoumax-blog-19-echitora { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 20 Megamis

sankoumax-blog-20-megamis

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-20-megamis"} /-->

CSS:
.section-sankoumax-blog-20-megamis { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 21 Kagami

sankoumax-blog-21-kagami

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — blog 22 Antscr

sankoumax-blog-22-antscr

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-22-antscr"} /-->

CSS:
.section-sankoumax-blog-22-antscr { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 23 Meisei Kg

sankoumax-blog-23-meisei-kg

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-23-meisei-kg"} /-->

CSS:
.section-sankoumax-blog-23-meisei-kg { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-blog-23-meisei-kg').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — blog 24 Iamwithyou

sankoumax-blog-24-iamwithyou

Copy

Link

2124

Iamwithyou

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — blog 25 Depsoa

sankoumax-blog-25-depsoa

Copy

Link

Sampled Site

2125 / Depsoa

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-25-depsoa"} /-->

CSS:
.section-sankoumax-blog-25-depsoa { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 26 Nothing Tech

sankoumax-blog-26-nothing-tech

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-26-nothing-tech"} /-->

CSS:
.section-sankoumax-blog-26-nothing-tech { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 27 Upvege

sankoumax-blog-27-upvege

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-27-upvege"} /-->

CSS:
.section-sankoumax-blog-27-upvege { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 28 Fujiya1935

sankoumax-blog-28-fujiya1935

Copy

Link

Collage

素材感を重ねる

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

2128

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-28-fujiya1935"} /-->

CSS:
.section-sankoumax-blog-28-fujiya1935 { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 29 Omodakaya

sankoumax-blog-29-omodakaya

Copy

Link

Omodakaya

About

Works

Journal

Contact

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

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

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

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

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

SANKOU Max — blog 30 Favtown

sankoumax-blog-30-favtown

Copy

Link

Editorial

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

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

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-30-favtown"} /-->

CSS:
.section-sankoumax-blog-30-favtown { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 31 Mizuya Kyoto

sankoumax-blog-31-mizuya-kyoto

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-31-mizuya-kyoto"} /-->

CSS:
.section-sankoumax-blog-31-mizuya-kyoto { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 32 Allright Inc

sankoumax-blog-32-allright-inc

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-32-allright-inc"} /-->

CSS:
.section-sankoumax-blog-32-allright-inc { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-blog-32-allright-inc').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — blog 33 Jins Holdings

sankoumax-blog-33-jins-holdings

Copy

Link

数字で納得させる

53%

改善率

3分

短縮

15031

導入数

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-33-jins-holdings"} /-->

CSS:
.section-sankoumax-blog-33-jins-holdings { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-blog-33-jins-holdings').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — blog 34 Tsuchitokaze

sankoumax-blog-34-tsuchitokaze

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-34-tsuchitokaze"} /-->

CSS:
.section-sankoumax-blog-34-tsuchitokaze { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 35 Yamato 50Th

sankoumax-blog-35-yamato-50th

Copy

Link

Yamato 50Th

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

About
Service
Works

News
Recruit
Contact

Sample 2135

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-35-yamato-50th"} /-->

CSS:
.section-sankoumax-blog-35-yamato-50th { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-blog-35-yamato-50th').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — blog 36 Action Npo

sankoumax-blog-36-action-npo

Copy

Link

NEWS

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

確認する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-36-action-npo"} /-->

CSS:
.section-sankoumax-blog-36-action-npo { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 37 Mycampus

sankoumax-blog-37-mycampus

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-37-mycampus"} /-->

CSS:
.section-sankoumax-blog-37-mycampus { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 38 Mejinavi

sankoumax-blog-38-mejinavi

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — blog 39 Niwaya

sankoumax-blog-39-niwaya

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-39-niwaya"} /-->

CSS:
.section-sankoumax-blog-39-niwaya { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 40 Mindful Connect

sankoumax-blog-40-mindful-connect

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-40-mindful-connect"} /-->

CSS:
.section-sankoumax-blog-40-mindful-connect { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — blog 41 Spicato Daruma

sankoumax-blog-41-spicato-daruma

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-blog-41-spicato-daruma"} /-->

CSS:
.section-sankoumax-blog-41-spicato-daruma { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankoumax-blog-41-spicato-daruma').forEach((el) => el.dataset.ready = 'true');

SANKOU Max — blog 42 Morohoshi Portfolio

sankoumax-blog-42-morohoshi-portfolio

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — blog 43 Vision Structure

sankoumax-blog-43-vision-structure

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — blog 44 Nakiri Shota

sankoumax-blog-44-nakiri-shota

Copy

Link

2144

Nakiri Shota

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — blog 45 Koba Clinic

sankoumax-blog-45-koba-clinic

Copy

Link

Sampled Site

2145 / Koba Clinic

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

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

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

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

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

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

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

SANKOU Max — blog 46 Ems Recruit

sankoumax-blog-46-ems-recruit

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU Max — blog 47 Felissimo Panda

sankoumax-blog-47-felissimo-panda

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

SANKOU Max — blog 48 Iriam Miraito

sankoumax-blog-48-iriam-miraito

Copy

Link

Collage

素材感を重ねる

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

2148

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

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

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

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

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

SANKOU Max — blog 49 Gaaboo

sankoumax-blog-49-gaaboo

Copy

Link

Gaaboo

About

Works

Journal

Contact

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

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

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

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

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

SANKOU Max — blog 50 Violet Patisserie

sankoumax-blog-50-violet-patisserie

Copy

Link

Editorial

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

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

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