レスポンシブ対応を指示する方法――「スマホ版も作って」だけでは足りない

「スマホ版も」と言うだけだと何が起きるか

最初、Claude Designに「スマホ版も作ってください」と書いてみた。出てきたのは、PCレイアウトをそのまま縮小しただけのデザインだった。テキストは潰れ、ボタンは指で押せないサイズになり、3カラムのグリッドがそのままになっていた。

これはClaude Designが悪いというより、指示が曖昧すぎたのが原因だ。「レスポンシブ」という言葉は、人によって意味する内容が全然違う。プロンプトで意図を正確に渡すには、もう少し具体的に書く必要がある。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

ブレークポイントを数値で明示する

最も効いたのは、ブレークポイントを数値で伝えることだ。

以下の3つのビューポートで表示されるデザインを作成してください：
- モバイル（375px幅）
- タブレット（768px幅）
- デスクトップ（1280px幅）

この3点を明示すると、Claude Designはそれぞれのサイズに合わせたレイアウトを生成してくれるようになった。数値を渡すと「それぞれの幅で独立したデザイン」として解釈される感覚がある。1280pxのような大きな数値を入れると、ゆとりのあるデスクトップレイアウトが出てきやすい。

要素ごとに「どう変わるか」を書く

数値だけでは不十分で、「各サイズで何がどう変わるか」を要素ごとに指定するのが大事だった。

レイアウト変更のルール：
- ナビゲーション：デスクトップは横並び、モバイルはハンバーガーメニュー
- カードグリッド：デスクトップ3列→タブレット2列→モバイル1列
- 見出しフォントサイズ：モバイル2rem、デスクトップ3.5rem
- CTAボタン：モバイルは全幅（width: 100%）

最初はこれを書くのが面倒だと思っていたが、実際には「自分がどんなレスポンシブデザインを作りたいかを言語化する作業」でもあるので、設計の整理にもなる。書きながら「あ、このグリッドはどうするんだっけ」と気付くことが何度もあった。

※CTA: Call To Action（行動喚起）。ボタンやリンクでユーザーに次の行動を促す要素。

失敗パターン：「いい感じに調整して」は逆効果

「モバイルでも見やすくなるよう、いい感じに調整してください」という指示を試したことがある。結果は毎回バラバラで、ある時は全部縦積みになり、ある時は謎のマージンが入った。

Claude Designは指示の曖昧さをクリエイティブに解釈するので、「いい感じ」という言葉は意図のブレ幅を最大化してしまう。レスポンシブは「決まりごと」の話なのでクリエイティブな解釈の余地を小さくした方が安定する。「○○px幅では××をする」という宣言的な書き方に統一してから、生成結果がぐっと安定した。

まだ残っている限界

正直に書くと、複雑なインタラクション（ホバー状態の変化、アニメーションの挙動など）をブレークポイントごとに細かく指定するのはまだしんどい。指示文が長くなりすぎると、前半の指定が後半の指示に上書きされるような挙動も起きる。

今のところ現実的な使い方は「シンプルなページの3パターンを素早く比較する」用途に絞るのが吉だ。複雑なレスポンシブ実装は、Claude Designで生成したデザインをClaude Codeに渡して、実装フェーズで調整する方が安定する。デザインと実装を分業させるイメージで使うと、どちらの強みも活かせる。

※Claude Code: AnthropicのAIコーディングツール。Claude DesignのデザインをそのままコードにするCLIツール。