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