Claudeの「モックアップ」は2種類あった
実装させる前に完成イメージを出す使い分け

実装前に完成イメージを作る。それだけで手戻りが消える

AIに何か作らせる時、いきなり「作って」と言ってない？ 私はずっとそれだった。で、出てきた画面を見て「うーん、思ってたのと違う」。そこから直しの往復が始まる。1回で終わればいいけど、たいてい3回4回とかかる。

いやー、これがけっこう効くんだよね……時間もそうだけど、AIの利用枠も削れていく。しかも直せば直すほど、最初に何を作りたかったのかがボヤけてくる。

先日、AIツールの情報を追いかけているベトナイさんという方のショート動画で、こんな話を見かけた。「バイブコーディングをする時は、開発内容や設計計画を立てた上で、開発に取り掛かる前に、完成イメージのモックアップを作ってもらう」——やり方は、チャットで「モックアップを作って」と指示を出すだけ。

あ、そうだ。モックアップっていうのは「完成予想図」のこと。まだ中身は動かないけど、見た目だけは完成品そっくりに作った絵。家を建てる前の模型、みたいなもんだね。

で、ここが肝で。直したい所があれば開発に入る前のこの段階で言っておく。そうすると手戻りなく進められる、と。

……なるほど。順番を変えるだけか。

Claudeでモックアップを作る方法は2種類あった

気になったので、AI秘書の凛ちゃんに公式サイトまで調べてもらった。そしたらね。Claudeで完成イメージを出す方法は、1つじゃなくて2つあった。

① Claude Design（専用のデザイン画面）

2026年4月17日にAnthropic Labsから出た、デザイン専用のツール。claude.ai/design をブラウザで開くか、Claudeのデスクトップアプリの左サイドバーから入る。

プロンプトを打つと、アプリ画面のモックアップ・触れるプロトタイプ・提案スライドなんかを描いてくれる。テンプレートに「UI mockups」「Wireframe」「Slides」「Mobile app design」が並んでて、そこから選んで発注する感じ。書き出しはZIP・PDF・PPTX・HTML。FigmaやCanva、Vercelへ渡すこともできるし、Claude Codeに実装を引き継がせることもできる。

使えるのは Pro / Max / Team / Enterprise プラン。追加のお金はかからないけど、今はまだベータ（研究プレビュー）扱いだよ。

② Claude Codeに直接お願いする

こっちが動画で紹介されてたやつ。専用のアプリを開かない。いつも作業してるチャットで「モックアップを作って」と言うだけ。

で、何が違うかというと——出てくるものが「そのまま実装に流せる形」になる。うちの場合、サイトの色やフォントの設定ファイルがリポジトリの中にあるから、AIはそれを読んで、その通りの見た目で描いてくれる。

つまり①は別室のデザイン工房に発注する感じ。②は厨房でそのまま作ってもらう感じ。どっちが偉いという話じゃなくて、出口が違う。

【実測】うちのトップページを両方で作らせてみた

で、比べないと分からないので、凛ちゃんに同じお題を2通りでやってもらった。お題は「AI氣道のトップページ」。ヒーロー、最新記事のカード6枚、AI氣道とはの3つの特徴、メルマガ登録、フッター——この構成で、と伝えただけ。

①は約5分。作業ログを見てたら、うちのサイトの色設定ファイルをちゃんと読みに行ってた。だから出てきた絵が「それっぽいAI風のページ」じゃなくて、ちゃんとうちの顔になってた。朱色が「道」の一文字とボタンだけに効いてて、明朝体の使い方も普段のトーンのまま。

②は約2分。こっちはリポジトリの中の色コードやフォント指定をそのまま使って描いてくれた。出てきたのはHTMLのファイル1枚。だからブラウザで開けるし、スマホでも見られるし、そのまま実装の下地にできる。

スマホの分も、そのまま出せる

ついでにスマホ幅にも落としてみた。折り返しの指示を1行足しただけで、同じ1枚のHTMLがそのままスマホの見た目になる。

で、そのままスマホアプリの画面も作らせてみた。ホーム・記事一覧・朝LIVEアーカイブの3画面。これも同じやり方——チャットで「アプリのモックアップ作って」と言うだけ。

並べてみると、同じお題からほぼ同じ構成が出てきた。細かい違いはあるけど、どっちも「AI風のよくあるページ」にはなっていない。うちの色とフォントを読んだうえで組んでるからだね。

速い。でもね、①には①の良さがあって。案を3つ並べて比べたり、絵の上にコメントを貼って「ここ直して」と指示したり、プレゼン資料の形で書き出したり——そういう「選ぶ・見せる」作業は①の方が明らかに強い。

2つの方法の使い分け、基準はたった1つ

両方触ってみて、判断基準はシンプルだった。実装前にどっちで作るかは、これだけで決まる。

ぶっちゃけ、日常の8割は②で足りると思う。自分のサイトやツールをちょっと直したい、その完成イメージだけ先に見たい——だいたいこれだから。

①の出番は、社内やクライアントに「A案・B案・C案」を見せて選んでもらう時。あとはPowerPointやFigmaの形で渡す必要がある時だね。

Claude以外の道具も見ておく

「Claudeだけの話？」と思った人もいるよね。いや、そんなことはなくて。完成イメージを先に出す道具は他にもある。で、名前を並べるだけだと意味がないので——一番手軽そうな Google Stitch に、さっきとまったく同じお題を出してみた。

Google Stitchに、同じお題を投げてみた

Googleアカウントでログインすれば無料で使える。stitch.withgoogle.com を開いて、入力欄の下にある「アプリ / ウェブ」をウェブに切り替えてから、同じ構成を日本語で投げた。

で、面白かったのがここ。Stitchは先に「デザインシステム」を作ってから、画面を組み始めた。配色（赤 #E60012 と墨色）と書体（Noto Serif と Hanken Grotesk）を自分で決めて、それから記事カードやボタンを並べていく。作業ログにも「デザインシステムに基づき、共通コンポーネントを定義し、トップページの構成を組み立てます」と出てた。

依頼から完成まで約3分。速い。しかも記事カードのサムネイルに実写っぽい画像が入るから、パッと見の完成度は高い。私が渡していない「AIの知恵、和の精神で。」というコピーまで書いてくる。

ただ、色はうちの朱色じゃなかった。Stitchはその場で新しくブランドを組み立てるから、既存サイトの色を引き継がない。ここがClaudeとの一番の違いだと思う——Claude Designは登録済みのデザインシステムを読む、Stitchはその場で作る。ゼロから立ち上げるならStitch、既にサイトがあるならClaude、って住み分けかな。

書き出しは Figma・Netlify・Bolt・.zip・コードをコピー、と幅広い。ここは正直うらやましい。

他にもある（こっちは名前だけ）

時間の都合で触れなかったけど、同じことができる道具はまだある。ここから先は私は使っていないので、そのつもりで読んでね。

• Figma Make — Figmaの中で、言葉から画面を出してそのまま編集できる。もうFigmaで作ってるチームなら、置き場所を変えなくて済むのが強い
• v0（Vercel）— 出てくるものが最初からReactの部品。既存のコードに差し込む前提の人向け
• Lovable — 画面だけじゃなく、裏側まで含めた「動くアプリ」ごと出てくる。コードを書かない人が一気に形にしたい時の選択肢

で、ここで大事なのは道具の名前じゃない。どれを使っても「作る前に完成イメージを見る」という順番は同じだということ。さっきの1問——そのまま作りたいのか、案を並べて選びたいのか——はそのまま使える。私はもう手元のリポジトリで完結させたいから②を選んだ、というだけの話だね。

先に登録しておくと、出てくる絵が自分の顔になる

これ、地味だけど大事なところ。

①のClaude Designには「デザインシステム」を登録しておける。自分のサイトの色・フォント・ボタン・カードの形——それを一度預けておくと、以後どのモックアップも最初からその見た目で出てくる。うちはすでに登録してあったので、今回それが効いた。

ちなみにClaude Code側から /design-sync というコマンドで、手元のデザイン部品をClaude Designへ送ることもできる。手元とデザイン画面で、色やパーツをそろえておくための仕組みだね。

料理で言うと、自分の店の調味料をあらかじめ厨房に置いておく感じかな。毎回「うちは白味噌なんですよ」と説明しなくて済む。

使う前に知っておきたい、3つの注意点

いいことばかり書いてもフェアじゃないので、引っかかった所も。

1つめ。Claude Designはスマホで使えない。ウェブとデスクトップアプリだけ。移動中にちょっと見たい、ができないんだよね。私も最初これで詰まった。画像に書き出しておくのが今のところの回避策。

2つめ。作ったものは自分のアカウントに溜まる。公開されるわけじゃないけど、下書きのプロジェクトとして残る。試しすぎると散らかるので、使わないものは片付ける前提で。

3つめ。ベータ扱いなので、できないことがある。公式のヘルプにも、コメントが表示されないことがある・大きなコードベースだと重くなる・複数人での同時編集は安定しない、と正直に書いてある。今の段階では「一人で使う道具」と思っておくのが安全。

よくある質問

まとめ

今日の話、覚えて帰ってほしいのは1行だけ。

作らせる前に「モックアップを作って」と言う。

それだけ。実装前にこの一言を挟むかどうかで、手戻りの量が変わる。専用アプリを開くかどうかは、その後の話でいい。案を並べたい時だけ claude.ai/design に行けばいいし、そのまま作りたいならチャットでそう言えばいい。

順番を1つ入れ替えるだけで、手戻りの往復が減る。地味だけど、こういうのが積み上がると、1日の終わりに残ってる時間がぜんぜん違ってくるんだよね。

関連記事

参考リンク