src/RehabComparison.tsx は1ファイルに以下が含まれます：
| 行番号 | 内容 | 種別 |
|---|---|---|
| 1-35 | import文 | 依存関係 |
| 36-60 | STYLES 定数 | スタイル |
| 68-81 | ScreenLayout | 共通 |
| 88-107 | HeadingLine | 共通 |
| 115-137 | TextLine | 共通 |
| 144-172 | ConclusionBox | 共通 |
| 179-210 | SectionIntro | 共通 |
| 217-280 | TitleScene（シーン1） | シーン |
| 287-390 | MedicalVsCareRehabScene（シーン2） | シーン |
| 398-566 | CareServiceOverviewScene（シーン3） | シーン |
| 572-660 | TwoTypesScene（シーン4） | シーン |
| 665-737 | OutpatientRehabScene（シーン6） | シーン |
| 758-831 | HomeRehabScene（シーン8） | シーン |
| 852-985 | TimeScene（シーン10） | シーン |
| 987-1049 | ComparisonScene（シーン12） | シーン |
| 1055-1132 | ConclusionScene（シーン13） | シーン |
| 1139-1195 | ClinicInfoScene（シーン14） | シーン |
| 1202-1237 | SourceScene（シーン15） | シーン |
| 1244-1321 | RehabComparison（メイン構成） | エントリポイント |
全シーンで共通使用されるデザイン設定です。ここを変更すると全シーンに影響します。
| プロパティ | 現在の値 | 用途 | 最小推奨 |
|---|---|---|---|
title | 72px | ページタイトル | 80px以上 |
heading | 60px | 見出し | 60px以上 |
body | 48px | 本文 | 48px以上 |
small | 40px | 補足テキスト | 40px以上 |
caption | 36px | キャプション | 36px以上 |
| プロパティ | 現在の値 | 用途 |
|---|---|---|
sectionGap | 50px | セクション間の間隔 |
itemGap | 32px | 項目間の間隔 |
boxPadding | "36px 48px" | ボックスの内側余白 |
| プロパティ | 値 | 用途 | 色 |
|---|---|---|---|
primary | #0366d6 | メイン（青）通所系 | |
secondary | #22863a | サブ（緑）訪問系 | |
warning | #cb2431 | 強調・警告（赤） | |
text | #333 | 本文 | |
textLight | #666 | 薄い文字 | |
textMuted | #888 | 最も薄い文字 |
全シーンの土台。背景白、余白 50px 70px。
| プロパティ | 説明 | デフォルト |
|---|---|---|
verticalAlign | 縦方向の配置方法 | "flex-start"（上揃え） |
選択肢: "flex-start", "center", "space-between", "space-evenly"
// 使用例: 要素を均等配置 <ScreenLayout verticalAlign="space-evenly"> ...コンテンツ... </ScreenLayout>
シーンの見出し行。左に緑丸ドット付き。フォントサイズ: STYLES.fontSize.heading（60px）。
<HeadingLine delay={0}>見出しテキスト</HeadingLine>
本文テキスト。フォントサイズ: STYLES.fontSize.body（48px）。左寄せ・左パディング60px。
<TextLine delay={30} highlight={true}>強調テキスト</TextLine>
黄色の結論ボックス。各シーンの最下部に配置。フォントサイズ: 36px。
注意: marginTop: 24 で位置調整。テキストが長すぎると画面外に出る可能性あり。
<ConclusionBox delay={380}> 結論テキスト（短く簡潔に） </ConclusionBox>
セクション導入画面。アイコン＋タイトル＋サブタイトルを中央配置。
<SectionIntro icon="🏥" title="タイトル" subtitle="説明" color="#0366d6" />
総フレーム数: 6570（約219秒 = 3分39秒）
介護保険サービスの全体像。通所サービスと訪問サービスを2列で表示。
| 要素 | 行 | 現在の設定 | 変更のポイント |
|---|---|---|---|
| タイトル | 422-433 | fontSize: 64 | タイトル文字サイズ |
| 2列の間隔 | 435 | gap: 30 | 列間のスペース |
| 左列幅（通所） | 437 | width: 600 | テキストが改行する場合は拡大 |
| 右列幅（訪問） | 493 | width: 600 | 同上 |
| サービスボックス | 411-418 | fontSize: 32, padding: 16px 24px | ボックス内テキストサイズ |
| ConclusionBox | 561-563 | delay: 520 | 表示タイミング |
テキスト改行防止: whiteSpace: "nowrap" が各テキスト要素に設定済み。幅が足りないとはみ出すので width で調整。
通所リハビリ（デイケア）の説明。集団・個別リハビリの2ボックス＋補足テキスト。
| 要素 | 行 | 現在の設定 | 変更のポイント |
|---|---|---|---|
| 2ボックスの間隔 | 681 | gap: 30 | ボックス間のスペース |
| ボックス幅 | 689, 709 | minWidth: 550 | テキスト改行時は拡大 |
| ボックス内タイトル | 692, 712 | fontSize: 40 | 「集団リハビリ」等のサイズ |
| ボックス内テキスト | 695, 715 | fontSize: 32 | 箇条書きのサイズ |
| 補足テキスト | 724-729 | fontSize: 32 | 下部の説明文 |
| ConclusionBox | 732-734 | delay: 380 | 表示タイミング |
テキスト改行防止: whiteSpace: "nowrap" と minWidth で制御。
訪問リハビリの比較表。訪問看護ST vs 医療機関・老健。
| 要素 | 行 | 現在の設定 | 変更のポイント |
|---|---|---|---|
| 表全体の幅 | 791 | width: "95%" | 表が狭い場合は拡大 |
| セルのパディング | 768 | 22px 36px | セル内の余白 |
| セルのフォント | 769 | STYLES.fontSize.small (40px) | 表のテキストサイズ |
| 列幅（項目） | 796 | width: 200 | 列幅調整 |
| 列幅（左） | 797 | width: 400 | 列幅調整 |
| 列幅（右） | 798 | width: 400 | 列幅調整 |
| ConclusionBox | 826-828 | delay: 450 | 表示タイミング |
訪問リハビリの提供時間。40分 vs 60分の大きなカード表示。
| 要素 | 行 | 現在の設定 | 変更のポイント |
|---|---|---|---|
| カード間の間隔 | 864 | gap: 80 | 2つのカード間のスペース |
| カードのパディング | 871, 889 | 48px 80px | カード内の余白 |
| 大きい数字サイズ | 876, 894 | fontSize: 110 | 「40分」「60分」のサイズ |
3つのリハビリサービスの比較表。
| 要素 | 行 | 現在の設定 | 変更のポイント |
|---|---|---|---|
| セルのパディング | 995 | 24px 40px | セル内の余白 |
| セルのフォント | 996 | STYLES.fontSize.small (40px) | テキストサイズ |
| 列幅（サービス名） | 1019 | width: 300 | 列幅調整 |
| 列幅（特徴） | 1020 | width: 360 | 列幅調整 |
| 列幅（おすすめ） | 1021 | width: 400 | 列幅調整 |
| ConclusionBox | 1044-1046 | delay: 380 | 表示タイミング |
「当院のご案内」。医療機関名・連絡先・住所を表示。
編集頻度が高い: 医療機関の情報を変更する場合はここを編集。
対処法（以下の順に試す）：
whiteSpace: "nowrap" を追加width または minWidth を拡大// 例: ボックス幅を600→700に拡大 <div style={{ width: 700 }}>
padding を縮小（例: "40px 60px"）fontSize を小さくする（現在36px）marginTop を小さくする（現在24px）RehabComparison（行1244-1321）内の Sequence を編集。
// シーン3の表示時間を22秒→25秒に変更する例 <Sequence from={960} durationInFrames={750}> // 660→750 (25秒×30fps) <CareServiceOverviewScene /> </Sequence> // 注意: 後続シーンのfromも合わせて調整が必要！ // シーン4: from={1620} → from={1620 + 90} = from={1710}
各シーンのJSX内のテキストを直接編集。
// 例: ConclusionBoxのテキスト変更（行561-563） <ConclusionBox delay={520}> 新しい結論テキスト </ConclusionBox>
STYLES.fontSize（行42-48）を変更すれば全シーンに反映。
注意: 一部のシーンでは STYLES.fontSize.body ではなく固定値（例: 32）を使っている箇所あり。
npm start
ブラウザでRemotionStudioが開き、リアルタイムにプレビュー確認できます。
# frame番号 = シーンの開始frame + シーン内での経過frame
npx remotion still RehabComparison --frame=1350 --output=screenshots/check.png
各シーンの開始フレームは上記タイムラインを参照。
npx remotion render RehabComparison out/rehab_comparison.mp4
または render_video.bat をダブルクリック。