diff --git a/map4.js b/map4.js
index df91133..5f27c70 100644
--- a/map4.js
+++ b/map4.js
@@ -137,38 +137,38 @@
   });
 }
 
-
-function createLabeledMarker(lat, lng, name, isSelf, status) {
+function createLabeledMarker(lat, lng, name, isSelf) {
   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 shortName = name.length > 4 ? name.slice(0, 4) : name;
-
   const html = `
-    <div style="position: relative; width: 40px; text-align: center;">
-
-      <!-- ▼ 吹き出し（名前） -->
+    <div style="
+      position: relative;
+      transform: translate(-50%, -100%);
+    ">
+      <!-- 吹き出し -->
       <div style="
-        position: absolute;
-        bottom: 60px;             /* ← ピンと重ならない位置まで上げた */
-        left: 50%;
-        transform: translateX(-50%);
-        background: white;
+        max-width: 120px;
         padding: 3px 6px;
+        background: white;
+        border: 1px solid #555;
         border-radius: 6px;
-        border: 1px solid #ccc;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
         font-size: 12px;
-        font-weight: bold;
-        color: #333;
-        white-space: nowrap;
+        text-align: center;
+        white-space: normal;   /* ←改行OK */
+        word-wrap: break-word; /* ←長い名前も折り返す */
+        box-shadow: 0px 1px 4px rgba(0,0,0,0.3);
       ">
-        ${shortName}
+        ${name}
       </div>
 
-      <!-- ▼ ピン -->
-      <img src="${pinUrl}" style="width: 30px; height: 45px;">
+      <!-- ピン本体 -->
+      <img src="${pinUrl}" style="
+        width: 25px;
+        height: 41px;
+        margin-top: 4px;
+      ">
     </div>
   `;
 
@@ -176,14 +176,13 @@
     icon: L.divIcon({
       html,
       className: "",
-      iconSize: [40, 90],  // ← 吹き出し高くしたので全体も伸ばす
-      iconAnchor: [20, 45] // ← ピンの先端が地面に刺さるよう調整
+      iconSize: [0, 0],
+      iconAnchor: [0, 0],
     }),
   });
 }
 
 
-
 // ===================================
 // 自分のピンを描画
 // ===================================
@@ -317,58 +316,51 @@
 // ===================================
 // メンバー一覧
 // ===================================
-function showMemberList(latestByDevice) {
+ffunction showMemberList(latestByDevice) {
   const list = document.getElementById("memberList");
   list.innerHTML = "";
 
-  // 全員を固定順で並べるために allMembers を育てる
-  Object.values(latestByDevice).forEach((row) => {
-    if (!allMembers.some((m) => m.device_id === row.device_id)) {
-      allMembers.push({
-        device_id: row.device_id,
-        user_name: row.user_name,
-      });
-    }
-  });
+  // ★ ここを修正：allMembers を使わず最新データのみで作る
+  const members = Object.values(latestByDevice).map(row => ({
+    device_id: row.device_id,
+    user_name: row.user_name,
+    status: row.status,
+    updated_at: row.updated_at,
+    lat: row.lat,
+    lng: row.lng
+  }));
 
-  allMembers.forEach((member) => {
-    const row = latestByDevice[member.device_id];
-    const li = document.createElement("li");
-
+  members.forEach((member) => {
     const online =
-      row && row.updated_at
-        ? (Date.now() - new Date(row.updated_at)) / 1000 < 6
-        : false;
+      member.updated_at &&
+      (Date.now() - new Date(member.updated_at)) / 1000 < 6;
 
+    const li = document.createElement("li");
     li.classList.toggle("online", online);
     li.classList.toggle("offline", !online);
 
     const crown = member.user_name === currentHostName ? "👑 " : "";
     const initial = member.user_name.charAt(0);
     const bgColor = member.device_id === deviceId ? "#4CAF50" : "#FFD700";
-    const status = row?.status || "移動中";
+    const status = member.status || "移動中";
 
     li.innerHTML = `
-      <div class="member-icon" style="background:${bgColor}; color:white; font-weight:bold;">
+      <div class="member-icon" style="background:${bgColor}; color:white;">
         ${initial}
       </div>
-
       <div class="member-name">${crown}${member.user_name}</div>
-
       <div class="member-status" style="margin-left:auto;">
         <span style="
           padding:2px 6px;
           border-radius:8px;
           color:white;
           font-size:13px;
-          font-weight:bold;
           background:${getStatusColor(status)};
         ">
           ${status}
         </span>
       </div>
     `;
-
     // メンバークリックでその位置へ移動
     li.addEventListener("click", () => {
       const r = latestByDevice[member.device_id];