第2章

はじめてのデザイン

この章では、実際に最初の1枚を作ります。題材は「自己紹介スライド」です。むずかしい知識は要りません。日本語で希望を書いて、できあがりを見て、直したいところを伝える。この繰り返しがすべての基本になります。

この章でできるようになること

デザインづくりの基本サイクル

Claude Design での作業は、たった4つのステップの繰り返しです。この形は、この教科書の最後までずっと変わりません。

  1. 指示を書く(プロンプト)
    左のチャット欄に、作りたいものを日本語で書きます。「プロンプト」とは、Claude への指示文のことです。
  2. 生成を待つ
    右のキャンバス(デザインが表示される領域)に、結果が表示されます。
  3. できあがりを確認する
    内容・色・文字の大きさなどを、自分の目で見て確かめます。
  4. 直したいところを伝える
    気になった点をまたチャットで伝えます。ステップ1に戻り、納得するまで繰り返します。
claude.ai/design
左:チャット
自己紹介スライドを1枚作ってください。……
タイトルをもう少し大きくしてください。
右:キャンバス
指示のたびに、ここのデザインが更新される

図:左で伝える → 右で確かめる。この往復が基本サイクルです。

最初の指示は短くてかまいません

はじめての人がつまずきやすいのは、「完璧な指示を書かなければ」と身構えてしまうことです。実際は逆で、最初は短い指示で十分です。

コツは「80点でよし」と考えることです。1回目の生成で80点くらいのものが出たら、それで成功です。残りの20点は、あとから「ここを直して」と伝えて仕上げます。一発で100点を狙って長い指示を練るより、この方がずっと速く、確実に仕上がります。

「いい感じに」は伝わりにくい

短くてよいのですが、「いい感じの」「素敵な」のような言葉だけは避けましょう。人によって受け取り方が違うため、Claude にも伝わりません。「落ち着いた」「余白多めで」「親しみやすく」のように、少しだけ具体的な形容に置き換えるのがコツです。詳しい書き方は第4章(伝わる指示の書き方)で扱います。

例題:自己紹介スライドを1枚作る

それでは実際に作ってみましょう。下のプロンプトは、そのままコピーして使える完成品です。名前や好きなことは、ご自身の内容に書き換えてください。

例題 1:自己紹介スライドを1枚作る

名前・好きなこと3つ・ひとことが入った、自己紹介スライドを1枚作ります。配色は落ち着いた藍色(あいいろ)系、余白は多め、文字は大きめにします。

  1. プロジェクトを開く
    ブラウザで claude.ai/design を開き、Create(新規作成)から新しいプロジェクトを作ります。画面の案内に従って種類と名前を決めてください(詳しくは第1章)。
  2. 下のプロンプトを貼り付ける
    枠の右上のコピーボタンで写し取り、左のチャット欄に貼り付けます。名前などを自分の内容に直してから送信します。
  3. 生成を待って確認する
    右のキャンバスにスライドが表示されたら、内容と見た目を確かめます。
コピーして使うプロンプト
自己紹介スライドを1枚作ってください。

【載せる内容】
・名前:藤川 太郎(←自分の名前に書き換えてください)
・好きなこと3つ:読書、散歩、コーヒー
・ひとこと:「新しいことを学ぶのが好きです」

【見た目の希望】
・落ち着いた藍色系の配色
・余白を多めに、すっきりと
・文字は大きく、読みやすく

確認ポイントは3つです。①名前・好きなこと・ひとことが全部入っているか、②藍色系の落ち着いた配色になっているか、③文字が小さすぎないか。全部そろっていなくても大丈夫です。足りない点は次の指示で直せます。

本名や個人情報の扱いに注意

練習では、本名の代わりに仮の名前を使ってもかまいません。住所・電話番号・メールアドレスなどは、練習用のスライドには入れないのが安全です。

Claude から質問されたら、答えると精度が上がります

指示を送ると、生成の前に Claude のほうから質問が返ってくることがあります。たとえば「表は何行にしますか?」「配色の希望はありますか?」といった聞き返しです。これを「逆質問」と呼びます。

逆質問は、指示に足りない情報を Claude が確認している合図です。面倒に感じても、ひとこと答えるだけで仕上がりの精度がはっきり上がります。長い文章で答える必要はありません。

逆質問の例答え方の例
配色の希望はありますか?「藍色系で、落ち着いた感じにしてください」
表は何行にしますか?「3行でお願いします」
どちらの案が近いですか?「1つ目の案に近いです。ただし文字はもっと大きく」
「おまかせ」でもかまいません

こだわりがない項目は、「そこはおまかせします」と答えて先に進めて大丈夫です。全部を自分で決める必要はありません。

生成を待つあいだの心構え

指示を送ると、右のキャンバスに結果が表示されます。もし表示が終わる前の状態が目に入っても、慌てないことが大切です。色が付いていなかったり、要素が欠けていたりしても、まだ途中かもしれません。

claude.ai/design
左:チャット
自己紹介スライドを1枚作ってください。……
右:キャンバス
生成された結果がここに表示される

図:結果は右のキャンバスに表示されます。表示が終わるまで落ち着いて待ちましょう。

待ち時間は内容によって変わるようです。生成が終わるまでは追加の指示を送らず、落ち着いて待つのがおすすめです。

思ったものと違ったときの初動

1回目の生成が期待どおりでないのは、失敗ではなく普通のことです。次の2パターンで対応を分けると迷いません。

状況最初の一手
おおむね良いが、一部が違うそのままチャットで「◯◯を◯◯にしてください」と具体的に伝える。
例:「タイトルの文字をもっと大きくしてください」「背景をもう少し薄い色にしてください」
方向性から全く違う作り直しを頼んでよい。
例:「イメージと違うので、作り直してください。今度は◯◯な雰囲気でお願いします」

遠慮は要りません。Claude は何度直しを頼んでも嫌がりませんし、作り直しを頼むのも正当な使い方です。なお、修正のやり方はチャット以外にもあと3つあります。要素を指さして直す方法などは、第3章(修正の4つの方法)で詳しく学びます。

練習問題

練習問題 1:趣味の紹介カードを自分の言葉で作る

「趣味の紹介カード1枚」を、今度は自分でプロンプトを書いて作ってみましょう。載せる内容(趣味の名前・魅力・はじめたきっかけ など)と、見た目の希望(色・余白・文字の大きさ)を自分で決めて書いてください。

ヒントを見る

例題1のプロンプトの型(【載せる内容】と【見た目の希望】の2部構成)をそのまま流用すると書きやすいです。色は「◯◯系」、雰囲気は「落ち着いた」「親しみやすい」など、具体的な言葉を1つ以上入れましょう。

模範解答を見る
プロンプト例
趣味の紹介カードを1枚作ってください。

【載せる内容】
・趣味の名前:家庭菜園
・魅力:季節を感じられる/収穫の楽しみ/毎朝の習慣になる
・はじめたきっかけ:「ベランダのミニトマトから始めました」

【見た目の希望】
・緑系の、親しみやすい配色
・カードらしく、角がやわらかい印象で
・文字は大きく、読みやすく

内容が自分のものに置き換わっていて、色と雰囲気の指定が入っていれば正解です。生成後に1回以上「◯◯を直して」と修正まで試せたら満点です。

練習問題 2:雰囲気だけ変えて2案を見比べる

練習問題1で作ったカードの内容はそのままに、「雰囲気だけ変えてください」と頼んで、別の案を作ってもらいましょう。最初の案と見比べて、どちらが好きか、その理由を1つ言葉にしてみてください。

ヒントを見る

「内容は変えずに」とひとこと添えるのがポイントです。変えたい方向(例:「もっと大人っぽく」「もっとにぎやかに」)を付けると、比較しがいのある案になります。

模範解答を見る
プロンプト例
内容(文章)は変えずに、雰囲気だけ変えた別の案を作ってください。
今度は、大人っぽく落ち着いたトーンでお願いします。

2案を見比べて「余白が広いほうが読みやすい」「濃い色は締まって見える」のように、理由を自分の言葉で言えたら合格です。この「見比べて選ぶ」感覚が、今後の指示の上達につながります。

理解度チェック

次の項目に自信をもって「はい」と言えたら、この章は合格です。

この章の出典