ISLA RESORT — 画像表示調査レポート

調査日時: 2026-03-30 | 対象: test-isla-1llm-restore

前提: テスト実行後にworking rootディレクトリが削除されている
/proc/2076078/cwd → /home/deploy/apps/devos-preview/test-isla-1llm-restore (deleted)
サーバーは削除済みディレクトリで稼働中。静的ファイルは全て 500 エラー。

1. ホームページ画像パス確認

grep -n "img\|src=\|/api/images\|/images/" src/app/page.tsx

（working rootが削除されているため、サーバーから取得したHTML内のsrc属性で代替確認）

src="/images/home_villa_card.jpg"
src="/images/home_dining_card.jpg"
src="/images/home_spa_card.jpg"
src="/images/home_aerial_reef.jpg"

注: ヒーロー背景は <img> タグではなく <canvas> が使用されている（ScrollFrameSequence）。hero_main 画像への img src は HTML内に存在しない。

2. ホームページのヒーロー部分（先頭100行相当）

curl でサーブされた HTML から body の先頭を抽出:

<body>
  <div style="font-family:var(--font-body);color:#3A3632;background:#F7F5F0;min-height:100vh">
    <nav style="position:fixed;top:0;left:0;right:0;height:72px;z-index:1000;
                display:flex;align-items:center;justify-content:space-between;
                padding:0 40px;background:transparent;...">
      <a style="font-family:var(--font-display);font-size:16px;
                letter-spacing:0.15em;color:#FFFFFF;..." href="/">ISLA RESORT</a>
      <!-- デスクトップナビ: ヴィラ / ダイニング / スパ / アクセス / ご相談 -->
    </nav>

    <!-- ■ ヒーローセクション ■ -->
    <div class="" style="position:relative;height:300vh">
      <div style="position:sticky;top:0;height:100vh;overflow:hidden">

        <!-- ScrollFrameSequence: canvas要素 -->
        <canvas style="width:100%;height:100%;object-fit:cover;display:block"></canvas>

        <!-- テキストオーバーレイ -->
        <div style="position:absolute;bottom:0;...;
                    background:linear-gradient(to top, rgba(0,0,0,0.75) 0%, ...);">
          <div style="position:absolute;bottom:28vh;left:50%;transform:translateX(-50%);
                      width:90%;max-width:900px;text-align:center;z-index:2">

            <h1 style="font-family:var(--font-display);
                       font-size:clamp(2.2rem, 5.5vw, 4.5rem);
                       font-weight:500;color:#FFFFFF;...">
              <!-- WORD BY WORD REVEAL アニメーション -->
              <span style="overflow:hidden;display:inline-block">
                <span style="display:inline-block;transform:translateY(100%);
                             transition:transform 0.4s ... 0s">珊瑚の</span>
              </span>
              <span ...><span ...>海に、</span></span>
              <span ...><span ...>ただ</span></span>
              <span ...><span ...>身を</span></span>
              <span ...><span ...>委ねる</span></span>
            </h1>

            <p style="...;opacity:0;transform:translateY(16px);...">
              沖縄の離島に佇む全室オーシャンビュースイート。波音と潮風だけの贅沢を。
            </p>

            <button style="...;background:#8B6F4E;...">滞在のご相談</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

判定: ヒーローは ScrollFrameSequence を使用（canvas + height:300vh）。しかし /frames/frame-001.jpg が存在しないため、canvasは空白のまま。

3. サブページ画像パス確認（spa）

（working rootが削除されているため、ログから確認）

SUBPAGE_IMAGE_SAVED /home/deploy/apps/devos-preview/test-isla-1llm-restore/public/images/spa/spa-hero.jpg
SUBPAGE_IMAGE_SAVED /home/deploy/apps/devos-preview/test-isla-1llm-restore/public/images/spa/spa-feature.jpg
SUBPAGE_IMAGE_SAVED /home/deploy/apps/devos-preview/test-isla-1llm-restore/public/images/spa/spa-background.jpg
SUBPAGE_IMAGE_GENERATION_OK spa count=3

spaページのLLM生成ログ:

[SUBPAGE_DEBUG] spa: LLM call starting (12000 tokens)
[SUBPAGE_DEBUG] spa: LLM returned 18145 chars in 0ms   ← ※ 0ms に注意
[SUBPAGE_DEBUG] spa: extracted 18145 chars
[SUBPAGE_DEBUG] spa: use_client=true export_default=true style_tag=false className=false len=18151
MULTIPAGE_PAGE_OK src/app/spa/page.tsx length=18151
[SUBPAGE_DEBUG] spa: ✓ WRITTEN SUCCESSFULLY

4. サブページのヒーロー部分（spa先頭100行相当）

（working rootが削除されており直接参照不可）

ログ上確認できること:

use_client: true
export_default: true
style_tag: false（なし）
className: false（なし）
コード長: 18151 chars（十分なボリューム）

spa専用画像は /images/spa/spa-hero.jpg 等にコピー済み（working root削除で現在は配信不可）。

5. 画像ファイルの実在確認

/home/deploy/apps/devos-preview/test-isla-1llm-restore/public/api/images/

ls: cannot access: No such file or directory   ← working rootごと削除済み

/home/deploy/apps/devos-preview/test-isla-1llm-restore/public/images/

ls: cannot access: No such file or directory   ← working rootごと削除済み

/tmp/devos-generated-images/test-isla-1llm-restore/ （生成元・こちらは残存）

hero.jpg           ← 生成済み ✅
feature.jpg        ← 生成済み ✅
background.jpg     ← 生成済み ✅
media_plan/
  home_villa_card/hero.jpg     ✅
  home_dining_card/hero.jpg    ✅
  home_spa_card/hero.jpg       ✅
  home_aerial_reef/hero.jpg    ✅
  hero_main/hero.jpg           ✅
  spa_hero_pool/hero.jpg       ✅
  spa_treatment_hands/hero.jpg ✅
  dining_hero_terrace/hero.jpg ✅
  dining_chef_hands/hero.jpg   ✅
  villas_hero_terrace/hero.jpg ✅
  access_hero_boat/hero.jpg    ✅
  ... 計22件すべて生成済み
access/
  hero.jpg feature.jpg background.jpg  ✅
spa/
  hero.jpg feature.jpg background.jpg  ✅
（villas, dining も同様）
veo-*.mp4   ← 動画4本生成済み

6. テスト生成ログのエラー確認

grep -i "error|fail|warn|empty|null|undefined" /tmp/isla-v4-quality.log
  （IMAGE/VIDEO/ART_DIRECTOR/GEMINI/MEDIA_PLAN ノイズ除外後）

MULTIPAGE_SUMMARY success=4/4 ok=[villas,dining,spa,access] fail=[]
    "All CTA buttons use href values, not empty placeholders"

エラーなし — 画像生成・ページ生成・ビルドは全て成功。ディレクトリ削除は外部要因。

7. Art Director sections がサブページに届いたか確認

grep "Art Director セクション設計|pageSections|sections.*filter" /tmp/isla-v4-quality.log
→ 該当行なし（プロンプト内容はlogに出力されていない）

[SUBPAGE_DEBUG] spa: LLM call starting (12000 tokens)
[SUBPAGE_DEBUG] spa: LLM returned 18145 chars in 0ms

判定: pageSectionsJson がプロンプトに注入されたかどうか、ログ上では確認できない。
ただし レスポンスが 0ms で返っているのは前回テスト結果のキャッシュまたはモックレスポンスが利用された可能性がある。実際のLLMコールが行われたかどうかは要確認。

根本的な問題点まとめ

問題	原因	状態
ヒーロー背景が真っ暗・空白	`ScrollFrameSequence` 使用 + `/frames/frame-001.jpg` が存在しない → `loaded=false` のまま canvas 空白	致命的
セクション画像 500 エラー	working root (`test-isla-1llm-restore/`) がテスト後に削除された。`/images/xxx.jpg` は public ディレクトリ直接配信のため消滅	環境依存
`/api/images/` 500 エラー	`route.js` が `process.cwd()/public/images/` を参照 → ディレクトリ削除済み	環境依存
サブページ LLM 0ms レスポンス	前回テストのキャッシュ利用の可能性。`pageSectionsJson` の注入確認不可	要確認

ScrollFrameSequenceの動作フロー（ヒーロー問題の詳細）

ScrollFrameSequence.tsx:
  1. useEffect: /frames/frame-001.jpg ～ frame-060.jpg を new Image() で読み込み
  2. img.onload ごとに loadedCount++
  3. loadedCount >= frameCount * 0.3 (= 18) になったら setLoaded(true)
  4. フレームファイルが存在しない → onload が一度も呼ばれない → loaded = false のまま
  5. GSAP ScrollTrigger が初期化されない → canvas は空白のまま表示

→ ヒーロー背景: 300vh の空白スクロール領域のみ

画像パス設計の確認

生成フロー:
  /tmp/devos-generated-images/.../media_plan/home_villa_card/hero.jpg  (生成元)
         ↓ copyFileSync
  {workingRoot}/public/images/home_villa_card.jpg   (配信元)
         ↓ Next.js static serving
  http://localhost:3365/images/home_villa_card.jpg  (ブラウザが参照するURL)

問題: workingRoot が削除されると配信できなくなる
/tmp の生成元画像は残存しているが、workingRoot のコピーが消えている