Claude Designを使ってみた｜AIに頼んだプロンプトでLPが完成、ブログのデザインシステムも設定

Sandy16L — Wed, 13 May 2026 06:52:38 +0000

この記事の目次

Claude Designとは何か
今回やったこと（概要）
プロンプト作成のポイント
実際に生成されたLP
DesignSystemも設定してみた
Canva MCPとの使い分け
まとめ

Anthropicが2026年4月に公開した新ツール「Claude Design」を初めて使ってみました。きっかけは、いつも使っているクリームのランディングページ（LP）をサンプルとして作ってみたかったから。Claudeにプロンプトを書いてもらい、それをClaude Designに渡すだけで、驚くほど完成度の高いLPができあがりました。さらにせっかくなので、あらかんブログ用のDesign Systemも設定してみましたので、その手順もあわせてご紹介します。

① Claude Designとは何か

Claude Designは、Anthropicが2026年4月17日にリリースしたAIデザインツールです。claude.ai/designからアクセスでき、Claude Pro・Max・Team・Enterpriseプランのユーザーが利用できます。

チャットで話しかけるだけで、LP・スライド・プロトタイプなどのビジュアルデザインが作れます。デザインの専門知識は不要です。

主な特徴は以下の3点です。

Opus 4.7搭載：Anthropicの最新ビジョンモデルが高精度なデザインを生成
Canvaと公式連携：生成したデザインをワンクリックでCanvaに送信して仕上げが可能
Design System機能：ブランドカラー・フォント・アイコンを登録しておくと毎回自動適用される

通常のClaude画面の左サイドバーに「Design」という項目が追加されており、そこからアクセスします。アプリからでなく、Web画面からです。

② 今回やったこと（概要）

今回の題材は、クリームのLPです。架空のランディングページを作るサンプルとして使いました。

流れはシンプルで、以下の3ステップです。

Step 1｜まずClaudeにプロンプトを作ってもらう

商品情報・ターゲット・カラーイメージ・セクション構成などを整理したプロンプトをClaude（このチャット）に作成してもらいました。

Step 2｜商品画像・カタログPDFと一緒にClaude Designへ投入

作成したプロンプト・商品画像・PDFカタログをまとめてClaude Designのチャット欄に投入しました。

Step 3｜自動生成されたLPを確認・ダウンロード

数分でHTML形式のLPが生成されました。右上の「Export」ボタンからStandalone HTMLとしてダウンロードできます。

③ プロンプト作成のポイント

Claude Designへ渡すプロンプトは、Claude（チャット）に作ってもらうのが効率的です。その際のポイントを3つご紹介します。

商品画像・資料も一緒に添付する

テキストのプロンプトだけでなく、商品画像やPDFカタログを同時に渡すと、Claude Designが色調・商品の形状・ブランドトーンを読み取って反映してくれます。「このように見せて」というリクエストに非常に有効でした。

カラーコードはHEXで明記する

「ピンク系で」という曖昧な指示より、#E8A0A8のようにHEXコードで明記するほうが意図した色に仕上がります。メインカラー・サブカラー・アクセントカラーの3色を60:30:10の比率で指定するのがコツです。

セクション構成を細かく指定する

「ヒーロー→ブランド歴史→商品特徴→CTA」のように、作りたいセクションの順番と各セクションに入れたい内容を具体的に書くと、構成がぶれません。今回は7セクションを指定しました。

④ 実際に生成されたLP

生成されたLPがこちらです。

完成度が高かった点として、以下が挙げられます。

ヒーローセクションのタイポグラフィが美しく、ピンクのアクセントカラーが商品と統一感抜群
タイムラインがシンプルかつ読みやすく仕上がっていた
CTAセクション（サロン予約ボタン）がLP全体の締まりを作っていた
フッターまでしっかり作り込まれていた

ポイント：商品画像はプレースホルダーになっている部分があったため、後から実画像に差し替える必要がありました。Claude Designのチャット欄で「商品画像を差し替えてください」と追加指示するか、HTMLをダウンロードしてVSCodeで編集するのがおすすめです。

⑤ DesignSystemも設定してみた

Claude Designには「Design System」という機能があります。一言でいうと、ブランドの設計図をClaudeに覚えさせる仕組みです。

登録しておくと、以降に作るすべてのデザインにブランドカラー・フォント・アイコンが自動で適用されます。毎回プロンプトにHEXコードを書く手間がなくなります。

あらかんブログ用に登録した内容

項目	設定内容
ブランド名	あらかんブログ（ara-garage.com）
メインカラー	#a6c3ac（くすみグリーン）
サブカラー	#eaf3d7（薄いグリーン）
アクセント	#8f7e61（ウォルナットブラウン）
フォント	BIZ UDPGothic（老眼対応・UD設計）
アイコン	Lucideベース（24種類）

設定はすべて日本語で入力でき、Claudeがカラーコードや説明文からデザインシステムを自動構築してくれました。所要時間は10〜15分程度です。

注意点：このDesign SystemはClaude Design内の設定であり、WordPressブログ本体には影響しません。Claude Designで新しいデザインを作るときだけ自動適用される仕組みです。

⑥ Canva MCPとの使い分け

これまでのブログ制作フローでは、アイキャッチ画像をCanva MCPで作成していました。Claude Designを使ってみた結果、用途による使い分けが最適だという結論になりました。

用途	使うツール	理由
ブログアイキャッチ	Canva MCP（現状維持）	慣れている・日本語安定・速い
LP制作	Claude Design	複数セクション・HTML出力・自由度高い
プレゼン・スライド資料	Claude Design	構成から一気に作れる

なお日本語コンテンツをCanvaに連携する際は、現時点でフォントの扱いに制限があるため、日本語メインのデザインはClaude Design単独で完結させるのがスムーズです。

⑦ まとめ

Claude Designを初めて使ってみた感想は「想像以上に完成度が高い」の一言でした。デザインの専門知識がなくても、プロンプトを丁寧に作れば本格的なLPが数分で仕上がります。

特に効果的だったのは、Claudeにプロンプトを作ってもらってからClaude Designに渡すという2段階のフローです。プロンプトの質がそのままデザインの質につながるため、この手順はぜひ試してみてください。

今回のまとめ

Claude Designはチャットで話しかけるだけでLPが作れるAIデザインツール
プロンプトはClaudeに作ってもらうと効率的
商品画像・PDFカタログも一緒に渡すと精度が上がる
Design Systemを先に登録しておくとブランド統一が楽になる
アイキャッチはCanva MCP・LP/資料はClaude Designと使い分けが◎

Claude Designはまだリサーチプレビュー段階ですが、今後さらに機能が充実していくことが予想されます。気になる方はまずDesign Systemの設定から始めてみてはいかがでしょうか。

Canva – ara-garage