React NativeにClaude Designを組み込む——モバイルアプリへの落とし込み方と罠

Claude DesignをReact Nativeに落とし込もうとして、最初の2回は盛大に失敗した。WebのNext.js実装とは勝手が違いすぎた。試行錯誤の結果、今は「ここを変えればいける」というパターンが見えてきたので書いておく。

Claude Designが出力するのは「Web向けCSS」

まず前提として、Claude Designが生成するコードはHTML+CSSベースのWebコンポーネントだ。React Nativeには div も margin: auto も px 単位も存在しない。

Claude CodeにClaude Designの出力を渡すと、何も指示しなければWebコードをそのまま返してくる。「React Native用に変換して」と一言添えるだけで変換精度がぐっと上がる。

[Claude Designの出力をコピーして貼り付け]

上記のHTMLとCSSをReact Native (Expo SDK 52) 用に変換してください。
- divはViewに、spanはTextに変換
- CSSはStyleSheet.createに変換
- pxはdpに変換（1px = 1dp）
- flexboxの書き方の違いに注意（React NativeはデフォルトがcolumnなどWeb/RNで差異あり）
- 色はrgba()のままでOK

これで80%くらいは正しいコードが出てくる。残り20%は手直しが必要だが、ゼロから書くよりはるかに速い。

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

具体的に詰まった3つのポイント

1. flexDirection のデフォルト値が逆

WebのCSSでは flex-direction: row がデフォルトだが、React Nativeでは flexDirection: 'column' がデフォルトだ。Claude DesignのWebコードを変換すると、横並びにしたはずのレイアウトが縦並びになって出てくることがある。

変換後に flexDirection: 'row' が明示されていないView要素はすべて疑う。

2. % でのサイズ指定が怪しくなる

Claude Designは width: 100% や margin: 0 5% をよく使う。React Nativeでは % 指定は動くが、親コンテナのサイズ次第で想定外の結果になる。

Dimensions.get('window').width や useWindowDimensions を使って明示的にピクセル値を計算するか、flex: 1 で伸縮させる方が安全だ。

3. シャドウの書き方が全然違う

CSSの box-shadow はReact Nativeでは使えない。iOSは shadowColor / shadowOffset / shadowOpacity / shadowRadius、Androidは elevation という2つの系統に分かれる。

Claude Designが影を多用したデザインを出してきたときは、Claude Codeに「iOSとAndroid両方に対応したシャドウに変換して」と明示的に伝えると正しいコードが出てくる。

Expoのサンプルファイルに落とし込む流れ

実際に使っているフローは以下の通り：

1. Claude Designでモバイル向けUIを生成する（「iOS/Androidアプリ向けのUIデザインで」と指定）
2. HTMLとインラインスタイルをコピーする
3. Claude Codeに「Expo SDK 52、TypeScript、StyleSheet.create形式で変換して」と渡す
4. 生成されたコードを components/ 以下に配置する
5. 実機またはExpo Goで確認する

ステップ1の時点で「モバイル向け」と指定することで、Claude Designが出してくる横幅が375pxや390px基準になり、変換後のズレが少なくなった。

Claude Designで「ネイティブらしいUI」を出すプロンプト

Webデザインのノリで作らせると、どこかブラウザっぽいUIになる。ネイティブアプリらしさを出すには具体的に指定する必要がある。

iOSアプリの設定画面を作ってください。
- ナビゲーションバー付き
- セクションごとにGroupedTableView風のリスト
- 右側にChevronアイコン
- セパレーターラインはiOS標準の薄いグレー（#E0E0E0）
- フォントはSF Pro相当のシステムフォント想定

こう書くと、Expo実装でもそれらしいUIが出てくる。ポイントは「〜風」「〜想定」と書くことで、Claude Designがネイティブ文脈で生成してくれる。

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

正直なところ

React NativeへのClaude Design活用は、Next.jsやNuxtと比べると変換ステップが一段多い。しかし「デザインと実装を同じ会話で仕上げる」体験は変わらない。WebよりもReact Nativeの知識がないと詰まる場面が多いが、UIコンポーネントの叩き台を素早く作る用途には十分使える。Figmaでスクラッチから起こすより3倍は速い。

※Figma: デザイナーが多く使うUIデザインツール。Claude Designの主要な比較対象。