生成画像が荒い・低解像度になる——原因と対処法を全部書く

最初に正直に言う

Claude Designで作ったデザインを印刷業者に入稿したら「解像度が足りません」と差し戻されたことがある。画面上では全然荒く見えなかった。「なんで？」と思って調べたら、スクリーン表示と印刷で必要な解像度がまったく違うことを理解していなかった。

この記事では、解像度問題が起きる根本原因と、実際に試して効いた対処法を書く。

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

なぜ荒くなるのか——原因は3つある

1. 出力サイズを指定していない

Claude Designはデフォルトでスクリーン表示向け（72〜96dpi相当）の解像度で生成する。印刷用途には300〜350dpiが必要なのに、サイズ指定なしで生成すると解像度が全然足りない。「後で拡大すればいい」と思ってSmallサイズで出力すると、拡大した瞬間に荒れる。

2. ベクターにできる素材をラスター出力している

ロゴやアイコンをPNG/JPGで出力してしまうと、拡大した瞬間に荒れる。SVGで出力できる素材はSVGで出すのが鉄則。ラスターとベクターの違いを意識しないと、同じミスを何度も繰り返す。

3. 生成後にツール側でリサイズしている

生成後にPhotoshopやFigmaで「200%に拡大」すると画質が劣化する。AIが生成した段階のピクセル数は変えられないので、生成時点で目的のサイズを指定するしかない。

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

実際に効いた対処法

印刷物には実寸サイズ＋dpiを明示する

A4サイズ（210×297mm）、300dpi相当で名刺デザインを作成
91×55mm、350dpi、塗り足し3mm込みで

「300dpi」という指定を入れると、Claude Designはベクターベースの出力を優先するようになる。ただし実際のdpi管理はエクスポート設定側でも確認が必要。

ロゴ・アイコンはSVGで出力する

ロゴはSVGフォーマットで出力してください
スケーラブルなベクターデータとして生成してください

SVGで出力されたものはどんなサイズに拡大しても荒れない。印刷・Web両方に使い回せるので、ロゴ系は必ずSVGで取っておく。

Webバナーは実際の表示サイズで指定する

OGP画像: 1200×630px
Twitterヘッダー: 1500×500px
Instagram投稿: 1080×1080px

「大きめに作ってリサイズ」よりも「最初から正しいサイズで作る」方が品質が安定する。プラットフォームの推奨サイズをそのままプロンプトに書き込む習慣をつけると楽になる。

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

やってはいけないパターン

• 「後で拡大すればいい」でSmallサイズ生成→印刷に使う
• 印刷物をスクリーン解像度（72dpi相当）のまま入稿する
• JPEGで出力したロゴを200%以上拡大して資料に貼る
• dpi指定なしでチラシやパンフレットを生成する

印刷入稿前の解像度チェックリスト

• デザインサイズを実寸＋dpiでプロンプトに指定したか
• ロゴ・アイコンはSVGで出力したか
• エクスポートのDPI設定を300dpi以上にしたか
• 印刷CMYKで問題ない色か（RGBの蛍光色は印刷で沈む）
• 業者の入稿規格（塗り足し・トンボ）に合わせたか

印刷業者に差し戻されると再生成→再入稿のループになって時間を大幅にロスする。最初から「印刷用途かWeb用途か」を意識してプロンプトを書く習慣をつければ、このトラブルはほぼ防げる。