マップ / 場所 · Map / Location · Blanc Nail

◈ Blanc Nail

検索…

カタログ 統計

使い方 →

CATALOG › Business › Map / Location

マップ / 場所

地図埋め込み、ピン情報、近隣案内、ルート図。

4

Patterns

Business

Group

isValid=0

Verified

CSS

Animation

01

Map — Directions Prompt Box

map-directions-box

Copy
Link

📍 GET DIRECTIONS

経路を確認する

現在地から店舗までの経路を Google Maps で表示します。

ルート検索 ↗
  • パターン名: Map — Directions Prompt Box
  • 概要: Dark CTA box prompting users to open route directions in Google Maps.
  • 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 880px、主要ブロック group, group, group, paragraph, heading, paragraph, buttons, button
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/map-directions-box"} /-->

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

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

02

Map — Locations 3-Up Cards

map-location-3spots

Copy
Link

店舗一覧

📍

表参道店

渋谷区神宮前 4-X-X
表参道駅 A2 徒歩 5 分

📍

京都店

京都市中京区先斗町
河原町駅 徒歩 8 分

📍

福岡店

福岡市中央区天神
天神駅 徒歩 3 分

  • パターン名: Map — Locations 3-Up Cards
  • 概要: Three location cards with map-tile thumbnails and address summaries.
  • 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: カバー領域とカラム分割を組み合わせた構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 1180px、主要ブロック group, heading, columns, column, cover, paragraph, group, heading
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版 / Map / Locationをモバイル特化にした単列・短文版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/map-location-3spots"} /-->

CSS:
.section-map-location-3spots { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-map-location-3spots').forEach((el) => el.dataset.ready = 'true');

03

Map — Big Map Placeholder

map-with-pin-card

Copy
Link

📍

Google Maps をここに埋め込み

  • パターン名: Map — Big Map Placeholder
  • 概要: Large rounded map placeholder, ready to be replaced with Google Maps embed.
  • 使用目的: Map / Location領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
  • 適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
  • レイアウト構造: ビジュアル面を中心にしたカバー構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, cover, paragraph, paragraph
  • メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
  • デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
  • バリエーション案: Map / Locationをミニマルに見せる余白重視版 / Map / Locationをリッチに見せるカバー/カード強調版 / Map / Locationをコーポレート向けに整える情報密度高め版 / Map / Locationをカジュアルに見せるアイコン/ラベル強調版
  • 実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。
HTML:
<!-- wp:pattern {"slug":"tf-premium/map-with-pin-card"} /-->

CSS:
.section-map-with-pin-card { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-map-with-pin-card').forEach((el) => el.dataset.ready = 'true');

04

Map — FX01 Drop Pin

fx-map-pin

Copy
Link

📍 アクセス

  • パターン名: ピンが刺さる — Map — FX01 Drop Pin
  • 概要: スクロールで地図ピンが落ちて弾む
  • 適用シーン: アクセス・店舗位置
  • 使い方: ピン要素に fx-map-pin
  • メリット: 場所への視線誘導
  • デメリット: –
  • バリエーション案: 色
  • 実装時の注意点: 地図画像の上に重ねて使う
使い方: ピン要素に fx-map-pin
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3