開発者がデザインツールを使わずにClaude AIでアプリのアイコンをデザイン

開発者がClaude AIを使ってアプリアイコンをデザインした方法

ある開発者が、スキャンループでプロセスを自動的に終了させるmacOS用プロセスマネージャー「PIDKill」を構築しました。満足のいくロゴなしで製品をリリースした後、彼らはFigmaやMidjourneyを使ったりデザイナーを雇う代わりに、Claude AIに頼ることにしました。

2つのClaudeバージョンによるデザインプロセス

開発者は、競争的なデザインプロセスでClaude CodeとClaude web（愛称「牛仔」または「カウボーイ」）の両方を使用しました：

• Claude Codeの初期コンセプト： プロセスを監視する夜行性の監視者を表す「Night Owl」方向性で、5つのサブ方向にわたる20のバリエーション。
• Claude webのアプローチ： 12の洗練されたフクロウのデザインを生成し、その後、武器（戦斧、大鎌、手裏剣）、ターミナル（kill -9のタイポグラフィ）、精密打撃シリーズ（照準器、スコープ）に移行。
• デザインの爆発的増加： Claude webは一晩で60以上のコンセプトを3ラウンドで生成：基本コンセプト×20（ドクロ、稲妻、盾×）、盾の深掘り×20、ワイルドコンセプト×20（ハエトリグサ、ギロチン、カマキリ）。

選ばれたデザイン：シンプルで直接的

以前の試みが比喩を使っていたのに対し、Claude Codeは「PID」（プロセスID）を使用した直接的な表現を作成しました：

<!-- 赤オフセット -->
<text x="96" fill="#FF0000" opacity="0.25">PID</text>
<!-- シアンオフセット -->
<text x="104" fill="#00FFFF" opacity="0.25">PID</text>
<!-- 白メイン -->
<text x="100" fill="#E0E0E0">PID</text>
<!-- 赤線1本 -->
<line x1="36" y1="100" x2="164" y2="100" stroke="#FF4444"/>

このデザインは、赤とシアンのオフセットでグリッチ/色収差効果を生み出すSF Mono（macOSシステムデフォルトフォント）を使用しています。赤い取り消し線は、プロセスが終了されることを表しています。

重要な洞察：システム言語 vs デザイン言語

Claude webは、なぜClaude Codeのデザインが勝ったのかを分析しました：「私はデザインを実行していました。Claude Codeはアイデアを表現していました。」Claude webが様々なフォント（Space Grotesk、IBM Plex Mono、Syne）、走査線、グラデーションを試していた間、Claude Codeは単に開発者が毎日ターミナルで目にするデフォルトのSF Monoフォントを使っただけでした。

最終的なアイコンとアニメーション

開発者はコンセプトを組み合わせて最終的なアイコンを作成しました：グリッド背景、スコープリング、ノッチ目盛りを備えた照準器の中にPIDを配置。また、クロスヘアが実際のプロセス（Chrome Helper、photoanalysisd、CoreSimulatorService）を追跡し、ロックオンして終了し、メモリカウンターを表示するブランドアニメーションGIFも作成しました。