diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a47ecc5..1837fc5 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -75,6 +75,8 @@ jobs:
           cache: 'npm'
       - name: Install dependencies
         run: npm ci --prefer-offline
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
       - name: E2E Test
         run: npm run test:e2e
       - if: failure()
diff --git a/app/client.ts b/app/client.ts
index 054ff9a..72d6a89 100644
--- a/app/client.ts
+++ b/app/client.ts
@@ -1,5 +1,6 @@
 import { createClient } from 'honox/client'
 import { setupAdControl } from './lib/adControl'
+import { setupMakamujoBannerTracking } from './lib/makamujoBannerTracker'
 import { type GtagFn, setupScrollDepthTracking } from './lib/scrollDepthTracker'
 
 createClient()
@@ -17,7 +18,7 @@ const gtagFn: GtagFn = import.meta.env.PROD
       }
     }
   : (command, name, params) => {
-      console.log('[scroll_depth]', command, name, params)
+      console.log('[gtag]', command, name, params)
     }
 
 setupScrollDepthTracking({
@@ -64,3 +65,19 @@ setupAdControl({
     return 0
   },
 })
+
+const whenReady = (fn: () => void) => {
+  if (document.readyState !== 'loading') {
+    fn()
+  } else {
+    document.addEventListener('DOMContentLoaded', fn, { once: true })
+  }
+}
+
+setupMakamujoBannerTracking({
+  gtagFn,
+  whenReady,
+  getAreaElements: () => Array.from(document.querySelectorAll<HTMLAreaElement>('area[data-gtag-event]')),
+  navigate: (href) => window.open(href, '_blank', 'noopener,noreferrer'),
+  maxDelayMs: 500,
+})
diff --git a/app/components/Article.tsx b/app/components/Article.tsx
index bdf92e5..2eb6c36 100644
--- a/app/components/Article.tsx
+++ b/app/components/Article.tsx
@@ -2,6 +2,7 @@ import { css } from 'hono/css'
 import { html } from 'hono/html'
 import type { ArticleLink } from '../lib/articles'
 import AdMax from './AdMax'
+import MakamujoBanner from './MakamujoBanner'
 import RelatedArticles from './RelatedArticles'
 
 const articleClass = css`
@@ -156,9 +157,12 @@ ${'' /*<script type="text/javascript" charset="utf-8" src="https://adm.shinobi.j
     children.children = newChildren
   }
 
+  const isIndexPage = currentPath?.endsWith('/index.html') ?? false
+
   return (
     <article class={articleClass}>
       {children}
+      {!isIndexPage && <MakamujoBanner />}
       {relatedArticles && relatedArticles.length > 0 && currentPath && (
         <>
           <h2>他の記事</h2>
diff --git a/app/components/MakamujoBanner.tsx b/app/components/MakamujoBanner.tsx
new file mode 100644
index 0000000..7e1da09
--- /dev/null
+++ b/app/components/MakamujoBanner.tsx
@@ -0,0 +1,42 @@
+import { css } from 'hono/css'
+
+const wrap = css`
+  display: flex;
+  justify-content: center;
+  margin: 0.8rem 0;
+`
+
+export default function MakamujoBanner() {
+  return (
+    <div class={wrap}>
+      <img
+        src="https://www.nahcnuj.work/makamujo/banner.png"
+        alt="馬可無序（まか・むじょ）- AI-VTuber"
+        width="320"
+        height="100"
+        usemap="#makamujo-banner-map"
+        style="max-width: 100%; height: auto;"
+      />
+      <map name="makamujo-banner-map">
+        {/* Banner is 320x100px. The "ニコニコ生放送で配信中" badge occupies the bottom strip at x:105-306, y:67-87. */}
+        <area
+          shape="rect"
+          coords="105,67,306,87"
+          href="https://live.nicovideo.jp/watch/user/14171889"
+          target="_blank"
+          rel="noopener noreferrer"
+          alt="ニコニコ生放送で配信中"
+          data-gtag-event="click_makamujo_nicovideo"
+        />
+        <area
+          shape="default"
+          href="https://www.nahcnuj.work/makamujo/index.html"
+          target="_blank"
+          rel="noopener noreferrer"
+          alt="馬可無序プロジェクト"
+          data-gtag-event="click_makamujo_landing"
+        />
+      </map>
+    </div>
+  )
+}
diff --git a/app/lib/makamujoBannerTracker.test.ts b/app/lib/makamujoBannerTracker.test.ts
new file mode 100644
index 0000000..26da755
--- /dev/null
+++ b/app/lib/makamujoBannerTracker.test.ts
@@ -0,0 +1,218 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { setupMakamujoBannerTracking } from './makamujoBannerTracker'
+import type { GtagFn } from './scrollDepthTracker'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+type FakeArea = {
+  dataset: { gtagEvent?: string }
+  href: string
+  addEventListener: (event: string, handler: (e: Event) => void) => void
+  /** Simulate a user click on this area element. */
+  triggerClick: () => { preventDefault: ReturnType<typeof vi.fn> }
+}
+
+function makeFakeArea(gtagEvent: string | undefined, href: string): FakeArea {
+  let clickHandler: ((e: Event) => void) | undefined
+  return {
+    dataset: { gtagEvent },
+    href,
+    addEventListener: (event, handler) => {
+      if (event === 'click') clickHandler = handler
+    },
+    triggerClick: () => {
+      const e = { preventDefault: vi.fn() }
+      clickHandler?.(e as unknown as Event)
+      return e
+    },
+  }
+}
+
+function makeSetup(
+  areas: FakeArea[],
+  opts: {
+    navigate?: ReturnType<typeof vi.fn>
+    maxDelayMs?: number
+    gtag?: GtagFn
+    whenReady?: (fn: () => void) => void
+  } = {},
+) {
+  const navigate = opts.navigate ?? vi.fn()
+  const gtag = opts.gtag ?? vi.fn()
+  const whenReady = opts.whenReady ?? ((fn) => fn())
+
+  setupMakamujoBannerTracking({
+    gtagFn: gtag as GtagFn,
+    whenReady,
+    getAreaElements: () => areas as unknown as HTMLAreaElement[],
+    navigate,
+    maxDelayMs: opts.maxDelayMs ?? 500,
+  })
+
+  return { navigate, gtag }
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('setupMakamujoBannerTracking', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  describe('GA event name', () => {
+    it('fires "click_makamujo_nicovideo" when the NicoNico badge area is clicked', () => {
+      const area = makeFakeArea('click_makamujo_nicovideo', 'https://live.nicovideo.jp/watch/user/14171889')
+      const { gtag } = makeSetup([area])
+      area.triggerClick()
+      expect(gtag).toHaveBeenCalledWith('event', 'click_makamujo_nicovideo', expect.any(Object))
+    })
+
+    it('fires "click_makamujo_landing" when the landing-page area is clicked', () => {
+      const area = makeFakeArea('click_makamujo_landing', 'https://www.nahcnuj.work/makamujo/index.html')
+      const { gtag } = makeSetup([area])
+      area.triggerClick()
+      expect(gtag).toHaveBeenCalledWith('event', 'click_makamujo_landing', expect.any(Object))
+    })
+
+    it('passes event_timeout equal to maxDelayMs', () => {
+      const area = makeFakeArea('click_makamujo_nicovideo', 'https://live.nicovideo.jp/watch/user/14171889')
+      const { gtag } = makeSetup([area], { maxDelayMs: 300 })
+      area.triggerClick()
+      expect(gtag).toHaveBeenCalledWith(
+        'event',
+        'click_makamujo_nicovideo',
+        expect.objectContaining({ event_timeout: 300 }),
+      )
+    })
+  })
+
+  describe('navigation via event_callback', () => {
+    it('does not navigate immediately after click (waits for GA callback)', () => {
+      const area = makeFakeArea('click_makamujo_nicovideo', 'https://live.nicovideo.jp/watch/user/14171889')
+      const { navigate } = makeSetup([area])
+      area.triggerClick()
+      expect(navigate).not.toHaveBeenCalled()
+    })
+
+    it('navigates to the correct URL when event_callback fires', () => {
+      const href = 'https://live.nicovideo.jp/watch/user/14171889'
+      const area = makeFakeArea('click_makamujo_nicovideo', href)
+      let capturedCallback: (() => void) | undefined
+      const gtag = vi.fn().mockImplementation((_cmd, _name, params: Record<string, unknown>) => {
+        capturedCallback = params?.event_callback as () => void
+      })
+      const { navigate } = makeSetup([area], { gtag })
+      area.triggerClick()
+      capturedCallback?.()
+      expect(navigate).toHaveBeenCalledWith(href)
+    })
+  })
+
+  describe('navigation via timeout fallback', () => {
+    it('navigates after maxDelayMs when event_callback never fires', () => {
+      const href = 'https://www.nahcnuj.work/makamujo/index.html'
+      const area = makeFakeArea('click_makamujo_landing', href)
+      const gtag = vi.fn() // never calls event_callback
+      const { navigate } = makeSetup([area], { gtag, maxDelayMs: 300 })
+      area.triggerClick()
+      expect(navigate).not.toHaveBeenCalled()
+      vi.advanceTimersByTime(300)
+      expect(navigate).toHaveBeenCalledWith(href)
+    })
+
+    it('does not navigate before maxDelayMs elapses', () => {
+      const area = makeFakeArea('click_makamujo_landing', 'https://www.nahcnuj.work/makamujo/index.html')
+      const gtag = vi.fn()
+      const { navigate } = makeSetup([area], { gtag, maxDelayMs: 300 })
+      area.triggerClick()
+      vi.advanceTimersByTime(299)
+      expect(navigate).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('no double navigation', () => {
+    it('navigates exactly once even when both event_callback and timeout fire', () => {
+      const href = 'https://live.nicovideo.jp/watch/user/14171889'
+      const area = makeFakeArea('click_makamujo_nicovideo', href)
+      let capturedCallback: (() => void) | undefined
+      const gtag = vi.fn().mockImplementation((_cmd, _name, params: Record<string, unknown>) => {
+        capturedCallback = params?.event_callback as () => void
+      })
+      const { navigate } = makeSetup([area], { gtag, maxDelayMs: 300 })
+      area.triggerClick()
+      capturedCallback?.() // fires callback first
+      vi.advanceTimersByTime(300) // then timeout fires
+      expect(navigate).toHaveBeenCalledTimes(1)
+    })
+
+    it('navigates exactly once when timeout fires before event_callback', () => {
+      const href = 'https://live.nicovideo.jp/watch/user/14171889'
+      const area = makeFakeArea('click_makamujo_nicovideo', href)
+      let capturedCallback: (() => void) | undefined
+      const gtag = vi.fn().mockImplementation((_cmd, _name, params: Record<string, unknown>) => {
+        capturedCallback = params?.event_callback as () => void
+      })
+      const { navigate } = makeSetup([area], { gtag, maxDelayMs: 300 })
+      area.triggerClick()
+      vi.advanceTimersByTime(300) // timeout fires first
+      capturedCallback?.() // then callback fires
+      expect(navigate).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('default prevention', () => {
+    it('calls preventDefault on the click event to stop native area navigation', () => {
+      const area = makeFakeArea('click_makamujo_nicovideo', 'https://live.nicovideo.jp/watch/user/14171889')
+      makeSetup([area])
+      const { preventDefault } = area.triggerClick()
+      expect(preventDefault).toHaveBeenCalled()
+    })
+  })
+
+  describe('edge cases', () => {
+    it('skips areas without a data-gtag-event attribute', () => {
+      const area = makeFakeArea(undefined, 'https://example.com')
+      const { gtag, navigate } = makeSetup([area])
+      area.triggerClick()
+      vi.advanceTimersByTime(500)
+      expect(gtag).not.toHaveBeenCalled()
+      expect(navigate).not.toHaveBeenCalled()
+    })
+
+    it('does not attach listeners before whenReady fires', () => {
+      let readyFn: (() => void) | undefined
+      const area = makeFakeArea('click_makamujo_nicovideo', 'https://live.nicovideo.jp/watch/user/14171889')
+      const { gtag } = makeSetup([area], {
+        whenReady: (fn) => {
+          readyFn = fn
+        },
+      })
+      area.triggerClick()
+      expect(gtag).not.toHaveBeenCalled()
+      readyFn?.()
+      area.triggerClick()
+      expect(gtag).toHaveBeenCalledOnce()
+    })
+
+    it('handles multiple areas independently', () => {
+      const area1 = makeFakeArea('click_makamujo_nicovideo', 'https://live.nicovideo.jp/watch/user/14171889')
+      const area2 = makeFakeArea('click_makamujo_landing', 'https://www.nahcnuj.work/makamujo/index.html')
+      const gtag = vi.fn()
+      makeSetup([area1, area2], { gtag })
+      area1.triggerClick()
+      area2.triggerClick()
+      expect(gtag).toHaveBeenCalledTimes(2)
+      expect(gtag).toHaveBeenNthCalledWith(1, 'event', 'click_makamujo_nicovideo', expect.any(Object))
+      expect(gtag).toHaveBeenNthCalledWith(2, 'event', 'click_makamujo_landing', expect.any(Object))
+    })
+  })
+})
diff --git a/app/lib/makamujoBannerTracker.ts b/app/lib/makamujoBannerTracker.ts
new file mode 100644
index 0000000..948d1d7
--- /dev/null
+++ b/app/lib/makamujoBannerTracker.ts
@@ -0,0 +1,60 @@
+import type { GtagFn } from './scrollDepthTracker'
+
+export interface MakamujoBannerTrackerOptions {
+  gtagFn: GtagFn
+  /** Calls `fn` once the DOM is ready to be queried (equivalent of DOMContentLoaded). */
+  whenReady: (fn: () => void) => void
+  /** Returns all `<area>` elements that carry a `data-gtag-event` attribute. */
+  getAreaElements: () => HTMLAreaElement[]
+  /** Opens the given URL (e.g. `window.open(href, '_blank', 'noopener,noreferrer')`). */
+  navigate: (href: string) => void
+  /** Maximum milliseconds to wait for the GA beacon before navigating anyway. */
+  maxDelayMs?: number
+}
+
+/**
+ * Intercepts clicks on Makamujo banner image-map `<area>` elements, fires a
+ * GA4 event named by their `data-gtag-event` attribute, and then opens the
+ * link.  Navigation is delayed until the event is confirmed sent, or until
+ * `maxDelayMs` elapses — whichever comes first.
+ */
+export function setupMakamujoBannerTracking({
+  gtagFn,
+  whenReady,
+  getAreaElements,
+  navigate,
+  maxDelayMs = 500,
+}: MakamujoBannerTrackerOptions): void {
+  whenReady(() => {
+    for (const area of getAreaElements()) {
+      const eventName = area.dataset.gtagEvent
+      if (!eventName) continue
+
+      area.addEventListener('click', (e) => {
+        e.preventDefault()
+        const href = area.href
+        if (!href) return
+
+        let navigated = false
+        const doNavigate = () => {
+          if (navigated) return
+          navigated = true
+          navigate(href)
+        }
+
+        // Fallback: navigate after maxDelayMs even if the GA beacon never fires.
+        const timeout = setTimeout(doNavigate, maxDelayMs)
+
+        gtagFn('event', eventName, {
+          // Called by gtag once the event has been dispatched.
+          event_callback: () => {
+            clearTimeout(timeout)
+            doNavigate()
+          },
+          // Tells gtag to call event_callback after at most maxDelayMs ms.
+          event_timeout: maxDelayMs,
+        })
+      })
+    }
+  })
+}
diff --git a/app/routes/diary/index.tsx b/app/routes/diary/index.tsx
index a51a8f9..b2a147e 100644
--- a/app/routes/diary/index.tsx
+++ b/app/routes/diary/index.tsx
@@ -3,6 +3,7 @@
 import { type Context, Hono } from 'hono'
 import { redirectTo } from '../../../renderers'
 import { articlesByDirectory } from '../../lib/articles'
+import MakamujoBanner from '../../components/MakamujoBanner'
 import DiaryList from '../../islands/DiaryList'
 
 const app = new Hono()
@@ -16,6 +17,7 @@ app.get('/index.html', (c: Context) => {
   return c.render(
     <>
       <h1>日記</h1>
+      <MakamujoBanner />
       <DiaryList diaries={diaries} />
     </>,
     { frontmatter: { title, description, published: '2020-01-01' } },
diff --git a/app/routes/essays/index.tsx b/app/routes/essays/index.tsx
index ee1cc99..cb64020 100644
--- a/app/routes/essays/index.tsx
+++ b/app/routes/essays/index.tsx
@@ -1,6 +1,7 @@
 import { type Context, Hono } from 'hono'
 import { redirectTo } from '../../../renderers'
 import { articlesByDirectory } from '../../lib/articles'
+import MakamujoBanner from '../../components/MakamujoBanner'
 import EssayList from '../../islands/EssayList'
 
 const app = new Hono()
@@ -14,6 +15,7 @@ app.get('/index.html', (c: Context) => {
   return c.render(
     <>
       <h1>エッセイ</h1>
+      <MakamujoBanner />
       <p>何かしらに言及したくなったときに取り留めもないままに書き連ねます。</p>
       <EssayList essays={essays} />
     </>,
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
index 0bebdeb..d2ae954 100644
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -5,6 +5,7 @@ import Headline from '../components/Headline'
 import Icon from '../components/Icon'
 import LinkRow from '../components/LinkRow'
 import LinkRowItem from '../components/LinkRowItem'
+import MakamujoBanner from '../components/MakamujoBanner'
 import RelatedArticles from '../components/RelatedArticles'
 
 function _pickRandom<T>(arr: T[]): T | undefined {
@@ -113,6 +114,7 @@ export default createRoute((c) => {
           </div>
         </div>
       </div>
+      <MakamujoBanner />
       <LinkRow>
         <LinkRowItem>
           <a href="/diary/index.html">
diff --git a/app/routes/works/index.tsx b/app/routes/works/index.tsx
index b000baa..4905fc8 100644
--- a/app/routes/works/index.tsx
+++ b/app/routes/works/index.tsx
@@ -1,4 +1,5 @@
 import { type Context, Hono } from 'hono'
+import MakamujoBanner from '../../components/MakamujoBanner'
 import WorkList from '../../components/WorkList'
 
 interface Frontmatter {
@@ -30,6 +31,8 @@ app.get('/index.html', (c: Context) => {
       <h1>Works</h1>
       <p>私が制作したモノの一覧です。</p>
 
+      <MakamujoBanner />
+
       <WorkList works={works} />
     </>,
     { frontmatter: { title, description, published: '2020-01-01' } },
diff --git a/package-lock.json b/package-lock.json
index e703f60..3543d25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "@biomejs/biome": "2.4.7",
         "@types/katex": "^0.16.8",
         "@types/node": "^24.12.0",
+        "playwright": "^1.58.2",
         "textlint": "^15.5.2",
         "textlint-filter-rule-comments": "^1.3.0",
         "textlint-filter-rule-node-types": "^1.1.0",
@@ -9422,6 +9423,53 @@
         "node": ">=16.20.0"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/pluralize": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-2.0.0.tgz",
diff --git a/package.json b/package.json
index 67538aa..ab41238 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@biomejs/biome": "2.4.7",
     "@types/katex": "^0.16.8",
     "@types/node": "^24.12.0",
+    "playwright": "^1.58.2",
     "textlint": "^15.5.2",
     "textlint-filter-rule-comments": "^1.3.0",
     "textlint-filter-rule-node-types": "^1.1.0",
diff --git a/tests/e2e/makamujo-banner.test.ts b/tests/e2e/makamujo-banner.test.ts
new file mode 100644
index 0000000..07b0ec5
--- /dev/null
+++ b/tests/e2e/makamujo-banner.test.ts
@@ -0,0 +1,151 @@
+/**
+ * E2E tests for MakamujoBanner: verify that clicking the banner image-map
+ * areas navigates to the correct URLs and fires the correct GA events.
+ *
+ * The banner has two clickable zones:
+ *   - The "ニコニコ生放送で配信中" badge (rect 105,67,306,87) → NicoNico live page
+ *   - The rest of the banner (default area) → Makamujo landing page
+ */
+import { type ChildProcess, spawn } from 'node:child_process'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+import { chromium, type Browser } from 'playwright'
+
+describe('MakamujoBanner E2E: click navigation', () => {
+  let devProcess: ChildProcess
+  let baseUrl: string
+  let browser: Browser
+
+  beforeAll(async () => {
+    baseUrl = await new Promise<string>((resolve, reject) => {
+      let resolved = false
+      let stderr = ''
+
+      devProcess = spawn('npm', ['run', 'dev'], {
+        stdio: 'pipe',
+        env: { ...process.env, NO_COLOR: '1' },
+        detached: true, // new process group so we can kill npm + vite together
+      })
+
+      devProcess.stdout?.on('data', (data: Buffer) => {
+        const match = data.toString().match(/https?:\/\/localhost:\d+/)
+        if (match) {
+          resolved = true
+          resolve(match[0])
+        }
+      })
+
+      devProcess.stderr?.on('data', (data: Buffer) => {
+        stderr += data.toString()
+      })
+
+      devProcess.on('error', reject)
+      devProcess.on('close', (code) => {
+        if (!resolved) {
+          reject(new Error(`npm run dev exited with code ${code} before URL was detected\n${stderr}`))
+        }
+      })
+    })
+
+    browser = await chromium.launch()
+  }, 60_000)
+
+  afterAll(async () => {
+    await browser?.close()
+    if (devProcess) {
+      await new Promise<void>((resolve) => {
+        const pid = devProcess.pid
+        const killTimeout = setTimeout(() => {
+          try {
+            if (pid) process.kill(-pid, 'SIGKILL')
+            else devProcess.kill('SIGKILL')
+          } catch { /* already dead */ }
+        }, 5_000)
+        devProcess.on('close', () => {
+          clearTimeout(killTimeout)
+          resolve()
+        })
+        try {
+          if (pid) process.kill(-pid, 'SIGTERM')
+          else devProcess.kill('SIGTERM')
+        } catch { /* already dead */ }
+      })
+    }
+  }, 30_000)
+
+  /**
+   * Opens the home page, clicks at (x, y) relative to the banner image, and
+   * returns both the intercepted outgoing navigation URL and the GA event name
+   * that was fired (captured from the dev-mode `console.log('[gtag]', ...)` call).
+   */
+  async function clickBannerAt(x: number, y: number): Promise<{ url: string; gtagEventName: string }> {
+    const context = await browser.newContext()
+
+    const navigationUrlPromise = new Promise<string>((resolve) => {
+      context.route('**/*', (route) => {
+        const url = route.request().url()
+        if (url.startsWith(baseUrl)) {
+          route.continue()
+          return
+        }
+        if (route.request().isNavigationRequest()) {
+          resolve(url)
+        }
+        route.abort()
+      })
+    })
+
+    const page = await context.newPage()
+
+    // In dev mode, setupMakamujoBannerTracking calls
+    //   console.log('[gtag]', 'event', eventName, { event_callback, event_timeout })
+    // Capture it by inspecting the console message arguments.
+    const gtagEventNamePromise = new Promise<string>((resolve) => {
+      page.on('console', (msg) => {
+        if (msg.type() !== 'log') return
+        const args = msg.args()
+        if (args.length < 3) return
+        void (async () => {
+          try {
+            const [prefix, command, eventName] = await Promise.all([
+              args[0].jsonValue(),
+              args[1].jsonValue(),
+              args[2].jsonValue(),
+            ])
+            if (prefix === '[gtag]' && command === 'event' && typeof eventName === 'string') {
+              resolve(eventName)
+            }
+          } catch { /* ignore serialization errors */ }
+        })()
+      })
+    })
+
+    await page.goto(baseUrl)
+
+    const img = page.locator('img[usemap="#makamujo-banner-map"]')
+    const box = await img.boundingBox()
+    if (!box) throw new Error('Banner image not found or has no layout bounding box')
+
+    // Click at (x, y) relative to the top-left corner of the banner image
+    await page.mouse.click(box.x + x, box.y + y)
+
+    // The gtag console.log fires synchronously on click; navigation fires 500 ms
+    // later (fallback timeout). Both promises should resolve before the test timeout.
+    const [url, gtagEventName] = await Promise.all([navigationUrlPromise, gtagEventNamePromise])
+    await context.close()
+    return { url, gtagEventName }
+  }
+
+  it('clicking the NicoNico badge navigates to the program viewing page and fires click_makamujo_nicovideo GA event', async () => {
+    // The badge occupies rect (105,67)-(306,87); its center is (205, 77)
+    const { url, gtagEventName } = await clickBannerAt(205, 77)
+    expect(url).toBe('https://live.nicovideo.jp/watch/user/14171889')
+    expect(gtagEventName).toBe('click_makamujo_nicovideo')
+  }, 30_000)
+
+  it('clicking outside the badge navigates to the Makamujo landing page and fires click_makamujo_landing GA event', async () => {
+    // (50, 30) is in the top-left area of the banner, clearly outside the badge rect
+    const { url, gtagEventName } = await clickBannerAt(50, 30)
+    expect(url).toBe('https://www.nahcnuj.work/makamujo/index.html')
+    expect(gtagEventName).toBe('click_makamujo_landing')
+  }, 30_000)
+})
diff --git a/vitest.config.e2e.ts b/vitest.config.e2e.ts
index e41cc5b..473f5f2 100644
--- a/vitest.config.e2e.ts
+++ b/vitest.config.e2e.ts
@@ -3,5 +3,7 @@ import { defineConfig } from 'vitest/config'
 export default defineConfig({
   test: {
     include: ['tests/e2e/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
+    // Run E2E test files serially to avoid port conflicts between dev-server instances
+    fileParallelism: false,
   },
 })