Claude Designの使い方で迷わない。ブランドの決まりを1ファイルに書いて先に渡す

出典: How to Use Claude Design Better Than 99% of People

英語で34分50秒、作者一人がClaude Designの15のハックを見せる動画です。作者は「Claude Design 2.0」という呼び名で、Webサイトや画像のAIっぽさを避ける方法を紹介しています。

作者（動画の中で・英語の自動字幕・0:00〜）

I’m going to show you exactly how to build beautiful websites, designs, and motion graphics with Claude Design 2.0.

日本語訳：「Claude Design 2.0を使って、美しいWebサイト、デザイン、モーショングラフィックスの作り方を、正確にお見せします。」

早口の英語で15個の方法が流れる動画は、使う前に公式で確かめます。確認できなかったことを、間違いと決めつけない。それが私の基準です。

AIに調べてもらうと、見直す所は三つありました。「2.0」という呼び名は公式になく、現在の基盤モデルも確認できません。DESIGN.mdはGoogle Labsの公開仕様で、Claudeの必須ファイルではない。LinearityのMCPは、公式ページ同士で利用プランの説明が揃っていませんでした。

見る前は、動画に出た名前や接続方法がそのまま使えるように見える。公式と並べると、確かめられた範囲が分かる。

Higgsfieldの接続方法、Mobbin・Referoの用途は一致。Gauntlet Loopの構成も出典と一致しました。Higgsfieldには有料プランが必要という条件もあります。

動画は作り方を見せています。私はClaude Designで作例を再現したのではなく、主張を公式ページと手元の道具で確かめました。

→ 使う前の三つの確認

使いたい方法を一つ選び、公式の名前・接続手順・利用条件を調べます。動画の説明と並べ、確認できた所と確認できなかった所を別々の文で残してください。

同じ会社の資料なのに、ページごとに色や文字が変わる。これでは毎回直すことになりますよね。作者は、ブランドの決まりを1ファイルにまとめ、作り始める前にClaudeへ読ませる方法を見せています。

作者（動画の中で・英語の自動字幕・5:27〜）

we’re going to have one file that holds all of your colors, your types, your rules that you can hand to Claude anywhere.

日本語訳：「色、書体、決まりをすべて持つ1つのファイルを用意して、どこでもClaudeに渡せるようにします。」

決まりを1ファイルに置いて毎回渡す。そのとおりだと思います。AIに毎回考え直させるより、守ってほしいことを先に見せたい。

私のブログ画像の決まりは、spec.mdの43行です。直近のアイキャッチを見ること、動画キャプチャ、生成の経路、確認の手順、見切れ防止をまとめています。

文字だけの説明から作った時は、簡素な図を2回出して差し戻されました。そこで「実物を1枚見る」を追加。説明だけで作る状態から、完成物も見て作る状態へ変えたんです。

ただし、動画に出るDESIGN.mdという名前まで必須にしません。AIに調べてもらったClaudeの公式資料では、CLAUDE.mdやテーマのファイルに記録する勧めでした。

Claude Codeの公式文書約9.4MBを検索しても、DESIGN.mdは0件。出どころは、Google Labsが公開している仕様でした。

色・フォント・余白が明確なら、形式は選べる。大事なのはファイル名より、中身を読んで同じ基準で作れることです。

→ 自分の決まりを書く

色・文字・余白について、守りたいことを1ファイルに書きます。手元の完成物を1枚添え、「作る前に両方を読んで」とAIへ伝えるところから始めてください。

参考を探す時、最初の画面だけで選んでいませんか。作者はfooter.design、404s.design、navbar.galleryに加え、MobbinやReferoで、実在するアプリの画面の流れまで見る方法を紹介しています。

作者（動画の中で・英語の自動字幕・18:34〜）

if this is the level of detail and attention they’re willing to put into a 404 page, how seriously do they take their actual paid product itself?

日本語訳：「404ページにこれだけの細かさと注意を向けるなら、実際に売る製品にはどれだけ真剣なのか、ということです。」

参考を先に見るのは、私も同じです。私が見る基準は、受け取る人にとって細部がどう働くか。作る側が小さいと感じる所も、相手には大事です。

「一つも手抜きできない」と強く感じたのは、400個のお弁当を作った時でした。作る側には400個のうちの1個でも、受け取る一人には、その1個が全部です。参考集めで404ページや画面の移り方まで見るのは、その一人の目を借りる作業だと思っています。

作者は404ページの作り込みを、ブランドの細部への本気度と見ています。私は、受け取る人から見た細部として重ねます。

参考選びも、トップページだけを眺める状態から、404s.designで行き止まりの画面、navbar.galleryで移動の仕方まで比べる状態へ。見たい場面を決めると、集める画像が変わる。

AIに調べてもらった公式説明では、MobbinもReferoも画面や流れを調べるライブラリでした。動画の用途と一致しています。

ただ、どちらにも有料プランがある。参考を見る方法への賛成と、道具の契約は別に考えます。必要な画面が見られる区分を確かめて選ぶ。それで十分。

→ 参考を三枚に絞る

自分が作る画面に近い参考を3枚集めます。読みやすさや移動の仕方を比べ、取り入れたいことを一つ選び、自分の決まりのファイルに1行足してください。

「きれいにして」だけでは、どこで完成なのか決まりません。作者は理想の見本を渡し、作るAIとは別の批評役に比較させる方法を紹介しています。合格の証拠が出るまで、修正を繰り返す考え方です。

作者（動画の中で・英語の自動字幕・24:38〜）

this prompt will basically run any design that you make through five very specialized agents that will check for completely different things. And only when it’s done all of those individual checks will it then go ahead and approve the design.

日本語訳：「このプロンプトは、作ったデザインを、まったく別の点を調べる5つの専門のエージェントに通します。すべての検査が終わった時にだけ、デザインを承認します。」

基準を数えられる形にして、合格の証拠が出るまで戻らせる。強い仕組みです。ただし、測れるのは基準にした所だけ。この二つを一緒に持ちます。

AIに調べてもらったMatt Shumerの記事では、作る役のあとに、見本と比べる批評役が差を指摘する構成でした。基準に届くか、止めるまで繰り返す。動画の画面に出るX投稿は、どの投稿か特定できていません。関連する2件の本文にGauntletという語はなく、この名前を付けたのは7月27日のこの記事でした。

私のアイキャッチ検査でも、合格を具体的にしています。題名の大きな赤い筆文字が、画像の上端で切れていないかを数えるんです。

上端3行に赤い画素が30個以上あればFAIL。10月3日に公開した動画編集の記事では、初版として残っていた画像が913個でFAIL、見本は0個でPASS、直した版も0個でPASSでした。同じ検査で、初版と修正版の違いを確かめられた。

しかも、原因は生成のあと。AIに頼んで画素を調べると、生成直後の1536×1024の画像はPASSでした。3:2から16:9へ整える時に上を80行切り、題名の上の約52pxを失っていたんです。

生成直後を見るだけなら問題なし。切り抜いた完成画像まで調べると、文字の見切れが分かる。検査するタイミングも、基準の一部なんですよね。

この検査が見るのは赤い筆文字だけ。額縁や人物の頭は目で見ます。見本も題名の上の余白は約9pxで、画像の高さ720pxの約1.2%です。決まりの「端から6%以上内側」は満たしていません。

動画のループが合格を返しても、全部の品質が保証されたわけではない。私は検査で分かった所を使い、測っていない所を味見します。人が見て、感じて、違和感を返すことは続ける。道具の合格と、人に届ける判断をつなぐためです。

→ 合格を一つ数える

「見やすい」を、文字が端から何px離れているかなど、数えられる基準一つに直します。修正前後を同じ条件で測り、測っていない所は完成画像で確認してください。

文章を減らしたのに、何をすればよいか分からない。短さだけでは解決しません。作者はSteve Krugの本を紹介し、文字の量を見直す方法と、航空業界の簡易技術英語を文章へ取り入れる方法を語っています。

作者（動画の中で・英語の自動字幕・29:12〜）

it has 900 approved words, one meaning per word. active voice, one instruction per sentence, maximum six sentence per paragraph. There’s no phrasal verbs.

日本語訳：「承認された語は900語、1語に意味は1つ、能動態、1文に指示は1つ、1段落は最大6文。句動詞は使いません。」

文字を減らす方向には賛成です。そのうえで、1語に1つの意味を持たせたい。短くても、読む人が意味を探す文章では仕事が進みません。

作者は、コミュニティのサイトを数百件見た経験から、文字の量が最大の問題だったと語っています。

AIに調べてもらったKrugの公式紹介ページには、「システム1」「一瞥テスト」の語はありませんでした。本の本文は読んでいないので、本にないとは言い切れません。

ASD-STE100の公式サイトでは、約900語の承認語彙、1語1義、能動態、1文1指示を確認できました。一方、1段落6文以内と句動詞なしは公式では確認できません。動画の説明を全部まとめて、公式の規則にはしない。

私もAIの報告にあった「落ちた」が、「失敗した」なのか「抜けた」なのか分からず、何がどうなったかを普通の文で書いてもらうように直しました。

例えば、検査結果がFAILなら、「spec.mdの条件を満たさず、題名が画像の上端で切れている」と書く。こう書くと、結果と実物がつながります。短くする前に、何がどうなったかを残します。

→ 報告の言葉をほどく

自分の報告から、読む人が意味を探しそうな言葉を3つ選びます。それぞれ「何が・どこで・どうなったか」の文に直し、一文で複数の指示をしていたら分けてください。

AIくささを測る道具が満点を出したら、その文章を任せてよいのでしょうか。作者はSlopMonsterでコピーを検査し、抽象的な褒め言葉を具体的な表現へ変える例を見せています。私がAIに頼んだ検査では、日本語で違いが出ました。

作者（動画の中で・英語の自動字幕・27:16〜）

essentially this will come through and check it across four or five levels. Vocabulary, sentence patterns, punctuations, three item lists, absolutely everything.

日本語訳：「基本的に、これは4〜5つの段階で確認します。語彙、文の型、句読点、3項目の列挙など、あらゆるものを。」

SlopMonsterは、英語の決まった言い回しを見つける道具としては、動画どおり働きます。日本語は見ません。満点だけで文章のよさを決めないのが、私の立場です。

平均的な言葉で穴を埋めると、その人の判断や背景が消える。私が避けたいAIっぽさは、そこにもあります。検査が数える表現と、残したい自分の言葉は、同じ範囲ではありません。

AIに頼んで検査本体のdeslop.pyを365行全部読んでから、実行しました。外へ通信するコードはなく、標準ライブラリだけを使う内容です。

SlopMonsterは、語彙、言い回し、句読点、3項目の列挙、でっち上げの実績の5項目を、1項目につき1点で見ます。動画のBeforeは、5項目のうち1項目が反応して4点。Afterは5項目のうち反応したものがなく5点でした。私が作った英語75語の段落では、5項目すべてが反応して0点。英語の検査として、違いが出ています。

日本語はどうか。私が作った304字には、重要性を強調する言い回しや、時代の変化を匂わせる前置き、問いかけで終わる文など、日本語のAI文章に多い決まり文句を詰めました。

同じ文が、SlopMonsterでは5項目中5項目問題なしのCLEAN。日本語の検査では定型句9件ほかを検出してFAILでした。検査結果だけを見る状態から、同じ文を別の言語向けの道具でも読む状態へ変えると、満点の意味が変わる。

ただ、この日本語は、日本語の検査が反応するよう私が作った文です。その検査で見つかるのは当然。確かめられたのは、SlopMonsterが同じ文に何も反応しなかったことでした。

READMEにも、英語以外の文が満点になる場合があると書かれています。逆に、日本語の検査は英語へ反応しませんでした。

実際の長い日本語の記事で、誤判定の割合は測っていません。文章を直すcleanse.shは別のAIへ文を渡すため、実行していない。動画の英語の例と、日本語の文章は分けて考えます。基準は自分の言葉で持ち、結果のあとに自分でも読む。

→ 満点の文章を読む

手元の日本語を一つ選び、AIくささを測る道具で1回検査します。判定を見たあとに本文を読み、具体的に何を伝えているか分からない文がないか、自分で確かめてください。

15のハックから選ぶ基準は、自分の仕事で何をよくしたいかです。決まりを先に渡す。見本と比べる。数えられる所を検査する。それぞれ使える範囲があります。

今日の一手は、自分の決まりを1ファイルに書き出すこと。完成物も1枚添えてください。AIくささを測る道具の結果は、そのあとで読む。合格でも本文を目で確かめ、自分の言葉が残っているかを判断します。