アプリアイコンをClaude Designで作った話——4回失敗してようやく使えるものが出た

やろうとしたこと

社内ツールのモバイルアプリ向けアイコンを、デザイナーに頼まずClaude Designで作れないか試した。要件はシンプルで、1024×1024px・iOS/Android両対応・ブランドカラー（#2D5BFF）を使うこと。「これくらいならすぐできるでしょ」と思っていた。

甘かった。

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

失敗パターン4つ

1回目：「アプリアイコンを作って」だけ渡した

出てきたのは、複雑すぎる構図の何か。文字も入ってる、影も入ってる、グラデーションも何色も入ってる。モバイルの小さい画面で使うものとは思えない代物だった。「シンプルにして」と追加指示したら、今度は逆に白い四角の中央に小さなアイコンがポツンと。

2回目：サイズだけ伝えた

1024x1024px、角丸のアイコン と指定したら、形は近くなった。でも色がひどかった。ブランドカラーを #2D5BFF と書いたのに、出てきたのは微妙に違うスカイブルー。Claudeが「#2D5BFF」を解釈しきれていない感じがした。

3回目：参照画像を使った

競合サービスのアイコンのスクリーンショットを渡して「このトーンで、うちのブランドカラーで」と指定。かなり近くなったが、グラデーションが毎回ランダムに変わる。同じプロンプトで2回生成すると、全然違う色合いのものが出てくる。

4回目：詳細すぎる指示を書いた

背景色、前景色、グラデーション方向、角丸の半径、シャドウの有無——全部を文章で書いた。500文字を超えるプロンプトになった。結果は良かったが、「1ピクセルずれたので調整して」という修正が壊滅的に面倒になった。

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

うまくいった指示の形

試行錯誤の結果、この構造に落ち着いた。

モバイルアプリアイコン、1024×1024px

背景：#2D5BFF のベタ塗り（グラデーションなし）
前景：白い稲妻マーク、中央配置、全体の50%サイズ
角丸：なし（OS側で自動適用されるため）
影：なし
スタイル：フラットデザイン、ミニマル

複雑な装飾は一切入れないこと

ポイントは3つ：

• グラデーションを「なし」と明示する：省略するとClaude Designが勝手にグラデーションを入れてくる
• 「なし」指定を多用して複雑化を防ぐ：何を入れないかを書くのが意外と大事
• 角丸はOS側が処理するので指定しない：iOS・Androidともにアイコンの角丸はシステム側で処理される。自分でラウンドを指定すると、表示時に二重に角丸がかかって変になる

正直な評価

Figmaを使える人なら、Figmaの方が断然早い。調整が細かいし、エクスポート設定も慣れている。

ただ「Figmaを使えない人が、それなりに使えるアイコンを自力で作る」という用途には十分通用する。デザイナーへの依頼が1本減ったのは事実だし、ラフ案を自分で先に作ってからデザイナーに渡すフローは、コミュニケーション効率が明確に上がった。

迷ってる人は、失敗覚悟で1回やってみることをすすめる。「失敗パターンを体感する」だけでも、Claude Designとの付き合い方の感覚がつかめてくる。

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