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

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Business › Access / Hours

アクセス / 営業時間

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

31

Patterns

Business

Group

isValid=0

Verified

CSS

Animation

01

Access — Area Map Pin Index

access-area-map-index

Copy
Link

番号ピンで周辺を説明

01 02 03 04

Area Pin Index

01

駅出口

02

コンビニ角

03

受付ビル

04

提携駐車場

  • パターン名: 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');

02

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');

03

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');

04

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');

05

Access — Detour Notice

access-detour-notice

Copy
Link

TEMPORARY ROUTE

工事期間中の迂回ルート

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

A

B3 出口を利用

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

B

歩道橋を渡る

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

C

裏口から入館

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

  • パターン名: 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');

06

Access — Route FAQ List

access-faq-route-list

Copy
Link

ROUTE FAQ

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

01

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

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

02

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

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

03

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

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

  • パターン名: 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');

07

Access — Building Floor Guide

access-floor-guide

Copy
Link

BUILDING

ビル内の移動まで案内

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

エレベーター

入口右手

受付

3F 正面

5F

スタジオ B

4F

スタジオ A

3F

受付 / 待合

2F

共用ラウンジ

1F

エントランス

  • パターン名: 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');

08

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');

09

Access — Landmark Mosaic

access-landmark-mosaic

Copy
Link

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

LANDMARK

青いガラスの角ビル

周辺の目印

1

駅前の時計台

2

コンビニを右折

3

花屋の看板

4

黒い縦長サイン

  • パターン名: 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');

10

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');

11

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');

12

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');

13

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');

14

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');

15

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');

16

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');

17

Access — Static Segmented Transport

access-static-segmented-transport

Copy
Link

TRANSPORT

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

Train

Car

Bus

電車でお越しの方

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

所要時間

5 分

出口

A2

雨天時

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');

18

Access — Station Walk Cards

access-station-walk-cards

Copy
Link

ACCESS ROUTE

駅から迷わない徒歩導線

01

Station

出口を固定

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

02

Landmark

目印で案内

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

03

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');

19

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');

20

Access — Vertical Route Rail

access-vertical-route-rail

Copy
Link

WALK ROUTE

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

01

A2 出口を出る

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

02

交差点を渡る

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

03

細い路地へ入る

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

04

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');

21

Access — Zigzag Route Steps

access-zigzag-route-steps

Copy
Link

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

01

STEP 01

駅前広場を抜ける

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

STEP 02

路地へ入る

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

02

03

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');

22

Access — EX01 Info beside Map Photo

access-ex01-info-map

Copy
Link

アクセス

地図

所在地

〒600-0000
京都市中京区例町 1-2-3 サンプルビル 1F

営業時間

10:00 — 18:00（最終受付 17:00）
水曜・第三火曜 定休

交通

地下鉄「例駅」2番出口より徒歩 5 分
市バス「例町」停留所より徒歩 2 分

Google マップで開く
  • パターン名: Access — EX01 Info beside Map Photo
  • 概要: Address, hours and transport info beside a map placeholder image.
  • 使用目的: Access領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/access-ex01-info-map"} /-->

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

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

23

Access — EX02 Weekly Hours Rows

access-ex02-hours-week

Copy
Link

診療時間

平日

9:00 — 12:30 ／ 14:30 — 18:30

土曜

9:00 — 13:00（午後休診）

日曜・祝日

休診

受付は終了 30 分前まで。年末年始・学会等による臨時休診はお知らせ欄をご確認ください。

  • パターン名: Access — EX02 Weekly Hours Rows
  • 概要: Weekday and weekend opening-hour rows with a holiday notice.
  • 使用目的: Access領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/access-ex02-hours-week"} /-->

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

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

24

Access — EX03 Station Route Steps

access-ex03-route-steps

Copy
Link

駅からの道順

例駅 2番出口から徒歩 5 分

1

2番出口を出る

改札を出て右へ。2番出口の階段を上がり、大通り沿いに進みます。

2

二つ目の角を左折

コンビニのある二つ目の角を左へ。ゆるやかな坂を 100m ほど直進します。

3

白い看板が目印

右手の白い看板が当店です。ビルの 1 階、入口はスロープ対応です。

  • パターン名: Access — EX03 Station Route Steps
  • 概要: Numbered walking route from the station in three steps.
  • 使用目的: Access領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/access-ex03-route-steps"} /-->

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

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

25

Access — EX04 Parking Cards

access-ex04-parking

Copy
Link

お車・自転車でお越しの方

🚗

専用駐車場 5 台

店舗裏手に専用区画（無料）。満車時は隣接のコインパーキングをご利用ください（1時間分をサービス）。

🚲

駐輪スペースあり

入口横に駐輪ラックを設置しています。バイクは前面道路の市営駐輪場（徒歩1分）をご利用ください。

  • パターン名: Access — EX04 Parking Cards
  • 概要: Car and bicycle parking information in two cards.
  • 使用目的: Access領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/access-ex04-parking"} /-->

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

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

26

Access — EX05 Contact Band Dark

access-ex05-contact-band

Copy
Link

TEL

075-000-0000

OPEN

11:00 — 20:00
火曜定休

ADDRESS

京都市中京区例町 1-2-3
例駅から徒歩 5 分

  • パターン名: Access — EX05 Contact Band Dark
  • 概要: Dark info band: phone, hours and address in three columns.
  • 使用目的: Access領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/access-ex05-contact-band"} /-->

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

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

27

Access — EX06 Two Store Cards

access-ex06-two-store

Copy
Link

店舗一覧

本店

京都市中京区例町 1-2-3
10:00 — 19:00 ／ 水曜定休
TEL 075-000-0000

駅前店

京都市下京区例駅前 4-5-6
11:00 — 21:00 ／ 年中無休
TEL 075-111-1111

  • パターン名: Access — EX06 Two Store Cards
  • 概要: Two branch cards with photo, address and hours.
  • 使用目的: Access領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/access-ex06-two-store"} /-->

CSS:
.section-access-ex06-two-store { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-ex06-two-store').forEach((el) => el.dataset.ready = 'true');

28

Access — EX07 Accessibility Notes

access-ex07-barrier-free

Copy
Link

どなたにも安心してご利用いただくために

入口スロープ

多目的トイレ

車いす貸出

補助犬同伴可

お手伝いが必要な場合は到着前にお電話ください。スタッフが入口までお迎えにあがります。

  • パターン名: Access — EX07 Accessibility Notes
  • 概要: Barrier-free facility chips with a supporting note.
  • 使用目的: Access領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/access-ex07-barrier-free"} /-->

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

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

29

Access — EX08 Company Profile Rows

access-ex08-company-info

Copy
Link

会社概要

社名

株式会社サンプル

設立

2008 年 4 月

所在地

〒600-0000 京都市中京区例町 1-2-3
例駅 2番出口より徒歩 5 分

営業時間

平日 9:00 — 18:00（土日祝休業）

  • パターン名: Access — EX08 Company Profile Rows
  • 概要: Corporate profile rows: name, founded, address, business hours.
  • 使用目的: Access領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/access-ex08-company-info"} /-->

CSS:
.section-access-ex08-company-info { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-access-ex08-company-info').forEach((el) => el.dataset.ready = 'true');

30

Access — EX09 Storefront Photo Guide

access-ex09-photo-guide

Copy
Link
店舗外観

この外観が目印です

通り沿いの紺色ののれんと木の看板が目印。
道に迷われたら、お気軽にお電話ください。

道順を地図アプリで見る
  • パターン名: Access — EX09 Storefront Photo Guide
  • 概要: Storefront photo with a short arrival note and CTA.
  • 使用目的: Access領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/access-ex09-photo-guide"} /-->

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

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

31

Access — EX10 Arrival Questions

access-ex10-qa

Copy
Link

ご来店についてよくあるご質問

ベビーカーのまま入店できますか?

はい、入口はスロープ対応で店内も通路を広くとっています。お席へそのままお越しいただけます。

予約時間に遅れそうなときは?

お電話を一本いただければ 15 分まではお席を確保します。それ以降は状況によりご案内が前後します。

近くに駐車場はありますか?

専用駐車場が 5 台ございます。満車の際は隣のコインパーキングをご利用ください（割引券をお渡しします）。

  • パターン名: Access — EX10 Arrival Questions
  • 概要: Accordion answering common arrival questions: parking, strollers, late arrival.
  • 使用目的: Access領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/access-ex10-qa"} /-->

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

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