スクショ1枚でモックアップ完成、AIスライド術

Claude Slidesに新しい使い方が登場しています。Claude Code開発者のBoris Cherny氏が公開した方法によると、スライドにスマートフォンのスクリーンショットを配置し、「iPhoneのフレームを追加して」とチャットで指示するだけで、AIがiPhone風のモックアップを自動生成し、スライド内での位置まで整えてくれます。

これまでモックアップ作成といえば、Figmaでデバイスフレームを探してサイズを合わせ、スクリーンショットを重ねて、余白を調整して……という地味に時間のかかる作業でした。提案資料やポートフォリオを作る際に「デザインの見栄えは上げたい、でもそこに時間をかけたくない」という場面は多く、そのボトルネックをAIへの自然言語指示で突破できる、というのが今回のポイントです。

Claude Slidesはスライド作成に特化したClaudeのインターフェースで、テキスト・画像・レイアウトをチャット形式で操作できます。今回の事例が示すのは単なる「便利機能の追加」ではなく、「デザイン作業の境界線がどこまで溶けているか」という実態です。

モックアップが特に効果を発揮するのは、「完成物をリアルに見せたいが、本番実装はまだ先」という段階です。具体的には次のような場面が当てはまります。

LP制作の提案フェーズ：クライアントへの方向性共有の段階で、スマホ表示のモックアップをスライドに入れると、テキストだけの企画書より格段に温度感が伝わります。本番のコーディング前に承認を取るためのビジュアルとして使えます。

ポートフォリオ更新：過去に手がけたサービスやアプリのスクリーンショットをデバイスフレームに入れるだけで、見せ方の質が上がります。「スクショをただ貼っただけ」と「デバイスフレームに収めたもの」では、受け取り手の印象が変わります。

自社サービスの紹介資料：スマホ向けサービスを紹介する社内資料や営業デッキでも、iPhone/Androidのフレーム付きで見せると現実感が出ます。

共通しているのは「見せる制作物において、見栄えを上げるための工数を省く」という点です。AIを「使う仕組み」ごと作る時代が来たでも触れたように、制作の各ステップにAIを差し込む設計が実務の標準になりつつあります。今回のケースはまさにその一例です。

今回の機能が注目される理由のひとつは、「開発者本人が使い方を公開している」という点です。Claude Codeを作ったBoris Cherny氏自身がユースケースとして紹介したということは、これはマージナルな使い方ではなく、想定された用途の中心に近いということになります。

業界全体の動きとして見ると、スライドツールへのAI統合は各社が力を入れている領域です。Googleスライド、Canva、Gammaなど複数のツールがAI生成・編集機能を強化しており、「プレゼン資料はチャットで作る」という感覚が広がっています。そのなかでClaude Slidesが差別化しているのは、画像の配置・装飾といったビジュアル編集までチャットで完結できる点です。

実用面では、「デザインの専門知識がなくても、見せ方のクオリティを担保できる」というのが最も大きな変化です。ChatGPTで作るサムネ、もう「当たり前」になっているでも示されているように、AI活用による制作物の見栄え向上はすでに標準的な手法になっています。モックアップも同じ流れに乗ってきたと考えると、「知っているかどうか」の差がそのまま制作速度の差になる段階に来ています。