AIにブログのデザインを丸投げしたら、パグが著者になってた　　⭐︎Claude Design、初心者として本気で触ってみた⭐︎

こんにちは黒パグです🐾
アンソロピック社のニュースは一晩で全世界へと広がるほどの影響を与えるようになりましたね。

そんな中Anthropicが新しいツールを出しました。この記事を作成している段階ではまだプロトタイプのようですね。
Claude Design。名前だけ聞いてもよくわかりません。とりあえず触ってみることにしました。

🐾解説を音声で聞きたい方のためにポッドキャストを作りましたので聞きながら記事を読むとより理解できます

技術的に先に知りたいという方はこちらをご覧ください。難しいことはPDFに全部まとめてあります。

「これは何ができるの？」から始まる話　(ここからの記事は初めて触る方向けに書いてあります)

claude.aiを開いたら、見慣れない画面が出てきました。
「Prototype」「Slide deck」「From template」「Other」。
何のことかさっぱりわかりません。でもとりあえず開いてみました。これがClaude Designとの出会いです。
簡単に言うと、アプリやWebサイトのデザインをAIと一緒に作れるツールです。コードもデザインの知識も要りません。言葉で伝えるだけでいい、らしいです。
💡 補足：ここで言う「デザイン」は、見た目の設計のことです。配色やフォント、ボタンの配置といった、ユーザーが目にするすべての要素を指します。通常はFigmaなどの専用ツールとデザインの知識が必要ですが、Claude Designはそれを言葉だけで代替しようとするものです。
とりあえず「Design System」というものを作るところから始めるようでした。

Design Systemって何？

画面には「Set up your design system」と書いてあります。
入力欄が出てきました。「Company name and blurb」。会社名と説明を入れてくれ、ということのようです。
他にもGitHubのURLとか、.figファイルとか、フォントのアップロードとか、いろいろ出てきました。
全部無視しました。
わからないものはわかりません。わかるのは自分がブログを書いていることだけです。
入力欄にこう書きました。
「黒パグブログ: AIとパグについて書く個人メディア」
それだけです。「Continue to generation」を押しました。
💡 補足：Design System（デザインシステム）とは、色・フォント・ボタンの形といった「デザインのルールブック」のことです。プロの現場では、これを最初に決めておくことで、Webサイト全体の見た目に統一感を持たせます。Claude Designは、この「ルールブック作り」を自動でやってくれます。

15分待ってください

押したら新しい画面が出てきました。
「It will take about 15 minutes to generate your design system. You can step away. Keep the tab open in the background.」
訳すと「15分かかります。タブ開けたまま離れていいよ」です。
「Generate」ボタンを押して、うちの黒パグと散歩に行きました。
💡 補足：15分という待ち時間は、AIが裏側で9つの工程を順番に処理しているためです。カラーパレットの生成、フォントの選定、UIコンポーネントの設計など、人間のデザイナーが数日かけてやる作業を、エージェント（自律型AI）が一気にこなしています。詳しくは後半で触れます。

戻ったら日本語で質問攻めにあった

散歩から戻ったら、画面に大量の質問が並んでいました。
しかも日本語で。
「黒パグブログ」という名前を読んで、日本語ユーザーだと判断したようです。
質問の内容はこんな感じです。既存のデザイン素材はあるか、全体的な雰囲気はどうか、カラーの方向性は、フォントは、どのページのUIを作るか、パグのビジュアル表現はどうするか。
GitHubもFigmaも持っていません。素材も何もありません。なので最初の質問は「何もありません。ゼロから作ってください」を選びました。
雰囲気は「温かい・親しみやすい」。カラーは迷わず「黒＋ベージュ・クリーム（パグの毛色っぽく）」。フォントは「丸ゴシック」。
うちのパグはニコといいます。ニコの毛色でデザインシステムが決まりました。

生成が始まった

回答を送ったら、こう返ってきました。
「ご回答ありがとうございます！方向性が明確になりました。では作り始めます。」
左側にProgress 0/9というリストが現れました。9つのステップを順番にこなしていきます。ブランドコンセプトのREADME作成、カラーシステムとタイポグラフィのCSS定義、黒パグのロゴとマスコットイラスト作成、ブログUIキット、SNS投稿テンプレート、スライドテンプレートなどです。

途中でネットワークエラーが出ました。「Retry」を押したら復活しました。これも込みで初心者体験です。
💡 補足：Progress 0/9のリストは、裏側で動いている「エージェント」のタスク一覧です。エージェントとは、人間の指示を受けて自律的に作業を進めるAIのことです。Claude Designでは、複数のエージェントが分担して9つの工程をこなします。途中でエラーが出ても「Retry」一発で復旧できるのは、Fork Verifierというフェイルセーフ機構のおかげです（これも後述します）。
「黒パグ Ag」が出てきた

生成途中の画面を見ると、でかでかと表示されていました。
黒パグ Ag。
選んだ丸ゴシックが「Zen Maru Gothic」というフォントになっていて、「黒パグ」という文字でデモしてくれていました。わかりやすすぎます。
💡 補足：Zen Maru Gothicは、Googleフォントで無料で使える日本語の丸ゴシック書体です。「丸ゴシックがいい」という曖昧なリクエストから、具体的なフォントファミリ（Zen Maru Gothic、ウェイト400/500/700/900）を自動選定し、CSSの --font-display 変数として定義してくれています。

デザインシステム、完成

「Your design system is ready」。
できたものを見ると、本格的でした。カラーはクリームとベージュ系にインク系、フォントはDisplay・Heading・Body・コード用まで全部、コンポーネントはボタンからタグ、記事カード、フォームまで、マスコットもちゃんと作ってあります。ブログUIキットはトップページと記事ページ、SNSテンプレートまで揃っていました。
**「黒パグブログ: AIとパグについて書く個人メディア」**という一文から、ここまで全部生成されました。
裏側では複数のエージェントが9つのタスクを順番に処理しています。「15分待って」の正体はこれです。
💡 補足：「コンポーネント」とは、ボタン・入力欄・カードなど、Webサイトを構成するパーツのことです。Design Systemがあると、これらのパーツが統一されたルールで作られるため、サイト全体の見た目がバラバラになりません。

途中でエラーになっても壊れなかった理由もここにあります。各ステップ完了後に検証と保存を行うFork Verifierという仕組みが動いていて、エラーが出ても最後の成功地点まで巻き戻してくれます。だから「Retry」一発で復活できました。
💡 補足：Fork Verifierは、Gitのブランチ管理に似た仕組みです。作業を「本線（Main）」とは別の「分岐（Fork）」で進め、各ステップの完了時に検証を行います。エラーが出たら分岐を捨てて最後の成功地点からやり直し、すべて成功したら本線にマージ（統合）します。ユーザーが「Retry」ボタンを押すだけで済むのは、この仕組みのおかげです。

本番：記事ページを作る

トップ画面に戻ると、「Design system」欄に「黒パグブログ Design System」が自動でセットされていました。
これから作るデザインには全部、ニコカラーと丸ゴシックが自動で使われます。
💡 補足：一度Design Systemを作ると、以降のデザイン生成では毎回そのルールが自動適用されます。これが「Design System as Code（コードとしてのデザイン）」の本質です。色やフォントの指定をその都度やり直す必要がなくなります。さらに、生成されたSKILL.mdというファイルをClaudeのProjectに添付すると、チャットでのコード生成でもブランド準拠の実装が得られます。
入力欄にこう書きました。
「黒パグブログの記事ページ。『コンテキストドリフトとは何か？』というAI解説記事。ヘッダーにロゴ、記事タイトル、本文エリア、パグのマスコットイラスト入り」
Sendを押しました。

パグが著者になっていた

しばらくして、画面に記事ページが現れました。
ヘッダーに黒パグのマスコットアイコン。「黒パグブログ」のロゴ。ナビに「ホーム・AI・パグ・About」。
記事タイトルは「コンテキストドリフトとは何か？」。
著者欄を見ました。
kuropug。黒パグ "ごま" と暮らす個人ブロガー。
ごまというのはニコではありません。AIが勝手に名付けました。でも黒パグです。合っています。
本文を読んだら、ちゃんとコンテキストドリフトの解説記事になっていました。しかもパグで例えてあります。「おやつ」と言いながら散歩を続けると、うちの黒パグ "ごま" の頭の中では "おやつ" が "散歩のBGM" に変わっていきます。これ、AIでも同じことが起きます、と書いてありました。
関連記事も自動生成されていました。「ChatGPTにうちのパグの名前を考えてもらった話」「犬を飼うこととAIを触ること、似てるかも」。誰も書いていない記事が、並んでいました。
💡 補足：Claude Designは、デザイン（見た目）だけでなく、ダミーの本文コンテンツも自動生成します。通常のデザインツールでは「Lorem ipsum」（意味のないダミーテキスト）を入れますが、Claude Designは入力内容を理解した上で、文脈に合ったコンテンツを生成します。「コンテキストドリフト」という記事テーマに対して、パグの散歩で例える本文が自動で出てくるのは、この仕組みのためです。

結果

入力したのは2行です。
「黒パグブログ: AIとパグについて書く個人メディア」
「黒パグブログの記事ページ。コンテキストドリフトとは何か？という記事。ヘッダーにロゴ、記事タイトル、本文エリア、パグのマスコットイラスト入り」
できたのは、デザインシステム一式と、本格的なブログ記事ページです。
GitHubは使っていません。Figmaも使っていません。コードも書いていません。

言葉だけでシステムを構築し、コードとして出力する。これがClaude Designの現在地です。

もっと詳しく知りたい人へ

Claude Designの内部構造をまとめた技術メモPDFを無料配布しています。Design System as Code、Fork Verifier Agentの動作、Export HTMLの仕様、4つのプロトタイプモードの違いなど、エンジニアとデザイナー向けの内容です。GitHubもFigmaも使いこなせる人向けのやつです。
→ Claude Design 技術メモ PDF（無料）

Claude Design は現在 Research Preview 段階です（2026年4月18日時点）。
黒パグブログ │ LLM48シリーズ │ X: @kuroi_kuropug
© 2026 黒パグブログ（kuropug）
本記事の無断転載・再配布を禁じます。引用の際は出典（記事URL）を明記してください。
記載内容はClaude Design Research Preview（2026年4月18日時点）の情報に基づいています。正式リリース時に仕様が変更される可能性があります。
Claude、Claude Designは Anthropic, PBC の商標または登録商標です。
PDF
© 2026 黒パグブログ（kuropug） All rights reserved.
本資料の無断転載・複製・再配布を禁じます。個人の学習・研究目的での引用は、出典を明記の上で許可します。
記載内容はClaude Design Research Preview（2026年4月18日時点）の情報に基づくものであり、正式リリース時の仕様を保証するものではありません。
Claude、Claude Design、Anthropicは Anthropic, PBC の商標または登録商標です。
Figma は Figma, Inc. の商標です。GitHub は GitHub, Inc. の商標です。
Google Fonts（Zen Maru Gothic）は Google LLC が提供するオープンソースフォントです。

ーーーーーー　やり取り画像コーナー　ーーーーーー

実際に作ったみた。　初心者RPで。

以上です。
みなさんも一度試してみると面白いかもしれませんね！
ここまでお読みいただきありがとうございました。

#Claude
#ClaudeDesign
#AI
#生成AI
#AIツール
#デザイン
#Webデザイン
#ノーコード
#パグ
#黒パグ
#AIとデザイン
#初心者
#やってみた
#体験記
#DesignSystem
#Figma
#CSS
#フロントエンド
#LLM
#AIエージェント
#Anthropic
#つくってみた
#AIやってみた
#仕事について話そう