検索…

カタログ統計

CATALOG › Business › Access / Hours

アクセス / 営業時間

実店舗向け。地図、最寄駅、営業時間、駐車場、定休日案内。

Patterns

Business

Group

isValid=0

Verified

CSS

Animation

Access — Area Map Pin Index

access-area-map-index

Copy

Link

番号ピンで周辺を説明

01 02 03 04

Area Pin Index

駅出口

コンビニ角

受付ビル

提携駐車場

パターン名: Access — Area Map Pin Index
概要: Map area with numbered pins and a matching location index.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 68% / 32%、推奨コンテンツ幅 1080px、主要ブロック group, heading, columns, column, cover, paragraph, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-area-map-index"} /-->

CSS:
.section-access-area-map-index { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-area-map-index').forEach((el) => el.dataset.ready = 'true');

Access — Barrier-free Guide

access-barrier-free-guide

Copy

Link

ACCESSIBILITY

バリアフリー導線

段差

入口スロープあり

エレベーター

幅 90cm / 車椅子可

ベビーカー

受付で預かり可

多目的トイレ

同ビル 2F

事前連絡

介助導線を確保

パターン名: Access — Barrier-free Guide
概要: Accessibility-oriented access matrix for wheelchair, stroller and elevator details.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 820px、主要ブロック group, paragraph, heading, group, group, paragraph, paragraph, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-barrier-free-guide"} /-->

CSS:
.section-access-barrier-free-guide { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-barrier-free-guide').forEach((el) => el.dataset.ready = 'true');

Access — Branch Selector Layout

access-branch-selector

Copy

Link

BRANCHES

表参道店

徒歩 5 分

渋谷店

駅直結

恵比寿店

駐車場あり

表参道店

美容室、クリニック、スクールなど複数拠点を持つサイトで、店舗選択と詳細を同時に見せる構成です。

A2 Exit / 5min

パターン名: Access — Branch Selector Layout
概要: Branch list on the left with selected branch details on the right.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 36% / 64%、推奨コンテンツ幅 1040px、主要ブロック group, columns, column, group, paragraph, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-branch-selector"} /-->

CSS:
.section-access-branch-selector { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-branch-selector').forEach((el) => el.dataset.ready = 'true');

Access — Compact Contact Strip

access-compact-contact-strip

Copy

Link

アクセス情報を 1 行で見せる

〒

東京都渋谷区神宮前 4-X-X

☎

03-0000-0000

🚉

表参道駅徒歩 5 分

⏱

11:00 – 21:00

パターン名: Access — Compact Contact Strip
概要: A compact horizontal strip for address, phone, nearest station and hours.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px、推奨コンテンツ幅 1080px、主要ブロック group, heading, group, columns, column, paragraph, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-compact-contact-strip"} /-->

CSS:
.section-access-compact-contact-strip { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-compact-contact-strip').forEach((el) => el.dataset.ready = 'true');

Access — Detour Notice

access-detour-notice

Copy

Link

TEMPORARY ROUTE

工事期間中の迂回ルート

4/28 – 5/10 は駅前通路が一部閉鎖されます。通常より 3 分ほど余裕を持ってお越しください。

B3 出口を利用

地下通路を直進し、地上出口まで進みます。

歩道橋を渡る

案内看板に沿って反対側の歩道へ移動します。

裏口から入館

スタッフが受付までご案内します。

パターン名: Access — Detour Notice
概要: Temporary detour notice layout with alternate route steps.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 45% / 55%、推奨コンテンツ幅 1040px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-detour-notice"} /-->

CSS:
.section-access-detour-notice { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-detour-notice').forEach((el) => el.dataset.ready = 'true');

Access — Route FAQ List

access-faq-route-list

Copy

Link

ROUTE FAQ

来店前のよくある迷いどころ

駅の出口はどこが近いですか？

表参道駅 A2 出口が最短です。雨の日は B3 出口から屋根のある道を使えます。

建物の入口はわかりやすいですか？

1F に黒い縦長のサインがあります。入口はビル右側の自動扉です。

ベビーカーで入れますか？

エレベーターが利用できます。段差を避ける場合は裏口導線をご案内します。

パターン名: Access — Route FAQ List
概要: Accordion-like route FAQ rows for common access questions.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 820px、主要ブロック group, paragraph, heading, group, group, paragraph, group, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-faq-route-list"} /-->

CSS:
.section-access-faq-route-list { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-faq-route-list').forEach((el) => el.dataset.ready = 'true');

Access — Building Floor Guide

access-floor-guide

Copy

Link

BUILDING

ビル内の移動まで案内

入口から受付までの上下移動がある施設向け。エレベーター位置、受付階、目的フロアをまとめます。

エレベーター

入口右手

受付

3F 正面

スタジオ B

スタジオ A

受付 / 待合

共用ラウンジ

エントランス

パターン名: Access — Building Floor Guide
概要: Floor directory layout for multi-floor buildings and reception guidance.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 48% / 52% / 1px、推奨コンテンツ幅 920px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-floor-guide"} /-->

CSS:
.section-access-floor-guide { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-floor-guide').forEach((el) => el.dataset.ready = 'true');

Access — Hours Table Card

access-hours-card

Copy

Link

🕐

営業時間

月曜日

11:00 – 21:00

火曜日

定休日

水〜金曜日

11:00 – 21:00

土・日・祝

10:00 – 20:00

パターン名: Access — Hours Table Card
概要: Centred hours-of-operation card with day-by-day schedule.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px / 1px、推奨コンテンツ幅 640px、主要ブロック group, group, paragraph, heading, group, paragraph, paragraph, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-hours-card"} /-->

CSS:
.section-access-hours-card { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-hours-card').forEach((el) => el.dataset.ready = 'true');

Access — Landmark Mosaic

access-landmark-mosaic

Copy

Link

ランドマークで覚えるアクセス

LANDMARK

青いガラスの角ビル

周辺の目印

駅前の時計台

コンビニを右折

花屋の看板

黒い縦長サイン

パターン名: Access — Landmark Mosaic
概要: Asymmetric landmark feature tile with a numbered local landmark list.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 62% / 38%、推奨コンテンツ幅 1080px、主要ブロック group, heading, columns, column, cover, paragraph, heading, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-landmark-mosaic"} /-->

CSS:
.section-access-landmark-mosaic { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-landmark-mosaic').forEach((el) => el.dataset.ready = 'true');

Access — Live Hours Status

access-live-hours-status

Copy

Link

NOW

営業中

本日は 21:00 まで受付

週間営業時間

月 – 金

11:00 – 21:00

土

10:00 – 20:00

日・祝

10:00 – 18:00

定休日

第 2 火曜

パターン名: Access — Live Hours Status
概要: Large open/closed status block paired with weekly hours.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 44% / 56%、推奨コンテンツ幅 920px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-live-hours-status"} /-->

CSS:
.section-access-live-hours-status { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-live-hours-status').forEach((el) => el.dataset.ready = 'true');

Access — Map Hero Overlay

access-map-hero-overlay

Copy

Link

OPEN TODAY

11:00 – 21:00

表参道駅 A2 出口より徒歩 5 分。雨の日は地下通路 B3 出口もご利用いただけます。

パターン名: Access — Map Hero Overlay
概要: Full-width map-like hero with an overlaid opening-hours panel.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: ビジュアル面を中心にしたカバー構造、幅配分 auto、推奨コンテンツ幅 1180px、主要ブロック group, cover, group, paragraph, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-map-hero-overlay"} /-->

CSS:
.section-access-map-hero-overlay { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-map-hero-overlay').forEach((el) => el.dataset.ready = 'true');

Access — Map Sidebar Locator

access-map-sidebar-locator

Copy

Link

MAP

徒歩 5 分

Omotesando A2 Exit

LOCATION

地図横に要点を固定

大きな地図領域と、住所・最寄駅・営業時間を右側にまとめる店舗向けレイアウトです。

住所

東京都渋谷区神宮前 4-X-X

最寄駅

表参道駅 A2 出口

営業時間

11:00 – 21:00

パターン名: Access — Map Sidebar Locator
概要: Large map placeholder with a fixed information sidebar.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 58% / 42%、推奨コンテンツ幅 1120px、主要ブロック group, columns, column, cover, paragraph, paragraph, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-map-sidebar-locator"} /-->

CSS:
.section-access-map-sidebar-locator { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-map-sidebar-locator').forEach((el) => el.dataset.ready = 'true');

Access — Map / Info Split

access-map-split

Copy

Link

ACCESS

店舗のご案内

📍

Google Maps をここに埋め込み

SAKURA STUDIO 表参道店

〒150-0001
東京都渋谷区神宮前 4-X-X
SAKURA ビル 3F

電車でお越しの方

東京メトロ表参道駅 A2 出口より徒歩 5 分
JR 原宿駅表参道口より徒歩 8 分

営業時間

月〜金 11:00 – 21:00
土日祝 10:00 – 20:00
定休日: 第 2・第 4 火曜日

パターン名: Access — Map / Info Split
概要: Map placeholder on the left and store information (address, transit, hours) on the right.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 55% / 45%、推奨コンテンツ幅 1180px、主要ブロック group, paragraph, heading, columns, column, cover, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-map-split"} /-->

CSS:
.section-access-map-split { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-map-split').forEach((el) => el.dataset.ready = 'true');

Access — Mobile Action Stack

access-mobile-action-stack

Copy

Link

ACCESS

来店前アクション

🧭

経路を開く

Google Maps で表示

☎

電話する

03-0000-0000

📋

住所をコピー

東京都渋谷区神宮前

パターン名: Access — Mobile Action Stack
概要: Phone-first stacked action panel for directions, call and address copy.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 480px、主要ブロック group, group, group, paragraph, heading, group, paragraph, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-mobile-action-stack"} /-->

CSS:
.section-access-mobile-action-stack { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-mobile-action-stack').forEach((el) => el.dataset.ready = 'true');

Access — Parking Status Panel

access-parking-status-panel

Copy

Link

LOCAL INFO

車・自転車での来店情報

駐車場・駐輪場

専用駐車場

2 台 / 予約制

近隣コインパーキング

徒歩 2 分

駐輪スペース

店舗前に 6 台

来店しやすい時間

平日 11:00-14:00

空きあり

平日 18:00-20:00

混雑

土日 10:00-13:00

やや混雑

パターン名: Access — Parking Status Panel
概要: Two-card access panel for parking, bicycle space and visit-time congestion.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 920px、主要ブロック group, paragraph, heading, columns, column, group, heading, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-parking-status-panel"} /-->

CSS:
.section-access-parking-status-panel { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-parking-status-panel').forEach((el) => el.dataset.ready = 'true');

Access — Shuttle Schedule Board

access-shuttle-schedule

Copy

Link

SHUTTLE

送迎バス運行表

イベント会場、宿泊施設、工場見学など、時刻表が必要なアクセスページで使えます。

09:00

駅東口ロータリー発

11:00

駅東口ロータリー発

14:00

会場直行便

17:30

最終便

パターン名: Access — Shuttle Schedule Board
概要: Timetable-style access block for shuttle buses or event transport.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 42% / 58% / 1px、推奨コンテンツ幅 920px、主要ブロック group, columns, column, group, paragraph, heading, paragraph, column

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-shuttle-schedule"} /-->

CSS:
.section-access-shuttle-schedule { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-shuttle-schedule').forEach((el) => el.dataset.ready = 'true');

Access — Static Segmented Transport

access-static-segmented-transport

Copy

Link

TRANSPORT

交通手段を切り替え風に表示

Train

Car

Bus

電車でお越しの方

表参道駅 A2 出口から徒歩 5 分。大通り沿いに進む最短ルートです。

所要時間

5 分

出口

雨天時

B3 推奨

パターン名: Access — Static Segmented Transport
概要: Segmented-control-like transport selector with a detail panel.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 1px / 55% / 45%、推奨コンテンツ幅 900px、主要ブロック group, paragraph, heading, group, group, paragraph, group, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-static-segmented-transport"} /-->

CSS:
.section-access-static-segmented-transport { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-static-segmented-transport').forEach((el) => el.dataset.ready = 'true');

Access — Station Walk Cards

access-station-walk-cards

Copy

Link

ACCESS ROUTE

駅から迷わない徒歩導線

Station

出口を固定

最寄り駅の出口番号と改札名を明示し、初回来店でも迷いにくくします。

Landmark

目印で案内

大通り、交差点、コンビニなど視認性の高いランドマークで曲がり角を補足します。

Entrance

入口を強調

建物名、階数、エレベーター位置を最後にまとめ、現地到着後の迷いを減らします。

パターン名: Access — Station Walk Cards
概要: Three route cards describing station exit, landmark and entrance guidance.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, paragraph, heading, columns, column, group, paragraph, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-station-walk-cards"} /-->

CSS:
.section-access-station-walk-cards { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-station-walk-cards').forEach((el) => el.dataset.ready = 'true');

Access — Transport Methods 3-Up

access-transport-3col

Copy

Link

アクセス方法

🚉

電車

表参道駅 A2 出口徒歩 5 分
明治神宮前駅 4 番出口徒歩 7 分

🚗

車

首都高速渋谷出口より 10 分
提携駐車場 5 台 (要事前予約)

🚌

バス

渋 88 系統「神宮前」下車
バス停より徒歩 2 分

パターン名: Access — Transport Methods 3-Up
概要: Three pastel cards summarising transit, car and bus access.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, heading, columns, column, group, paragraph, heading, paragraph

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-transport-3col"} /-->

CSS:
.section-access-transport-3col { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-transport-3col').forEach((el) => el.dataset.ready = 'true');

Access — Vertical Route Rail

access-vertical-route-rail

Copy

Link

WALK ROUTE

駅出口から入口までの縦導線

A2 出口を出る

地上に出たら右手の大通り沿いを直進します。

交差点を渡る

1 つ目の信号を渡り、ガラス張りのビルを左手に見ます。

細い路地へ入る

花屋の角を右折し、30m ほど進みます。

3F 受付へ

黒い看板のビルに入り、エレベーターで 3F へお越しください。

パターン名: Access — Vertical Route Rail
概要: A vertical route rail with numbered stops from station exit to reception.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 760px、主要ブロック group, paragraph, heading, group, group, group, paragraph, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-vertical-route-rail"} /-->

CSS:
.section-access-vertical-route-rail { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-vertical-route-rail').forEach((el) => el.dataset.ready = 'true');

Access — Zigzag Route Steps

access-zigzag-route-steps

Copy

Link

写真と説明を交互に見せる導線

STEP 01

駅前広場を抜ける

人通りの多い通りをそのまま直進し、横断歩道を目指します。

STEP 02

路地へ入る

右手の小さな看板が見えたら、建物の間の路地に入ります。

STEP 03

受付階へ上がる

エレベーターで 3F へ。降りて正面が受付です。

パターン名: Access — Zigzag Route Steps
概要: Alternating image/text route rows for richer walking directions.
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 42% / 58% / 58% / 42% / 42%、推奨コンテンツ幅 960px、主要ブロック group, heading, columns, column, cover, paragraph, column, group

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/access-zigzag-route-steps"} /-->

CSS:
.section-access-zigzag-route-steps { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-zigzag-route-steps').forEach((el) => el.dataset.ready = 'true');

Reference Brand — Cinematic Access Route

reference-cinematic-access-route

Copy

Link

access

駅から迷わない、写真で伝えるアクセス。

01

出口を固定

02

目印で案内

03

入口を強調

パターン名: Reference Brand — Cinematic Access Route
概要: 写真背景と3ステップで案内するアクセスパターン。
使用目的: Access / Hours領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 980px、主要ブロック cover, group, paragraph, heading, columns, column, group, heading

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-cinematic-access-route"} /-->

CSS:
.section-reference-cinematic-access-route { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-cinematic-access-route').forEach((el) => el.dataset.ready = 'true');

Reference Complete — access 01 Sticky Entry

reference-complete-access-01-sticky-entry-matsuo-komuten

Copy

Link

Sampled Site

15901 / Matsuo Komuten

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

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

詳しく見る

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

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

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

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

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

Reference Complete — access 02 Editorial Issue

reference-complete-access-02-editorial-issue-janu

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

Reference Complete — access 03 Brand Index

reference-complete-access-03-brand-index-omotesando-ortho

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

Reference Complete — access 04 Recruit Story

reference-complete-access-04-recruit-story-plaid-alpha

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

Reference Complete — access 05 Commerce Compare

reference-complete-access-05-commerce-compare-mec-residence-recruit

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-access-05-commerce-compare-mec-residence-recruit"} /-->

CSS:
.section-reference-complete-access-05-commerce-compare-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-access-05-commerce-compare-mec-residence-recruit').forEach((el) => el.dataset.ready = 'true');

Reference Complete — access 06 Timeline Proof

reference-complete-access-06-timeline-proof-obunko

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

Reference Complete — access 07 Gallery Led

reference-complete-access-07-gallery-led-kitanohashi

Copy

Link

Detail

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

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

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

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

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

Reference Complete — access 08 Dashboard Proof

reference-complete-access-08-dashboard-proof-spicato-daruma

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

Reference Complete — access 09 Contact Ready

reference-complete-access-09-contact-ready-favtown-wakayama

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/reference-complete-access-09-contact-ready-favtown-wakayama"} /-->

CSS:
.section-reference-complete-access-09-contact-ready-favtown-wakayama { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-reference-complete-access-09-contact-ready-favtown-wakayama').forEach((el) => el.dataset.ready = 'true');

Reference Complete — access 10 Mobile Rail

reference-complete-access-10-mobile-rail-unipos

Copy

Link

Unipos

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU100 — 013 Michikusa Art

sankou100-013-michikusa-art

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-013-michikusa-art"} /-->

CSS:
.section-sankou100-013-michikusa-art { max-width: 1200px; margin-inline: auto; }

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

SANKOU100 — 053 Kitanohashi

sankou100-053-kitanohashi

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU100 — 093 Mec Residence Recruit

sankou100-093-mec-residence-recruit

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

HTML:
<!-- wp:pattern {"slug":"tf-premium/sankou100-093-mec-residence-recruit"} /-->

CSS:
.section-sankou100-093-mec-residence-recruit { max-width: 1200px; margin-inline: auto; }

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

SANKOU Max — access 01 Gaaboo

sankoumax-access-01-gaaboo

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — access 02 Violet Patisserie

sankoumax-access-02-violet-patisserie

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — access 03 Nii Recruit

sankoumax-access-03-nii-recruit

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — access 04 Saranosono

sankoumax-access-04-saranosono

Copy

Link

2904

Saranosono

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — access 05 Dac Web

sankoumax-access-05-dac-web

Copy

Link

Sampled Site

2905 / Dac Web

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

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

詳しく見る

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

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

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

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

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

SANKOU Max — access 06 Asuzac Recruit

sankoumax-access-06-asuzac-recruit

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU Max — access 07 Suntory Sic

sankoumax-access-07-suntory-sic

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

SANKOU Max — access 08 Amano Clinic

sankoumax-access-08-amano-clinic

Copy

Link

Collage

素材感を重ねる

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

2908

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

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

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

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

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

SANKOU Max — access 09 Infocus

sankoumax-access-09-infocus

Copy

Link

Infocus

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU Max — access 10 Tomore

sankoumax-access-10-tomore

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

SANKOU Max — access 11 Dan Brise Barber

sankoumax-access-11-dan-brise-barber

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

SANKOU Max — access 12 Allureville Elements

sankoumax-access-12-allureville-elements

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

SANKOU Max — access 13 Studio Cbr

sankoumax-access-13-studio-cbr

Copy

Link

数字で納得させる

63%

改善率

9分

短縮

20491

導入数

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

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

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

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

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

SANKOU Max — access 14 Yamakachi

sankoumax-access-14-yamakachi

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

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

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

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

SANKOU Max — access 15 Chiikawa Pocket

sankoumax-access-15-chiikawa-pocket

Copy

Link

Chiikawa Pocket

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

About
Service
Works

News
Recruit
Contact

Sample 2915

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

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

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

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

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

SANKOU Max — access 16 Chiba Dojo

sankoumax-access-16-chiba-dojo

Copy

Link

NEWS

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

確認する

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

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

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

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

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

SANKOU Max — access 17 Twoe

sankoumax-access-17-twoe

Copy

Link

Access

迷わないアクセス案内

駅を固定

目印を指定

入口を明示

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

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

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

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

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

SANKOU Max — access 18 Kamata Shoyu

sankoumax-access-18-kamata-shoyu

Copy

Link

Form

入力前に安心させる

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

お名前

メール

相談内容

送信する

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

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

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

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

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

SANKOU Max — access 19 Fumino

sankoumax-access-19-fumino

Copy

Link

Overview

Feature

Price

FAQ

切り替え前提の情報整理

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

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

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

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

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

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

SANKOU Max — access 20 Anbe Shoten

sankoumax-access-20-anbe-shoten

Copy

Link

Dashboard

状況を即座に把握する

72

Tasks

Plan

Build

Review

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

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

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

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

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

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

SANKOU Max — access 21 Plaid Alpha

sankoumax-access-21-plaid-alpha

Copy

Link

FAQ

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

予約できますか？

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

費用はどれくらい？

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

相談だけでも可能？

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

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

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

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

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

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

SANKOU Max — access 22 Undimension

sankoumax-access-22-undimension

Copy

Link

Detail

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

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

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

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

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

SANKOU Max — access 23 Norikura Hanabi

sankoumax-access-23-norikura-hanabi

Copy

Link

People Line

Director

Planner

Designer

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

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

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

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

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

SANKOU Max — access 24 Chugaitoen

sankoumax-access-24-chugaitoen

Copy

Link

2924

Chugaitoen

静かな思想を置く

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

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

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

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

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

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

SANKOU Max — access 25 Favtown Wakayama

sankoumax-access-25-favtown-wakayama

Copy

Link

Sampled Site

2925 / Favtown Wakayama

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

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

詳しく見る

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

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

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

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

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

SANKOU Max — access 26 Palcloset Fashion

sankoumax-access-26-palcloset-fashion

Copy

Link

Split Story

写真と要点で信頼を作る

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

Concept

Proof

Action

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

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

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

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

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

SANKOU Max — access 27 Michikusa Art

sankoumax-access-27-michikusa-art

Copy

Link

Card Flow

迷わない比較カード

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

見つける

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

選ぶ

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

進む

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

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

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

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

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

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

SANKOU Max — access 28 Tenten

sankoumax-access-28-tenten

Copy

Link

Collage

素材感を重ねる

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

2928

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

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

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

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

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

SANKOU Max — access 29 Unipos

sankoumax-access-29-unipos

Copy

Link

Unipos

About

Works

Journal

Contact

Reserve

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

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

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

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

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

SANKOU Max — access 30 Trail Inc

sankoumax-access-30-trail-inc

Copy

Link

Editorial

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

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

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

記事を見る

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

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

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

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

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

SANKOU Max — access 31 Applebase

sankoumax-access-31-applebase

Copy

Link

Collection Selector

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

Line 01

Line 02

Line 03

Lineup

選びやすい商品導線

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

Featured

Use case

Detail

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

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

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

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

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

SANKOU Max — access 32 Meisei Es

sankoumax-access-32-meisei-es

Copy

Link

Journey

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

STEP 1

出会う

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

STEP 2

試す

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

STEP 3

続ける

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

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

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

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

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

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

SANKOU Max — access 33 Unicell

sankoumax-access-33-unicell

Copy

Link

数字で納得させる

83%

改善率

11分

短縮

20631

導入数

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

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

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

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

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

SANKOU Max — access 34 Uki Editions

sankoumax-access-34-uki-editions

Copy

Link

Contact

次の相談先を明確にする

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

Tel

Form

Map

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

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

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

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

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

SANKOU Max — access 35 Kikyougaoka

sankoumax-access-35-kikyougaoka

Copy

Link

Kikyougaoka

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

About
Service
Works

News
Recruit
Contact

Sample 2935

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

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

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

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

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

◈ Blanc Nail

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

Foundations

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

Content

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

Business

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

UI Components

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

アクセス / 営業時間 · Access / Hours · Blanc Nail

アクセス / 営業時間

番号ピンで周辺を説明

バリアフリー導線

表参道店

アクセス情報を 1 行で見せる

工事期間中の迂回ルート

B3 出口を利用

歩道橋を渡る

裏口から入館

来店前のよくある迷いどころ

駅の出口はどこが近いですか？

建物の入口はわかりやすいですか？

ベビーカーで入れますか？

ビル内の移動まで案内

営業時間

ランドマークで覚えるアクセス

青いガラスの角ビル

周辺の目印

営業中

週間営業時間

11:00 – 21:00

地図横に要点を固定

店舗のご案内

SAKURA STUDIO 表参道店

来店前アクション

車・自転車での来店情報

駐車場・駐輪場

来店しやすい時間

送迎バス運行表

交通手段を切り替え風に表示

電車でお越しの方

駅から迷わない徒歩導線

出口を固定

目印で案内

入口を強調

アクセス方法

電車

車

バス

駅出口から入口までの縦導線

A2 出口を出る

交差点を渡る

細い路地へ入る

3F 受付へ

写真と説明を交互に見せる導線

駅前広場を抜ける

路地へ入る

受付階へ上がる

駅から迷わない、写真で伝えるアクセス。

01

02

03

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

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

迷わない比較カード

見つける

選ぶ

進む

写真と要点で信頼を作る

Collection Selector

選びやすい商品導線

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

出会う

試す

続ける

状況を即座に把握する

72

入力前に安心させる

Unipos

迷わないアクセス案内

迷わないアクセス案内

迷わないアクセス案内

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

People Line

静かな思想を置く

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

写真と要点で信頼を作る

迷わない比較カード

見つける