デバイスフレームに入れると一気にそれっぽくなる——モックアップ提示の技術

クライアントへの提案で「これどう見えるか確認してほしい」という場面がある。フラットなバナー画像を「SNSに投稿するとこんな感じです」と言って見せるより、スマホのスクリーン上に配置されたモックアップで見せるほうが、圧倒的に話が早い。

これ、Claude Designでできる。指示の仕方を覚えてから、クライアントの「あ、こういうことか」が出るまでの時間が体感で半分になった。

最初にやらかしたこと

最初は「スマホのモックアップに入れて」という一言だけ書いていた。出てきたのは確かにスマホフレームに入ったデザインだったが、機種がバラバラ（あるときはiPhone風、あるときはAndroid風）、フレームの色が黒・白・グレーで毎回違う、画面サイズに対してデザインが小さすぎる、という問題が連発した。「任せる」ではなく「指定する」必要がある——グラデーションとまったく同じ構造だ。

指定すべき3要素

デバイスモックアップを安定して生成するには、以下を明示する。

1. デバイスの種類と向き

デバイス: スマートフォン（iPhone 15 Pro風、縦向き）
フレームの色: スペースブラック

「スマホ」と「タブレット横向き」では全然別の結果になる。向きも縦横を必ず書く。

2. フレームとコンテンツの比率

画面内のコンテンツが画面領域の90%を占めるように配置
フレームは全体の50%サイズで中央配置
背景: ライトグレー（#F5F5F5）

これを書かないと、フレームが巨大で中のデザインが豆粒になることがある。逆に「画面全体に広げて」と書くとフレームが消えてコンテンツだけ出てきたりもした。

3. 複数デバイス展開の場合

デスクトップとスマホの両方を1枚に入れるケースも多い。

左側: MacBook Pro風ラップトップ（画面にデスクトップ版を表示）
右側: iPhone 15 Pro風スマートフォン（画面にモバイル版を表示）
2つのデバイスを並べて配置、背景はミッドナイトブルー（#1C2A3A）
デバイスは斜め30度の角度でパースをつける

マルチデバイス展開の提案では、これが一番使える形式だ。

「テーブルの上に置いた」演出

フレーム指定だけでなく、「素材の上に置く」コンテキスト演出も使える。

木製テーブルの上にiPadを置いたような構図
iPad画面にダッシュボードUIを表示
iPadは斜め20度の角度
テーブルはナチュラルウッドの木目
右下にコーヒーカップを小さく添える

こういう写真的な演出は、プレゼン資料の表紙やホワイトペーパーの冒頭に置くと一気に質が上がる。実際にやってみて、クライアントの最初のリアクションが明らかに変わった。

実際に効いたプロンプトテンプレート

【モックアップ仕様】
対象デザイン: 以下のSNSバナー（1080×1080px）
デバイス: iPhone 15 Pro風、縦向き、チタニウムシルバー色
配置: デザインを画面内に全面表示
フレームサイズ: 全体の55%（中央配置）
背景: グラデーション（#E8EDF2 → #C5D0DC、上から下）
影: デバイスの下に薄いドロップシャドウ（透明度20%）

これを冒頭に入れてから後半でデザイン内容を書くようにしたら、やり直しがほとんどなくなった。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

注意点：「実際の製品写真」はNG

Claude Designの制約上、「iPhone 15 Proの実際の外観を再現して」という指示は拒否されることがある。「〜風」「〜のようなデザインのスマートフォン」という書き方が安全で、かつ十分に意図が伝わる。実用上の差はない。

モックアップを作るのに5分もかからない。でも提案のクオリティ感が別物になる。手を抜かない価値がある。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。