シャドウ・立体感・奥行きをClaude Designで正確に指定するコツ

Claude Designでカード型UIやボタンを作ると、毎回「なんか平面的」「のっぺりしてる」という出力になることがある。シャドウを指定しているつもりなのに、結果がぼんやりする。原因は、「影をつけて」だけでは情報量が少なすぎることだ。

「影をつけて」だけでは意図が伝わらない

「シャドウを入れてください」という指示に対して、Claude Designが出してくる影は大体これだ：

• 全体にぼんやりとした薄いグレーの影
• 四方均等に広がる、方向感のない影
• コントラストが低すぎて見えない影

これは間違いではない。ただ、「シャドウ」という言葉が意味する範囲が広すぎる。Google Materialのelevationなのか、アナログ感のあるドロップシャドウなのか、内側に沈んだインナーシャドウなのか、Claude Designには分からない。

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

指定に含めるべき5つの要素

具体的に伝えると一発で決まる。以下の5点を揃えると効果的だ。

1. 方向：光源がどこにあるか（左上が最もよく使われる）
2. オフセット：影がX軸・Y軸にどれだけずれているか（例：x:0 y:4px）
3. ぼかし量：影のエッジがどれくらいぼける（例：blur:8px）
4. 広がり：影全体のサイズ（例：spread:0かspread:2px）
5. 色と不透明度：黒一色より実際の影に合わせる（例：rgba(0,0,0,0.12)）

カード要素に影をつけてください。
光源は左上。
影のオフセットはx:0、y:4px。
ぼかし量は12px、広がりは0。
色はblack、不透明度12%。
Materialデザインのelevation 2くらいの軽さ感で。

これで「あの感じ」に近いものが出る。

立体感を出すなら「二重シャドウ」を指定する

単体のシャドウだと人工的に見える。実際の照明では、影は一種類ではなく「環境光による広いぼんやりとした影」と「直接光による小さく濃い影」が重なっている。

カード要素にリアルな立体感を出してください。
シャドウを2つ重ねて指定してください：
1. 大きい影：y:8px、blur:24px、opacity:8%（環境光）
2. 小さい影：y:2px、blur:4px、opacity:16%（直接光）
背景色は白、カードの地色も白で浮かせてください。

これをやるだけで、一気に”作られた感”が消える。

インナーシャドウで「押し込まれた」感を出す

検索ボックス、入力フォーム、チェックされた状態のボタン——これらに「外に出た影」をつけると逆効果になる。内側に沈んでいる要素にはインナーシャドウが必要だ。

テキスト入力フィールドにインナーシャドウを指定してください。
影はフィールドの内側上部に。
y:-2px、blur:4px、opacity:10%の黒で。
「押し込まれた窪み」の質感を出してください。

Claude Designはinset shadowという指示を理解する。最初「内側の影」と書いたら外側に影が出て「違う！」となった。「インナーシャドウ」か「inset shadow」と明示する方が通る。

うまくいかないパターン——色つきシャドウ

ブランドカラーを使ったグロー系シャドウ（例：青いボタンに青い影）を試したことがある。

青いボタンの下に青いシャドウ（グロー）をつけて

これ、実際にやってみると9割ぼんやりした薄青になる。意図と全然違う出力だった。解決策は色コードの直接指定だ。

ボタン下部にグローシャドウを追加してください。
影の色は#3B82F6（ブランドブルー）、opacity:40%、blur:16px、spread:0。
ボタン自体の色と同系色の発光感を出してください。

色コードと「発光感」という表現の組み合わせが効いた。

まとめ

シャドウは「ある・なし」ではなく「どんな光源・どんな物理感」で指定するものだ。方向・オフセット・ぼかし・広がり・色と透明度を揃えると、Claude Designの出力精度が段違いに上がる。「なんか平面的」と感じたときは、まず光源の設定から始めてみてほしい。