私には夢がある オーディオ絵本
Kingの1963年の演説を、白黒写真16シーン、バリトンのナレーション、同期してハイライト表示される字幕を備えた横送りのオーディオブックとして再構築。
Loading preview...
12969 views
このプロンプトから始める
キングによる1963年の演説全文を、横長のフルスクリーン・オーディオブックとして再構成。コントラストの強い白黒写真16シーン、バリトンのナレーションクリップ、ページが自動で切り替わるたびに同期してハイライトされる字幕を備えています。
WebサイトAgentを試す# インタラクティブHTMLを作成・デプロイ：リアルな白黒写真スタイル＋男性ナレーション「私には夢がある」インタラクティブ・オーディオブック（英語ページ）
## 1. 全体目標
マーティン・ルーサー・キング・ジュニアの1963年8月28日の演説全文（「私には夢がある」のテキスト）を、横長のフルスクリーン・オーディオブックに変換する：
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 | 本日、皆さんとともにここに参加できてうれしく思います… | リンカーン記念堂の遠景、集まりつつある群衆、逆光のシルエット | ローアングル、空のハイライト、人物はシルエット | 「皆さんとともにここに参加できてうれしく思います…」という冒頭、講堂の残響 |
| 2 | …史上最大のデモとして語り継がれるでしょう… | 密集した群衆の俯瞰、「平等な権利を求める」の横断幕 | 航空撮影風の白黒、高コントラスト | 高まり続ける緊張感、遠くで聞こえる拍手 |
| 3 | しかし100年後の今も… | 奴隷解放宣言の記念碑のクローズアップ、錆びた鎖が巻き付いている | 中望遠、記念碑を際立たせる暗い背景 | ゆっくりした話し方、「100年後」が強調される |
| 4 | 黒人は孤独な島に生きています… | 廃墟に座り、遠くの街を見つめる孤立した黒人男性 | 広角、深い黒の前景、遠くで照らされる高層ビル | 孤独を感じさせる環境音 |
| 5 | …隔離政策の手かせ… | 手かせをはめられた手のクローズアップ、鎖は一部切れている | マクロ撮影、手に強い光、鎖の輪を強くハイライト | 手かせが鳴る音＋男性の低い声 |
| 6 | …差別の鎖。 | 扉の前で拒まれる黒人の若者、「白人専用」の看板 | 扉の隙間から見た構図、看板は露出オーバー | 扉が勢いよく閉まる音 |
| 7 | 私たちはこの小切手を換金するために来ました… | 銀行カウンターで、白紙の小切手を差し出す黒人 | 左右対称の構図、カウンターの照明 | 紙が滑る音 |
| 8 | それは国家にとって致命的です… | 空中で止まった裁判官の小槌、背景にはぼやけた群衆 | ローアングル、小槌のシルエット | 時差を伴う小槌の残響 |
| 9 | 私たちは一人で歩むことはできません。 | 重なり合う黒人と白人の手、異なる肌の色 | ソフトボックスのトップライト、手の質感を明瞭に描写 | 低周波の心拍音 |
|10| 私たちは引き返すことはできません。 | 逆光の中を行進する群衆、前方に光の入口 | 逆光、人物の輪郭に光の縁取り | 同期した足音、低周波のドラムビート |
|11| 今日、私には夢があります！（1回目） | 光を見上げる子ども、瞳に映る光 | 目のクローズアップ、針のようなハイライト | 残響を伴う最初の「私には夢がある！」の叫び |
|12| いつの日か、私には夢があります… | 肩を並べて走る白人と黒人のティーンエイジャー | 動きのある追跡ショット、フィルムグレイン | 呼吸音＋風 |
|13| …かつての奴隷の息子たちが…ともに座る… | 大学のベンチで一緒に読書する2人の学生 | 水平対称、ぼかした背景 | 本のページをめくる音 |
|14| 今日、私には夢があります！（2回目） | 話者の横顔、開いた口、光の斑点がある背景 | 35 mmレンズ、逆光に浮かぶ埃の粒子 | 2度目の叫び、群衆が一斉に応える |
|15| 自由の鐘を鳴らそう… | はっきりとしたひびの入った自由の鐘のクローズアップ | トップライト、明るく照らされた鐘の本体、黒い背景 | 長く響く鐘の音 |
|16| ついに自由だ！ ついに自由だ！ | 上空へ飛び立つ鳥、手を掲げる群衆 | 高速シャッター、翼の動きを静止 | 「ついに自由だ！」を3回、雷鳴のような拍手 |
---
## 3. 統一画像生成プロンプト
非常にリアルな白黒写真、50 mmレンズ、高コントラスト、フィルムグレイン、浅い被写界深度、[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]、「私には夢がある」を強調、-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ページを横スワイプでき、音声に合わせて字幕がハイライトされる
[ ] モバイルで横向き表示を促す案内が自動表示される別の演説に変更する
キングの演説をリンカーンのゲティスバーグ演説に置き換え、16シーンのオーディオブック形式は維持したまま、1863年の本文とゲティスバーグの舞台に合わせてストーリーボードを再構成します。
Websites Agentでリミックス# インタラクティブHTMLを作成・デプロイ：リアルな白黒写真スタイル＋男性ナレーション 「私には夢がある」インタラクティブ・オーディオブック（英語ページ） ## 1. 全体目標 次の演説を変換する：マーティン・ルーサー・キング・ジュニアの1963年8月28日の演説全文（「私には夢がある」のテキスト）を、横長のフルスクリーン・オーディオブックに変換する： 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 | 本日、皆さんとともにここに参加できてうれしく思います… | リンカーン記念堂の遠景、集まりつつある群衆、逆光のシルエット | ローアングル、空のハイライト、人物はシルエット | 「皆さんとともにここに参加できてうれしく思います…」という冒頭、講堂の残響 | | 2 | …史上最大のデモとして語り継がれるでしょう… | 密集した群衆の俯瞰、「平等な権利を求める」の横断幕 | 航空撮影風の白黒、高コントラスト | 高まり続ける緊張感、遠くで聞こえる拍手 | | 3 | しかし100年後の今も… | 奴隷解放宣言の記念碑のクローズアップ、錆びた鎖が巻き付いている | 中望遠、記念碑を際立たせる暗い背景 | ゆっくりした話し方、「100年後」が強調される | | 4 | 黒人は孤独な島に生きています… | 廃墟に座り、遠くの街を見つめる孤立した黒人男性 | 広角、深い黒の前景、遠くで照らされる高層ビル | 孤独を感じさせる環境音 | | 5 | …隔離政策の手かせ… | 手かせをはめられた手のクローズアップ、鎖は一部切れている | マクロ撮影、手に強い光、鎖の輪を強くハイライト | 手かせが鳴る音＋男性の低い声 | | 6 | …差別の鎖。 | 扉の前で拒まれる黒人の若者、「白人専用」の看板 | 扉の隙間から見た構図、看板は露出オーバー | 扉が勢いよく閉まる音 | | 7 | 私たちはこの小切手を換金するために来ました… | 銀行カウンターで、白紙の小切手を差し出す黒人 | 左右対称の構図、カウンターの照明 | 紙が滑る音 | | 8 | それは国家にとって致命的です… | 空中で止まった裁判官の小槌、背景にはぼやけた群衆 | ローアングル、小槌のシルエット | 時差を伴う小槌の残響 | | 9 | 私たちは一人で歩むことはできません。 | 重なり合う黒人と白人の手、異なる肌の色 | ソフトボックスのトップライト、手の質感を明瞭に描写 | 低周波の心拍音 | |10| 私たちは引き返すことはできません。 | 逆光の中を行進する群衆、前方に光の入口 | 逆光、人物の輪郭に光の縁取り | 同期した足音、低周波のドラムビート | |11| 今日、私には夢があります！（1回目） | 光を見上げる子ども、瞳に映る光 | 目のクローズアップ、針のようなハイライト | 残響を伴う最初の「私には夢がある！」の叫び | |12| いつの日か、私には夢があります… | 肩を並べて走る白人と黒人のティーンエイジャー | 動きのある追跡ショット、フィルムグレイン | 呼吸音＋風 | |13| …かつての奴隷の息子たちが…ともに座る… | 大学のベンチで一緒に読書する2人の学生 | 水平対称、ぼかした背景 | 本のページをめくる音 | |14| 今日、私には夢があります！（2回目） | 話者の横顔、開いた口、光の斑点がある背景 | 35 mmレンズ、逆光に浮かぶ埃の粒子 | 2度目の叫び、群衆が一斉に応える | |15| 自由の鐘を鳴らそう… | はっきりとしたひびの入った自由の鐘のクローズアップ | トップライト、明るく照らされた鐘の本体、黒い背景 | 長く響く鐘の音 | |16| ついに自由だ！ ついに自由だ！ | 上空へ飛び立つ鳥、手を掲げる群衆 | 高速シャッター、翼の動きを静止 | 「ついに自由だ！」を3回、雷鳴のような拍手 | --- ## 3. 統一画像生成プロンプト 非常にリアルな白黒写真、50 mmレンズ、高コントラスト、フィルムグレイン、浅い被写界深度、[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] 「私には夢がある」を強調, -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本（オリジナルの男性バリトン、各15～25秒、44.1 kHz、MP3、講堂のリバーブ） 3. 英語Webページ：横スクロール、自動／手動ページ送り、字幕の音声同期ハイライト、PC・モバイル対応 4. ワンクリックデプロイ用パッケージ（index.html / assets / README.md） --- ## 2. 全文ストーリーボードとタイムライン（全16ページ） | ページ | 開始文（原文英語） | 視覚イベント | 構図とライティング | 主な音 | |---|---|---|---|---| | 1 | 本日、皆さんとともにここに参加できることを嬉しく思います…… | リンカーン記念堂を遠くから望み、集まる群衆と逆光のシルエット | ローアングル、空のハイライト、人物はシルエット | 「皆さんとともにここに参加できることを嬉しく思います……」という冒頭、講堂の残響 | | 2 | ……史上最大のデモとして記録されるでしょう…… | 密集した群衆を上空から捉え、「平等な権利を求める」の横断幕 | 空撮モノクロ、高コントラスト | 高まり続ける緊張感、遠くで聞こえる拍手 | | 3 | しかし100年後の今も…… | 奴隷解放宣言の記念碑をクローズアップし、錆びた鎖が巻き付いている | 中望遠、記念碑を際立たせる暗い背景 | ゆっくりした話し方、「100年後」を強調 | | 4 | 黒人は孤独な島に暮らしています…… | 廃墟に座り、遠くの都市を見つめる孤立した黒人男性 | 広角、深い黒の前景、遠くで照らされる高層ビル | 孤独を感じさせる環境音 | | 5 | ……隔離政策という手錠…… | 手錠をかけられた手のクローズアップ、鎖は一部が切れている | マクロ撮影、手に強い光、鎖の輪郭を強調 | 手錠の金属音＋男性の低い声 | | 6 | ……差別という鎖。 | 「白人専用」の看板がある扉で拒まれる黒人の若者 | 扉の隙間からの視点、露出オーバーの看板 | 扉が「バタン」と閉まる音 | | 7 | 私たちはこの小切手を現金化するために来ました…… | 銀行カウンターで、黒人が空欄の小切手を差し出す | 左右対称の構図、カウンターの照明 | 紙を滑らせる音 | | 8 | これは国家にとって致命的なことになるでしょう…… | 空中で止まった裁判官の木槌、背景にはぼやけた群衆 | ローアングル、木槌のシルエット | 遅れて響く木槌の残響 | | 9 | 私たちは一人では歩めません。 | 肌の色が異なる黒人と白人の手が重なる | ソフトボックスによるトップライト、手の質感を明瞭に | 低周波の心音 | |10| 私たちは引き返すことはできません。 | 逆光のなかを行進する群衆、前方に光の入口 | 逆光、人物の輪郭に光の縁取り | 揃った足音、低周波のドラムビート | |11| 今日、私には夢がある！（1回目） | 光を見上げる子ども、瞳に光が映る | 目元のクローズアップ、針のようなハイライト | 残響を伴う最初の「私には夢がある！」という叫び | |12| いつの日か、私には夢がある…… | 白人と黒人のティーンエイジャーが肩を並べて走る | 動きのある追従撮影、フィルムグレイン | 呼吸音＋風の音 | |13| ……かつて奴隷だった人々の息子たちが……ともに座る…… | 大学のベンチで、二人の学生が一緒に本を読む | 水平対称、ぼかした背景 | 本のページをめくる音 | |14| 今日、私には夢がある！（2回目） | 話者の横顔、開いた口、光のスポットがある背景 | 35 mmレンズ、逆光に浮かぶ埃の粒子 | 2度目の叫びと、一斉に応える群衆 | |15| 自由の鐘を鳴らそう…… | 自由の鐘のクローズアップ、はっきり見えるひび | トップライト、明るく照らされた鐘本体、黒い背景 | 長く響く鐘の音 | |16| ついに自由になった！ ついに自由になった！ | 上空へ飛び立つ鳥、手を掲げる群衆 | HighSpeedシャッター、止めた翼の動き | 「ついに自由になった！」を3回、雷鳴のような拍手 | --- ## 3. 統一画像生成プロンプト 超写実的なモノクロ写真、50 mmレンズ、高コントラスト、フィルムグレイン、浅い被写界深度、[ページXのシーン]、1960年代の公民権集会、リンカーン記念堂を背景に、決定的瞬間、--ar 16:9 --v 5 --q 2 `Page-X Scene`を各ページに対応するイベントへ置き換え、グレインとコントラストを一貫させてください。 --- ## 4. 統一音声生成プロンプト 男性バリトン、MLK風の話し方、ゆっくりしたテンポ、Capitol Hallのリバーブ、44.1 kHz、128 kbps MP3、15～25秒、[開始文]、「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. 納品前チェック [ ] 16点のモノクロ JPG、ファイル名は page-01 ～ page-16、各600 KB以下 [ ] MP3 16本、ファイル名は01.mp3 ～ 16.mp3、各400 KB以下 [ ] Webページを空白画面なしで横スワイプでき、音声に合わせて字幕をハイライト [ ] モバイルで横向きにするよう促すメッセージが自動表示される
モバイル縦向けに再構築
横長のストリップを縦長のポートレートスクロールに作り替え、スマートフォンを縦に持った際にも16シーンの音声ブックを自然に再生できるようにします。
Websites Agentでリミックス# インタラクティブHTMLの作成とデプロイ：リアルなモノクロ写真スタイル＋男性ナレーションによる「I Have a Dream」インタラクティブ音声ブック（英語ページ） ## 1. 全体目標 マーティン・ルーサー・キング・ジュニアによる1963年8月28日の演説全文（「I Have a Dream」のテキスト）を、横長の全画面音声ブック： 1. 超写実的なモノクロ写真イラスト16点（1920×1080、高コントラスト、フィルムグレイン、50 mm単焦点レンズの視点） 2. 音声ナレーションクリップ16本（オリジナルの男性バリトン、各15～25秒、44.1 kHz、MP3、講堂のリバーブ） 3. 英語Webページ：横スクロール、自動／手動ページ送り、字幕の音声同期ハイライト、PC・モバイル対応 4. ワンクリックデプロイ用パッケージ（index.html / assets / README.md） --- ## 2. 全文ストーリーボードとタイムライン（全16ページ） | ページ | 開始文（原文英語） | 視覚イベント | 構図とライティング | 主な音 | |---|---|---|---|---| | 1 | 本日、皆さんとともにここに参加できることを嬉しく思います…… | リンカーン記念堂を遠くから望み、集まる群衆と逆光のシルエット | ローアングル、空のハイライト、人物はシルエット | 「皆さんとともにここに参加できることを嬉しく思います……」という冒頭、講堂の残響 | | 2 | ……史上最大のデモとして記録されるでしょう…… | 密集した群衆を上空から捉え、「平等な権利を求める」の横断幕 | 空撮モノクロ、高コントラスト | 高まり続ける緊張感、遠くで聞こえる拍手 | | 3 | しかし100年後の今も…… | 奴隷解放宣言の記念碑をクローズアップし、錆びた鎖が巻き付いている | 中望遠、記念碑を際立たせる暗い背景 | ゆっくりした話し方、「100年後」を強調 | | 4 | 黒人は孤独な島に暮らしています…… | 廃墟に座り、遠くの都市を見つめる孤立した黒人男性 | 広角、深い黒の前景、遠くで照らされる高層ビル | 孤独を感じさせる環境音 | | 5 | ……隔離政策という手錠…… | 手錠をかけられた手のクローズアップ、鎖は一部が切れている | マクロ撮影、手に強い光、鎖の輪郭を強調 | 手錠の金属音＋男性の低い声 | | 6 | ……差別という鎖。 | 「白人専用」の看板がある扉で拒まれる黒人の若者 | 扉の隙間からの視点、露出オーバーの看板 | 扉が「バタン」と閉まる音 | | 7 | 私たちはこの小切手を現金化するために来ました…… | 銀行カウンターで、黒人が空欄の小切手を差し出す | 左右対称の構図、カウンターの照明 | 紙を滑らせる音 | | 8 | これは国家にとって致命的なことになるでしょう…… | 空中で止まった裁判官の木槌、背景にはぼやけた群衆 | ローアングル、木槌のシルエット | 遅れて響く木槌の残響 | | 9 | 私たちは一人では歩めません。 | 肌の色が異なる黒人と白人の手が重なる | ソフトボックスによるトップライト、手の質感を明瞭に | 低周波の心音 | |10| 私たちは引き返すことはできません。 | 逆光のなかを行進する群衆、前方に光の入口 | 逆光、人物の輪郭に光の縁取り | 揃った足音、低周波のドラムビート | |11| 今日、私には夢がある！（1回目） | 光を見上げる子ども、瞳に光が映る | 目元のクローズアップ、針のようなハイライト | 残響を伴う最初の「私には夢がある！」という叫び | |12| いつの日か、私には夢がある…… | 白人と黒人のティーンエイジャーが肩を並べて走る | 動きのある追従撮影、フィルムグレイン | 呼吸音＋風の音 | |13| ……かつて奴隷だった人々の息子たちが……ともに座る…… | 大学のベンチで、二人の学生が一緒に本を読む | 水平対称、ぼかした背景 | 本のページをめくる音 | |14| 今日、私には夢がある！（2回目） | 話者の横顔、開いた口、光のスポットがある背景 | 35 mmレンズ、逆光に浮かぶ埃の粒子 | 2度目の叫びと、一斉に応える群衆 | |15| 自由の鐘を鳴らそう…… | 自由の鐘のクローズアップ、はっきり見えるひび | トップライト、明るく照らされた鐘本体、黒い背景 | 長く響く鐘の音 | |16| ついに自由になった！ ついに自由になった！ | 上空へ飛び立つ鳥、手を掲げる群衆 | HighSpeedシャッター、止めた翼の動き | 「ついに自由になった！」を3回、雷鳴のような拍手 | --- ## 3. 統一画像生成プロンプト 超写実的なモノクロ写真、50 mmレンズ、高コントラスト、フィルムグレイン、浅い被写界深度、[ページXのシーン]、1960年代の公民権集会、リンカーン記念堂を背景に、決定的瞬間、--ar 16:9 --v 5 --q 2 `Page-X Scene`を各ページに対応するイベントへ置き換え、グレインとコントラストを一貫させてください。 --- ## 4. 統一音声生成プロンプト 男性バリトン、MLK風の話し方、ゆっくりしたテンポ、Capitol Hallのリバーブ、44.1 kHz、128 kbps MP3、15～25秒、[開始文]、「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ページを横スワイプ、音声に合わせて字幕をハイライト [ ] モバイルで横向きにするよう促すメッセージが自動表示される
こちらもおすすめ