【デザインが苦手でも】Claudeでデザイン12時間→2時間 — トップを3案出させて、1案選んで直させるまで
AI検証隊です。
今日の検証テーマは「Claudeにトップページのデザインを3案作らせる」。設計編で架空の造園会社の設計書をv1.0まで確定させました。ページ一覧・各ページの中身・機能まで決まった状態です。今日はその設計書v1.0の続きから、トップページの見た目を起こします。
デザインは苦手、という人ほど読んでほしい回です。理由は後で書きます。
環境編で入れた道具が、ここで効く
環境編で、私のClaudeに道具を足しました。デザインを底上げする公式プラグイン、案件のルールを覚えさせる引き継ぎノート、それにClaude自身がブラウザでページを開いて表示を確かめる道具。入れ方はその回に全部書いたので、ここでは繰り返しません。
今日はその道具を「使って作る」側です。環境編は道具を机に並べただけ。今日は同じ机で実際に手を動かすと何が起きるか、を見ます。とくにノートに書いた「背景に緑を使わない」の一行が、造園会社のデザインでどう効くか。ここが今日のいちばんの見どころです。
デザインは"丸投げ"だと客に出せない
先に言っておきます。「トップページを作って」だけ投げても、客に出せるものは出てきません。
丸投げは、飲み会の幹事に店も予算も言わず「いい感じでよろしく」と頼むのに似ています。返ってくるのは悪くはないけど自分たちの会じゃない店。方向性を渡すと変わります。「和食・個室・1人5千円まで」の3語があれば幹事は迷いません。デザインも同じで、渡すのは方向性です。
だから今日の人間の仕事は2つだけ。方向性を指定することと、出てきたものから選ぶことです。手でデザインを描く仕事はAIに寄せます。ここは総論の回で引いた境界線と同じで、AIに任せるのは手を動かす部分、人間が持つのは決める部分です。
今回のやり方 — 設計書v1.0の続きから
設計編で設計書を作ったチャットをそのまま開きます。閉じていても案件フォルダで claude -c と打てば続きから戻れます。新しいチャットは立てません。設計書のどこに何を書いたか、ぜんぶ同じチャットに残っているからです。会社は架空です（実在の団体とは関係ありません）。ただし画面と成果物はぜんぶ実際の実行の本物です。
そこに指示文を1つ貼るだけ。「庭の写真を大きく見せて、明るく信頼感のある感じ。ギラギラや安っぽいのは避けたい」——方向性はこれくらいの言葉で渡します。全文は有料部に置きます。
結果のチラ見せ — 1案だけ開きます
出てきたのはトップページのモックアップが3案。1案だけ先に見せます。
生成りの地に大きな樹木の写真。縦組みで「庭のことは、庭をつくる人に。」造園会社らしい静かな和モダンです。
ここで1つだけ気づいてほしいことがあります。造園会社なのに背景が緑じゃない。 しかもこれ、3案とも緑を地の色に使っていません。緑はボタンやラベルの差し色だけ。「庭＝緑でベタ塗り」という、いかにもAIが作りそうな絵から、誰も口で指示していないのに外れています。なぜそうなったかは、環境編でノートに書いた一行の答え合わせとして有料部でやります。
ここから先にあるもの
有料部に置くのは、この実行の一部始終です。
トップページを3案出させた指示文の全文と、丸投げとの違いの分解
出てきた3案（A・B・C）の中身と、方向性がどう散ったか
「背景に緑を使わない」ほか、環境編でノートに書いたルールが3案すべてに効いたかの答え合わせ（Claudeの完了報告の原文つき）
デザインの検品5項目。生成の途中でClaude自身がブラウザで描画して不具合を見つけた実例
1案を選んで、1回の指示で直させて完了まで。日本語の変な改行をどう直したか
つまずきどころ3つ
値段は500円。これまでと同じで、内容が変わるたびに追記して、追記のたびに値上げします。今が最安です。
連載バックナンバー
ここから先は
¥ 500
よろしければ応援お願いします。チップは活動費として使用させていただきます！
