Mockup Generator

モックアップ生成

デザインを文脈の中で見せるために、リアルなモックアップを作成するプロダクトプレゼンテーションのエキスパートです。このスキルでは、デザインプレゼンテーションのベストプラクティスとMidjourneyのプロンプトを組み合わせ、ウェブサイト、アプリ、製品、ブランディング素材向けのプロフェッショナルなモックアップを生成します。

デバイスのモックアップから製品パッケージまで、このスキルを使うと、現実世界の文脈でデザインを視覚化できます。これにより、ステークホルダー、クライアント、マーケティング素材にとって、デザインがより具体的で魅力的になります。

主なワークフロー

ワークフロー 1：デジタル製品のモックアップ

1. コンテキストを定義する

   • 製品の種類（ウェブサイト、アプリ、ソフトウェア）
   • 必要なデバイス（デスクトップ、モバイル、タブレット）
   • 使用シーン（オフィス、コーヒーショップ、自宅）
   • 視点（平面、斜め、手持ち）

2. Midjourneyのプロンプトを生成する

   • デバイスの種類とモデル
   • 画面コンテンツの説明
   • 環境と照明
   • スタイル（クリーン、ライフスタイル、ミニマル）

3. モックアップの詳細を指定する

   • 画面の寸法
   • デバイスフレーム（含める／含めない）
   • 影と反射
   • 背景の処理

4. 複数のバリエーションを作成する

   • 異なるデバイス
   • 異なるコンテキスト
   • 異なるアングル
   • ライトモードとダークモード

5. 使用ガイドラインを提示する

   • 用途ごとの最適なフォーマット
   • 書き出し仕様
   • 配置に関する推奨事項

ワークフロー 2：物理的な製品のモックアップ

1. 製品の種類を特定する

   • パッケージ（箱、ボトル、バッグ）
   • 印刷物（カード、ポスター、本）
   • グッズ（Tシャツ、マグカップ、文房具）
   • 看板（ビルボード、店舗外観）

2. モックアップのシナリオを設計する

   • 環境のコンテキスト
   • 照明条件
   • 視点とアングル
   • 補助要素

3. Midjourneyのプロンプトを生成する

   • 製品の説明
   • 表面／素材の質感
   • ブランドの配置
   • 写実的な設定

4. バリエーションを作成する

   • 複数のアングル
   • 異なる環境
   • さまざまな照明
   • スケールの比較

ワークフロー 3：ブランドプレゼンテーションのモックアップ

1. プレゼンテーションセットを計画する

   • 名刺
   • レターヘッド
   • メール署名
   • ソーシャルメディアのプロフィール
   • ブラウザー上のウェブサイト
   • モバイルアプリの画面

2. 統一感のあるシーンを設計する

   • フラットレイ写真のスタイル
   • ライフスタイルのコンテキスト
   • 製品ファミリーのグループ化
   • ブランドストーリーの視覚化

3. モックアップのプロンプトを生成する

   • シーンの構成
   • 小道具とスタイリング
   • 照明と雰囲気
   • カラーパレットの一貫性

4. ブランドストーリーを作成する

   • ヒーローモックアップ（メインのショーケース）
   • 補助モックアップ（詳細）
   • 使用シナリオ
   • 適用例

ワークフロー 4：マーケティングとソーシャルメディアのモックアップ

1. マーケティングの目標を定義する

   • 製品ローンチの告知
   • 機能の紹介
   • アプリストアのスクリーンショット
   • ソーシャルメディアの投稿
   • 広告クリエイティブ

2. モックアップのスタイルを選ぶ

   • クリーンでミニマル
   • ライフスタイルや文脈を重視
   • 大胆でグラフィカル
   • 飾らず自然な雰囲気

3. プラットフォームに合わせて生成する

   • Instagram：1080x1080、1080x1350
   • Facebook：1200x630
   • Twitter：1200x675
   • LinkedIn：1200x627
   • App Store：1242x2208

4. コンテンツシリーズを作成する

   • ティーザーモックアップ
   • 機能のハイライト
   • ビフォー／アフター
   • お客様の声の統合

クイックリファレンス

操作	コマンド／トリガー
デバイスのモックアップ	"[device]のモックアップを[project]向けに作成"
パッケージのモックアップ	"[product]のパッケージモックアップをデザイン"
ブランド関連アイテム	"[company]のブランドモックアップセットを作成"
アプリストアのスクリーンショット	"[app]のスクリーンショットを生成"
ソーシャルメディアのモックアップ	"[content]のInstagramモックアップを作成"
印刷物のモックアップ	"名刺のモックアップをデザイン"

モックアップのカテゴリー

デジタルデバイスのモックアップ

デスクトップ／ノートパソコン

• MacBook Pro/Air（最も一般的）
• iMac
• 汎用ノートパソコン
• ブラウザーウィンドウのみ
• デュアルモニター構成

モバイル

• iPhone（最新モデル）
• 手で持ったiPhone
• Android（Pixel、Samsung）
• 平置きのスマートフォンモックアップ
• ポケット／バッグに入ったスマートフォン

タブレット

• iPad Pro
• iPad mini
• Pencil／キーボード付きタブレット
• 電子書籍リーダー

ウェアラブル

• Apple Watch
• スマートウォッチ
• フィットネストラッカー

複数のデバイス

• レスポンシブな展示（スマートフォン＋タブレット＋デスクトップ）
• デバイスファミリー
• Continuity モックアップ

物理的な製品のモックアップ

パッケージ

• 箱（製品箱、ギフトボックス、配送用）
• ボトル（ガラス、プラスチック、化粧品）
• バッグ（紙、布、プラスチック）
• 缶
• チューブ
• パウチ

印刷物

• 名刺
• レターヘッド
• 封筒
• はがき
• チラシ／パンフレット
• ポスター
• 雑誌広告
• 看板

グッズ

• Tシャツ（前面、背面、折りたたみ、モデル着用）
• パーカー
• トートバッグ
• マグカップ／カップ
• ノート
• ステッカー
• 帽子／キャップ
• ウォーターボトル

文房具

• ノート
• メモ帳
• ペン
• 鉛筆
• フォルダー
• クリップボード

環境

• 店舗看板
• ウィンドウディスプレイ
• バナー
• 車両ラッピング
• 看板
• オフィス内装

プレゼンテーションスタイル

クリーン＆ミニマル

• 白い背景
• 柔らかな影
• 中央に配置した構図
• 製品に焦点を当てる
• プロフェッショナル

ライフスタイル＆コンテキスト

• 実際の環境
• 自然光
• 手でデバイスを持つ
• 使用中のシーン
• 親しみやすい設定

フラットレイ

• 真上からの視点
• 配置を工夫した構図
• 補完的な小物
• 統一感のある色使い
• Instagram向け

アイソメトリック

• 3Dの遠近感
• 幾何学的
• モダンで先進的なテクノロジー感
• イラスト的な質感

手とのインタラクション

• 人がデバイスを持つ
• 製品を使用する
• 実際の使用感
• 人間味を加える

Midjourney プロンプトのテンプレート

ウェブサイトのデスクトップモックアップ

A MacBook Pro displaying [website description] on the screen, placed on a clean white desk, soft natural lighting from the left, minimalist workspace with a coffee mug and succulent plant, professional photography, shallow depth of field, modern office environment --ar 16:9 --style raw --v 6

モバイルアプリのモックアップ

An iPhone 15 Pro displaying [app screen description], held in a hand against a soft gradient background, clean product photography, centered composition, slight shadow, modern and professional --ar 9:16 --style raw --v 6

製品パッケージ

A [product type] box mockup with [brand elements] on a textured surface, dramatic side lighting creating shadows, premium packaging design, close-up product photography, shallow depth of field, commercial photography style --ar 4:3 --style raw --v 6

ブランド文房具セット

Flat lay photography of brand identity materials including business cards, letterhead, and envelope, arranged on a white marble surface, soft overhead lighting, minimal shadows, elegant composition, professional branding mockup --ar 16:9 --style raw --v 6

Tシャツのモックアップ

A [color] t-shirt with [design description] worn by a person in a [setting], lifestyle photography, natural lighting, authentic and casual, soft focus background, apparel mockup, fashion photography style --ar 4:5 --style raw --v 6

ベストプラクティス

• 適切なコンテキストを選ぶ：モックアップのスタイルをブランドの個性に合わせます
• 現実的なシナリオを使う：信頼できる状況で製品を見せます
• 細部に気を配る：モックアップの品質はデザインの品質にも影響します
• 照明を統一する：モックアップセット全体で一貫した見た目を保ちます
• 適切なスケールにする：製品／画面の比率が正確であることを確認します
• 高解像度にする：常に公開に適した品質（最小 2000px）で作成します
• 遠近感を考慮する：角度はデザインを引き立てるものにし、競合させないようにします
• 背景も重要：製品を引き立て、邪魔にならないようにします
• 使用状況を見せる：見る人が使用例を理解できるようにします
• バリエーションを作成する：複数の角度で、より全体像を伝えます
• 読みやすさをテストする：表示サイズでテキスト／デザインが見えることを確認します
• ブランドの一貫性を保つ：モックアップをブランドの美的スタイルに合わせます

技術仕様

モックアップ用画面解像度

デスクトップ／ノートパソコン

• 1920x1080（Full HD）
• 2560x1440（2K）
• 3840x2160（4K）

モバイル（縦向き）

• iPhone：1170x2532（iPhone 14 Pro）
• Android：1080x2400（一般的なフラッグシップモデル）

タブレット

• iPad Pro 12.9"：2048x2732
• iPad Air：1640x2360

App Store のスクリーンショット

• iPhone 6.7"：1290x2796
• iPhone 6.5"：1284x2778
• iPad Pro 12.9"：2048x2732

エクスポート形式

ウェブ／ソーシャル向け：JPG または PNG（透過が必要な場合は PNG） 印刷向け：PDF または高解像度 PNG（最低 300 DPI） プレゼンテーション向け：透過 PNG 動画向け：PNG シーケンスまたは MP4

ファイルサイズ

• ソーシャルメディア：最大 1～5MB
• ウェブサイトのヒーロー画像：200～500KB（最適化済み）
• 印刷物：フル解像度、サイズ制限なし
• プレゼンテーション：画像 1 枚あたり 500KB～1MB

納品物の形式

MOCKUP SPECIFICATION
Project: [Name]
Type: [Digital/Physical/Brand Set]
Use Case: [Marketing/Presentation/Portfolio]

MOCKUP SET

1. Hero Mockup (Primary)
   Type: MacBook Pro + iPhone mockup
   Context: Modern desk with minimal props
   Lighting: Soft natural light, left side
   Background: Clean white/light gray
   Midjourney Prompt:
   "A MacBook Pro and iPhone 15 displaying [your design],
   arranged on a white minimalist desk with a plant and
   notebook, soft window lighting from left, professional
   product photography, shallow depth of field --ar 16:9 --v 6"

   Specs:
   - Resolution: 3840x2160px
   - Format: PNG with transparency option
   - Aspect ratio: 16:9

2. Mobile Focus Mockup
   Type: iPhone in hand
   Context: Outdoor, natural setting
   Lighting: Golden hour, warm
   Background: Soft bokeh
   Midjourney Prompt: [detailed prompt]

   Specs:
   - Resolution: 1080x1350px (Instagram)
   - Format: JPG
   - Aspect ratio: 4:5

3. Flat Lay Mockup
   Type: Multiple devices overhead view
   Context: Marble surface with accessories
   Lighting: Bright, even overhead
   Background: White marble texture
   Midjourney Prompt: [detailed prompt]

   Specs:
   - Resolution: 2000x2000px
   - Format: PNG
   - Aspect ratio: 1:1

[... additional mockups ...]

USAGE GUIDELINES

Website:
- Use Hero Mockup for homepage
- Optimize to 200KB
- WebP format for best performance

Social Media:
- Use Mobile Focus for Instagram posts
- Use Flat Lay for stories
- Add text overlays in brand colors

Presentations:
- Use Hero Mockup for slides
- Ensure contrast with slide background
- PNG with transparency for flexibility

Print Materials:
- Export at 300 DPI
- CMYK color mode
- PDF format for press

VARIATIONS CREATED

Light Mode: [Mockup with light UI]
Dark Mode: [Mockup with dark UI]
Multiple Devices: [Responsive showcase]
Context Shots: [Lifestyle usage]
Close-ups: [Detail views]

ASSET DELIVERY

Files:
- hero-mockup-desktop-mobile.png (4K)
- mobile-in-hand.jpg (Instagram ready)
- flat-lay-devices.png (Square format)
- [additional files]

Editable Templates:
- [If applicable, PSD/Figma links]

人気のモックアップリソース

無料のモックアップツール

• Artboard Studio：ブラウザーで使いやすい
• Mockuper：シンプルなデバイスのモックアップ
• Facebook Design：無料のデバイステンプレート
• Screely：すぐに作成できるブラウザーのモックアップ

有料のモックアップツール

• Rotato：アニメーション付きの3Dデバイスのモックアップ
• Mediamodifier：豊富なモックアップライブラリ
• Placeit：あらゆる用途のテンプレート
• Smartmockups：簡単なドラッグ＆ドロップ操作

Midjourneyで作成（おすすめ）

• 柔軟性に優れています
• 独自のカスタムシーンを作成できます
• ブランドとの一貫性を保てます
• バリエーションを無制限に作成できます

ツールの連携

• Midjourney を使って、すべてのモックアップの背景やコンテキストを生成します
• Playwright を使って、モックアップ用に実際の製品画面のスクリーンショットを撮影します
• ui-builder を使って、モックアップに使用するデザインを作成します
• brand-identity-builder を使って、モックアップとブランドの一貫性を保ちます

よくあるリクエスト

SaaS 製品：清潔感のあるオフィスで、デスクトップブラウザーとモバイルアプリを表示 モバイルアプリ：屋外のライフスタイルシーンで、手に持った iPhone E コマース：小物を添えて、質感のある表面に商品パッケージを配置 ポートフォリオ：デスク上に複数デバイスを並べたレスポンシブなショーケース ブランドローンチ：名刺、レターヘッド、販促グッズを平置きした写真 ソーシャルメディア：スマートフォンのモックアップと小物を使った、Instagram 向けの投稿