できること

  • 16:9、1:1、4:5、9:16 の PNG モックアップ。1080p、2K、4K、透過または背景付き
  • スマホが開く、閉じる、またはその両方の 60 fps の MP4。任意でカメラの揺れ
  • インタラクティブなスタジオのソースと、そのオフラインの HTML の 1 ファイルのビルド
  • 3 種類の本体の仕上げ、10 種類の同梱の背景、映像の背景への対応
  • 任意:PopNow の背景、背景のループ、折りたたみの音。先に見積もります

向いている用途

  • 実際のスクリーンショットによるアプリストア、ローンチ、SNS の画像
  • リール、変更履歴、ランディングページ向けの短いデバイスのクリップ
  • 大きい画面と小さい画面で、レスポンシブな Web アプリを同時に見せること

向いていない用途

  • 特定の実在のスマホ機種のモックアップ
  • まだ存在しないインターフェースの捏造
  • タイトルやナレーションを入れた本格的なローンチ映画

使い方

Claude・ChatGPT で

PopNow のスキル「スマホモックアップの生成」(phone-mockup-generator)を使って、次のことをしてください:./shots/dashboard.png をスマホに載せて、開いた状態で、シルバーの仕上げ、温かい背景。16:9 と 4:5 の PNG をください。

コーディングエージェントで

/popnow-phone-mockup-generator ./shots/dashboard.png をスマホに載せて、開いた状態で、シルバーの仕上げ、温かい背景。16:9 と 4:5 の PNG をください。

次はこれ

次は、ヒンジのやわらかいクリック音つきで、開いて閉じる 6 秒のクリップ。音の見積もりを先に出して。

小さい画面にはモバイル版の ./shots/today.png を使い、閉じた状態の 9:16 版も作って。

用意しておくもの

  • 大きい画面用の横長のスクリーンショットまたは録画(約 1.42:1)
  • 任意:小さい画面用の縦のファイル
  • ヘッドレスの書き出し用の Node 22 と Chrome
  • 任意:カスタムの背景、ループ、音のための PopNow API キー

似ているスキル

すべて見る →

よくある質問

実在のスマホの機種ですか?

いいえ。スマホはコードで描いた汎用の折りたたみ式です。メーカーの意匠やロゴは含まれないので、画像に他社の商標が入ることはありません。

何かインストールが必要ですか?

Node 22 と Google Chrome(または Chromium か Edge)です。スクリプトは npm パッケージを使いません。スタジオをローカルで配信し、ブラウザを操作して PNG と MP4 のファイルを書き出します。

画面に動画を映せますか?

はい。どちらの画面も、画像に加えて MP4、WebM、MOV を扱えます。書き出しの間は録画をフレームごとに進めるので、折りたたみと同期したままです。

PopNow は何を追加しますか?

スタジオでは描けないものです。製品のために生成された背景、5 秒の動く背景、クリップの音。どれも任意で、実行前にクレジットで見積もります。