検索…
カタログ 統計
CATALOG › Business › Map / Location
マップ / 場所
地図埋め込み、ピン情報、近隣案内、ルート図。
70
Patterns
Business
Group
isValid=0
Verified
CSS
Animation
01
Map — Directions Prompt Box
map-directions-box
📍 GET DIRECTIONS
経路を確認する
現在地から店舗までの経路を Google Maps で表示します。
- パターン名: Map — Directions Prompt Box
- 概要: Dark CTA box prompting users to open route directions in Google Maps.
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 880px、主要ブロック group, group, group, paragraph, heading, paragraph, buttons, button
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/map-directions-box"} /-->
CSS:
.section-map-directions-box { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-map-directions-box').forEach((el) => el.dataset.ready = 'true');
02
Map — Locations 3-Up Cards
map-location-3spots
店舗一覧
📍
表参道店
渋谷区神宮前 4-X-X
表参道駅 A2 徒歩 5 分
📍
京都店
京都市中京区先斗町
河原町駅 徒歩 8 分
📍
福岡店
福岡市中央区天神
天神駅 徒歩 3 分
- パターン名: Map — Locations 3-Up Cards
- 概要: Three location cards with map-tile thumbnails and address summaries.
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1180px、主要ブロック group, heading, columns, column, cover, paragraph, group, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/map-location-3spots"} /-->
CSS:
.section-map-location-3spots { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-map-location-3spots').forEach((el) => el.dataset.ready = 'true');
03
Map — Big Map Placeholder
map-with-pin-card
📍
Google Maps をここに埋め込み
- パターン名: Map — Big Map Placeholder
- 概要: Large rounded map placeholder, ready to be replaced with Google Maps embed.
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: ビジュアル面を中心にしたカバー構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, cover, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/map-with-pin-card"} /-->
CSS:
.section-map-with-pin-card { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-map-with-pin-card').forEach((el) => el.dataset.ready = 'true');
04
Reference Complete — map-location 01 Sticky Entry
reference-complete-map-location-01-sticky-entry-asuzac-highschool
Sampled Site
16301 / Asuzac Highschool
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: Reference Complete — map-location 01 Sticky Entry
- 概要: 参照サンプル再確認から追加したmap-location向け部品。固定導線つきの大判ファーストビュー。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 26% / 74%、推奨コンテンツ幅 49883px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-map-location-01-sticky-entry-asuzac-highschool"} /-->
CSS:
.section-reference-complete-map-location-01-sticky-entry-asuzac-highschool { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-map-location-01-sticky-entry-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');
05
Reference Complete — map-location 02 Editorial Issue
reference-complete-map-location-02-editorial-issue-mizota-ks
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: Reference Complete — map-location 02 Editorial Issue
- 概要: 参照サンプル再確認から追加したmap-location向け部品。雑誌的な見出しと導入文の編集レイアウト。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 17322px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-map-location-02-editorial-issue-mizota-ks"} /-->
CSS:
.section-reference-complete-map-location-02-editorial-issue-mizota-ks { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-map-location-02-editorial-issue-mizota-ks').forEach((el) => el.dataset.ready = 'true');
06
Reference Complete — map-location 03 Brand Index
reference-complete-map-location-03-brand-index-shueisha-recruit
Card Flow
迷わない比較カード
Shueisha Recruit から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: Reference Complete — map-location 03 Brand Index
- 概要: 参照サンプル再確認から追加したmap-location向け部品。複数ブランドやサービスを迷わせず並べる索引。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 17383px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-map-location-03-brand-index-shueisha-recruit"} /-->
CSS:
.section-reference-complete-map-location-03-brand-index-shueisha-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-map-location-03-brand-index-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');
07
Reference Complete — map-location 04 Recruit Story
reference-complete-map-location-04-recruit-story-studio-cbr
Split Story
写真と要点で信頼を作る
Studio Cbr の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: Reference Complete — map-location 04 Recruit Story
- 概要: 参照サンプル再確認から追加したmap-location向け部品。採用・企業紹介に使える人物/思想の分割構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 1px / 1px / 1px / 58%、推奨コンテンツ幅 17344px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-map-location-04-recruit-story-studio-cbr"} /-->
CSS:
.section-reference-complete-map-location-04-recruit-story-studio-cbr { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-map-location-04-recruit-story-studio-cbr').forEach((el) => el.dataset.ready = 'true');
08
Reference Complete — map-location 05 Commerce Compare
reference-complete-map-location-05-commerce-compare-janu
Collection Selector
Janu の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: Reference Complete — map-location 05 Commerce Compare
- 概要: 参照サンプル再確認から追加したmap-location向け部品。料金・商品・プランを比較しやすい構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 17405px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-map-location-05-commerce-compare-janu"} /-->
CSS:
.section-reference-complete-map-location-05-commerce-compare-janu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-map-location-05-commerce-compare-janu').forEach((el) => el.dataset.ready = 'true');
09
Reference Complete — map-location 06 Timeline Proof
reference-complete-map-location-06-timeline-proof-kikyougaoka
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: Reference Complete — map-location 06 Timeline Proof
- 概要: 参照サンプル再確認から追加したmap-location向け部品。沿革・導入手順・制作工程の時系列。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 17346px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-map-location-06-timeline-proof-kikyougaoka"} /-->
CSS:
.section-reference-complete-map-location-06-timeline-proof-kikyougaoka { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-map-location-06-timeline-proof-kikyougaoka').forEach((el) => el.dataset.ready = 'true');
10
Reference Complete — map-location 07 Gallery Led
reference-complete-map-location-07-gallery-led-notahotel-architects
Detail
- パターン名: Reference Complete — map-location 07 Gallery Led
- 概要: 参照サンプル再確認から追加したmap-location向け部品。写真量の多い商材を見せるギャラリー導線。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 17427px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-map-location-07-gallery-led-notahotel-architects"} /-->
CSS:
.section-reference-complete-map-location-07-gallery-led-notahotel-architects { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-map-location-07-gallery-led-notahotel-architects').forEach((el) => el.dataset.ready = 'true');
11
Reference Complete — map-location 08 Dashboard Proof
reference-complete-map-location-08-dashboard-proof-jins-holdings
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: Reference Complete — map-location 08 Dashboard Proof
- 概要: 参照サンプル再確認から追加したmap-location向け部品。B2B/SaaS向けの数値と証拠の組み合わせ。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 17388px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-map-location-08-dashboard-proof-jins-holdings"} /-->
CSS:
.section-reference-complete-map-location-08-dashboard-proof-jins-holdings { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-map-location-08-dashboard-proof-jins-holdings').forEach((el) => el.dataset.ready = 'true');
12
Reference Complete — map-location 09 Contact Ready
reference-complete-map-location-09-contact-ready-twoe
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: Reference Complete — map-location 09 Contact Ready
- 概要: 参照サンプル再確認から追加したmap-location向け部品。問い合わせ前の入力項目を整理する導線。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 17369px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-map-location-09-contact-ready-twoe"} /-->
CSS:
.section-reference-complete-map-location-09-contact-ready-twoe { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-map-location-09-contact-ready-twoe').forEach((el) => el.dataset.ready = 'true');
13
Reference Complete — map-location 10 Mobile Rail
reference-complete-map-location-10-mobile-rail-plaid-alpha
Plaid
About
Works
Journal
Contact
- パターン名: Reference Complete — map-location 10 Mobile Rail
- 概要: 参照サンプル再確認から追加したmap-location向け部品。スマホ閲覧で要点を縦に追えるレール型。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 17490px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-map-location-10-mobile-rail-plaid-alpha"} /-->
CSS:
.section-reference-complete-map-location-10-mobile-rail-plaid-alpha { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-reference-complete-map-location-10-mobile-rail-plaid-alpha').forEach((el) => el.dataset.ready = 'true');
14
SANKOU100 — 023 Matsuo Komuten
sankou100-023-matsuo-komuten
Card Flow
迷わない比較カード
Matsuo Komuten から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU100 — 023 Matsuo Komuten
- 概要: SANKOU! sample 023から抽出したcards型の商用サイト向け構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1103px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-023-matsuo-komuten"} /-->
CSS:
.section-sankou100-023-matsuo-komuten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-023-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');
15
SANKOU100 — 063 Depsoa
sankou100-063-depsoa
Card Flow
迷わない比較カード
Depsoa から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU100 — 063 Depsoa
- 概要: SANKOU! sample 063から抽出したcards型の商用サイト向け構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1143px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-063-depsoa"} /-->
CSS:
.section-sankou100-063-depsoa { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankou100-063-depsoa').forEach((el) => el.dataset.ready = 'true');
16
SANKOU Max — map-location 01 Favtown Wakayama
sankoumax-map-location-01-favtown-wakayama
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — map-location 01 Favtown Wakayama
- 概要: SANKOU100 sample setから展開したmap-location向けfaq構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4221px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-01-favtown-wakayama"} /-->
CSS:
.section-sankoumax-map-location-01-favtown-wakayama { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-01-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');
17
SANKOU Max — map-location 02 Palcloset Fashion
sankoumax-map-location-02-palcloset-fashion
Detail
- パターン名: SANKOU Max — map-location 02 Palcloset Fashion
- 概要: SANKOU100 sample setから展開したmap-location向けgallery構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4422px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-02-palcloset-fashion"} /-->
CSS:
.section-sankoumax-map-location-02-palcloset-fashion { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-02-palcloset-fashion').forEach((el) => el.dataset.ready = 'true');
18
SANKOU Max — map-location 03 Michikusa Art
sankoumax-map-location-03-michikusa-art
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — map-location 03 Michikusa Art
- 概要: SANKOU100 sample setから展開したmap-location向けroster構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4423px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-03-michikusa-art"} /-->
CSS:
.section-sankoumax-map-location-03-michikusa-art { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-03-michikusa-art').forEach((el) => el.dataset.ready = 'true');
19
SANKOU Max — map-location 04 Tenten
sankoumax-map-location-04-tenten
3304
Tenten
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — map-location 04 Tenten
- 概要: SANKOU100 sample setから展開したmap-location向けmanifesto構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 4204px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-04-tenten"} /-->
CSS:
.section-sankoumax-map-location-04-tenten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-04-tenten').forEach((el) => el.dataset.ready = 'true');
20
SANKOU Max — map-location 05 Unipos
sankoumax-map-location-05-unipos
Sampled Site
3305 / Unipos
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — map-location 05 Unipos
- 概要: SANKOU100 sample setから展開したmap-location向けcover構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 26% / 74%、推奨コンテンツ幅 10895px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-05-unipos"} /-->
CSS:
.section-sankoumax-map-location-05-unipos { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-05-unipos').forEach((el) => el.dataset.ready = 'true');
21
SANKOU Max — map-location 06 Trail Inc
sankoumax-map-location-06-trail-inc
Split Story
写真と要点で信頼を作る
Trail Inc の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — map-location 06 Trail Inc
- 概要: SANKOU100 sample setから展開したmap-location向けsplit構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 4346px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-06-trail-inc"} /-->
CSS:
.section-sankoumax-map-location-06-trail-inc { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-06-trail-inc').forEach((el) => el.dataset.ready = 'true');
22
SANKOU Max — map-location 07 Applebase
sankoumax-map-location-07-applebase
Card Flow
迷わない比較カード
Applebase から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — map-location 07 Applebase
- 概要: SANKOU100 sample setから展開したmap-location向けcards構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4387px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-07-applebase"} /-->
CSS:
.section-sankoumax-map-location-07-applebase { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-07-applebase').forEach((el) => el.dataset.ready = 'true');
23
SANKOU Max — map-location 08 Meisei Es
sankoumax-map-location-08-meisei-es
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
3308
- パターン名: SANKOU Max — map-location 08 Meisei Es
- 概要: SANKOU100 sample setから展開したmap-location向けcollage構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 36% / 34% / 1px、推奨コンテンツ幅 4428px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-08-meisei-es"} /-->
CSS:
.section-sankoumax-map-location-08-meisei-es { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-08-meisei-es').forEach((el) => el.dataset.ready = 'true');
24
SANKOU Max — map-location 09 Unicell
sankoumax-map-location-09-unicell
Unicell
About
Works
Journal
Contact
- パターン名: SANKOU Max — map-location 09 Unicell
- 概要: SANKOU100 sample setから展開したmap-location向けrail構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 4489px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-09-unicell"} /-->
CSS:
.section-sankoumax-map-location-09-unicell { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-09-unicell').forEach((el) => el.dataset.ready = 'true');
25
SANKOU Max — map-location 10 Uki Editions
sankoumax-map-location-10-uki-editions
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — map-location 10 Uki Editions
- 概要: SANKOU100 sample setから展開したmap-location向けeditorial構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 4330px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-10-uki-editions"} /-->
CSS:
.section-sankoumax-map-location-10-uki-editions { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-10-uki-editions').forEach((el) => el.dataset.ready = 'true');
26
SANKOU Max — map-location 11 Kikyougaoka
sankoumax-map-location-11-kikyougaoka
Collection Selector
Kikyougaoka の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — map-location 11 Kikyougaoka
- 概要: SANKOU100 sample setから展開したmap-location向けproduct構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 4411px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-11-kikyougaoka"} /-->
CSS:
.section-sankoumax-map-location-11-kikyougaoka { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-11-kikyougaoka').forEach((el) => el.dataset.ready = 'true');
27
SANKOU Max — map-location 12 J Security
sankoumax-map-location-12-j-security
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — map-location 12 J Security
- 概要: SANKOU100 sample setから展開したmap-location向けtimeline構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4352px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-12-j-security"} /-->
CSS:
.section-sankoumax-map-location-12-j-security { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-12-j-security').forEach((el) => el.dataset.ready = 'true');
28
SANKOU Max — map-location 13 Serious Ceramic
sankoumax-map-location-13-serious-ceramic
数字で納得させる
43%
改善率
4分
短縮
23291
導入数
- パターン名: SANKOU Max — map-location 13 Serious Ceramic
- 概要: SANKOU100 sample setから展開したmap-location向けstats構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4273px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-13-serious-ceramic"} /-->
CSS:
.section-sankoumax-map-location-13-serious-ceramic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-13-serious-ceramic').forEach((el) => el.dataset.ready = 'true');
29
SANKOU Max — map-location 14 Tsumari Chamame
sankoumax-map-location-14-tsumari-chamame
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — map-location 14 Tsumari Chamame
- 概要: SANKOU100 sample setから展開したmap-location向けcontact構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 56% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4394px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-14-tsumari-chamame"} /-->
CSS:
.section-sankoumax-map-location-14-tsumari-chamame { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-14-tsumari-chamame').forEach((el) => el.dataset.ready = 'true');
30
SANKOU Max — map-location 15 Notahotel Architects
sankoumax-map-location-15-notahotel-architects
Notahotel Architects
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 3315
- パターン名: SANKOU Max — map-location 15 Notahotel Architects
- 概要: SANKOU100 sample setから展開したmap-location向けfooter構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 4435px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-15-notahotel-architects"} /-->
CSS:
.section-sankoumax-map-location-15-notahotel-architects { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-15-notahotel-architects').forEach((el) => el.dataset.ready = 'true');
31
SANKOU Max — map-location 16 Montblanc Pictures
sankoumax-map-location-16-montblanc-pictures
NEWS
Montblanc Pictures から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — map-location 16 Montblanc Pictures
- 概要: SANKOU100 sample setから展開したmap-location向けalert構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4396px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-16-montblanc-pictures"} /-->
CSS:
.section-sankoumax-map-location-16-montblanc-pictures { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-16-montblanc-pictures').forEach((el) => el.dataset.ready = 'true');
32
SANKOU Max — map-location 17 Tattoo Rays
sankoumax-map-location-17-tattoo-rays
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — map-location 17 Tattoo Rays
- 概要: SANKOU100 sample setから展開したmap-location向けmap構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4357px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-17-tattoo-rays"} /-->
CSS:
.section-sankoumax-map-location-17-tattoo-rays { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-17-tattoo-rays').forEach((el) => el.dataset.ready = 'true');
33
SANKOU Max — map-location 18 Rim Jins
sankoumax-map-location-18-rim-jins
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — map-location 18 Rim Jins
- 概要: SANKOU100 sample setから展開したmap-location向けform構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4378px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-18-rim-jins"} /-->
CSS:
.section-sankoumax-map-location-18-rim-jins { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-18-rim-jins').forEach((el) => el.dataset.ready = 'true');
34
SANKOU Max — map-location 19 Obunko
sankoumax-map-location-19-obunko
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — map-location 19 Obunko
- 概要: SANKOU100 sample setから展開したmap-location向けtabs構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4299px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-19-obunko"} /-->
CSS:
.section-sankoumax-map-location-19-obunko { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-19-obunko').forEach((el) => el.dataset.ready = 'true');
35
SANKOU Max — map-location 20 Pronets Recruit
sankoumax-map-location-20-pronets-recruit
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — map-location 20 Pronets Recruit
- 概要: SANKOU100 sample setから展開したmap-location向けdashboard構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 4400px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-20-pronets-recruit"} /-->
CSS:
.section-sankoumax-map-location-20-pronets-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-20-pronets-recruit').forEach((el) => el.dataset.ready = 'true');
36
SANKOU Max — map-location 21 Glanta
sankoumax-map-location-21-glanta
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — map-location 21 Glanta
- 概要: SANKOU100 sample setから展開したmap-location向けfaq構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4241px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-21-glanta"} /-->
CSS:
.section-sankoumax-map-location-21-glanta { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-21-glanta').forEach((el) => el.dataset.ready = 'true');
37
SANKOU Max — map-location 22 Tashi Portfolio
sankoumax-map-location-22-tashi-portfolio
Detail
- パターン名: SANKOU Max — map-location 22 Tashi Portfolio
- 概要: SANKOU100 sample setから展開したmap-location向けgallery構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4442px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-22-tashi-portfolio"} /-->
CSS:
.section-sankoumax-map-location-22-tashi-portfolio { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-22-tashi-portfolio').forEach((el) => el.dataset.ready = 'true');
38
SANKOU Max — map-location 23 Kitanohashi
sankoumax-map-location-23-kitanohashi
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — map-location 23 Kitanohashi
- 概要: SANKOU100 sample setから展開したmap-location向けroster構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4443px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-23-kitanohashi"} /-->
CSS:
.section-sankoumax-map-location-23-kitanohashi { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-23-kitanohashi').forEach((el) => el.dataset.ready = 'true');
39
SANKOU Max — map-location 24 Morinosato Clinic
sankoumax-map-location-24-morinosato-clinic
3324
Morinosato Clinic
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — map-location 24 Morinosato Clinic
- 概要: SANKOU100 sample setから展開したmap-location向けmanifesto構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 4224px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-24-morinosato-clinic"} /-->
CSS:
.section-sankoumax-map-location-24-morinosato-clinic { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-24-morinosato-clinic').forEach((el) => el.dataset.ready = 'true');
40
SANKOU Max — map-location 25 Asuzac Highschool
sankoumax-map-location-25-asuzac-highschool
Sampled Site
3325 / Asuzac Highschool
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — map-location 25 Asuzac Highschool
- 概要: SANKOU100 sample setから展開したmap-location向けcover構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 28% / 72%、推奨コンテンツ幅 10955px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-25-asuzac-highschool"} /-->
CSS:
.section-sankoumax-map-location-25-asuzac-highschool { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-25-asuzac-highschool').forEach((el) => el.dataset.ready = 'true');
41
SANKOU Max — map-location 26 Junni Newyear
sankoumax-map-location-26-junni-newyear
Split Story
写真と要点で信頼を作る
Junni Newyear の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — map-location 26 Junni Newyear
- 概要: SANKOU100 sample setから展開したmap-location向けsplit構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 4366px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-26-junni-newyear"} /-->
CSS:
.section-sankoumax-map-location-26-junni-newyear { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-26-junni-newyear').forEach((el) => el.dataset.ready = 'true');
42
SANKOU Max — map-location 27 Mizota Ks
sankoumax-map-location-27-mizota-ks
Card Flow
迷わない比較カード
Mizota Ks から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — map-location 27 Mizota Ks
- 概要: SANKOU100 sample setから展開したmap-location向けcards構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4407px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-27-mizota-ks"} /-->
CSS:
.section-sankoumax-map-location-27-mizota-ks { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-27-mizota-ks').forEach((el) => el.dataset.ready = 'true');
43
SANKOU Max — map-location 28 Nissan Career
sankoumax-map-location-28-nissan-career
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
3328
- パターン名: SANKOU Max — map-location 28 Nissan Career
- 概要: SANKOU100 sample setから展開したmap-location向けcollage構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 1px / 38% / 32% / 1px、推奨コンテンツ幅 4448px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-28-nissan-career"} /-->
CSS:
.section-sankoumax-map-location-28-nissan-career { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-28-nissan-career').forEach((el) => el.dataset.ready = 'true');
44
SANKOU Max — map-location 29 Shueisha Recruit
sankoumax-map-location-29-shueisha-recruit
Shueisha
About
Works
Journal
Contact
- パターン名: SANKOU Max — map-location 29 Shueisha Recruit
- 概要: SANKOU100 sample setから展開したmap-location向けrail構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 4509px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-29-shueisha-recruit"} /-->
CSS:
.section-sankoumax-map-location-29-shueisha-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-29-shueisha-recruit').forEach((el) => el.dataset.ready = 'true');
45
SANKOU Max — map-location 30 Sanu Weekday
sankoumax-map-location-30-sanu-weekday
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — map-location 30 Sanu Weekday
- 概要: SANKOU100 sample setから展開したmap-location向けeditorial構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 46% / 54% / 1px、推奨コンテンツ幅 4350px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-30-sanu-weekday"} /-->
CSS:
.section-sankoumax-map-location-30-sanu-weekday { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-30-sanu-weekday').forEach((el) => el.dataset.ready = 'true');
46
SANKOU Max — map-location 31 Newspicks Business
sankoumax-map-location-31-newspicks-business
Collection Selector
Newspicks Business の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — map-location 31 Newspicks Business
- 概要: SANKOU100 sample setから展開したmap-location向けproduct構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 4431px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-31-newspicks-business"} /-->
CSS:
.section-sankoumax-map-location-31-newspicks-business { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-31-newspicks-business').forEach((el) => el.dataset.ready = 'true');
47
SANKOU Max — map-location 32 Miyakawa Lab
sankoumax-map-location-32-miyakawa-lab
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — map-location 32 Miyakawa Lab
- 概要: SANKOU100 sample setから展開したmap-location向けtimeline構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4372px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-32-miyakawa-lab"} /-->
CSS:
.section-sankoumax-map-location-32-miyakawa-lab { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-32-miyakawa-lab').forEach((el) => el.dataset.ready = 'true');
48
SANKOU Max — map-location 33 Matsuo Komuten
sankoumax-map-location-33-matsuo-komuten
数字で納得させる
63%
改善率
6分
短縮
23431
導入数
- パターン名: SANKOU Max — map-location 33 Matsuo Komuten
- 概要: SANKOU100 sample setから展開したmap-location向けstats構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4293px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-33-matsuo-komuten"} /-->
CSS:
.section-sankoumax-map-location-33-matsuo-komuten { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-33-matsuo-komuten').forEach((el) => el.dataset.ready = 'true');
49
SANKOU Max — map-location 34 Yokohama Timberwharf
sankoumax-map-location-34-yokohama-timberwharf
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — map-location 34 Yokohama Timberwharf
- 概要: SANKOU100 sample setから展開したmap-location向けcontact構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 52% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4414px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-34-yokohama-timberwharf"} /-->
CSS:
.section-sankoumax-map-location-34-yokohama-timberwharf { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-34-yokohama-timberwharf').forEach((el) => el.dataset.ready = 'true');
50
SANKOU Max — map-location 35 Janu
sankoumax-map-location-35-janu
Janu
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 3335
- パターン名: SANKOU Max — map-location 35 Janu
- 概要: SANKOU100 sample setから展開したmap-location向けfooter構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 4455px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-35-janu"} /-->
CSS:
.section-sankoumax-map-location-35-janu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-35-janu').forEach((el) => el.dataset.ready = 'true');
51
SANKOU Max — map-location 36 Daimatsu
sankoumax-map-location-36-daimatsu
NEWS
Daimatsu から抽出した告知導線。重要なお知らせを短く表示します。
- パターン名: SANKOU Max — map-location 36 Daimatsu
- 概要: SANKOU100 sample setから展開したmap-location向けalert構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 19% / 1px / 57% / 24%、推奨コンテンツ幅 4416px、主要ブロック group, columns, column, group, paragraph, column, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-36-daimatsu"} /-->
CSS:
.section-sankoumax-map-location-36-daimatsu { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-36-daimatsu').forEach((el) => el.dataset.ready = 'true');
52
SANKOU Max — map-location 37 Omotesando Ortho
sankoumax-map-location-37-omotesando-ortho
Access
迷わないアクセス案内
01
駅を固定
02
目印を指定
03
入口を明示
- パターン名: SANKOU Max — map-location 37 Omotesando Ortho
- 概要: SANKOU100 sample setから展開したmap-location向けmap構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4377px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-37-omotesando-ortho"} /-->
CSS:
.section-sankoumax-map-location-37-omotesando-ortho { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-37-omotesando-ortho').forEach((el) => el.dataset.ready = 'true');
53
SANKOU Max — map-location 38 Dodasports
sankoumax-map-location-38-dodasports
Form
入力前に安心させる
フォーム風の標準ブロックUI。実フォーム化前の設計確認に使えます。
お名前
メール
相談内容
- パターン名: SANKOU Max — map-location 38 Dodasports
- 概要: SANKOU100 sample setから展開したmap-location向けform構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px / 1px / 1px、推奨コンテンツ幅 4398px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-38-dodasports"} /-->
CSS:
.section-sankoumax-map-location-38-dodasports { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-38-dodasports').forEach((el) => el.dataset.ready = 'true');
54
SANKOU Max — map-location 39 Ja Aichi Recruit
sankoumax-map-location-39-ja-aichi-recruit
Overview
Feature
Price
FAQ
切り替え前提の情報整理
商品、採用、サービス紹介で情報量を抑えて見せるタブ型。
- パターン名: SANKOU Max — map-location 39 Ja Aichi Recruit
- 概要: SANKOU100 sample setから展開したmap-location向けtabs構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4319px、主要ブロック group, group, columns, column, group, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-39-ja-aichi-recruit"} /-->
CSS:
.section-sankoumax-map-location-39-ja-aichi-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-39-ja-aichi-recruit').forEach((el) => el.dataset.ready = 'true');
55
SANKOU Max — map-location 40 Kiyasuku
sankoumax-map-location-40-kiyasuku
Dashboard
状況を即座に把握する
72
Tasks
Plan
Build
Review
運用画面の状態をコンパクトに整理します。
- パターン名: SANKOU Max — map-location 40 Kiyasuku
- 概要: SANKOU100 sample setから展開したmap-location向けdashboard構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 35% / 1px / 65% / 1px / 1px、推奨コンテンツ幅 4420px、主要ブロック group, paragraph, heading, columns, column, group, heading, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-40-kiyasuku"} /-->
CSS:
.section-sankoumax-map-location-40-kiyasuku { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-40-kiyasuku').forEach((el) => el.dataset.ready = 'true');
56
SANKOU Max — map-location 41 Hirono Recruit
sankoumax-map-location-41-hirono-recruit
FAQ
不安を先回りして解消する
予約できますか？
回答は短く、判断に必要な情報だけを表示します。
費用はどれくらい？
回答は短く、判断に必要な情報だけを表示します。
相談だけでも可能？
回答は短く、判断に必要な情報だけを表示します。
- パターン名: SANKOU Max — map-location 41 Hirono Recruit
- 概要: SANKOU100 sample setから展開したmap-location向けfaq構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4261px、主要ブロック group, paragraph, heading, group, paragraph, paragraph, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-41-hirono-recruit"} /-->
CSS:
.section-sankoumax-map-location-41-hirono-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-41-hirono-recruit').forEach((el) => el.dataset.ready = 'true');
57
SANKOU Max — map-location 42 Ichizenbooks
sankoumax-map-location-42-ichizenbooks
Detail
- パターン名: SANKOU Max — map-location 42 Ichizenbooks
- 概要: SANKOU100 sample setから展開したmap-location向けgallery構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 25% / 1px / 25%、推奨コンテンツ幅 4462px、主要ブロック group, columns, column, image, column, image, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-42-ichizenbooks"} /-->
CSS:
.section-sankoumax-map-location-42-ichizenbooks { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-42-ichizenbooks').forEach((el) => el.dataset.ready = 'true');
58
SANKOU Max — map-location 43 Mec Residence Recruit
sankoumax-map-location-43-mec-residence-recruit
People Line
Director
Planner
Designer
- パターン名: SANKOU Max — map-location 43 Mec Residence Recruit
- 概要: SANKOU100 sample setから展開したmap-location向けroster構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 4463px、主要ブロック group, heading, columns, column, image, paragraph, column, image
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-43-mec-residence-recruit"} /-->
CSS:
.section-sankoumax-map-location-43-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-43-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');
59
SANKOU Max — map-location 44 Greenpark Santo
sankoumax-map-location-44-greenpark-santo
3344
Greenpark Santo
静かな思想を置く
余白、短文、少ない選択肢で印象を残します。
- パターン名: SANKOU Max — map-location 44 Greenpark Santo
- 概要: SANKOU100 sample setから展開したmap-location向けmanifesto構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 30% / 40% / 30%、推奨コンテンツ幅 4244px、主要ブロック group, columns, column, paragraph, paragraph, column, heading, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-44-greenpark-santo"} /-->
CSS:
.section-sankoumax-map-location-44-greenpark-santo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-44-greenpark-santo').forEach((el) => el.dataset.ready = 'true');
60
SANKOU Max — map-location 45 Land Sapporo
sankoumax-map-location-45-land-sapporo
Sampled Site
3345 / Land Sapporo
商用サイトの入口を強くする
大判写真、短い説明、明確なCTAを一画面に圧縮します。
- パターン名: SANKOU Max — map-location 45 Land Sapporo
- 概要: SANKOU100 sample setから展開したmap-location向けcover構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 30% / 70%、推奨コンテンツ幅 11015px、主要ブロック cover, group, columns, column, paragraph, paragraph, column, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-45-land-sapporo"} /-->
CSS:
.section-sankoumax-map-location-45-land-sapporo { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-45-land-sapporo').forEach((el) => el.dataset.ready = 'true');
61
SANKOU Max — map-location 46 Tokachi Fruits
sankoumax-map-location-46-tokachi-fruits
Split Story
写真と要点で信頼を作る
Tokachi Fruits の構成傾向を、事業説明に使いやすい分割面へ抽象化。
Concept
Proof
Action
- パターン名: SANKOU Max — map-location 46 Tokachi Fruits
- 概要: SANKOU100 sample setから展開したmap-location向けsplit構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 1px / 1px / 1px / 56%、推奨コンテンツ幅 4386px、主要ブロック group, columns, column, paragraph, heading, paragraph, columns, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-46-tokachi-fruits"} /-->
CSS:
.section-sankoumax-map-location-46-tokachi-fruits { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-46-tokachi-fruits').forEach((el) => el.dataset.ready = 'true');
62
SANKOU Max — map-location 47 Echitora
sankoumax-map-location-47-echitora
Card Flow
迷わない比較カード
Echitora から抽出した、選択を促すカード群。
01
見つける
導線を小さな判断単位に分解します。
02
選ぶ
導線を小さな判断単位に分解します。
03
進む
導線を小さな判断単位に分解します。
- パターン名: SANKOU Max — map-location 47 Echitora
- 概要: SANKOU100 sample setから展開したmap-location向けcards構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4427px、主要ブロック group, paragraph, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-47-echitora"} /-->
CSS:
.section-sankoumax-map-location-47-echitora { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-47-echitora').forEach((el) => el.dataset.ready = 'true');
63
SANKOU Max — map-location 48 Megamis
sankoumax-map-location-48-megamis
Collage
素材感を重ねる
写真、番号、短文をずらして一枚の編集面にします。
3348
- パターン名: SANKOU Max — map-location 48 Megamis
- 概要: SANKOU100 sample setから展開したmap-location向けcollage構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 34% / 1px / 34% / 36% / 1px、推奨コンテンツ幅 4468px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-48-megamis"} /-->
CSS:
.section-sankoumax-map-location-48-megamis { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-48-megamis').forEach((el) => el.dataset.ready = 'true');
64
SANKOU Max — map-location 49 Kagami
sankoumax-map-location-49-kagami
Kagami
About
Works
Journal
Contact
- パターン名: SANKOU Max — map-location 49 Kagami
- 概要: SANKOU100 sample setから展開したmap-location向けrail構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 22% / 50% / 1px / 1px / 1px、推奨コンテンツ幅 4529px、主要ブロック group, columns, column, heading, column, columns, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-49-kagami"} /-->
CSS:
.section-sankoumax-map-location-49-kagami { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-49-kagami').forEach((el) => el.dataset.ready = 'true');
65
SANKOU Max — map-location 50 Antscr
sankoumax-map-location-50-antscr
Editorial
読み物のように理解させる
長めの説明を、見出し・本文・箇条書きに分けて読みやすく配置。
- 背景を伝える
- 選ぶ理由を示す
- 次の行動へ進める
- パターン名: SANKOU Max — map-location 50 Antscr
- 概要: SANKOU100 sample setから展開したmap-location向けeditorial構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 50% / 50% / 1px、推奨コンテンツ幅 4370px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, group
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-50-antscr"} /-->
CSS:
.section-sankoumax-map-location-50-antscr { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-50-antscr').forEach((el) => el.dataset.ready = 'true');
66
SANKOU Max — map-location 51 Meisei Kg
sankoumax-map-location-51-meisei-kg
Collection Selector
Meisei Kg の商品導線を、中央ロゴと選択チップへ抽象化。
Line 01
Line 02
Line 03
Lineup
選びやすい商品導線
代表商品、用途、次の行動を横並びで整理し、PC幅では広がりのある選択面にします。
Featured
Use case
Detail
- パターン名: SANKOU Max — map-location 51 Meisei Kg
- 概要: SANKOU100 sample setから展開したmap-location向けproduct構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px / 44% / 56%、推奨コンテンツ幅 4451px、主要ブロック group, group, heading, paragraph, columns, column, group, paragraph
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-51-meisei-kg"} /-->
CSS:
.section-sankoumax-map-location-51-meisei-kg { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-51-meisei-kg').forEach((el) => el.dataset.ready = 'true');
67
SANKOU Max — map-location 52 Iamwithyou
sankoumax-map-location-52-iamwithyou
Journey
体験の流れを一列で見せる
STEP 1
出会う
行動の順番を短く示します。
STEP 2
試す
行動の順番を短く示します。
STEP 3
続ける
行動の順番を短く示します。
- パターン名: SANKOU Max — map-location 52 Iamwithyou
- 概要: SANKOU100 sample setから展開したmap-location向けtimeline構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4392px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, heading
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-52-iamwithyou"} /-->
CSS:
.section-sankoumax-map-location-52-iamwithyou { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-52-iamwithyou').forEach((el) => el.dataset.ready = 'true');
68
SANKOU Max — map-location 53 Depsoa
sankoumax-map-location-53-depsoa
数字で納得させる
83%
改善率
8分
短縮
23571
導入数
- パターン名: SANKOU Max — map-location 53 Depsoa
- 概要: SANKOU100 sample setから展開したmap-location向けstats構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 4313px、主要ブロック group, heading, columns, column, group, heading, paragraph, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-53-depsoa"} /-->
CSS:
.section-sankoumax-map-location-53-depsoa { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-53-depsoa').forEach((el) => el.dataset.ready = 'true');
69
SANKOU Max — map-location 54 Nothing Tech
sankoumax-map-location-54-nothing-tech
Contact
次の相談先を明確にする
電話、予約、資料請求を並べ、迷わず問い合わせへ進めます。
Tel
Form
Map
- パターン名: SANKOU Max — map-location 54 Nothing Tech
- 概要: SANKOU100 sample setから展開したmap-location向けcontact構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 56% / 1px / 1px / 1px / 1px、推奨コンテンツ幅 4434px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, columns
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-54-nothing-tech"} /-->
CSS:
.section-sankoumax-map-location-54-nothing-tech { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-54-nothing-tech').forEach((el) => el.dataset.ready = 'true');
70
SANKOU Max — map-location 55 Upvege
sankoumax-map-location-55-upvege
Upvege
商用サイトの締めに必要な主要リンクを整理します。
- About
- Service
- Works
- News
- Recruit
- Contact
Sample 3355
- パターン名: SANKOU Max — map-location 55 Upvege
- 概要: SANKOU100 sample setから展開したmap-location向けfooter構成。
- 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
- 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
- レイアウト構造: 複数カラムで情報を分割する構造、幅配分 40% / 20% / 20% / 20%、推奨コンテンツ幅 4475px、主要ブロック group, columns, column, heading, paragraph, column, list, column
- メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
- デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
- バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
- 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/sankoumax-map-location-55-upvege"} /-->
CSS:
.section-sankoumax-map-location-55-upvege { max-width: 1200px; margin-inline: auto; }
JS:
document.querySelectorAll('.section-sankoumax-map-location-55-upvege').forEach((el) => el.dataset.ready = 'true');
← Previous
Form UI
フォーム UI
Next →
Card Layout
カードレイアウト
◈ 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