• #tokyo-soundscape
  • #pptx
  • #nuxt
  • #project-launch
  • #claude-code
未分類アクティブ

Tokyo Soundscapeプロジェクト立ち上げ

2026年2月13日、新しいプロジェクトを立ち上げた。東京の環境音を定点観測で記録し続けるという企画で、仮称「Tokyo Soundscape Archive」。まずは企画書をまとめてスライドに落とし、リポジトリの初期設定まで進めた。

やったこと

1. 企画書と競合分析の作成

マークダウンで2つのドキュメントを書いた。

  • 企画書: コンセプト、録音スポット一覧、YouTube映像のアイデア、機材構成、制作ワークフロー
  • 競合分析: 既存のウォーキング動画チャンネル、環境音BGM系、フィールドレコーディング系との比較を4P分析でまとめた

企画の骨子は「同じ場所、同じ時間、毎年録る」というフォーマット。ウォーキング動画やBGM系のチャンネルは多数あるが、音の定点観測を長期間続けるアプローチは見当たらなかった。

2. マークダウンからPowerPointスライドを生成

Claude Codeのpptxスキル（PptxGenJS）を使って、企画書をプレゼン資料に変換した。全13枚構成。

スライド生成の流れ

  1. 各スライドのHTMLテンプレートを作成（slides/slide01-title.html ~ slide13-closing.html）
  2. Sharpで背景画像を生成（ダークネイビー + ゴールドのカラースキーム）
  3. Unsplash APIから浅草・秋葉原・スカイツリーなどの写真をダウンロード
  4. 写真を背景に合成（不透明度20%）して、テキストの視認性を確保
  5. html2pptxでHTMLをPowerPointのスライドに変換
  6. 最終出力: Tokyo_Soundscape_Archive.pptx（約740KB）

つまずいたポイント: 背景画像の合成順序

最初は写真を「前面」に重ねていたため、テキストが読めなくなった。修正して写真を「背景」に配置し、80%の黒オーバーレイをかけることで解決。Sharpのcompositeメソッドでレイヤー順を制御した。

// 80%の黒オーバーレイ = 写真が20%の透過度で見える
const photoWithAlpha = await sharp(resized)
  .composite([{
    input: Buffer.from([0, 0, 0, Math.round(255 * 0.80)]),
    raw: { width: 1, height: 1, channels: 4 },
    tile: true,
    blend: 'over',
  }])
  .toBuffer();

つまずいたポイント: Windowsのファイルパス

PptxGenJSの slide.background = { path: ... } に渡すパスで問題が起きた。file:// URLを使うとPptxGenJS側でパスを解決できず、最終的に絶対パスをそのまま渡す方式で安定した。Windows環境特有のバックスラッシュとスラッシュの混在も原因の一つだった。

3. Google Driveへのアップロード

生成したPowerPointファイルをgogcliスキル経由でGoogle Driveにアップロードした。チームメンバーへの共有用。

4. リポジトリの作成

プロジェクト専用のリポジトリ tokyo-onkei（東京音景）を作成し、git initを実行した。

5. Nuxtプロジェクトとしてのランディングページ計画

既存のmdx-playgroundやtax-lpの構成を参考にしながら、Nuxtベースのランディングページを構築する計画を立てた。

  • 利用規約・プライバシーポリシーのドラフト
  • コンテンツの詳細ページ
  • 決済連携（Stripe）のカート機能は計画段階

具体的な販売戦略はまだ固まっていないので、まずはサイトの骨組みを作るところから。

技術スタック

用途ツール
スライド生成PptxGenJS + Sharp + html2pptx
画像取得Unsplash API
画像加工Sharp（リサイズ、合成、オーバーレイ）
ファイル共有Google Drive（gogcli）
ランディングページNuxt 3（計画）
決済Stripe（計画）

ふりかえり

マークダウンの企画書をPowerPointに変換するワークフローは、一度パイプラインを組んでしまえば再利用が利く。今回のプロジェクトでは背景画像の合成にSharpを使ったが、不透明度の制御やレイヤー順序の調整など、画像処理特有のトライアンドエラーがあった。

Windows環境でのファイルパス問題は毎回のように遭遇する。PptxGenJSのようなライブラリがパスをどう解釈するかはドキュメントだけでは分からないことが多く、実際に試して確認するしかない。

プロジェクト自体はまだ構想段階で、録音機材の購入もこれからだが、企画の言語化とスライド化ができたことで、次のアクションが見えやすくなった。

次のステップ

  • 録音機材の選定・購入
  • Nuxtランディングページの実装
  • 定点観測カードのテンプレート作成
  • 第1回フィールドレコーディングの実施