diff --git a/map4.js b/map4.js
index a0e763c..7fe35aa 100644
--- a/map4.js
+++ b/map4.js
@@ -167,30 +167,11 @@
   });
 }
 
-// ===================================
-// 自分のピン表示
-// ===================================
-function renderSelfMarker() {
-  if (!map || lastLat === null || lastLng === null) return;
-
-  if (selfMarker) map.removeLayer(selfMarker);
-
-  selfMarker = createLabeledMarker(
-    lastLat,
-    lastLng,
-    currentUser,
-    true,
-    myStatus
-  );
-  selfMarker.addTo(map);
-}
-
 function createLabeledMarker(lat, lng, name, isSelf, status) {
   const pinUrl = isSelf
     ? "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png"
     : "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-gold.png";
 
-  // ステータス色（丸バッジに使う）
   const statusColor = {
     "移動中": "#4caf50",
     "遅れます": "#ff9800",
@@ -198,38 +179,50 @@
     "到着": "#9c27b0",
   }[status || "移動中"];
 
-  const html = `
-    <div class="pin-box" style="display:flex; align-items:center;">
-      <img src="${pinUrl}" class="pin-img" style="width:28px; height:28px;">
-      <div class="pin-name" style="
-        background:white;
-        padding:2px 6px;
-        margin-left:4px;
-        font-size:12px;
-        border:1px solid #ccc;
-        border-radius:6px;
-        white-space:nowrap;
-      ">${name}</div>
+  const shortName = name.length > 4 ? name.slice(0, 4) : name;
 
-      <!-- 丸バッジ（ステータス） -->
-      <div class="pin-status-dot" style="
-        width:10px;
-        height:10px;
-        background:${statusColor};
-        border-radius:50%;
-        margin-left:4px;
-        border:1px solid white;
-        box-shadow:0 0 3px rgba(0,0,0,0.3);
-      "></div>
+  const html = `
+    <div style="
+      display:flex;
+      align-items:center;
+      gap:4px;
+    ">
+      <img src="${pinUrl}" style="width:26px; height:41px;">
+      <div style="display:flex; flex-direction:column; gap:2px;">
+
+        <span style="
+          background:white;
+          padding:1px 6px;
+          border-radius:6px;
+          font-size:12px;
+          font-weight:bold;
+          border:1px solid #ccc;
+          white-space:nowrap;
+        ">
+          ${shortName}
+        </span>
+
+        <span style="
+          background:${statusColor};
+          color:white;
+          padding:1px 6px;
+          border-radius:6px;
+          font-size:10px;
+          white-space:nowrap;
+        ">
+          ${status}
+        </span>
+
+      </div>
     </div>
   `;
 
   return L.marker([lat, lng], {
     icon: L.divIcon({
-      className: "custom-pin",
+      className: "smart-pin",
       html: html,
-      iconSize: [60, 30],
-      iconAnchor: [30, 30],
+      iconSize: [80, 40],
+      iconAnchor: [15, 40],
     }),
   });
 }