


できること
- 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 キー
似ているスキル
すべて見る →白黒スタジオのポートレート
+3日常の写真を、本人らしさを残したまま、落ち着いた白黒のスタジオ風ポートレートに変えます。
ブログ記事のイラスト一式
+31 本の記事に合わせた 3 枚のイラスト。それぞれが、その段落で実際に言っていることを描きます。
ブランドキット& DESIGN.md 生成
+3短いブリーフからブランドキットを作ります。検証済みの配色、オープンなフォント、SVG ロゴ、モックアップ、エージェントが従う DESIGN.md。
自動車の断面図ポスター
+3一般的な車の側面からの断面図。系統ごとに色分けし、番号付きのマーカーと丸い拡大窓を付けます。
黒板風インフォグラフィック作成
+3正確で短いコピー、チョークの絵、ひとつの明確な読み順を持つ、16:9 の黒板風インフォグラフィック。
シネマティックな絵コンテフレーム
+3ひとつのシーンを撮る 3 つの方法を、それぞれ別の絵コンテのコンタクトシートにまとめ、つながりを保ちます。
一貫したコンセプトアートのセット
+3同じ架空の世界に属することが明らかなキャラクター、小道具、背景。
かわいいクレヨンの落書きアート
+3白い紙の上の、愛嬌のある不器用なクレヨンのキャラクター。ぐらつく線、塗りの殴り書き、くっきりしたファイル、シールの切り抜き。
雑誌風の線画イラスト
+3ブログのヘッダー、ニュースレター、SNS カード向けの、アクセント色ひとつの、すっきりした黒インクのイラスト。
エングレービング風の記事カバー
+3エッセイごとにひとつの、シュールな黒インクのエングレービング。クロスハッチングで端から端まで、大きなアイデアがひとつの場面で示されます。
EV プラットフォームの分解図
+3電気自動車を層ごとに持ち上げて分解。バッテリー、モーター、客室、車体を色分けし、注記を付けます。
製品の分解図ポスター
+3製品の、すっきりとした分解図のヒーロー画像。部品の名前は、あなたの仕様表から正確に入ります。
ファンタジー地図ジェネレーター
+3羊皮紙、アトラス風、黒線の、自分の世界の地図。すべての名前は正しく書かれ、グリッドはきちんと揃います。
地域別の食の風味マップ
+3落ち着いた手描きの地図に、地域ごとの小さな味のグラフを共通の目盛りで置き、誠実な凡例を添えます。
イラスト入りの街の地図メーカー
+3近所や町の、手描き風の地図。大事なところは正確で、ラベルも正確に入ります。
インクスケッチの絵コンテ
+3短い話から作る、ラフな黒インクの絵コンテのページ。開いた線、白い余白、コマごとにひとつのビート。
線画の OG 画像メーカー
+3落ち着いたリンクのプレビュー画像。オフホワイトのカード、短い黒い見出し、手描きのインクのキャラクター。
海洋生物学の研究ポスター
+3描かれた生息地の断面図を囲む横長の研究ポスター。番号付きの種と、調査結果のグラフ。
写真の構図スタディ
+3ひとつの被写体を、それぞれ別の構図の原理で撮った 3 つの写真風のスタディ。
スケッチノートの画像ジェネレーター
+3記事やメモを、正確で確認済みのラベルを持つ、手描きの 4:3 のスケッチノート 1 枚にします。
SNS カバーとサムネイルのジェネレーター
+3ひとつのメッセージから、OG 画像、投稿のカバー、動画のサムネイルを、確認済みのセットで。どのサイズも正確です。
よくある質問
実在のスマホの機種ですか?
いいえ。スマホはコードで描いた汎用の折りたたみ式です。メーカーの意匠やロゴは含まれないので、画像に他社の商標が入ることはありません。
何かインストールが必要ですか?
Node 22 と Google Chrome(または Chromium か Edge)です。スクリプトは npm パッケージを使いません。スタジオをローカルで配信し、ブラウザを操作して PNG と MP4 のファイルを書き出します。
画面に動画を映せますか?
はい。どちらの画面も、画像に加えて MP4、WebM、MOV を扱えます。書き出しの間は録画をフレームごとに進めるので、折りたたみと同期したままです。
PopNow は何を追加しますか?
スタジオでは描けないものです。製品のために生成された背景、5 秒の動く背景、クリップの音。どれも任意で、実行前にクレジットで見積もります。

