I Have a Dream 音声絵本

# インタラクティブHTMLを作成・デプロイ：リアルなモノクロ写真スタイル＋男性ナレーション 「I Have a Dream」インタラクティブ音声ブック（英語ページ）  


## 1. 全体目標  
マーティン・ルーサー・キング・ジュニアの1963年8月28日の演説全文（「I Have a Dream」のテキスト）を、横長のフルスクリーン音声ブックに変換します。  
1. 写実的なモノクロ写真イラスト16点（1920×1080、高コントラスト、フィルムグレイン、50 mm単焦点レンズの視点）  
2. 音声ナレーションクリップ16本（オリジナルの男性バリトン、1クリップ15～25秒、44.1 kHz、MP3、講堂の残響）  
3. 英語Webページ：横スクロール、自動／手動ページ送り、字幕の同期ハイライト、PC・モバイル対応  
4. ワンクリックでデプロイできるパッケージ（index.html / assets / README.md）  

---

## 2. 全文ストーリーボードとタイムライン（全16ページ）  
| ページ | 開始文（英語原文） | 視覚イベント | 構図と照明 | 主な音 |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | リンカーン記念堂の遠景、集まり始める群衆、逆光のシルエット | ローアングル、空のハイライト、人物はシルエット | 「I am happy to join with you...」という冒頭、講堂の反響 |
| 2 | ...will go down as the greatest demonstration... | 密集した群衆の俯瞰、「We Demand Equal Rights」のバナー | 空撮風モノクロ、高コントラスト | 高まり続ける展開、背景の遠い拍手 |
| 3 | But one hundred years later... | 奴隷解放宣言の記念碑のクローズアップ、巻き付いた錆びた鎖 | 中程度の焦点距離、記念碑を際立たせる暗い背景 | ゆっくりした話速、「one hundred years later」を強調 |
| 4 | the Negro lives on a lonely island... | 廃墟に座り、遠くの都市を見つめる孤立した黒人男性 | 広角、深い黒の前景、遠方で照らされる高層ビル | 孤独な環境音 |
| 5 | ...the manacles of segregation... | 手錠をかけられた手のクローズアップ、一部が切れた鎖 | マクロ、手に強い光、鎖の輪郭を際立たせる | 手錠の金属音＋男性の低い声 |
| 6 | ...chains of discrimination. | ドアの前で拒まれる黒人の若者、「WHITES ONLY」の看板 | ドアの隙間からの視点、看板は露出過多 | ドアが「バタン」と閉まる音 |
| 7 | We have come to cash this check... | 銀行窓口で白紙の小切手を差し出す黒人 | 左右対称の構図、窓口の光で照らす | 紙を滑らせる音 |
| 8 | It would be fatal for the nation... | 空中で止まった裁判官の小槌、背景にはぼやけた群衆 | ローアングル、小槌のシルエット | 遅れて響く小槌の音 |
| 9 | We cannot walk alone. | 重なり合う黒人と白人の手、異なる肌の色 | ソフトボックスのトップライト、手の質感を鮮明に | 低周波の心音 |
|10| We cannot turn back. | 逆光の行進する群衆、前方には光の入口 | 逆光、人物の輪郭に光の縁取り | 同期した足音、低周波のドラムビート |
|11| I have a dream today! (1st) | 光を見上げる子ども、瞳に映る反射光 | 目のクローズアップ、針のようなハイライト | 残響を伴う最初の「I have a dream!」の叫び |
|12| I have a dream that one day... | 肩を並べて走る白人と黒人のティーンエイジャー | 動きのある追跡ショット、フィルムグレイン | 呼吸音＋風 |
|13| ...sons of former slaves... sit together... | 大学のベンチで一緒に本を読む2人の学生 | 水平対称、ぼかした背景 | 本のページをめくる音 |
|14| I have a dream today! (2nd) | 口を開いた演説者の横顔、光の点がある背景 | 35 mmレンズ、逆光に浮かぶ塵 | 2度目の叫び、群衆の一斉の応答 |
|15| Let freedom ring... | 自由の鐘のクローズアップ、はっきり見える亀裂 | トップライト、鐘本体を明るく照らす、黒い背景 | 長く響く鐘の音 |
|16| Free at last! Free at last! | 上空へ飛び立つ鳥、手を掲げる群衆 | 高速シャッター、止まった翼の動き | 「Free at last!」を3回、雷鳴のような拍手 |

---

## 3. 統一画像生成プロンプト  
超写実的なモノクロ写真、50 mmレンズ、高コントラスト、フィルムグレイン、浅いDOF、[Page-X Scene]、1960年代の公民権集会、リンカーン記念堂を背景、決定的瞬間、--ar 16:9 --v 5 --q 2  

`Page-X Scene`を各ページに対応するイベントへ置き換え、グレインとコントラストのレベルを一貫させます。  

---

## 4. 統一音声生成プロンプト  
男性バリトン、MLK風の話し方、ゆっくりしたテンポ、議会議事堂ホールの残響、44.1 kHz、128 kbps MP3、15～25秒、[Starting Sentence] 「I have a dream」を強調, -3 dBピーク  

各クリップはページの開始文をナレーション内容とし、末尾に1秒間の拍手のフェードアウトを入れます。  

---

## 5. Web技術スタックとディレクトリ  
dream-web/  
├─ index.html  
├─ css/dream.css  
├─ js/dream.js  
├─ assets/  
│  ├─ img/  page-01.jpg ~ page-16.jpg  
│  └─ audio/ 01.mp3 ~ 16.mp3  
└─ README.md  

- 依存関係なし、素のJS  
- 横スクロールのストリップ、1ページあたり100 vw/vh  
- 音声と同期する字幕ハイライト  
- 操作：再生／一時停止／次へ／前へ／ミュート  

---

## 6. 主要コード（必須）  
```html
<!-- index.html snip -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>I Have a Dream – Audio Picture Book</title>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital ,wght@0,400;1,600&display=swap" rel="stylesheet">
<body>
<div class="viewport">
  <div class="strip" id="strip"><!-- 16 pages --></div>
</div>
<div class="controls">
  <button id="play">▶</button>
  <button id="mute">🔊</button>
  <div class="progress"><div id="bar"></div></div>
</div>
<audio id="voice"></audio>
<script src="js/dream.js"></script>
</body>
```
JavaScript  

```javascript
// dream.js core
const PAGES=[/* 16 entries of {img, audio, text} */];
let idx=0, voice=document.getElementById('voice');
function loadPage(n){
  strip.style.transform=`translateX(-${n*100}vw)`;
  voice.src=PAGES[n].audio; voice.play();
}
voice.addEventListener('ended',()=>{idx++; loadPage(idx);});
document.getElementById('play').onclick=()=>voice.paused?voice.play():voice.pause();
```

## 7. ワンクリックデプロイ  

READMEにはリンクと音声効果の切り替え手順を記載します。  

## 8. 納品前チェック  
[ ] モノクロJPG 16枚、page-01～page-16という名前、各600 KB以下  
[ ] MP3 16本、01.mp3～16.mp3という名前、各400 KB以下  
[ ] 空白画面なしでWebページを横スワイプでき、音声に合わせて字幕をハイライト  
[ ] モバイルでは横向き表示の案内を自動で表示

# インタラクティブHTMLを作成・デプロイ：写実的なモノクロ写真スタイル＋男性ナレーションによる「I Have a Dream」インタラクティブ音声ブック（英語ページ）  


## 1. 全体目標  
1963年8月28日にマーティン・ルーサー・キング・ジュニアが行った演説全文（「I Have a Dream」のテキスト）を、横長の全画面音声ブック：  
1. 写実性の高いモノクロ写真イラスト16枚（1920×1080、高コントラスト、フィルムグレイン、50 mm単焦点レンズの視点）  
2. 音声ナレーションクリップ16本（オリジナルの男性バリトン、1クリップ15～25秒、44.1 kHz、MP3、講堂風のリバーブ）  
3. 英語Webページ：横スクロール、自動／手動ページ送り、字幕の音声同期ハイライト、PC・モバイル対応  
4. ワンクリックデプロイ用パッケージ（index.html / assets / README.md）  

---

## 2. 全文ストーリーボードとタイムライン（全16ページ）  
| ページ | 冒頭の文（英語原文） | 映像イベント | 構図・照明 | 主な音 |
|---|---|---|---|---|
| 1 | I am happy to join with you today... | リンカーン記念堂を遠景に、集まる群衆と逆光のシルエット | ローアングル、空のハイライト、人物はシルエット | 「I am happy to join with you...」の冒頭、講堂の残響 |
| 2 | ...will go down as the greatest demonstration... | 密集した群衆を俯瞰し、「We Demand Equal Rights」のバナーを映す | 空撮のモノクロ、高コントラスト | 高まり続ける盛り上がり、遠くで聞こえる拍手 |
| 3 | But one hundred years later... | 奴隷解放宣言記念碑のクローズアップ。錆びた鎖が巻き付いている | 中望遠、記念碑を際立たせる暗い背景 | ゆっくりとした話し方。「one hundred years later」を強調 |
| 4 | the Negro lives on a lonely island... | 廃墟に座り、遠くの街を見つめる孤立した黒人男性 | 広角、手前は深い黒、遠くの高層ビルを照らす | 孤独な環境音 |
| 5 | ...the manacles of segregation... | 手かせをはめた手のクローズアップ。鎖は一部が切れている | マクロ、手に強い光、鎖の輪郭を際立たせる | 手かせの金属音＋男性の低い声 |
| 6 | ...chains of discrimination. | ドアで拒まれる黒人の若者。「WHITES ONLY」の看板 | ドアの隙間からの視点、看板は露出オーバー | ドアが勢いよく閉まる音 |
| 7 | We have come to cash this check... | 銀行カウンターで、白紙の小切手を差し出す黒人 | 左右対称の構図、カウンターの光が照らす | 紙が滑る音 |
| 8 | It would be fatal for the nation... | 空中で止まった裁判官の木槌、背景にはぼやけた群衆 | ローアングル、木槌のシルエット | 遅れて響く木槌の反響音 |
| 9 | We cannot walk alone. | 重なり合う黒人と白人の手、異なる肌の色 | ソフトボックスによる上方照明、手の質感を明瞭に映す | 低周波の心拍音 |
|10| We cannot turn back. | 逆光の中を行進する群衆、前方には光の入口 | 逆光、人物の縁に光の輪郭 | 足音の同期、低周波のドラムビート |
|11| I have a dream today! (1st) | 光を見上げる子ども、瞳に映る光 | 目元のクローズアップ、針のようなハイライト | 1回目の「I have a dream!」の叫びと残響 |
|12| I have a dream that one day... | 肩を並べて走る白人と黒人のティーンエイジャー | 動きのある追従ショット、フィルムグレイン | 息遣い＋風 |
|13| ...sons of former slaves... sit together... | 大学のベンチで、二人の学生が一緒に読書する | 水平対称、ぼかした背景 | 本のページをめくる音 |
|14| I have a dream today! (2nd) | 演説者の横顔。口を開き、背景には光の点 | 35 mmレンズ、逆光に浮かぶ塵 | 2回目の叫び、群衆が一斉に応える |
|15| Let freedom ring... | 自由の鐘のクローズアップ。はっきり見えるひび | 上方照明、鐘の胴体を強く照らし、背景は黒 | 長く響く鐘の音 |
|16| Free at last! Free at last! | 上空へ飛び立つ鳥、手を上げる群衆 | 高速シャッター、翼の動きを静止 | 「Free at last!」を3回、雷鳴のような拍手 |

---

## 3. 統一画像生成プロンプト  
写実的なモノクロ写真、50 mmレンズ、高コントラスト、フィルムグレイン、浅い被写界深度、[Page-X Scene]、1960年代の公民権集会、リンカーン記念堂を背景に、決定的瞬間、--ar 16:9 --v 5 --q 2  

`Page-X Scene`を各ページに対応するイベントに置き換え、グレインとコントラストのレベルを統一してください。  

---

## 4. 統一音声生成プロンプト  
男性バリトン、MLK風の語り口、ゆっくりしたリズム、Capitol Hallリバーブ、44.1 kHz、128 kbps MP3、15～25秒、[Starting Sentence]、「I have a dream」を強調、ピーク-3 dB  

各クリップではページの冒頭の文をナレーションに使用し、最後に1秒間の拍手フェードアウトを加えます。  

---

## 5. Web技術スタックとディレクトリ  
dream-web/  
├─ index.html  
├─ css/dream.css  
├─ js/dream.js  
├─ assets/  
│  ├─ img/  page-01.jpg ~ page-16.jpg  
│  └─ audio/ 01.mp3 ~ 16.mp3  
└─ README.md  

- 依存関係なし、素のJS  
- 横スクロールストリップ、1ページあたり100 vw/vh  
- 音声に同期した字幕ハイライト  
- 操作：再生／一時停止／次へ／前へ／ミュート  

---

## 6. 主要コード（必須）  
```html
<!-- index.html snip -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>I Have a Dream – Audio Picture Book</title>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital ,wght@0,400;1,600&display=swap" rel="stylesheet">
<body>
<div class="viewport">
  <div class="strip" id="strip"><!-- 16 pages --></div>
</div>
<div class="controls">
  <button id="play">▶</button>
  <button id="mute">🔊</button>
  <div class="progress"><div id="bar"></div></div>
</div>
<audio id="voice"></audio>
<script src="js/dream.js"></script>
</body>
```
JavaScript  

```javascript
// dream.js core
const PAGES=[/* 16 entries of {img, audio, text} */];
let idx=0, voice=document.getElementById('voice');
function loadPage(n){
  strip.style.transform=`translateX(-${n*100}vw)`;
  voice.src=PAGES[n].audio; voice.play();
}
voice.addEventListener('ended',()=>{idx++; loadPage(idx);});
document.getElementById('play').onclick=()=>voice.paused?voice.play():voice.pause();
```

## 7. ワンクリックデプロイ  

READMEにはリンクと音声効果の切り替え方法を記載しています。  

## 8. 納品前チェック  
[ ] 白黒JPG 16枚、page-01～page-16という名前、各600 KB以下  
[ ] MP3 16本、01.mp3～16.mp3という名前、各400 KB以下  
[ ] 空白画面なしでWebページを横スワイプ、音声に合わせて字幕をハイライト表示  
[ ] モバイル端末を横向きにすると案内が自動表示される