• #引き継ぎ
  • #Vue
  • #Scroll Animation
  • #作業中
未分類

フローチャートスクロールアニメーション実装の引き継ぎ

現在の実装ファイル

apps/web/app/pages/animation-demo.vue

実装の目標

poolside.aiのようなスクロール連動型フローチャートアニメーションを実装する。

要件

  1. 左側テキスト: 紙芝居のように画面中央に固定され、次の要素が下から押し上げる
  2. 右側フローチャート: スクロールに応じてノードがハイライトされ、矢印が描画される
  3. 白背景: 全体的に視認性が高いデザイン

現在の実装状態

✅ 完了している機能

  1. フローチャートSVGの実装
    • 楕円（開始/完了）、矩形（処理）、ひし形（判断）、台形（データ保存）の図形
    • 各ノードタイプに応じた色分け
  2. スクロール連動アニメーション
    • IntersectionObserverとscrollイベントで進捗を計算
    • ノードのハイライト（色変更、拡大、光るエフェクト）
    • 矢印の段階的描画（stroke-dasharrayとstroke-dashoffset）
  3. 紙芝居スタイルの基本実装
    • 各.step要素にpadding-bottom: 100vhを設定
    • .step-contentをposition: stickyで固定
    • z-indexで重なり順を制御（後の要素が前の要素を覆う）

❌ 未解決の課題

重要: 左側のテキスト要素が画面中央に配置されない

現象

  • テキスト要素が画面上部（top: 0）に配置されている
  • ユーザーの要求: 画面の縦方向中央に配置したい

現在のCSS実装

.step-content {
  position: sticky;
  top: 0;  /* ← これが問題：画面上部に固定されている */
  background: #ffffff;
  padding: 1rem 0;
  z-index: 1;
}

.step[data-step="0"] .step-content { z-index: 1; }
.step[data-step="1"] .step-content { z-index: 2; }
.step[data-step="2"] .step-content { z-index: 3; }
.step[data-step="3"] .step-content { z-index: 4; }
.step[data-step="4"] .step-content { z-index: 5; }

期待される動作

  1. 各テキスト要素が画面の縦方向中央に固定される
  2. スクロールすると次の要素が下から現れる
  3. 次の要素が画面中央に到達すると、前の要素を押し上げる形で上に移動する
  4. 前の要素が突然消えるのではなく、自然に上にスクロールして見えなくなる

試行した解決策（失敗）

  1. top: 0をtop: 50vhに変更
    • 問題: 要素が画面外に配置されてしまう
  2. justify-content: centerを.stepに設定
    • 問題: stickyの動作が正しく機能しない
  3. transform: translateY(50vh)
    • 問題: スクロール時の動作が不自然になる

次のセッションでやるべきこと

解決すべき課題

最優先: 左側テキストを画面中央に配置する方法を見つける

以下のアプローチを検討してください：

  1. CSS Grid/Flexboxの活用
    • .stepコンテナでdisplay: flex; align-items: center;を使う
    • .step-contentの高さを制限して中央揃え
  2. 計算されたtop値の使用
    • top: calc(50vh - [要素の高さの半分])
    • JavaScriptで要素の高さを取得して動的に設定
  3. 異なるstickyアプローチ
    • 親要素でスクロール領域を制御
    • sticky要素を入れ子にして中央配置
  4. 参考実装の調査
    • poolside.aiのDevToolsで実際の実装を再確認
    • 他のスクロールアニメーションライブラリの実装を調査

技術的な制約

  • position: stickyはtop, bottom, left, rightで配置を指定する必要がある
  • top: 50vhだと要素が画面外に押し出される可能性がある
  • z-indexの重なり順は現在の実装（後の要素が上）を維持する必要がある

コードの重要な部分

HTML構造

<article class="step" data-step="0">
  <div class="step-content">
    <h2>業務フロー概要</h2>
    <p>説明文...</p>
  </div>
</article>

スクロール進捗の計算

function updateProgress() {
  const vh = window.innerHeight || 0;
  steps.forEach((el, i) => {
    const r = el.getBoundingClientRect();
    const start = vh * 0.2;
    const end = vh * 0.8;
    const denom = (r.height + start) - end;
    let mid = denom !== 0 ? (start - r.top) / denom : 0;
    if (mid < 0) mid = 0;
    if (mid > 1) mid = 1;

    progressValues.value[i] = mid;

    if (mid > 0.3 && mid < 0.9) setActive(i);
  });
}

参考情報

poolside.aiの実装

  • SVGの<g>要素にtransformとopacityを動的に適用
  • position: stickyで右側のビジュアルを固定
  • スクロール位置に応じてscaleとtranslateYを変更

現在のレイアウト

┌─────────────────────────────────────┐
│ [左側テキスト]  [右側フローチャート] │
│  ・position: sticky                 │
│  ・top: 0 (要中央に変更)             │
│  ・z-index: 昇順                     │
│                                     │
│  padding-bottom: 100vh で           │
│  スクロール領域を確保                 │
└─────────────────────────────────────┘

動作確認

デモページ: http://localhost:3000/animation-demo

確認項目

  • フローチャートの描画
  • 矢印のアニメーション
  • ノードのハイライト
  • 紙芝居スタイルの重なり（z-index）
  • テキストの中央配置（未完了）
  • レスポンシブ対応（モバイル）

その他のメモ

  • ドキュメント化はapps/web/content/2025-10-31/flowchart-scroll-animation-implementation.mdに完了
  • 矢印の先端マーカーは:marker-end属性で動的に設定済み
  • 背景色を白に変更し、視認性を向上させた
  • 各ステップの間隔をpadding-bottom: 100vhで十分に確保

次のセッションでの質問事項

  1. テキストを画面中央に配置しながらstickyの動作を維持する最適な方法は？
  2. top: 50vhを使う場合、要素が画面外に出ないようにする方法は？
  3. poolside.aiは実際にどのような実装をしているか？（再調査が必要かもしれない）

最後の状態: 左側テキストが画面上部に配置されている状態。z-indexによる紙芝居スタイルは機能している。