Claude Code
もう使ってる前提です。指示書を書く係と 検品する係をやってもらいます。
AIっぽいダサデザインを脱却する
手順は5つです
Claude Codeに作らせた資料が どこかで見た顔になる人へ
Claude Codeに資料を作らせると それなりのものは出てくるんですよね。
でもなんかAIっぽい。
何回直させても抜けないし 直させるための言葉も出てこない。
僕もずっとそうでした。
腕の問題じゃないです。
渡してる情報の問題なんですよね。
このページは その渡し方の手順です。
上から順にやれば 今日中に1枚出せます。
集める
書く
投げる
検品する
直す
同じAIに 同じ題材で作らせた2枚です。
違うのはAIの性能じゃなくて 渡した情報の量です。
30秒だけ前置き
描く係と 見る係を分けます
やってることはシンプルで AIを2体使ってます。
Claude Codeは記憶を持ってるほうです。過去の制作物もブランドのルールも全部読める。
ただし絵作りは弱い。
Codexは絵作りが強いほうです。
ただしブランドの前提を何も知らないので 放っておくと汎用のAIっぽい絵が返ってきます。
だから知ってる側が 発注書を書いて 描ける側に渡す。
出てきたものは また別のAIに見せて検品する。自分で作ったものを自分で見ると甘くなるんですよね。
※ ズレてたら2に戻る。一方通行じゃなくてループ
用意するもの
2つだけです。
Codex CLI
描く係です。ChatGPTの有料プランが要ります。
npm install -g @openai/codex初回はChatGPTアカウントでのログインを求められます。
APIの従量課金じゃなくて 契約プランの枠を使う形です。
STEP 01
材料を3つ集める
材料は3つ
ここが9割です。
この3つが無いまま発注すると 何回投げ直してもAIっぽいものが返ってきます。
合格ラインになる実物
過去に自分でOKを出した制作物を1つ選びます。
バナーでもスライドでもLPでもいい。絶対パスで渡せる場所に置いておきます。
無い人は 好きなデザインの自作物でいいです。それも無いなら手順1で止まります。ここが無い状態では この先は埋まりません。
配色を16進で7〜8色
「ブランドカラーは水色です」では届きません。
自分の既存バナーから実際の色を吸い出します。
python3 -c "
from PIL import Image
from collections import Counter
im = Image.open('banner.png').convert('RGB').resize((320,180))
for rgb, n in Counter(im.getdata()).most_common(12):
print('#%02x%02x%02x' % rgb, n)
"出てきた上位から 見出し用の濃い色 アクセント 背景の淡い色 本文のインク を選びます。
役割の名前を付けて並べるところまでやります。色だけ並べても伝わらないので。
触らせないフォルダ
運用中のLPとか 承認済みの資産とか。
Codexは確認なしでファイルを触るので ここを書かないと事故ります。
STEP 02
発注書を書く
テンプレを埋めるだけ
下のテンプレをコピーして 〔 〕を埋めるだけです。
僕が現場で使ってる指示書そのままです。きれいに書き直したサンプルじゃないです。
枠の中をスクロールできます
参照させる実物
手順1で選んだ実物を絶対パスで書きます。
「この密度・余白・品質が合格ラインの下限」と書き添えるのが効きます。これを入れた回は差し戻し0でした。
配色
役割名と16進をそのまま並べます。「これ以外を使わない」と書きます。
アイコン
絵文字風は禁止 細線 単色 淡い円背景。
どれを使うかはAIに任せていい。決めるのは条件のほうです。
最後の1行
描いたあと自分の目で見て直すループ。
これが一番でかいです。入れないと密度が落ちる。何回も再現しました。
STEP 03
投げる
打つのは1行
作業フォルダを作って さっきの発注書を prompt.md として置きます。
あとはこれを打つだけです。
cd ~/作業フォルダ
caffeinate -i codex exec --skip-git-repo-check -c "model_reasoning_effort=high" - < prompt.mdcaffeinate
これを付けないとMacがスリープして描画が止まります。
僕は130分かかったと思ってた描画の中身が 実働31分＋スリープ99分だったことがあります。
effort
図解1〜数枚なら high。大きいデッキや複雑な構成なら max。
config.toml が max 固定だと 軽い依頼まで遅くなります。
待ち時間
15〜30分くらいです。終わるまで放っておいて大丈夫です。
STEP 04
検品する
別のAIに見せる
上がってきたら Claude Codeに検品させます。作った側に見せても甘くなるので 別のAIに見せます。
枠の中をスクロールできます
コードを読むだけでは判定できません。必ず最終サイズで画像にして 自分の目でも見ます。
僕はこれで 白背景に白文字で完全に読めないカードを見つけたことがあります。
作った側の環境では正しく見えてるので この手の事故は検品でしか出てきません。
STEP 05
直す
直しは2種類
直しは2種類に分けます。ここを混ぜると時間が溶けます。
自分で直すもの
余白 文言1行 色コード。
判断が要らないものは Claude CodeにHTMLを直させて再描画するだけ。1往復6〜13分の節約になります。
差し戻すもの
構図 密度 書体 表現。デザイン判断が要るものはCodexに戻します。
枠の中をスクロールできます
「なんか違う」では直りません。
症状を事実で書く。なぜダメかをルールと照合する。直す素材の候補を渡す。触らせない箇所を名指しする。この4つが入ってれば1回で戻ってきます。
実際どのくらいで回ってるか
差し戻しの平均です。承認済みの実物を先に見せた回は0回で通りました。
130分かかったと思ってた描画の中身です。残りの99分はMacがスリープで止まってただけでした。
効かない人もいます
まずCodexが要ります。ChatGPTの有料プランのほうです。
あと 手順1の材料が無い人は そこで止まります。
配色も参照させる実物も無い状態だと この発注書は空欄のまま終わります。
AIっぽくなる原因はAIじゃなくて 渡す前提が無いことなので。
あと検品で拾えるのは はみ出しとか コントラストとか 色の逸脱までです。
「ダサい」は機械には出せません。最後は自分の目が要ります。
今回はデザインの話だけです。
AIっぽさは文章にも出るんですけど そっちは別の型があるので次に配ります。
Claude Codeの教科書、配ってます
ここまで読んで
「発注書のほうは分かった でもそもそもClaude Code自体まだ使いこなせてないな」
ってなった人 けっこういると思うんですよね。
僕が普段どう回してるかを1冊にまとめたやつがあります
無料なんで ぜひ受け取ってみてください