【Claude Design】黒猫シックな『嘘ブログ』LP をプロンプト一本で作ってみた
概要
今回はAnthropic が 2026-04-17 にリリースした新プロダクト「Claude Design」で、架空サイト「嘘ブログ」の LP モックを作ってみた体験レビューを紹介していきます。
結論から言うと、プロンプト一本投げるだけで、黒猫マスコット＋セリフ体のシック系 LP が遷移込みで組み上がるという、かなりインパクトのあるツールでした。
題材は、以前から冗談半分で温めていた「全部嘘しか載ってないブログ＝嘘ブログ」という個人ネタです。
ポップな明るいデザインじゃなくて、セピアがかった墨黒基調のシックなトーンで仕上げてほしい、というのも含めて Claude Design に丸投げしてみました。
それではやっていきましょう！
目次
Claude Design とは
Claude Design は、Anthropic が 2026-04-17 にリリースしたばかりの新プロダクトで、自然言語の指示からプロトタイプ・LP・スライド・ワンページャーなどの「見せる絵」を生成してくれるサービスです。
- リリース：2026-04-17（research preview）
- 基盤モデル：Claude Opus 4.7
- 対象プラン：Claude Pro / Max / Team / Enterprise（無料プラン不可）
- 出力：インタラクティブプロトタイプ、PDF、PPTX、HTML、共有 URL、Canva エクスポート
- 特徴：チームのコードベースとデザインファイルを読み込んでデザインシステムを再現できる
「ファウンダーやプロダクトマネージャーなど、デザイン背景を持たない人々が、より簡単にアイデアを共有できるよう支援する」というのが Anthropic 公式の位置づけです。
ちなみに、生成結果は Claude Code へ「ハンドオフ」して実装に渡せる機能まで付いていて、プロトタイプ → 実装の導線がワンストップになっているのが個人開発者視点だと結構効いてきます。
まずは New prototype から
Claude Design を開くと、最初に出てくるのはプロトタイプ種別の選択画面です。
- Prototype / Slide deck / From template / Other（種類）
- プロジェクト名：今回は「嘘ブログ」と入力
- Design system：Default
- Wireframe（ワイヤーフレーム） or High fidelity（高精細）
今回は「いきなり見せ場まで作ってほしい」ので High fidelity を選択しました。
Wireframe は要素配置を固めたい検討初期に便利ですが、「こんな世界観になります」という提案モックを作るなら High fidelity 一択だと思います！
Create を押すと、メイン画面に遷移してヒアリングフェーズに入ります。
Start with context：プロンプトと参考素材の投入
遷移した先の画面がこちら。
左側に大きく「Start with context」と表示されていて、ここで 4 種類の入力方法が用意されています。
- Design System：自分のデザインシステムを事前登録
- Add screenshot：既存 UI のスクショを参考にさせる
- Attach codebase：コードベースを読ませて整合を取る
- Drag in a Figma file：Figma ファイルを放り込む
今回は何も下地がないので、純粋にプロンプトだけで世界観を指示しました。
投入したプロンプトは下記です。
- 嘘しかついていないブログを作りたいです。
- サイト名：嘘ブログ
- イメージ：黒猫をイメージキャラクターにシックなデザインで
- 機能：LP を作って
- 画面遷移：LP → ブログの一覧 → ブログというページ遷移を作って
下部にはあらかじめHi-fi design / Interactive prototype / Design System (design system)というタグが付いていて、「高精細のインタラクティブプロトタイプを、デフォルトのデザインシステムで作る」設定がデフォルトになっていました。
これで Send を押すと、Claude Design 側が足りない情報をヒアリングしてきます。
ヒアリング：トーン・ビジュアル・表現方法・言語
Send を押すと、いきなり生成を始めずに先にまとまった量の確認事項を聞いてきます。
今回聞かれた項目はこんな感じでした。
- 嘘のトーン（日常の小さな嘘 / 都市伝説 / 妄想系 / Decide for me）
- ビジュアルの方向性（イラスト / シルエット / 実写 / Decide for me）
- 表現方法（セピア×黒基調 / ダーク寄り / コミック風 など）
- 言語（日本語のみ / 日本語メイン＋英語アクセント / Decide for me）
- LP に入れる要素（ヒーロー / キャッチコピー＋黒猫 / 嘘ブログとは / 最新の嘘 / コンセプト説明 / カテゴリー紹介 / 執筆者プロフィール）
ここで地味に嬉しいのが、ほぼ全項目に「Decide for me（おまかせ）」が選べるようになっていて、決め切れない項目はスキップしても止まらない設計になっている点ですね（^^b
「デザイン素人だと、ここで毎項目を決め切るのが一番しんどい」というのは体感としてわかっているので、おまかせ選択肢が最初から用意されているのはだいぶ嬉しい設計でした。
回答：素人なりに頑張って回答
回答として入れた内容がこちらです。
- tone：日常の小さな嘘（猫が喋った、etc）
- vibe：2（シック寄り）
- cat_treatment：シルエット・影のようにミニマルに
- language：日本語のみ
- lp_sections：ヒーロー（キャッチコピー＋黒猫）、嘘ブログとは？（コンセプト説明）、最新の嘘（ピックアップ記事）、嘘を見分けない宣言・免責、カテゴリー紹介、執筆者（黒猫）プロフィール
- articles：6 件
- interactions：ページ遷移アニメーション
- variations：1 案で高品質に仕上げる
- tweaks：カラーテーマ（ダーク / セピア / モノクロ）
「1 案で高品質に仕上げる」と指定したのは、複数案並べられても素人は比較しきれないためです（- -;
また最後の tweaks: カラーテーマ（ダーク/セピア/モノクロ） は、生成後にワンクリックで色味を切り替えられる UI を埋め込んでほしいという意図で入れました。
Claude Design の Tweaks 機能は、プロトタイプ側に「切替 UI」を焼き込んでくれるので、後でクライアントに見せながら「こっちの色どう？」をその場でいじれます。
デザイン方針が固まって Writing フェーズへ
回答を送ると、今度はClaude Design 側が設計方針を具体的な言葉に落として見せてくれます。
回答から起こしてくれた方針が以下です。
- レイアウト：サイドバーで高級感のある新聞風ミニマル、左右に細い罫線、セクションには細い hairline divider
- タイプ：見出しは明朝（Noto Serif JP）を基調、本文は明朝を抑制にアクセントで sans、数字と欧文は Cormorant Garamond
- カラー：セピア寄りのオフホワイト
#f5f1eaベース、墨黒#1a1614、差し色に鮭色#8b7355（低彩度） - 黒猫：SVG シルエット。記事カードのエンブレム、フッター、各セクションに配置。耳・尻尾のラインでブランドサイン
- 遷移：ページ切り替えは紙のページめくり風＋ほのかなフェード、黒猫が一瞬よぎる演出
- Tweaks：セピア（default）/ ダーク / モノクロ のテーマ切替
「セピア寄りのオフホワイト」「鮭色の差し色」「Cormorant Garamond」みたいに、具体的なカラーコードやフォント名まで落としてくるのが、さすがだなと思いました（^^
生成結果①：LP のヒーロー
しばらく待つと、LP のヒーローセクションが出てきました。
出てきたキャッチコピーが「読むな、信じるな、しかし 楽しめ。」で、「楽しめ」の部分だけ鮭色で差し色されているというセンスの良さでした。
- 最上部に “A Journal of Small Untruths” という欧文タグライン
- メインコピー 3 行、最終行の「楽しめ」だけ鮭色
- 下に「このブログに書かれていることは、すべて嘘らしいです。本当ではないことです。」のリード
- 右下に Tweaks UI（セピア / ダーク / モノクロの切替ボタン）
こちらは一言も「”A Journal of Small Untruths” って書いて」とは指示していないんですが、「嘘のトーン＝日常の小さな嘘」「高級紙風ミニマル」という方針から、欧文タグラインまで自動で添えてくれるのがかなり気が利いています（^^b
コンセプト説明セクションも引き続き並んでいます。
「嘘ブログとは、現実の余白に書きこまれる脚注である。」という一文を中心に、2 カラムで世界観を説明する構成になっていました。
コピーライター的な仕事まで Claude Design 側がやってくれる感覚。
生成結果②：嘘の一覧ページも遷移込みで作ってくれる
プロンプトで指定した「LP → ブログの一覧 → ブログ」の遷移も、きちんと 3 画面とも生成されていました。
「嘘の一覧」という見出しの中の「の」だけが鮭色で差し色されているという、ヒーローと同じデザイン語彙が一覧ページでも一貫している点が地味に気持ちいいポイントでした。
- 日付＋「嘘日和」＋号数（第 XLVII 号）を上部に配置（新聞風）
- タイトル下に「すべて虚構です。順に並んでいるように見えますが、それも嘘かもしれません。」のリード（世界観維持）
- Category フィルタ：すべて / 日常 / 都市 / 家 / 食 / 記憶 / 通勤
- Order：新しい順 / 古い順、件数表示は「— 6 件の嘘」
- 「Published by 嘘ブログ編集部」「編集長 黒猫」「真実含有率 0.0%」といった遊び要素まで含まれる
「真実含有率 0.0%」とか「編集長 黒猫」みたいな世界観を強化する遊び文言は、プロンプトに書いていないのに勝手に足してくるあたりが Claude Design の面白いところですね。
こういう「なんか楽しそう」を補完してくれる設計が、素人モックで差別化が効きにくいコンセプト説明段階の価値を大きく底上げしています。
Claude Code とのハンドオフ機能
今回の検証では使っていないんですが、Claude Design には生成した成果物を Claude Code にハンドオフして実装フェーズに渡す機能があります。
- デザインシステム（カラー・タイポグラフィ・コンポーネント）
- コンポーネント階層
- レイアウト仕様
- インタラクションパターン
これを「single instruction」でバンドル化して Claude Code に投げられる仕組みなようで、UI カンプ → 実装までの手動仕様書作成をまるごと省略できるそうです。
今回は試せてませんが、もしやるってなったら実行してみます！
所感と注意点
触ってみた感触をまとめると、こんな感じでした。
- 雑なプロンプトでも、ヒアリングで自動的に軸が固まる
- Decide for me があるので、決め切れない項目で止まらない
- カラーコードやフォント名まで具体に落ちる（＝そのまま実装指示として使える）
- コピーや世界観の文章まで一緒に書いてくれる
- Tweaks で色テーマ切替 UI をそのままプロトタイプに埋められる
いやこれやばいですよね！
下手な素人に頼むより高クオリティなものを出してくれる（^^
しかもいえばすぐに修正までしてくれると来ました。。。
見える世界が広がりますね！
まとめ
今回はClaude Design で「嘘ブログ」の LP をプロンプト一本から作ってみた体験を紹介しました。
ポイントをおさらいするとこんな感じです。
- Claude Design は 2026-04-17 公開、Opus 4.7 ベースの新プロダクト
- New prototype → Start with context → ヒアリング → Writing の 4 ステップで LP が組み上がる
- カラーコード・フォント名・コピーまで具体に落ちるので、そのまま実装指示に使える
- Tweaks 機能でカラーテーマ切替 UI をプロトタイプに埋められる
- Claude Code へのハンドオフで実装フェーズまで繋がる（未検証）
「世界観をざっくり言葉にできる人なら、デザイン経験ゼロでも見せられるモックまで到達できる」という時代になってきたなぁ、と感心した一件でした（^^b
有料プラン入っている方は絶対に一度触ってみるのをおすすめします。
以上となります。
えぐいシステムを次々に出してきますね。。。おいていかれないように頑張ります！
お疲れさまでした。