スポット詳細にGoogleの画像検索を足す

Googleの並び(マップ・経路・Gemini)の末尾に置く。文章より写真のほうが早い場面が
あるため —— 見た目が分かれば「行くかどうか」も「着いたときにそれと分かるか」も
決められる。

画像タブはudm=2で開く(AIモードのudm=50と同じ渡し方)。検索語は名前と所在地で、
座標は入れない。画像検索は座標を地名として扱わないので、数字が混ざると関係のない
画像が並ぶため。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: claude

CLAUDE.md

@@ -421,6 +421,11 @@ Microsoft Copilotは`?q=`が入力欄に入らなくなる回帰が報告され
 こちらは会話履歴を残さずに引けるWeb検索に近く、地図・経路と同じ「Googleで調べる」の一員。
 腰を据えて相手を選んで聞くほうがAskAiButtonの側。
 
+**同じ並びにGoogleの画像検索も置いてある**(`udm=2`が画像タブ。AIモードの`udm=50`と
+同じ渡し方)。文章より写真のほうが早い場面があるため —— 見た目が分かれば「行くかどうか」も
+「着いたときにそれと分かるか」も決められる。**検索語は名前と所在地で、座標は入れない**
+(画像検索は座標を地名として扱わないので、数字が混ざると関係のない画像が並ぶ)。
+
 質問文は`buildSpotQuestion`が組み、**所在地と座標を添える** —— 「光明寺」のように同名の場所が
 各地にあるため、名前だけだと別のスポットについて答えられてしまう。
 

components/SpotDetailModal.tsx

@@ -77,6 +77,15 @@ function GoogleMapsIcon({ className }: { className?: string }) {
   );
 }
 
+/** 画像アイコン(Google Material Symbols「image」、Apache License 2.0) */
+function GoogleImagesIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className} aria-hidden="true">
+      <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" />
+    </svg>
+  );
+}
+
 /** 星アイコン(Google Material Symbols「star」/「star_border」、Apache License 2.0) */
 function StarIcon({ filled, className }: { filled: boolean; className?: string }) {
   return (
@@ -818,6 +827,24 @@ export default function SpotDetailModal({
                 >
                   <GeminiIcon className="size-5" />
                 </a>
+                {/* Google の画像検索(`udm=2`が画像タブ。AIモードの`udm=50`と同じ渡し方)。
+                    **文章より写真のほうが早い場面がある** —— 見た目が分かれば
+                    「行くかどうか」も「着いたときにそれと分かるか」も判断できる。
+                    **検索語に座標は入れない**(名前と所在地で引く) ——
+                    地図・経路と違って画像検索は座標を地名として扱わないため、
+                    数字が混ざるとかえって関係のない画像が並ぶ */}
+                <a
+                  href={`https://www.google.com/search?udm=2&q=${encodeURIComponent(
+                    [spot.name, spot.region].filter(Boolean).join(" ")
+                  )}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="Google 画像検索でこのスポットを見る"
+                  title="Google 画像検索でこのスポットを見る"
+                  className="rounded p-1 text-blue-600 hover:bg-blue-50"
+                >
+                  <GoogleImagesIcon className="size-5" />
+                </a>
               </div>
             </div>