アプリ遊び『デジタル写っちゃうんです MOVIE mk7.7』手間を楽しむ？🎞️ 「使い捨てカメラのアナログ体験」をWeb上で楽しむ動画ジェネレーター

2026/8/5　公開　GeminiとVercel(バーセル)で制作

🗨️ 対談エッセンス

🤖また変なアプリ作ったんですねw

せきねそう静止画何枚か選ぶと繋いでBGM付きの動画になるんだ。笑
インストールじゃないWEBアプリだから遊んでみて。

🤖なんかレトロな雰囲気ですね？

せきねそう‼️　わざわざ面倒な操作にして『一枚ずつ巻き上げて写真セット（写して）現像書に持っていく』イメージなってるんだ。作ってそのあともう忘れてた。不具合出しは一応したけどそこはご愛嬌として楽しんでいただけたらと言うアプリ遊びです。^^;

1. コンセプト概要

🎞️ 「使い捨てカメラのアナログ体験」をWeb上で楽しむ動画ジェネレーター

※アプリ遊びで作ったあまり役に立たないアプリです。笑

「デジタル写っちゃうんですムービー」は、往年のレンズ付きフィルム（使い捨てカメラ）が持っていた「巻き上げの手触り」「現像に出すワクワク感」「ノスタルジックな空気感」を、スマホやPCのブラウザ上で体験しながらスライドショー動画（MP4/WebM）を生成できるWebアプリケーションです。

murakaji-movie-0.vercel.app

💡 3つのこだわりポイント

1. アナログな操作ギミックの再現

   • カメラの裏蓋を開けて写真を装填（最大6枚）。

   • 1枚入れるごとに「ガリガリ…」とダイヤルを巻き上げ、最後に「カチャッ」とロックされる心地よい操作感。

2. 完全ローカル（ブラウザ内）完結の安心設計

   • 外部のサーバーへ写真や音声を送信・保存しないため、プライベートな写真でも安心。通信量を消費せず端末のパワーだけで動画を合成します。

3. 引き算の美学と目に優しいデザイン

   • 黒帯による圧迫感や不安感を排除する「自動大ボケ背景」や、ケン・バーンズ効果（自動ズーム）、電子音によるレトロなBGM合成など、過度な装飾を削ぎ落としたシンプルな美しさを追求しています。

2. スペックシート（仕様書）

項目	仕様・詳細
アプリ名	デジタル写っちゃうんですムービー (mk7.7)
動作環境	Webブラウザ（HTML5 / JavaScript / Canvas / Web Audio API / MediaRecorder） ・推奨環境：iOS/iPadOS（Safari）、macOS（Safari / Chrome）、Android（Chrome）
ファイル構成	1ファイル完結（HTML/CSS/JS内包・サーバーレス）
装填枚数	最大 6枚（分母付きカウンター表示：1/6 〜 6/6）
操作ギミック	・裏蓋の開閉トグル ・1枚ごとの写真装填 ・ダイヤル巻き上げ音（ノコギリ波/サイン波）＆スライドイン演出＆ロック音
写真管理	・3列×2行のコンタクトシート（ベタ焼き）一覧 ・ドラッグ＆ドロップによる並べ替え（スマホのタッチ操作対応） ・コマごとの「×」削除ボタン（常時表示・ワンタップ削除） ・並べ替え完了（たたむ）ボタン
動画編集設定	・1枚の表示時間：3秒（標準） / 4秒 / 5秒（ゆっくり） ・切り替え演出：ケン・バーンズ（自動ズーム・初期値） / パッと切替 / ふわっとフェード ・画面の向き：横 (16:9) / 縦 (9:16) / 正方形 (1:1) ・余白の処理：自動ぼかし背景（blur(60px)＋暗幕合成） / 画面いっぱいに切抜き / 黒帯 ・日付印字：ON ('26 8 5) / なし
BGM・音声機能	・内蔵BGM（6種）：純喫茶のまどろみ / セピア色の小径 / フイルムの旅路 / 陽だまりの休日 / お散歩（トコトコ音） / 無音 ・アフレコ機能：3カウントダウン ➔ ON AIR赤ランプ点滅 ➔ マイク生声録音（動画全体の長さに合わせて自動停止・動画へ合成）
動画書き出し	・ブラウザ内リアルタイム合成（Canvas描画 ＋ 音声トラック結合） ・出力形式：MP4 または WebM（端末/ブラウザの対応状況に応じて自動判定）
保存・共有仕様	・スマホ（iPhone/Android）：Web Share APIにより直接「共有メニュー」を開き、写真アプリやファイルへ保存 ・PC（Mac/Windows）：ポップアップを出さず直接ダウンロードフォルダへ保存
開発ポリシー	個人開発・非営利・完全無広告

3. ブログ用「ご利用案内・注意点」まとめ

ブログの読者向けに、以下の注意書きを添えておくとトラブルを防ぎやすく親切です。

【ご利用にあたって】

• iPhoneをお使いの方：保存ボタンを押すと下から共有メニューが開きます。「ビデオを保存」または「ファイルに保存」を選んで保存してください。

• Macをお使いの方：標準でMP4動画が作られるSafariブラウザを推奨します。Chromeで保存した動画（.webm）が開けない場合は、動画ファイルをChromeブラウザの画面に直接ドラッグ＆ドロップすると綺麗に再生されます。

• 動作について：本アプリはお使いの端末のメモリやCPUを使って動画を合成します。端末の処理能力や写真のサイズによっては動作が重くなる場合がありますので、写真のバックアップをお手元に残した上でお楽しみください。

 

 

 

 

🪄 どこでも一発で「mk7.7」を作れる魔法のプロンプト

以下のテキストをすべてコピーして、新しいAIチャットに送信してください。

Plaintext

あなたは優秀なフロントエンド・エンジニアです。
以下の要件を満たす、Webブラウザ上で動作する「レトロなフィルムカメラ風の動画生成アプリ（デジタル写っちゃうんですムービー）」のHTMLファイルを1つのファイル（CSS/JS内包）で作成してください。

【1. 全体デザイン・UIの要件】
・Tailwind CSS と FontAwesome を使用。全体はスマホに最適化された縦長（max-w-md）で、フォントはKosugi MaruとYusei Magicを使用。
・画面上部に「カメラ本体」を固定表示（sticky）。グラデーションでレトロなカメラの質感を出し、右上に「裏蓋を開く/閉じる」のトグルボタンと、赤い文字の「残り枚数カウンター（最大6枚）」を配置。

【2. カメラのギミック要件（アナログ体験）】
・裏蓋を開けると「フィルム室」が現れる。
・写真を1枚セット（ファイル選択）すると、フィルム室のプレビューに画像が表示され、右側の「巻き上げダイヤル」が黄色く点滅する。
・※写真をセットした瞬間のシャッター音（カシャッ）は【鳴らさない】こと。
・巻き上げダイヤルをクリックすると「ガリガリ…」という歯車の音（Web Audio APIで生成したサイン波/ノコギリ波の合成音）が鳴り、セットした写真が「右から左へスライドイン」し、最後に「カチャッ」とロック音が鳴るCSSアニメーションを実行する。

【3. コンタクトシート（ベタ焼き）と削除要件】
・裏蓋を閉じる、または画面下部の「現像待ちのネガ」パネル（detailsタグ）を開くと、3列×2行（最大6枚）のコンタクトシートが表示される。
・写真はドラッグ＆ドロップ（スマホのタッチ操作にも対応したtouchstart/touchmove/touchend実装必須）で自由に順番を入れ替えられる。
・各コマの右上に「×（削除ボタン）」を常時薄く表示させ、スマホのタッチでも確実に削除できるようにする。

【4. 動画の編集パネル要件】
・「🎨動画の簡単な編集をする」パネル（detailsタグ）を用意し、以下のセレクトボックスを設置する。
  - 1枚の表示時間（3秒/4秒/5秒）
  - 切り替え演出（ケン・バーンズ、パッと切替、ふわっとフェード）※初期値はケン・バーンズ
  - 画面の向き（横16:9、縦9:16、正方形1:1）
  - 余白の処理（自動ぼかし背景、画面いっぱいに切抜き、黒帯）
  - BGM（カフェ、セピア、フイルム、休日、お散歩、無音）
  - 日付の印字（ON、なし）
・※「フィルムトーン（エフェクト）」の項目は処理が重くなるため【完全削除】すること。

【5. アフレコ録音機能】
・「生声を録音」ボタンを押すと黒いモーダルが開き、「3, 2, 1」のカウントダウン後、「ON AIR」の赤ランプが点滅し、MediaRecorderでマイク音声をWebM形式で録音・保持する。録音時間は（設定秒数×枚数）を上限として自動停止する。

【6. 本物の動画生成エンジン（Canvas + MediaRecorder）】
・「現像する」ボタンを押すと、プログレスバーが進行し、裏側で実際にCanvasを用いて写真を結合した動画を生成する。
・余白処理の「自動ぼかし背景」のロジックは、ただの拡大画像にならないよう、背景用に描画する画像を「ctx.filter = 'blur(60px)'」で確実にぼかし、サイズを「元の1.5倍」に拡大し、その上から「rgba(0,0,0,0.5)」で半透明の黒を重ねて暗く落としたうえで、手前のメイン画像を「ctx.filter = 'none'」で描画する二段構えにすること。
・BGMは、選択されたテーマに合わせてWeb Audio APIで音階やリズムを変えたジェネラティブな電子音を動画のオーディオトラックに合成する。
・最終的に、生成された動画BlobURLを保持して完了画面へ遷移する。

【7. 完成画面とダウンロード・免責事項】
・完成画面には黄色い「DPE現像袋（手書き風文字入り）」を表示。
・「動画を保存する」ボタンを押した際、端末判定を行う。iPhone/Android等のスマホの場合は「Web Share API (navigator.share)」で共有メニューを開き、PC/Macの場合は直接強制ダウンロードさせる。
・「ℹ️ ご利用案内・推奨環境」のアコーディオンを設置し、以下の免責を記載する。
  - iPhoneはファイルアプリに保存される場合があること。
  - MacはSafari推奨。Chromeの.webmはブラウザにドラッグ＆ドロップで再生できること。
  - 個人開発の非営利・無広告ツールであること。
  - 端末の能力や画像サイズによってはうまく処理できない場合があるため自己責任で楽しむこと。

コードは必ず1つの `index.html` ファイルにまとめて出力してください。

ああ

※当ブログについて

・ポッドキャスト要約を”PLAUD AI”にブログは”Gemini”の助けを受けて案外アナログに制作しています。　sekine