カードUIをClaude Designで指示する方法——角丸・余白・シャドウを毎回ブレさせないコツ

カードUIって、一見シンプルに見えて指示が難しい。「モダンなカードデザイン」と書いただけだと、毎回ぜんぜん違うものが出てくる。角丸が大きすぎたり、シャドウがやたら強かったり、テキストが窮屈だったり。

何十枚もカードを量産した経験から、ブレない指示の書き方をまとめた。

まず「カード1枚の構造」を分解する

いちばんの失敗は「なんとなくカードっぽいやつ」と頼むこと。Claude Designはこちらの意図を読んでくれない。構造を全部書き出す必要がある。

カードの構成要素は大体こう：

• コンテナ：背景色・角丸・シャドウ・幅・高さ
• サムネイル：画像領域・アスペクト比・位置（上/左/なし）
• テキストエリア：パディング・タイトル・説明文・メタ情報
• アクション：ボタン・リンク・ホバー状態

これを全部一気に書くと長くなるが、省略すると毎回違う解釈が出てくる。最初の一回だけきちんと書いて、それをテンプレにする。

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

よくある失敗パターン3つ

失敗1：角丸の指定が曖昧
「rounded」と書くと出力ごとに 4px から 24px までバラバラになる。border-radius: 8pxと数値で指定する。

失敗2：シャドウを「soft」「subtle」で指定する
「ソフトなシャドウ」は人によって解釈が違う。box-shadow: 0 2px 8px rgba(0,0,0,0.10) のように値で書くと再現性が上がった。

失敗3：パディングを一方向だけ指定
「カード内の余白は16px」と書くと上下だけ効いたり、テキストとコンテナ端がくっついたりする。padding: 20px 24px のように縦横を明示する。

実際に使っているプロンプトの骨格

以下の仕様でカードコンポーネントを作成してください。

【コンテナ】
- 背景: white
- border-radius: 12px
- box-shadow: 0 2px 12px rgba(0,0,0,0.08)
- 幅: 320px 固定

【サムネイル】
- カード上部に配置
- アスペクト比 16:9
- object-fit: cover

【テキストエリア】
- padding: 20px 24px
- タイトル: font-size 18px / font-weight 600 / 2行まで
- 説明文: font-size 14px / color #555 / 3行まで / line-height 1.6
- メタ情報（日付・カテゴリ）: font-size 12px / color #999

【ホバー】
- box-shadow を少し強くする（0 4px 20px rgba(0,0,0,0.14)）
- transform: translateY(-2px)
- transition: 0.2s ease

これを一度書いておけば、「さっきのカードと同じ構造で、色だけ変えて」「サムネイルを左寄せにして」という追加指示だけで派生パターンを量産できる。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。

グリッドに展開するときの注意

カード単体はうまくいっても、グリッドに並べると崩れることがある。よくある原因はカードの高さ揃え。

3カラムグリッドで並べてください。
カードの高さは stretch（列内で揃える）にしてください。
テキストが少ないカードでも同じ高さになるよう、
テキストエリアは flex-grow:1 で伸ばしてください。

この「flex-grow:1」の一行を入れ忘れると、テキスト量によってカードの高さがバラバラになる。何度もやらかした。

まとめ：カード指示の最低限チェックリスト

• 角丸はピクセル数で指定したか
• シャドウは rgba の値で指定したか
• テキストエリアのパディングは縦横両方指定したか
• フォントサイズ・ウェイトを各要素ごとに指定したか
• グリッド展開するなら高さ揃えの指定を入れたか

最初は「こんなに細かく書くのか」と思うが、一度テンプレ化してしまえばあとは早い。コピペして数値を変えるだけ。投資対効果は高い。