検索…
カタログ 統計
CATALOG › Content › Logos
ロゴ / 提携
クライアントロゴ、提携先、メディア掲載。社会的証明の強化。
70
Patterns
Content
Group
isValid=0
Verified
CSS
Animation
01
Logos — As Seen On (Press)
logos-as-seen-on
— 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');
02
Logos — Client Cards with Industry
logos-client-cards
ご利用企業様
◆ 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');
03
Logos — Dark Single Row
logos-dark-inline
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');
04
Logos — 5×2 Grayscale Grid
logos-grayscale-grid
業界をリードする 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');
05
Reference Complete — logos 01 Sticky Entry
reference-complete-logos-01-sticky-entry-iriam-miraito
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');
06
Reference Complete — logos 02 Editorial Issue
reference-complete-logos-02-editorial-issue-violet-patisserie
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');
07
Reference Complete — logos 03 Brand Index
reference-complete-logos-03-brand-index-saranosono
Card Flow
迷わない比較カード
Saranosono から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: 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');
08
Reference Complete — logos 04 Recruit Story
reference-complete-logos-04-recruit-story-kiyasuku
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');
09
Reference Complete — logos 05 Commerce Compare
reference-complete-logos-05-commerce-compare-tomore
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');
10
Reference Complete — logos 06 Timeline Proof
reference-complete-logos-06-timeline-proof-tsuchitokaze
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');
11
Reference Complete — logos 07 Gallery Led
reference-complete-logos-07-gallery-led-mejinavi
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');
12
Reference Complete — logos 08 Dashboard Proof
reference-complete-logos-08-dashboard-proof-j-security
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');
13
Reference Complete — logos 09 Contact Ready
reference-complete-logos-09-contact-ready-greenpark-santo
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');
14
Reference Complete — logos 10 Mobile Rail
reference-complete-logos-10-mobile-rail-megamis
Megamis
About
Works
Journal
Contact
- パターン名: 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');
15
SANKOU — Holding Brand Selector
sankou-holding-brand-selector
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');
16
SANKOU100 — 016 Miyakawa Lab
sankou100-016-miyakawa-lab
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');
17
SANKOU100 — 056 Iamwithyou
sankou100-056-iamwithyou
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');
18
SANKOU100 — 096 Nakiri Shota
sankou100-096-nakiri-shota
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');
19
SANKOU Max — logos 01 Undimension
sankoumax-logos-01-undimension
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');
20
SANKOU Max — logos 02 Norikura Hanabi
sankoumax-logos-02-norikura-hanabi
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: 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');
21
SANKOU Max — logos 03 Chugaitoen
sankoumax-logos-03-chugaitoen
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');
22
SANKOU Max — logos 04 Favtown Wakayama
sankoumax-logos-04-favtown-wakayama
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');
23
SANKOU Max — logos 05 Palcloset Fashion
sankoumax-logos-05-palcloset-fashion
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');
24
SANKOU Max — logos 06 Michikusa Art
sankoumax-logos-06-michikusa-art
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');
25
SANKOU Max — logos 07 Tenten
sankoumax-logos-07-tenten
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');
26
SANKOU Max — logos 08 Unipos
sankoumax-logos-08-unipos
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');
27
SANKOU Max — logos 09 Trail Inc
sankoumax-logos-09-trail-inc
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');
28
SANKOU Max — logos 10 Applebase
sankoumax-logos-10-applebase
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');
29
SANKOU Max — logos 11 Meisei Es
sankoumax-logos-11-meisei-es
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');
30
SANKOU Max — logos 12 Unicell
sankoumax-logos-12-unicell
Card Flow
迷わない比較カード
Unicell から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: 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');
31
SANKOU Max — logos 13 Uki Editions
sankoumax-logos-13-uki-editions
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');
32
SANKOU Max — logos 14 Kikyougaoka
sankoumax-logos-14-kikyougaoka
Kikyougaoka
About
Works
Journal
Contact
- パターン名: 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');
33
SANKOU Max — logos 15 J Security
sankoumax-logos-15-j-security
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');
34
SANKOU Max — logos 16 Serious Ceramic
sankoumax-logos-16-serious-ceramic
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');
35
SANKOU Max — logos 17 Tsumari Chamame
sankoumax-logos-17-tsumari-chamame
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');
36
SANKOU Max — logos 18 Notahotel Architects
sankoumax-logos-18-notahotel-architects
数字で納得させる
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');
37
SANKOU Max — logos 19 Montblanc Pictures
sankoumax-logos-19-montblanc-pictures
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');
38
SANKOU Max — logos 20 Tattoo Rays
sankoumax-logos-20-tattoo-rays
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');
39
SANKOU Max — logos 21 Rim Jins
sankoumax-logos-21-rim-jins
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');
40
SANKOU Max — logos 22 Obunko
sankoumax-logos-22-obunko
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: 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');
41
SANKOU Max — logos 23 Pronets Recruit
sankoumax-logos-23-pronets-recruit
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');
42
SANKOU Max — logos 24 Glanta
sankoumax-logos-24-glanta
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');
43
SANKOU Max — logos 25 Tashi Portfolio
sankoumax-logos-25-tashi-portfolio
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');
44
SANKOU Max — logos 26 Kitanohashi
sankoumax-logos-26-kitanohashi
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');
45
SANKOU Max — logos 27 Morinosato Clinic
sankoumax-logos-27-morinosato-clinic
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');
46
SANKOU Max — logos 28 Asuzac Highschool
sankoumax-logos-28-asuzac-highschool
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');
47
SANKOU Max — logos 29 Junni Newyear
sankoumax-logos-29-junni-newyear
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');
48
SANKOU Max — logos 30 Mizota Ks
sankoumax-logos-30-mizota-ks
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');
49
SANKOU Max — logos 31 Nissan Career
sankoumax-logos-31-nissan-career
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');
50
SANKOU Max — logos 32 Shueisha Recruit
sankoumax-logos-32-shueisha-recruit
Card Flow
迷わない比較カード
Shueisha Recruit から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: 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');
51
SANKOU Max — logos 33 Sanu Weekday
sankoumax-logos-33-sanu-weekday
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');
52
SANKOU Max — logos 34 Newspicks Business
sankoumax-logos-34-newspicks-business
Newspicks
About
Works
Journal
Contact
- パターン名: 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');
53
SANKOU Max — logos 35 Miyakawa Lab
sankoumax-logos-35-miyakawa-lab
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');
54
SANKOU Max — logos 36 Matsuo Komuten
sankoumax-logos-36-matsuo-komuten
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');
55
SANKOU Max — logos 37 Yokohama Timberwharf
sankoumax-logos-37-yokohama-timberwharf
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');
56
SANKOU Max — logos 38 Janu
sankoumax-logos-38-janu
数字で納得させる
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');
57
SANKOU Max — logos 39 Daimatsu
sankoumax-logos-39-daimatsu
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');
58
SANKOU Max — logos 40 Omotesando Ortho
sankoumax-logos-40-omotesando-ortho
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');
59
SANKOU Max — logos 41 Dodasports
sankoumax-logos-41-dodasports
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');
60
SANKOU Max — logos 42 Ja Aichi Recruit
sankoumax-logos-42-ja-aichi-recruit
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: 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');
61
SANKOU Max — logos 43 Kiyasuku
sankoumax-logos-43-kiyasuku
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');
62
SANKOU Max — logos 44 Hirono Recruit
sankoumax-logos-44-hirono-recruit
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');
63
SANKOU Max — logos 45 Ichizenbooks
sankoumax-logos-45-ichizenbooks
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');
64
SANKOU Max — logos 46 Mec Residence Recruit
sankoumax-logos-46-mec-residence-recruit
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');
65
SANKOU Max — logos 47 Greenpark Santo
sankoumax-logos-47-greenpark-santo
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');
66
SANKOU Max — logos 48 Land Sapporo
sankoumax-logos-48-land-sapporo
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');
67
SANKOU Max — logos 49 Tokachi Fruits
sankoumax-logos-49-tokachi-fruits
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');
68
SANKOU Max — logos 50 Echitora
sankoumax-logos-50-echitora
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');
69
SANKOU Max — logos 51 Megamis
sankoumax-logos-51-megamis
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');
70
SANKOU Max — logos 52 Kagami
sankoumax-logos-52-kagami
Card Flow
迷わない比較カード
Kagami から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: 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');
← Previous
FAQ
FAQ
Next →
Pricing
料金プラン
◈ Blanc Nail
Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。
Foundations
- ヒーロー
- ヘッダー
- フッター
- ナビゲーション
- タイポグラフィ
Content
- フィーチャー
- スタッツ
- コール トゥ アクション
- レビュー / 推薦
- チーム
Business
- 料金プラン
- 商品 / EC
- アクセス / 営業時間
- メニュー (飲食)
- コンタクト
UI Components
- カードレイアウト
- モーダル / アコーディオン
- タブ / セグメント
- バナー / アラート
- SNS
© 2026 Blanc Nail · Built with WordPress + Block Editor v1.0 · isValid=0