Claude Designの発表直後、私がまず困ったのは「どうやってアクセスするのか」でした。Anthropicのトップページに目立つボタンがあるわけでもなく、クローズドベータに申し込んだ記憶もないのに、気づけば使えている、という状態になったのが正直なところです。
「claude design 使い方」と検索して来てくれた方の多くが、同じ入口で詰まっているはずだと思い、この記事を書きました。アクセス方法から、実際に手を動かして分かってきた「プロンプトの傾向」まで、遠回りなしに書きます。
Claude Design にアクセスする方法
2026年5月時点では、Claude Designはclaude.aiのアカウントを持っているユーザーに段階的に解放されています。具体的には以下の2つのルートがあります。
ルート1: claude.ai のサイドバー
通常のチャット画面のサイドバーに「Design」という項目が表示されていれば、クリックするだけで専用インターフェースが開きます。表示されていない場合、まだロールアウトが届いていないか、無料プランの場合はProへのアップグレードが必要な可能性があります。
ルート2: 直接URL
claude.ai/design にアクセスすると、アカウントに対応するデザインインターフェースに直接飛べます。「404が返ってくる」という場合はアクセス権がまだ来ていないサインです。
なお、Claude Designは単独サービスではなく、Claude Opus 4.7（claude-opus-4-7モデル）を介して動いています。そのため、Pro以上のプランが事実上の前提になっています。
「Claudeにデザインを頼む」との違い
「通常のクロードチャットにHTMLのLPを作ってと頼む行為と何が違うの？」というのは、最初に多くの人が持つ疑問だと思います。私も最初はそう思っていました。
使い込んでいくと、2点の明確な差が見えてきます。
1. 出力の「再現性」が高い
通常のチャットでHTMLを生成すると、会話のたびにデザインの方向性がバラつきます。色・タイポグラフィ・余白のシステムが毎回微妙に異なり、「前回のやつと合わせて」と頼んでも完全には再現されません。Claude Designは内部でデザインシステムを構築してからHTML/CSSを生成するため、スタイルの一貫性が保たれます。
2. 出力口が複数ある
生成した成果物を、ZIP・PDF・PPTX・スタンドアロンHTML・Claude Codeへのバンドル渡し、という複数の形式でエクスポートできます。普通のチャットからコードをコピーして使うのとは違い、「用途別の書き出し」が1ステップでできます。
特に Claude Code との連携は魅力的で、api.anthropic.com/v1/design/h/<hash> という公開URLをClaude Codeに渡すと、そのデザインの実装作業を直接引き継いでもらえます。詳しくはClaude DesignとClaude Codeのハンドオフ生産ワークフローで別途解説しています。
実際に効いたプロンプトの型
30日ほど使い続けて、「これを先に書くと精度が上がる」という型がいくつか見えてきました。
型1: 目的→ターゲット→雰囲気の順に書く
# うまくいかない例
「おしゃれなアプリのLPを作って」
# 精度が上がる例
目的: iOSアプリのApp Store審査前に作る、広告配信テスト用LP
ターゲット: 30代のひとり親。育児中に使える時短アプリを探している
雰囲気: 温かみがあって、でも信頼感がある。過度にポップにしない
主な要素: ヒーロー画像(iOS端末のモックアップ)、機能3点、DLボタン
「おしゃれ」「かっこいい」のような形容詞単体は機能しにくく、「誰に何のために見せるか」が明確なほど、意図に近い出力が返ってきます。
型2: 否定条件を先に書く
デザインの好みは「何が嫌か」の方が言語化しやすいことが多いです。
# 以下は避けてください:
- 青系グラデーション(SaaS感が強くなりすぎる)
- アイコンの多用(1セクションに3個以上)
- モノクロ系(親しみやすさを優先したいため)
上記を避けた上で、メンタルヘルスアプリのオンボーディング画面を作成してください。
最初から「何を作りたいか」だけを伝えるより、こちらの方がリテイク回数が減ります。
型3: 既存デザインの参照URL + 差分指示
reference: https://example.com のようにURLを貼り、「このサイトのカラーシステムは維持しつつ、レイアウトだけ縦1カラムに変えてください」のように差分だけ指示する方法です。Claude DesignはWebコンテンツを参照できるため、0から書くより修正精度が上がります。
自分のサイト（私ならdolice.design）を参照させて、統一されたブランドトーンを維持したまま新しいページを生成する、という使い方が特に相性良く感じています。
個人開発者が使えるシーン、使えないシーン
使えると感じるシーン
- App StoreのスクリーンショットやメタデータLP（Figmaが要らない）
- 投資家向け・補助金申請用の1ページ資料
- ちょっとしたCLPやランディングページの初稿（方向性確認）
- プロトタイプの提示（社内や外注先との認識合わせ）
まだ使えないと感じるシーン
- デザインシステムの構築・管理（シンボル・バリアント・コンポーネントの再利用には向かない）
- 複数画面のフローが必要なアプリのUI設計全体
- アニメーション実装を前提とした高精度のデザインスペック
現状はFigmaの代替というよりも、「初稿の探索速度を上げるツール」という位置づけが正直なところです。最初の1画面を3分で10パターン試せる価値は確実にあって、そこから先の詰めは別ツールを使う、という流れが今のところしっくりきています。
全体を振り返って——まず1つ、具体的に頼んでみる
アクセスできる環境にある方には、ぜひ今日中に1つ試してみてほしいです。プロンプトはシンプルで大丈夫です。「自分が今手を動かしているプロダクトの特定の1画面を作ってほしい」と、具体的な用途を決めてから触るのがおすすめです。
「使い方が分からなくて触らないでいる」のが一番もったいないので、まずはアクセスして、1回だけ試してみてください。それだけで、自分の作業フローのどこに使えそうかが見えてきます。