はじめてのデザイン
この章では、実際に最初の1枚を作ります。題材は「自己紹介スライド」です。むずかしい知識は要りません。日本語で希望を書いて、できあがりを見て、直したいところを伝える。この繰り返しがすべての基本になります。
- 「指示 → 生成 → 確認 → 直す」の基本サイクルを説明できる
- 短い日本語の指示(プロンプト)でデザインを1枚生成できる
- Claude からの質問(逆質問)に答えて、仕上がりの精度を上げられる
- 思ったものと違ったときに、最初の一手を自分で選べる
デザインづくりの基本サイクル
Claude Design での作業は、たった4つのステップの繰り返しです。この形は、この教科書の最後までずっと変わりません。
- 指示を書く(プロンプト)
左のチャット欄に、作りたいものを日本語で書きます。「プロンプト」とは、Claude への指示文のことです。 - 生成を待つ
右のキャンバス(デザインが表示される領域)に、結果が表示されます。 - できあがりを確認する
内容・色・文字の大きさなどを、自分の目で見て確かめます。 - 直したいところを伝える
気になった点をまたチャットで伝えます。ステップ1に戻り、納得するまで繰り返します。
図:左で伝える → 右で確かめる。この往復が基本サイクルです。
最初の指示は短くてかまいません
はじめての人がつまずきやすいのは、「完璧な指示を書かなければ」と身構えてしまうことです。実際は逆で、最初は短い指示で十分です。
コツは「80点でよし」と考えることです。1回目の生成で80点くらいのものが出たら、それで成功です。残りの20点は、あとから「ここを直して」と伝えて仕上げます。一発で100点を狙って長い指示を練るより、この方がずっと速く、確実に仕上がります。
短くてよいのですが、「いい感じの」「素敵な」のような言葉だけは避けましょう。人によって受け取り方が違うため、Claude にも伝わりません。「落ち着いた」「余白多めで」「親しみやすく」のように、少しだけ具体的な形容に置き換えるのがコツです。詳しい書き方は第4章(伝わる指示の書き方)で扱います。
例題:自己紹介スライドを1枚作る
それでは実際に作ってみましょう。下のプロンプトは、そのままコピーして使える完成品です。名前や好きなことは、ご自身の内容に書き換えてください。
名前・好きなこと3つ・ひとことが入った、自己紹介スライドを1枚作ります。配色は落ち着いた藍色(あいいろ)系、余白は多め、文字は大きめにします。
- プロジェクトを開く
ブラウザでclaude.ai/designを開き、Create(新規作成)から新しいプロジェクトを作ります。画面の案内に従って種類と名前を決めてください(詳しくは第1章)。 - 下のプロンプトを貼り付ける
枠の右上のコピーボタンで写し取り、左のチャット欄に貼り付けます。名前などを自分の内容に直してから送信します。 - 生成を待って確認する
右のキャンバスにスライドが表示されたら、内容と見た目を確かめます。
自己紹介スライドを1枚作ってください。 【載せる内容】 ・名前:藤川 太郎(←自分の名前に書き換えてください) ・好きなこと3つ:読書、散歩、コーヒー ・ひとこと:「新しいことを学ぶのが好きです」 【見た目の希望】 ・落ち着いた藍色系の配色 ・余白を多めに、すっきりと ・文字は大きく、読みやすく
確認ポイントは3つです。①名前・好きなこと・ひとことが全部入っているか、②藍色系の落ち着いた配色になっているか、③文字が小さすぎないか。全部そろっていなくても大丈夫です。足りない点は次の指示で直せます。
練習では、本名の代わりに仮の名前を使ってもかまいません。住所・電話番号・メールアドレスなどは、練習用のスライドには入れないのが安全です。
Claude から質問されたら、答えると精度が上がります
指示を送ると、生成の前に Claude のほうから質問が返ってくることがあります。たとえば「表は何行にしますか?」「配色の希望はありますか?」といった聞き返しです。これを「逆質問」と呼びます。
逆質問は、指示に足りない情報を Claude が確認している合図です。面倒に感じても、ひとこと答えるだけで仕上がりの精度がはっきり上がります。長い文章で答える必要はありません。
| 逆質問の例 | 答え方の例 |
|---|---|
| 配色の希望はありますか? | 「藍色系で、落ち着いた感じにしてください」 |
| 表は何行にしますか? | 「3行でお願いします」 |
| どちらの案が近いですか? | 「1つ目の案に近いです。ただし文字はもっと大きく」 |
こだわりがない項目は、「そこはおまかせします」と答えて先に進めて大丈夫です。全部を自分で決める必要はありません。
生成を待つあいだの心構え
指示を送ると、右のキャンバスに結果が表示されます。もし表示が終わる前の状態が目に入っても、慌てないことが大切です。色が付いていなかったり、要素が欠けていたりしても、まだ途中かもしれません。
図:結果は右のキャンバスに表示されます。表示が終わるまで落ち着いて待ちましょう。
待ち時間は内容によって変わるようです。生成が終わるまでは追加の指示を送らず、落ち着いて待つのがおすすめです。
思ったものと違ったときの初動
1回目の生成が期待どおりでないのは、失敗ではなく普通のことです。次の2パターンで対応を分けると迷いません。
| 状況 | 最初の一手 |
|---|---|
| おおむね良いが、一部が違う | そのままチャットで「◯◯を◯◯にしてください」と具体的に伝える。 例:「タイトルの文字をもっと大きくしてください」「背景をもう少し薄い色にしてください」 |
| 方向性から全く違う | 作り直しを頼んでよい。 例:「イメージと違うので、作り直してください。今度は◯◯な雰囲気でお願いします」 |
遠慮は要りません。Claude は何度直しを頼んでも嫌がりませんし、作り直しを頼むのも正当な使い方です。なお、修正のやり方はチャット以外にもあと3つあります。要素を指さして直す方法などは、第3章(修正の4つの方法)で詳しく学びます。
練習問題
「趣味の紹介カード1枚」を、今度は自分でプロンプトを書いて作ってみましょう。載せる内容(趣味の名前・魅力・はじめたきっかけ など)と、見た目の希望(色・余白・文字の大きさ)を自分で決めて書いてください。
ヒントを見る
例題1のプロンプトの型(【載せる内容】と【見た目の希望】の2部構成)をそのまま流用すると書きやすいです。色は「◯◯系」、雰囲気は「落ち着いた」「親しみやすい」など、具体的な言葉を1つ以上入れましょう。
模範解答を見る
趣味の紹介カードを1枚作ってください。 【載せる内容】 ・趣味の名前:家庭菜園 ・魅力:季節を感じられる/収穫の楽しみ/毎朝の習慣になる ・はじめたきっかけ:「ベランダのミニトマトから始めました」 【見た目の希望】 ・緑系の、親しみやすい配色 ・カードらしく、角がやわらかい印象で ・文字は大きく、読みやすく
内容が自分のものに置き換わっていて、色と雰囲気の指定が入っていれば正解です。生成後に1回以上「◯◯を直して」と修正まで試せたら満点です。
練習問題1で作ったカードの内容はそのままに、「雰囲気だけ変えてください」と頼んで、別の案を作ってもらいましょう。最初の案と見比べて、どちらが好きか、その理由を1つ言葉にしてみてください。
ヒントを見る
「内容は変えずに」とひとこと添えるのがポイントです。変えたい方向(例:「もっと大人っぽく」「もっとにぎやかに」)を付けると、比較しがいのある案になります。
模範解答を見る
内容(文章)は変えずに、雰囲気だけ変えた別の案を作ってください。 今度は、大人っぽく落ち着いたトーンでお願いします。
2案を見比べて「余白が広いほうが読みやすい」「濃い色は締まって見える」のように、理由を自分の言葉で言えたら合格です。この「見比べて選ぶ」感覚が、今後の指示の上達につながります。
次の項目に自信をもって「はい」と言えたら、この章は合格です。