PR

【非デザイナーが試した】Claude Designの使い方と直し方

非デザイナーが試したClaude Designの使い方(始め方・直し方・書き出し) AIで仕事を時短
記事内に広告(PR)が含まれています。

ブログのアイキャッチや仕事の資料を作るたびに、デザインが苦手で時間がかかっていませんか。

Claude Designが気になっても、どこから始めればいいのか分かりにくいですよね。

こんなお悩みありませんか
  • デザインが苦手で進まない画像づくり
  • Claude Designの開き方が分からない不安
  • 英語の表示が多い画面への戸惑い
  • 夜の1時間で試せるかどうかの心配

私もデザインはあまり得意ではなく、これまではCanvaでアイキャッチを作っていました。

そこで、Claudeのデザインの機能「Claude Design」で、このブログのアイキャッチを実際に作ってみました。

悩める会社員
悩める会社員

Claude Designって、デザインが苦手でも使えるんですか?

りく
りく

ふつうのチャットに頼み方を貼るだけで、約1分で3つの案が出てきましたよ。

この記事では、Claude Designの始め方から直し方、書き出し方、スマホでつまずいたところまで、私の画面をもとに紹介します。

読み終わるころには、今夜のうちに自分のアイキャッチを1枚作れるはずです。

Claude Designの基本

Claude Designは、チャットで頼むだけでアイキャッチやスライドなどの見た目を作ってくれる

Claude Designは、チャットで頼むだけで、アイキャッチやスライドなどの見た目を作ってくれるClaudeの機能です。

できたものは、キャンバスと呼ばれる作業用の画面に並び、言葉で頼んだり自分でさわったりして直せます。

公式ヘルプの内容はよく変わるので、この記事では2026年10月26日に確かめた内容で紹介します。

  • 作れるものと向いている人
  • 使えるプランと使用量
  • 以前とちがういまの始め方

まずは、この3つを押さえておきましょう。

作れるものと向いている人

公式ヘルプによると、Claude Designではデザイン、試作の画面、1枚ものの資料などを作れます。

  • ブログのアイキャッチやバナー
  • アプリやWebページの試作の画面
  • 1枚ものの資料

私が試したのは、文字を大きく見せるブログのアイキャッチです。

デザインが本業ではなくても、作りたいものを言葉で説明できれば使えると感じました。

使えるプランと使用量

Claude Designは、無料プランを含むすべてのプランで使えます。

  • 使えるプラン:Free、Pro、Max、Team、Enterprise
  • 使用量:Claude Codeなど、ほかの作業と共通の上限

以前はClaude Designだけの週の上限がありましたが、いまはプランの上限から一緒に減るしくみです。

私はProで試しましたが、使用量の上限の表示は一度も出ませんでした。

プランごとの上限の違いは、「Claudeの無料と有料の違い」の記事で紹介しています。

以前とちがういまの始め方

いまのClaude Designは、ふつうのClaudeのチャットの中で使えるようになっています。

以前は、Claude Design専用のサイト(claude.ai/design)で使うしくみでした。

  • いま:チャットで頼む、またはアーティファクトのタブから作成
  • 以前の専用サイト:2026年12月14日で終了

ネットの記事には専用のサイトで始める手順も多いので、読むときは書かれた時期に気をつけてください。

「Claude Designはどこ?」と迷ったら、まずはふつうのチャットを開いてみましょう。

Claude Designの始め方

Claude Designは、ふつうのチャットに作りたいものを書いて送るだけで始められる

Claude Designは、ふつうのチャットに作りたいものを書いて送るだけで始められます。

特別なボタンを探さなくても、頼んだ内容に合わせてClaudeがデザインの画面を開いてくれました。

私は2026年10月26日に、パソコンのClaudeアプリで、モデルはOpus 5.5を選んで試しています。

  • 開く場所はふつうのチャット
  • コピペで使える頼み方の例
  • 約1分でできた3つの案

順番に見ていきましょう。

開く場所はふつうのチャット

Claude Designを開く場所は、いつも使っている新しいチャットの入力欄です。

公式ヘルプには、入力欄の「出力」から「デザイン」を選ぶ方法も書かれていますが、私の画面では見つかりませんでした。

そこで、作りたいものを書いた文をそのまま送ったところ、デザインの画面が開きました。

まちがえやすいところ
  • 「+」の中の「デザインシステム」は、色や文字の決まりを登録する場所
  • アイキャッチを1枚作るだけなら、登録は不要

私も最初は「デザインシステム」から始めるのかと思いましたが、選ばずにそのまま作れています。

コピペで使える頼み方の例

頼むときは、大きさ、入れる文字、読む人、雰囲気を書いておくと、イメージに近い案が出やすくなります。

下の文は、私が実際に送った頼み方です。

ブログ記事のアイキャッチ画像を作ってください。

・大きさ:横1280×縦720(16:9)
・記事のテーマ:ブログが続かない人が、AIを使って続けられるようになる話
・大きく入れる文字:「ブログが続かない」
・小さく入れる文字:「AIで夜1時間でも続く」
・読む人:仕事のあとに、副業でブログを始めた会社員
・雰囲気:夜の落ち着いた色。文字は太く大きく
・スマホの小さい表示(幅160px くらい)でも文字が読めるように
・ちがう案を2〜3つ並べてください

「ちがう案を2〜3つ並べてください」と書いておくと、見くらべてから選べるので便利でした。

「スマホの小さい表示でも読めるように」と書くだけで、文字の大きさもClaudeが考えてくれます。

約1分でできた3つの案

送ってから約1分で、3つの案がキャンバスに並びました。

  • A案:夜空に三日月、左寄せの文字
  • B案:紫寄りの夜色、中央の文字と下線
  • C案:右に「1h」の時計と「AI」の吹き出し

Claudeからの質問はなく、スマホの一覧で小さく表示されても読めるように、大きい文字を約200pxの極太にしたそうです。

私には、A案は月が入っていて今までのアイキャッチと統一感があり、C案は「夜1時間」がしっかり伝わるように見えました。

今回はどちらかというとC案が好みだったので、ここからC案を直していきます。

Claude Designの直し方

Claude Designの直し方は、チャット・コメント・直接さわるの3つを使い分ける

Claude Designの直し方には、チャットで頼む、コメントで頼む、直接さわるの3つがあります。

C案で3つとも1回ずつ試したところ、どれも問題なく直せました。

試してみて私が感じたのは、全体はチャット、1か所はコメント、細かい調整は直接さわるという使い分けです。

  • チャット:背景など全体に関わる直し
  • コメント:パーツごとの直し
  • 直接さわる:自分の思いどおりの細かい微調整
3つの直し方の使い分け。全体の直しはチャット、1か所の直しはコメント、細かい調整は直接さわる

ここからは、それぞれの直し方を、私が実際に頼んだ文と一緒に紹介します。

チャットで全体を直す方法

背景の色のように全体に関わる直しは、左のチャット欄に、ふだんの言葉で書くだけです。

C案の背景を、もう少し明るい紺色にしてください

頼むと、背景が黒に近い紺から、少し明るい紺に変わりました。

右の帯と時計の輪も同じ割合で明るくして、白い文字の読みやすさは保ったと説明してくれています。

背景のパーツが分かれていないデザインなら、チャットで頼むのがいちばん楽だと感じました。

コメントで部分を直す方法

1か所だけ直したいときは、直したい場所をクリックして、そこにコメントを書く方法が便利です。

  1. コメントのボタンを選択
  2. 直したい文字をクリック
  3. 直してほしいことを書いて送信
この文字をもう少し大きくしてください

「AIで夜1時間でも続く」の文字が、66pxから76pxに大きくなりました。

Claudeの返事は、チャット欄ではなく、コメントのやりとりの中に返ってきます。

場所を言葉で説明しなくていいので、パーツが分かれているところを直すときに楽でした。

直接さわって微調整する方法

自分の思いどおりに細かく直したいときは、文字をクリックして、数字や色を直接変えるのがいちばん早いです。

文字を選ぶと、文字の種類や色を変えるボタンが出て、文字の大きさも数字で打ちかえられました。

  • フォント:Noto Sans JP
  • 太さ:Black(極太)
  • 大きさ:px(ピクセル)の数字

私は、さきほど76pxになった文字を、79pxに打ちかえています。

ちなみに、このフォントは、いまのこのブログのアイキャッチで使っている極太の文字と同じでした。

Claude Designの書き出し方

Claude Designで作ったデザインは、PNG画像やPDFなどで保存できる

できたデザインは、PNG(画像)やPDFなどの形で保存できます。

書き出しの場所は2つあり、全体なら右上の「共有」、1つの案だけなら案の上の「↓」から選べました。

  • 右上の「共有」→「エクスポート」:HTML、PDF、PNG、その他の形式とアプリ
  • 各案の上の「↓」:PNG(1×と2×)、PDF、HTML(zip)

ブログのアイキャッチに使うなら、PNGがいちばん手軽です。

ここでは、私が実際に保存したときの流れを紹介します。

PNG画像で保存する方法

アイキャッチとして使うなら、案の上の「↓」から「PNG 1×」を選ぶのがおすすめです。

  • PNG 1×:横1280×縦720
  • PNG 2×:横2560×縦1440(倍の大きさ)

私がC案を保存したときは、横1280×縦720の画像で、ファイルの大きさは116KBでした。

10月26日に見た公式ヘルプの書き出しの一覧には画像がありませんでしたが、私の画面ではPNGを選べました。

このブログでは画像を軽いWebPという形式にしているので、変換してみると約34KBまで軽くなっています。

PDFとPowerPointの書き出し

資料として使うなら、PDFやPowerPointでの書き出しが便利です。

右上の「共有」を押して「エクスポート」に切りかえると、形式の一覧が出てきます。

  • PDF:印刷や共有向けの資料
  • HTML:単独で動くWebページ
  • その他の形式とアプリ:ほかのサービスへの送信

PowerPointは、このあと紹介するスライドの画面で選べました。

ほかのサービスへ送ると、つなぐ許可を聞かれることがあるので、私はまだ試していません。

保存の前に出る確認画面

保存するときは、「この Artifacts にファイルのダウンロードを許可しますか?」という確認が出ます。

Claudeで作った作品から、パソコンにファイルを保存してよいかを聞く画面です。

  • 自分で作ったデザイン:「ファイルを保存」
  • 誰が作ったか分からない作品:「キャンセル」

画面にはファイル名と大きさが出るので、保存する前に確かめておくと安心です。

「ファイルを保存」を押したあとは、保存する場所を選ぶいつもの画面になりました。

Claude Designとスライド作り

スライドを頼むとClaude Slidesで開き、話すときのメモまで自動で作ってくれた

スライドも作れるか試したところ、Claude Designではなく「Claude Slides」という画面で開きました。

頼み方の形はアイキャッチと同じで、新しいチャットで送っています。

  • 開いた画面:Claude Slides
  • できるまでの時間:約1分
  • 書き出し:PDF、PowerPoint、PNG、Googleスライド

スライドのための画面なので、下にスライドの一覧があり、1枚ずつめくって確かめられます。

仕事の資料づくりにも使えそうだと感じたので、ここからくわしく見ていきましょう。

開いたのはClaude Slides

スライドを頼むと、チャットのカードに「Claude Slides」と表示されました。

ブログ記事の内容を、3枚のスライドにまとめてください。

・大きさ:16:9
・テーマ:ブログが続かない原因と、AIでの解決のしかた
・1枚目:表紙「ブログが続かない原因は3つ」
・2枚目:原因の3つ「ネタ切れ」「文章にできない」「構成が決まらない」
・3枚目:解決「AIに手伝ってもらえば、夜1時間でも続けられる」
・読む人:仕事のあとに、副業でブログを始めた会社員
・雰囲気:夜の落ち着いた色。文字は大きく少なめ

約1分で、夜空のような濃い紺の背景に、琥珀色の差し色を使った3枚のスライドができました。

1枚目の表紙には、月をイメージした光の丸も入っています。

「夜1時間のブログ習慣」のような小見出しは頼んでいませんが、Claudeが足してくれていました。

話すときのメモまで自動作成

驚いたのは、スライドごとに、話すときのメモまで作ってくれたことです。

スライドの下に、そのスライドで話す内容が短い文で表示されます。

  • 1枚目:仕事のあとにブログを始めたけれど続かない、という話の入り方
  • 3枚目:3つの原因はどれもAIに手伝ってもらえる、というまとめ

発表する人のメモ(スピーカーノート)なので、そのまま話すときの原稿として使えそうです。

3枚目には、私が頼んでいない3つの解決策も、ラベルとして入っていました。

仕事の発表や資料づくりへの活用

スライドを見て、仕事の発表や資料づくりに役立ちそうだと感じました。

スライドに使う説明の文まで出してくれるので、資料と原稿を一度に作れるからです。

  • 書き出せる形:PDF、PowerPoint(.pptx)、PNG
  • 送れる先:Googleスライド(Googleドライブにコピー)

仕事で使うときは、会社の情報やお客さんの情報を入れないように気をつけてください。

私も試すときは、ブログの話や作った例だけを使っています。

Claude Designのスマホでの使い方

スマホでうまく直せないときは、画面の写真を見せてチャットで相談すると解決した

スマホのClaudeアプリでも、作ったデザインを開いて、見たり直したりできます。

私はiPhoneのアプリで、パソコンで作ったスライドを開いて試しました。

文字の色はすぐに変えられた一方で、背景の色は思いどおりに変えられず、つまずいています。

  • スマホでの開き方と見え方
  • 指で直せた文字と直せなかった背景
  • 英語の表示の早見表

スマホで使うときに困りやすいところを、順番に紹介します。

スマホでの開き方と見え方

パソコンで作ったスライドは、スマホのアプリでもすぐに見つけられました。

  • 画面の上:「+」、保存、再生、設定、表示の大きさ
  • 画面の下:「1/3」などのページ送りと、スライドの一覧

指でめくりながら3枚とも確かめられるので、ちょっとした確認にも使えそうです。

公式ヘルプによると、共有の設定はスマホでは変えられないので、パソコンかWebで行います。

私はスライドで試したので、アイキャッチのデザインをスマホで直すところまでは確かめていません。

指で直せた文字と直せなかった背景

スマホでは、文字の色は指で変えられたのに、背景の色は変えられませんでした。

背景をさわったりコメントで頼んだりして2、3回試しても変わらず、最初はバグかと思ったほどです。

設定に出ていた背景の色の番号も、見た目の色と合っていませんでした。

スマホのチャットで頼んだら解決
  • スマホの画面の写真を貼って「背景の色を変えたりできる?」と質問
  • 色の方向の4つの案から「ミッドナイトブルー」を選択
  • 3枚とも背景が少し明るい青に変化
スマホで背景の色が変わらないとき。さわる・コメントでは変わらず、画面の写真を貼ってチャットで相談すると色の案が出て、選ぶと3枚とも変わった

Claudeの説明では、背景がグラデーション(少しずつ色が変わるぬり方)なので、設定に出る色が見た目と合わないことがあるそうです。

さらに直したあとの画面の写真を見せると、背景にうもれていたラベルにClaudeが気づき、月の色の細い枠を付けて目立たせてくれました。

さわってうまくいかないときは、画面の写真を見せてチャットで頼むと簡単でした。

英語の表示の早見表

スマホでもパソコンでも、作業画面のメニューには英語の表示が多く、どれを押せばいいのか迷いました。

私が実際に押して確かめたものも含めて、よく出てくる表示の意味をまとめました。

画面の表示意味
Text文字を足す
Image or video…画像や動画を入れる
Table表を入れる
Rectangle/Rounded rectangle四角/角の丸い四角
Ellipse丸(押すと灰色の丸が置かれた)
Diamond (decision)ひし形(流れ図の分かれ道に使う形)
Arrow right/left/up/down右・左・上・下向きの矢印
Line線
Connector始まりと終わりに矢じりを付けられる線
Transition(Fade)スライドの切り替わり方(ふわっと切り替わる)
Background背景の色

メニューの右に出る「R」や「O」は、キーボードで押すとその図形をすぐに出せる近道です。

迷ったときは、図形を自分で置かずに「ここに丸を足して」とチャットで頼むのも1つの方法です。

いつもの画像づくりとの違い

いつもの画像づくりとClaude Designのどちらがいいかは、どこまでこだわるかで決まる

Claude Designを試してみて、いつものやり方とどちらがいいかは、どこまでこだわるかで決まると感じました。

このブログのアイキャッチは、ふだんはClaude Codeに記事の内容を伝えて作ってもらっています。

以前はCanvaで、型と背景が決まっていれば、タイトルを入れるだけの約5分で作っていました。

  • 同じ記事のアイキャッチで比べた結果
  • Claude Designが向いている人
  • いつものやり方で十分な人

同じ記事のアイキャッチを並べて、違いを見てみましょう。

同じ記事のアイキャッチで比べた結果

「ブログが続かない原因3つとAIでの解決策」の記事で比べると、Claude Designは言葉が少なく、文字がとても大きい仕上がりでした。

  • 大きさ:どちらも横1280×縦720
  • いつものアイキャッチ:「原因は3つ」など伝える中身が多め
  • Claude DesignのC案:短い言葉と大きな文字
  • かかった時間:案が出るまで約1分(直す時間は別)

頼んだ文がちがうので、言葉の量は同じ条件で比べたものではありません。

いつものやり方は記事の内容を分かったうえで作るので、そのぶん中身の詳しいアイキャッチになっていました。

それでも私には、C案はこのままでもブログのアイキャッチに使えるように見えました。

Claude Designが向いている人

Claude Designが向いているのは、自分の思いどおりに、細かいところまで微調整したい人です。

  • 文字の大きさや色を、自分の手で少しずつ直したい人
  • 何案か並べて、見くらべてから選びたい人
  • アイキャッチだけでなく、スライドや資料も作りたい人

画面を見ながら直せるので、直したいことを言葉で説明するのが苦手な人にも合っていると思います。

デザインが得意ではない私でも、迷わずに3つの直し方を試せました。

いつものやり方で十分な人

反対に、細かくこだわらないなら、いつものやり方で十分だと感じました。

  • 直してほしいことを、言葉ではっきり伝えられる人
  • 記事の内容に合わせた、中身の詳しい画像がほしい人
  • 写真のような画像が合うブログを書いている人

私の場合、直してほしいことを的確に伝えられるときは、いつものやり方のほうが楽でした。

写真のような画像が合うジャンルのブログでは、Claude Designは使えないかもしれないとも感じています。

Claude Designのよくある質問

無料プラン・使用量・日本語など、Claude Designのよくある質問

Claude Designについて、初めて使う人が気になりやすい6つの質問にお答えします。

公式の情報は、2026年10月26日に公式ヘルプで確かめたものです。

無料プランでも使える?

はい、無料プランでも使えます。

公式ヘルプによると、Free、Pro、Max、Team、Enterpriseのプランで使え、はじめから使える状態になっています。

私はProで試したので、無料プランでどこまで作れるかは確かめていません。

使うとClaudeの上限は減る?

はい、ふだんのClaudeと同じ上限から減ります。

公式ヘルプによると、Claude Designだけの別の枠はなく、Claude Codeを含むほかの作業と同じ上限にかぞえられます。

私が試したときは、アイキャッチとスライドを作って何回か直しても、上限の表示は出ませんでした。

日本語で頼んでも大丈夫?

日本語で頼んで、日本語の文字が入ったデザインを作ってもらえました。

Claudeの説明や返事も、すべて日本語でした。

ただし、作業画面のメニューには英語の表示があるので、迷ったら上の早見表を見てください。

作ったデザインはほかの人に見られる?

共有しなければ、自分だけが見られます。

作ったデザインのカードには「あなたのみ」と表示されていて、公式ヘルプでもはじめは非公開だと書かれていました。

ほかの人に見せたいときは、右上の「共有」で、見られる人とできることを選びます。

前の版に戻せる?

公式ヘルプによると、Claude Designには、まだ前の版に戻す履歴がありません。

別の案を試したいときは、「現在の内容を保存して、まったく異なるアプローチを試してください」とチャットで頼むようにすすめられています。

すぐ前の操作を取り消すだけなら、パソコンでは「Ctrl」と「Z」を一緒に押すと元に戻せます。

claude.ai/designとの違いは?

claude.ai/designは、以前のClaude Design専用のサイトです。

公式ヘルプによると、専用のサイトは2026年12月14日で終わり、いまはふつうのClaudeのチャットで使えるようになっています。

専用のサイトでデザインシステム(色や文字の決まり)を作っていた人は、終わる前に移しておくよう案内されています。

Claude Designの使い方のまとめ

まずは今夜、頼み方を貼ってアイキャッチを1枚作ってみようというまとめ

Claude Designは、ふつうのチャットに頼み方を貼るだけで、約1分で案を出してくれる手軽な機能でした。

この記事の振り返り
  • ふつうのチャットで始められる手軽さ
  • 約1分で並ぶ3つの案
  • チャット・コメント・直接さわるの3つの直し方
  • PNGやPDFで保存できる書き出し
  • スマホで背景が変わらないときのチャットでの解決
  • 細かく微調整したい人に向く使い方

デザインが得意でなくても、画面を見ながら言葉とさわる操作で直せるのがいちばんのよさです。

まずは今夜、この記事の頼み方を新しいチャットに貼って、自分のブログのアイキャッチを1枚作ってみてください。

コメント

タイトルとURLをコピーしました