スマホ向けデザインをClaude Designで作る——縦長レイアウト固有の罠と回避策

最初にやらかしたこと

最初、PCデザインと同じ感覚でプロンプトを書いたら、盛大にやらかした。「Instagram用のバナーを作って」と言っただけで縦横比を指定しなかったら、横向き1200×628pxのものが出てきた。当たり前だけど、「スマホ向け」と書いても具体的な意図は伝わらない。

サイズと縦横比の明示は最低条件だ。

サイズ: 1080×1920px（縦向き 9:16）
用途: Instagramストーリーズ

これだけで結果がまるで変わる。

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

縦長レイアウト固有の罠

縦長デザインで一番よく起きるのが「上部集中問題」。テキストや重要な要素が上半分に詰め込まれて、下が空白になるパターン。

対策は「縦方向の重心」を明示すること。

重要なコピーは画面中央からやや上（全体の40%あたり）に配置
ボタン・CTAは画面下部25%のゾーンに置く
上下に均等な余白を確保すること

「上下に余白」と書くと、今度は四角く切り取ったような窮屈なレイアウトが返ってくる。そこで「上部に装飾的なビジュアル要素、下部にテキストとCTA」という構造を指定すると、自然な視線の流れが生まれやすい。

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

テキストサイズとタップ領域を明示する

スマホ向けで絶対に忘れてはいけないのがタップ領域の余裕感。Claude Designはビジュアルを作るツールなので「タップ可能なボタンの最小サイズ」という概念はデフォルトでは無視される。

視覚的な余裕を確保するために以下を指定するようにしてから、「読めないデザイン」が返ってくることがほぼなくなった。

ボタンは縦幅48px以上・横幅は画面幅の80%以上
本文フォントは14px以上、見出しは20px以上
行間は1.6以上

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

「スマホ向け」だけでは全然ダメな理由

「スマホ向けにしてください」という言葉だけだと、Claude Designが解釈する幅が広すぎる。今は具体的な機種と制約を書いている。

iPhone 14 Pro（390×844px）で縦スクロールなしで完結するレイアウト

機種と「1画面完結」という制約を加えることで、情報の取捨選択まで自動的に最適化されるようになった。スクロール前提のデザインが返ってくる失敗がほぼゼロになった。

使い回せるテンプレート

■ スマホ向けバナー（縦型）
サイズ: 1080×1920px
表示環境: iPhone 14 Pro・縦持ち・1画面完結
CTAボタンは下部30%のエリアに配置
フォント: 見出し28px / 本文16px / 補足12px
左右の余白: 32px以上
重要テキストは中央やや上（全体の35〜45%）

縦横比だけ変えれば、Twitterヘッダー（1500×500px）やLP用スクリーンショット（1242×2688px）への転用も簡単。基本構造を一度作っておくと使い回しが楽になる。

※LP: ランディングページの略。特定のCTAに向けて設計されたWebページ。