diff --git a/map4.js b/map4.js
index e22322f..d91aafe 100644
--- a/map4.js
+++ b/map4.js
@@ -195,13 +195,13 @@
   return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
 }
 // ===================================
-// メンバー一覧表示（王冠 + クリックでその人へジャンプ）
+// メンバー一覧（ピン色連動 + イニシャルアイコン）
 // ===================================
 function 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({
@@ -213,7 +213,6 @@
 
   allMembers.forEach((member) => {
     const row = latestByDevice[member.device_id];
-
     const li = document.createElement("li");
 
     const online =
@@ -224,20 +223,32 @@
     li.classList.toggle("online", online);
     li.classList.toggle("offline", !online);
 
-    // ホストには 👑 を付与
+    // 👑 ホスト表示
     const crown = member.user_name === currentHostName ? "👑 " : "";
 
+    // イニシャル1文字
+    const initial = member.user_name.charAt(0);
+
+    // ピン色と連携（自分＝緑、他人＝金）
+    const bgColor = member.device_id === deviceId ? "#4CAF50" : "#FFD700";
+
     li.innerHTML = `
-      <span class="member-icon"></span>
+      <div class="member-icon" style="
+        background:${bgColor};
+        display:flex;
+        align-items:center;
+        justify-content:center;
+        color:white;
+        font-weight:bold;
+        font-size:16px;
+      ">${initial}</div>
       <span class="member-name">${crown}${member.user_name}</span>
     `;
 
-    // ★ クリックでそのメンバーの場所へ移動（アニメーションなし）
+    // クリックでその人に移動
     li.addEventListener("click", () => {
       const latestRow = latestByDevice[member.device_id];
       if (!latestRow) return;
-
-      // 地図をその人の位置へ移動
       map.setView([latestRow.lat, latestRow.lng], 17, { animate: true });
     });