検索…

カタログ統計

CATALOG › Content › Logos

ロゴ / 提携

クライアントロゴ、提携先、メディア掲載。社会的証明の強化。

Patterns

Content

Group

isValid=0

Verified

CSS

Animation

Logos — As Seen On (Press)

logos-as-seen-on

Copy

Link

— AS SEEN ON —

Forbes

TechCrunch

WIRED

NIKKEI

BBC

パターン名: Logos — As Seen On (Press)
概要: Horizontal press/media mention row with greyed wordmarks.
使用目的: Logos領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, paragraph, columns, column, paragraph, column, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-as-seen-on"} /-->

CSS:
.section-logos-as-seen-on { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-as-seen-on').forEach((el) => el.dataset.ready = 'true');

Logos — Client Cards with Industry

logos-client-cards

Copy

Link

ご利用企業様

◆ ACME

製造業・ 500 名

△ Nova

SaaS ・ 80 名

● OrbitX

EC ・ 120 名

■ FORGE

金融・ 300 名

パターン名: Logos — Client Cards with Industry
概要: 4 client cards with logo glyph, name, industry + headcount meta.
使用目的: Logos領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, heading, columns, column, group, paragraph, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-client-cards"} /-->

CSS:
.section-logos-client-cards { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-client-cards').forEach((el) => el.dataset.ready = 'true');

Logos — Dark Single Row

logos-dark-inline

Copy

Link

TRUSTED BY

◆ ACME

Brava

CIRRUS

▲ EVERLY

◇ glyph

★ JADE

パターン名: Logos — Dark Single Row
概要: Single row of 6 brand wordmarks on dark background.
使用目的: Logos領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1180px、主要ブロック group, paragraph, columns, column, paragraph, column, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-dark-inline"} /-->

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

JS:
document.querySelectorAll('.section-logos-dark-inline').forEach((el) => el.dataset.ready = 'true');

Logos — 5×2 Grayscale Grid

logos-grayscale-grid

Copy

Link

業界をリードする 3,000+ 社にご利用いただいています

◆ ACME

Brava

CIRRUS

delta.

▲ EVERLY

FIGMENT

◇ glyph

HELIX

iris/

★ JADE

パターン名: Logos — 5×2 Grayscale Grid
概要: Two rows of 5 grayscale brand wordmarks for trust building.
使用目的: Logos領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, paragraph, columns, column, paragraph, column, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/logos-grayscale-grid"} /-->

CSS:
.section-logos-grayscale-grid { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-logos-grayscale-grid').forEach((el) => el.dataset.ready = 'true');

Reference Complete — logos 01 Sticky Entry

reference-complete-logos-01-sticky-entry-iriam-miraito

Copy

Link

Sampled Site

15001 / Iriam Miraito

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

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

詳しく見る

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

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

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

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

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

Reference Complete — logos 02 Editorial Issue

reference-complete-logos-02-editorial-issue-violet-patisserie

Copy

Link

Editorial

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

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

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

記事を見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-logos-02-editorial-issue-violet-patisserie"} /-->

CSS:
.section-reference-complete-logos-02-editorial-issue-violet-patisserie { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-logos-02-editorial-issue-violet-patisserie').forEach((el) => el.dataset.ready = 'true');

Reference Complete — logos 03 Brand Index

reference-complete-logos-03-brand-index-saranosono

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

Reference Complete — logos 04 Recruit Story

reference-complete-logos-04-recruit-story-kiyasuku

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

Reference Complete — logos 05 Commerce Compare

reference-complete-logos-05-commerce-compare-tomore

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

Reference Complete — logos 06 Timeline Proof

reference-complete-logos-06-timeline-proof-tsuchitokaze

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

Reference Complete — logos 07 Gallery Led

reference-complete-logos-07-gallery-led-mejinavi

Copy

Link

Detail

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

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

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

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

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

Reference Complete — logos 08 Dashboard Proof

reference-complete-logos-08-dashboard-proof-j-security

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

Reference Complete — logos 09 Contact Ready

reference-complete-logos-09-contact-ready-greenpark-santo

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-logos-09-contact-ready-greenpark-santo"} /-->

CSS:
.section-reference-complete-logos-09-contact-ready-greenpark-santo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-logos-09-contact-ready-greenpark-santo').forEach((el) => el.dataset.ready = 'true');

Reference Complete — logos 10 Mobile Rail

reference-complete-logos-10-mobile-rail-megamis

Copy

Link

Megamis

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU — Holding Brand Selector

sankou-holding-brand-selector

Copy

Link

Holding

事業ブランドを一画面で選ぶ

コーポレートサイトやグループサイト向けのブランド入口。

A

Retail

B

Care

C

Lab

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou-holding-brand-selector"} /-->

CSS:
.section-sankou-holding-brand-selector { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-sankou-holding-brand-selector').forEach((el) => el.dataset.ready = 'true');

SANKOU100 — 016 Miyakawa Lab

sankou100-016-miyakawa-lab

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-016-miyakawa-lab"} /-->

CSS:
.section-sankou100-016-miyakawa-lab { max-width: 1200px; margin-inline: auto; }

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

SANKOU100 — 056 Iamwithyou

sankou100-056-iamwithyou

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU100 — 096 Nakiri Shota

sankou100-096-nakiri-shota

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-096-nakiri-shota"} /-->

CSS:
.section-sankou100-096-nakiri-shota { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — logos 01 Undimension

sankoumax-logos-01-undimension

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — logos 02 Norikura Hanabi

sankoumax-logos-02-norikura-hanabi

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU Max — logos 03 Chugaitoen

sankoumax-logos-03-chugaitoen

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — logos 04 Favtown Wakayama

sankoumax-logos-04-favtown-wakayama

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

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

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

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

SANKOU Max — logos 05 Palcloset Fashion

sankoumax-logos-05-palcloset-fashion

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — logos 06 Michikusa Art

sankoumax-logos-06-michikusa-art

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — logos 07 Tenten

sankoumax-logos-07-tenten

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — logos 08 Unipos

sankoumax-logos-08-unipos

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — logos 09 Trail Inc

sankoumax-logos-09-trail-inc

Copy

Link

2009

Trail Inc

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — logos 10 Applebase

sankoumax-logos-10-applebase

Copy

Link

Sampled Site

2010 / Applebase

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

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

詳しく見る

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

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

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

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

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

SANKOU Max — logos 11 Meisei Es

sankoumax-logos-11-meisei-es

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU Max — logos 12 Unicell

sankoumax-logos-12-unicell

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

SANKOU Max — logos 13 Uki Editions

sankoumax-logos-13-uki-editions

Copy

Link

Collage

素材感を重ねる

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

2013

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

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

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

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

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

SANKOU Max — logos 14 Kikyougaoka

sankoumax-logos-14-kikyougaoka

Copy

Link

Kikyougaoka

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU Max — logos 15 J Security

sankoumax-logos-15-j-security

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

SANKOU Max — logos 16 Serious Ceramic

sankoumax-logos-16-serious-ceramic

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

SANKOU Max — logos 17 Tsumari Chamame

sankoumax-logos-17-tsumari-chamame

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

SANKOU Max — logos 18 Notahotel Architects

sankoumax-logos-18-notahotel-architects

Copy

Link

数字で納得させる

78%

改善率

5分

短縮

14226

導入数

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

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

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

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

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

SANKOU Max — logos 19 Montblanc Pictures

sankoumax-logos-19-montblanc-pictures

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

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

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

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

SANKOU Max — logos 20 Tattoo Rays

sankoumax-logos-20-tattoo-rays

Copy

Link

Tattoo Rays

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

About
Service
Works

News
Recruit
Contact

Sample 2020

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

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

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

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

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

SANKOU Max — logos 21 Rim Jins

sankoumax-logos-21-rim-jins

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — logos 22 Obunko

sankoumax-logos-22-obunko

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU Max — logos 23 Pronets Recruit

sankoumax-logos-23-pronets-recruit

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — logos 24 Glanta

sankoumax-logos-24-glanta

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

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

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

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

SANKOU Max — logos 25 Tashi Portfolio

sankoumax-logos-25-tashi-portfolio

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — logos 26 Kitanohashi

sankoumax-logos-26-kitanohashi

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — logos 27 Morinosato Clinic

sankoumax-logos-27-morinosato-clinic

Copy

Link

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-logos-27-morinosato-clinic"} /-->

CSS:
.section-sankoumax-logos-27-morinosato-clinic { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — logos 28 Asuzac Highschool

sankoumax-logos-28-asuzac-highschool

Copy

Link

People Line

Director

Planner

Designer

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-logos-28-asuzac-highschool"} /-->

CSS:
.section-sankoumax-logos-28-asuzac-highschool { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — logos 29 Junni Newyear

sankoumax-logos-29-junni-newyear

Copy

Link

2029

Junni Newyear

静かな思想を置く

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

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-logos-29-junni-newyear"} /-->

CSS:
.section-sankoumax-logos-29-junni-newyear { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — logos 30 Mizota Ks

sankoumax-logos-30-mizota-ks

Copy

Link

Sampled Site

2030 / Mizota Ks

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

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

詳しく見る

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-logos-30-mizota-ks"} /-->

CSS:
.section-sankoumax-logos-30-mizota-ks { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — logos 31 Nissan Career

sankoumax-logos-31-nissan-career

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-logos-31-nissan-career"} /-->

CSS:
.section-sankoumax-logos-31-nissan-career { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — logos 32 Shueisha Recruit

sankoumax-logos-32-shueisha-recruit

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

SANKOU Max — logos 33 Sanu Weekday

sankoumax-logos-33-sanu-weekday

Copy

Link

Collage

素材感を重ねる

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

2033

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

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

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

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

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

SANKOU Max — logos 34 Newspicks Business

sankoumax-logos-34-newspicks-business

Copy

Link

Newspicks

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU Max — logos 35 Miyakawa Lab

sankoumax-logos-35-miyakawa-lab

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

SANKOU Max — logos 36 Matsuo Komuten

sankoumax-logos-36-matsuo-komuten

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

SANKOU Max — logos 37 Yokohama Timberwharf

sankoumax-logos-37-yokohama-timberwharf

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

SANKOU Max — logos 38 Janu

sankoumax-logos-38-janu

Copy

Link

数字で納得させる

28%

改善率

7分

短縮

14366

導入数

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

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

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

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

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

SANKOU Max — logos 39 Daimatsu

sankoumax-logos-39-daimatsu

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

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

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

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

SANKOU Max — logos 40 Omotesando Ortho

sankoumax-logos-40-omotesando-ortho

Copy

Link

Omotesando Ortho

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

About
Service
Works

News
Recruit
Contact

Sample 2040

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

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

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

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

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

SANKOU Max — logos 41 Dodasports

sankoumax-logos-41-dodasports

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — logos 42 Ja Aichi Recruit

sankoumax-logos-42-ja-aichi-recruit

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU Max — logos 43 Kiyasuku

sankoumax-logos-43-kiyasuku

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — logos 44 Hirono Recruit

sankoumax-logos-44-hirono-recruit

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

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

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

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

SANKOU Max — logos 45 Ichizenbooks

sankoumax-logos-45-ichizenbooks

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — logos 46 Mec Residence Recruit

sankoumax-logos-46-mec-residence-recruit

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — logos 47 Greenpark Santo

sankoumax-logos-47-greenpark-santo

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — logos 48 Land Sapporo

sankoumax-logos-48-land-sapporo

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — logos 49 Tokachi Fruits

sankoumax-logos-49-tokachi-fruits

Copy

Link

2049

Tokachi Fruits

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — logos 50 Echitora

sankoumax-logos-50-echitora

Copy

Link

Sampled Site

2050 / Echitora

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

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

詳しく見る

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

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

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

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

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

SANKOU Max — logos 51 Megamis

sankoumax-logos-51-megamis

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU Max — logos 52 Kagami

sankoumax-logos-52-kagami

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

◈ Blanc Nail

Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。

Foundations

ヒーロー
ヘッダー
フッター
ナビゲーション
タイポグラフィ

Content

フィーチャー
スタッツ
コールトゥアクション
レビュー / 推薦
チーム

Business

料金プラン
商品 / EC
アクセス / 営業時間
メニュー (飲食)
コンタクト

UI Components

カードレイアウト
モーダル / アコーディオン
タブ / セグメント
バナー / アラート
SNS

ロゴ / 提携 · Logos · Blanc Nail

ロゴ / 提携

ご利用企業様

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

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

迷わない比較カード

見つける

選ぶ

進む

写真と要点で信頼を作る

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

状況を即座に把握する

72

入力前に安心させる

Megamis

事業ブランドを一画面で選ぶ

A

B

C

状況を即座に把握する

72

状況を即座に把握する

72

状況を即座に把握する

72

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

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

People Line

静かな思想を置く

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

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Kikyougaoka

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

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

数字で納得させる

78%

5分

14226

次の相談先を明確にする

Tattoo Rays

迷わないアクセス案内

入力前に安心させる

切り替え前提の情報整理

状況を即座に把握する

72

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

People Line

静かな思想を置く

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

写真と要点で信頼を作る

迷わない比較カード

見つける

選ぶ

進む

素材感を重ねる

Newspicks

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

Collection Selector

選びやすい商品導線

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

出会う