結論から言う

1分で、修正1箇所だけで、ブログ用バナーが完成した。

デザインが一切できない SE の自分が Claude Design を試した。プロンプトを投げて 1分待ったら、HTML で 1200×630px のバナーが出てきた。

一発目からほぼ思い通りのデザインで、正直驚いた。ちゃんと使えるレベルだった。

Claude Design とは

2026年4月にリリースされた Claude の新機能。PRO・Max・Team・Enterprise プランで使える（追加料金なし）。

チャットで「こういうデザインを作って」と頼むと、HTML / CSS / JavaScript を自動生成してリアルタイムプレビューしてくれる。

  • スライド
  • UI 画面
  • バナー
  • ランディングページ

…など、会話形式で作れる。

使い方の注意点：claude.ai から使う。Claude Code（ターミナルの CLI）からは直接起動できない。claude.ai/design を直接開くか、左サイドバー下部の「Design」をクリックして起動する。

試した内容

投げたプロンプトはこれ：

フリーランスSE向けブログ「techlog-ai」の
ブログ記事シェア用バナー（1200x630px）を作ってください。

背景：薄い青グラデーション
メイン文字：「AI副業月20万を目指すSE向けの資格×ツール解説ブログ」（大・白）
サブ：ロゴまたはアイコン（シンプルなノートPC × AI）
全体：シンプル・プロフェッショナル

結果

項目結果
生成時間約1分
トークン消費6%（週間クォータの）
修正回数1回（ドメイン名のみ）
完成度そのまま使えるレベル

できあがったもの

Claude Design で生成したバナー

  • 背景：薄い青グラデーション（ラジアル + リニア）
  • レイアウト：ヘッダー（ロゴ + URL）/ メイン文字 + SVG イラスト / フッター（タグ）
  • フォント：Noto Sans JP + JetBrains Mono（Google Fonts）
  • SVG イラスト：ノートPC + AI スパーク（自動生成）
  • タグ：#資格 / #AIツール / #副業 / #フリーランスSE

修正したのは 1箇所だけ。自動生成された techlog-ai.dev を techlog-ai.com に手動で直した。編集モードで該当箇所をクリックして書き換えるだけで完了。

トークン消費の現実

「Claude Design はトークンが激しい」という話は本当だった。ただ、思ったより使いやすい範囲だった。

消費量の確認方法がちょっとわかりにくい。

  • チャット画面に「〇〇トークン消費しました」とは出ない
  • Claude.ai の右側に 使用量ゲージ（週次リセット）があり、そこで確認
  • 今回は 0% → 6% に増加したのを確認した

6% でバナー 1枚。逆算すると週に 16〜17枚作れる計算。

やってみて分かったこと

良かった点

  • 一発でブランドカラー・レイアウトが整った
  • SVG イラストまで自動生成される（これが一番驚いた）
  • レスポンシブ対応（viewport に合わせてスケーリング）
  • Google Fonts も自動で読み込み

気になった点

  • ドメイン名のような「固有情報」は間違えることがある → 要確認
  • HTML で出力される。右上「Export」から PDF・PPTX・HTML のダウンロードも可能。PNG への直接書き出しはないので、スクリーンショットが一番手軽
  • トークン消費量がリアルタイムで見えない → ゲージで推測するしかない

こんな人に向いてる

向いてる向いていない
デザイン初心者だけど自分で作りたいFigma 等を使いこなせる人
Claude PRO をすでに使っている毎日大量に作る用途
バナー・スライド等を低頻度で作りたいPNG での最終出力が必要（変換手順あり）

3つの結論

① コスパは良い デザインツールに月数千円払うより、Claude PRO の中の 1機能として使える方がコスパは高い。週に 1〜2 枚のバナーを作る用途なら十分。

② 一発目のクオリティが高い 「だいたいこんな感じ」と頼んだら、ほぼそのまま使えるものが出てきた。プロンプトの精度で品質が決まる Midjourney と違い、意図が伝わりやすい。

③ 固有情報（ドメイン名など）だけ要確認 自動生成は優秀だが、固有情報はたまに間違える。生成後に必ず確認する習慣をつける。

次回はスライドを試す。「Claude Design で何が作れるか」をシリーズで検証していく。

Claude PRO に申し込む

Claude Design を使うには Claude PRO 以上のプランが必要。

👉 Claude PRO 公式ページ

※ Claude Design は 2026年4月リリースのリサーチプレビュー機能。仕様は変更される場合があります。