フッター初級

地図＋店舗情報フッター

左に地図、右に住所・営業時間・電話を並べた実店舗向けフッター。カフェ・クリニック・ショップなどローカルビジネスのサイトで、来店導線をまとめて見せられます。

#footer#map#contact#local

ライブデモ

使用例（お題: アイドルグループ Sakura）

この技法を「アイドルグループ Sakura」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- Sakura：期間限定ショップの地図＋案内フッター -->
<footer class="fmc">
  <div class="fmc-map" aria-label="地図">
    <span class="fmc-road fmc-road--1"></span>
    <span class="fmc-road fmc-road--2"></span>
    <span class="fmc-road fmc-road--3"></span>
    <span class="fmc-pin"><i></i></span>
    <span class="fmc-maplabel">SAKURA POP-UP SHOP</span>
  </div>

  <div class="fmc-info">
    <a class="fmc-logo" href="#" onclick="return false">✿ SAKURA SHOP</a>
    <dl class="fmc-list">
      <div><dt>場所</dt><dd>渋谷PARCO 1F イベントスペース</dd></div>
      <div><dt>会期</dt><dd>6/15(土) – 6/30(日)</dd></div>
      <div><dt>時間</dt><dd>11:00 – 20:00</dd></div>
      <div><dt>最寄</dt><dd>渋谷駅 徒歩5分</dd></div>
    </dl>
    <div class="fmc-actions">
      <button class="fmc-btn fmc-btn--solid" type="button">ルート案内</button>
      <button class="fmc-btn fmc-btn--ghost" type="button">グッズを見る</button>
    </div>
  </div>
</footer>

CSS

/* Sakura（アイドル）：地図＋店舗情報フッターの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Hiragino Kaku Gothic ProN", "Segoe UI", system-ui, sans-serif; }

.fmc { width: 100%; min-height: 380px; display: grid; grid-template-columns: 1fr 1fr; background: #1f0f1a; color: #f6e3ec; }
.fmc-map { position: relative; overflow: hidden; background: linear-gradient(135deg, #2a1622, #3a1d2e); }
.fmc-road { position: absolute; background: rgba(255,255,255,.12); }
.fmc-road--1 { left: 0; right: 0; top: 38%; height: 14px; transform: rotate(-4deg); }
.fmc-road--2 { top: 0; bottom: 0; left: 32%; width: 12px; transform: rotate(3deg); }
.fmc-road--3 { left: -10%; right: 30%; bottom: 26%; height: 9px; transform: rotate(8deg); background: rgba(255,255,255,.08); }
.fmc-pin { position: absolute; left: 46%; top: 40%; width: 22px; height: 22px; animation: fmc-bob 2.2s ease-in-out infinite; }
.fmc-pin i { position: absolute; inset: 0; border-radius: 50% 50% 50% 0; background: #f06595; transform: rotate(-45deg); box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.fmc-pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: #1f0f1a; border-radius: 50%; transform: translate(-50%,-60%); }
@keyframes fmc-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.fmc-maplabel { position: absolute; left: 16px; bottom: 14px; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.5); padding: 5px 10px; border-radius: 7px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.fmc-info { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.fmc-logo { font-size: 20px; font-weight: 800; color: #fff; text-decoration: none; margin-bottom: 18px; letter-spacing: .04em; }
.fmc-list { margin: 0; }
.fmc-list > div { display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.14); }
.fmc-list dt { flex: 0 0 44px; font-size: 11px; font-weight: 700; color: #d59bb6; padding-top: 2px; }
.fmc-list dd { margin: 0; font-size: 13.5px; color: #f6e3ec; line-height: 1.6; }
.fmc-actions { display: flex; gap: 10px; margin-top: 20px; }
.fmc-btn { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 10px 18px; border-radius: 10px; transition: transform .15s ease, filter .15s ease; }
.fmc-btn--solid { border: none; color: #fff; background: linear-gradient(135deg,#f06595,#d6336c); }
.fmc-btn--solid:hover { filter: brightness(1.06); transform: translateY(-2px); }
.fmc-btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.3); color: #f6e3ec; }
.fmc-btn--ghost:hover { border-color: #f06595; color: #f8b6cf; }

@media (max-width: 560px) { .fmc { grid-template-columns: 1fr; } .fmc-map { min-height: 150px; } }
@media (prefers-reduced-motion: reduce) { .fmc-pin { animation: none; } .fmc-btn { transition: none; } }

実装ガイド

使いどころ

カフェ・クリニック・ショップ・期間限定店など、来店導線が重要なローカルビジネスに。左に地図、右に住所・営業時間・電話をまとめます。

実装時の注意点

地図は外部APIを使わず、CSSで道路とピン（ドロップ型＋影＋上下バウンド）を描画したプレースホルダ。実運用では地図埋め込みに差し替えます。情報は dt/dd の定義リストで整理しています。

対応ブラウザ

grid・transform・clip いずれも全モダンブラウザ対応。地図を実埋め込みにする場合は遅延読み込みを推奨。

よくある失敗

実際の地図はiframeが重いので、ファーストビュー外なら遅延読み込みを。狭い画面では地図と情報を縦積みに。電話番号は tel: リンク、住所はマップアプリ起動リンクにすると親切です。

応用例

複数店舗の切替タブ、営業中/閉店中バッジ、ルート案内ボタンの実リンク化、写真サムネの追加などに展開できます。

コード