元Appleデザイン・開発チーム責任者が語る：チーム運営で培った手法をAIに移植し、世界レベルのデザインを生み出す方法

AIが常に安全なテンプレートへ戻ってしまう理由

記事では、同じ「プロダクティビティアプリのランディングページ」というタスクを三回実行し、その結果を比較しています。一回目は普通のプロンプト、二回目は単に言語でランダム性を要求、三回目はさらにシェルが生成した外部のランダム文字列を追加します。まず、三つの結果をまとめて見てみましょう。

01 · 通常のプロンプト：安全なテンプレートに戻る

02 · ランダムと言うだけ：構造は変わらず外見だけ

03 · ランダムシード：候補が明確に分散

1. 通常のプロンプト: 四つのClaude Codeインスタンスのほとんどが、紫のグラデーション、左側のタイトル、右側のグラフィック、上部のナビゲーション、派手なボタンといったデザインに回帰しました。ブランド名は変わっても、デザインの文法は変わりません。
2. 「ランダムにして」とだけ指示: ページは似たような暖色とレイアウトに変わり、陶器のメタファーが繰り返し登場することさえありました。モデルは「ランダムに聞こえる」案を生成しましたが、外部からの変化の源は得られていません。
3. ランダム文字列を追加: フォント、色彩、明暗、構図が明らかに分散し、候補が同じスタイルファミリー内に密集しなくなりました。

三つ目のステップが示すのは、候補空間が広がったということだけです。美学、実用性、再現性が向上したことを自動的に証明するものではありません。記事内のウェブ実験は一例を示すための比較です。Sakana AI の SSoT 研究は、確率的サンプリングと出力の多様性を検証しましたが、ウェブデザインの品質を検証したわけではありません。

Discover：まず候補空間を広げる

Discoverフェーズの目的は、最初から特定の解決策に飛びつかないことです。まず十分に異なる方向性を複数生成し、その後、人間の反応を使って空間を徐々に絞り込んでいきます。

方法一：モデルに真に外部の変化の源を与える

Anshu氏は String Seed of Thought のアイデアを借用しつつ、Coding Agent 向けに改良を加えました。エージェントに、まずシェルスクリプトで長いランダムな英数字の文字列を生成させ、その文字の形状、繰り返しパターン、特別な数字、構造的な関係性から視覚的なインスピレーションを引き出させるという方法です。

プロンプトは、以下の四つのステップで構成できます。

1. スクリプトを使用して、十分に長いランダムな英数字の文字列を生成します。
2. 文字列からデザインルールに変換できる構造を見つけ、配色、フォント、レイアウト、視覚的なリズムをそれぞれ決定します。
3. この方向性に従ってページを完成させます。途中で一般的なSaaSテンプレートに後戻りしないでください。
4. 文字列は思考のみに使用し、最終的なインターフェースには表示しないでください。

確認可能な成果物: 同じ製品について、少なくとも4つの候補を生成し、それらを並べてスクリーンショットを撮影します。

受け入れ基準: 候補間で、フォントカテゴリ、明暗の関係性、構図の骨格、情報のリズムに構造的な違いが見られること。ブランド名、メインカラー、イラストを交換しただけでは、異なる方向性とは見なされません。

ここで研究との境界線を明確にしておきます。元々のSSoTメソッドは、モデルが内部でランダムな文字列を生成し、それを操作するというものでしたが、Anshu氏の実装は、シェルが提供する外部のランダム文字列を使用するように変更されています。どちらもデフォルトの好みを打ち破ることを目的としていますが、その具体的なメカニズムは完全に同じではありません。

著者はまた、非常に実用的な長期的な習慣を提案しています。今日は失敗した大胆なプロンプトを保存しておき、新しいモデルがリリースされたら再テストすることです。 以前は壊れたページしか生成できなかった方向性が、アップグレード後に突然安定して実装できるようになった場合、それは新しい能力があなたの利用可能なデザイン空間に加わったことを意味します。古いプロンプトだけで新モデルをテストしていると、このような変化を見逃しがちです。

方法二：野心を、決定を制約できる「世界」として記述する

「もっと大胆に」「もっとハイレベルに」「もっと創造的に」といった指示は、視覚的な制約を何も提供しません。効果的なプロンプトは、ページ全体を統率できる一貫した世界を提供します。例えば、以下のようなものです。

• プロダクティビティツールを、連続したピクセルアート風のゲームシーンとして表現し、各セクションをゲームのひとコマのように扱う。
• 機能を等角投影の3Dシティとして組織化し、街区や建物に情報アーキテクチャの役割を持たせる。
• 機能を読み取れる状態を保ちつつ、過激な非対称性、衝突する色、心地よくないネガティブスペースを使用する。

これらの方向性は失敗する可能性があります。しかし、その失敗自体に価値があります。もしアイデアが聞いた感じ安全すぎるなら、それはおそらく訓練データの平均的な答えしか返ってこないでしょう。逆に、「これをウェブページにできるのか？」と疑問に思わせるようなアイデアこそ、モデルに新しいデザインの文法を試させることになります。

三つのステップでAIのインスピレーションを個人の好みに変える

オリジナルの方向性は、"AIにアイデアを出させて、そのAIのアイデアをそのままAIにフィードバックする"だけでは生まれません。Anshu氏は、人の選択をプロセスに組み込むために、次の三つのステップを使用しています。

1. 方向性のリストアップのみ行い、詳細には踏み込まない。 AIに、野蛮主義のツール、産業用コンソール、ジェルインターフェース、段ボールのプロトタイプ、コミック風UIなど、一文か二文のコンセプトを大量に生成させます。この段階では、想像力を刺激することだけが目的です。
2. 気に入った方向性を目に見える形にし、その反応を記録する。 例えば、産業用コンソールには、物理的なボタンの触感と音が必要です。漫画的またはレトロなスキューモーフィズムは避けます。灰色のグラデーションは退屈なので、パウダーコーティング、陽極酸化、または細かい粒子のマテリアルが必要です。
3. 方向性が定まったら、AIに構築プロンプトを逆算して書かせる。 最終的なプロンプトには、視覚的原則、マテリアル、コンポーネントの一貫性、禁止事項、優先順位が含まれ、Coding Agent が最初のPOCバージョンを作成するために使用します。

まず方向を十分遠くまで押し出し、3ラウンドのフィードバックで収束させる

ピクセルゲームスライス

3D浮遊都市

大胆な非対称

1. 01最小限のコンセプトだけを列挙し、発想を広げる
2. 02好きな点と嫌いな点を指摘し、原則を抽出する
3. 03コーディングエージェントの初期プロンプトに書き換える

確認可能な成果物: 一ページ以内のデザインブリーフ。少なくとも、インスピレーションの源泉、必ず維持すべき雰囲気、明確に避けるべき手法、3〜5のデザインルール、参考画像のセットを含みます。

受け入れ基準: 議論に参加していない別の実装担当エージェントがブリーフを読んだ後、「何をすべきか、何をしてはいけないか、何を最初に実装すべきか」を説明でき、「高級感とは具体的に何か」と問い直さないこと。

Define：方向性を個性的なデザインへと磨き上げる

ランダムシードは多様性を広げることができますが、最初のバッチのページには、トップナビゲーション、左にテキスト右に画像、CTAボタンといった残骸がまだ残っている可能性があります。Defineフェーズの目的は、「少し違う」を「独自のアイデンティティを持つ」へと推し進めることです。

独立したレビュー担当エージェントに結果だけを見せる

コーディングエージェントは、自分の仕事を客観的に評価するのが苦手です。コードの構造、実装コスト、以前の決定、そしてその決定のために書いた理由をすべて背負っているため、既存の解決策にパッチを当て続ける傾向があります。

Anshu氏は、二番目のエージェントをデザイン批評家（Design Critic）として導入しました。各ラウンドで、以下のサイクルが実行されます。

1. 実装担当エージェントが現在のバージョンを完成させ、スクリーンショットを撮影します。
2. 新しいコンテキストでレビュー担当エージェントを起動し、スクリーンショットのみを渡します。コード、実装の詳細、過去の意見、前回の弁解は一切渡しません。
3. レビュー担当は、作品が追求している美学を特定し、トップクラスのデザインスタジオが同じ方向性をどのように完成させるかを想像し、最もギャップが大きい部分を指摘します。
4. レビュー担当は10点満点でのスコアと、少数の具体的な修正項目を提示します。実装担当エージェントは優先順位に従って修正し、新しいスクリーンショットを提出します。

記事では、実装担当エージェントの完了条件として 9/10 が設定されていますが、レビュー担当がプロセスを終了させるために甘く評価しないよう、このしきい値をレビュープロンプトに書き込まないことが明示的に推奨されています。レビュープロンプトは毎回同じにすることで、スコアの相対的な比較可能性が保たれます。

変化はあるが、骨格は依然として馴染みのある左テキスト右画像

1. 01実装担当のスクリーンショット取得
2. 02新しいコンテキストで結果のみを見る
3. 03ベースラインと比較し、最大のギャップを指摘する
4. 04修正後に再スクリーンショット

複数ラウンドのレビュー後：視覚的アイデンティティが本当に分離し始める

レビュー基準は、三つのレベルに分けることができます。

• 悪い例: 「きれいかどうか、AIっぽくないかどうかを見る。」この基準は主観的で、毎回の判断がぶれやすいです。
• 使える例: 「現在の美的方向性を判断する。一流のスタジオがどのように実行するかを想像する。その品質基準とのギャップを見つける。」
• より信頼性の高い例: 4つの専門的なケーススタディと1枚の現在のスクリーンショットを提供し、レビュー担当に完成度と好みの観点で順位付けさせ、その順位の根拠を説明させる。

参照画像は品質のベースラインとムードボードの役割を果たしますが、模倣の対象ではありません。停止条件も慎重に設定する必要があります。まず一、二ラウンド実行して、主要な問題とスコアが収束するかどうかを確認します。二回連続で意見が行き来したり、スコアが上がらなかったりする場合は、エージェントに無限にトークンを消費させるのではなく、人間が方向性を調整する必要があります。

モデルは役割に応じて割り当てることができます。高速で安価なモデルは反復的な実装を担当し、より高性能なモデルは頻度の低い美的判断を担当します。記事で紹介されたいくつかの事例では、Fable のレビューモデルが生成した出力トークンは、各事例の総量の10%未満でした。著者によると、Fable にページを直接作り直させると、約二倍のコストがかかり、時間もかかったとのことです。この数字は彼の事例のみを説明するものであり、一般的な予算比率として扱うべきではありません。

エージェントに画像生成を明示的に要求する

Coding Agent はデフォルトで、コードに直接書ける素材を好みます。グラデーション、幾何学的形状、グリッド、ガラスカードなどです。これらが使えないわけではありませんが、すべてのビジュアルが数行のCSSから生成されている場合、作品は同じような生成の痕跡を露呈しがちです。

記事のプロンプトは非常に直接的です。「現在のページは平面的すぎる。画像生成を使用して個性を加えなさい。必要に応じて、生成画像をシェーダーや3Dエフェクトと組み合わせなさい。結果をブラウザでフレームごとに確認しなさい。」

ツールによって、連携方法は異なります。

• Codex、Antigravity、または Grok Build に組み込みの画像生成機能がある場合は、エージェントにその使用を明示的に指示するだけです。
• Claude Code などの環境では、Codex CLI を呼び出して画像を生成できますが、サブスクリプション機能を使用しているのか、追加料金が発生するAPIを使用しているのかを確認する必要があります。
• OpenAI または Gemini API を直接使用する場合は、独立した、明確な制限付きで、いつでも取り消せるAPIキーを作成する必要があります。
• エージェントがキーを繰り返し使用する必要がある場合は、リポジトリにコミットされないローカルの環境ファイルに配置し、プロジェクトルールに、キーは開発専用であり、製品には使用できないことを明記します。

確認可能な成果物: ページ内の各ビジュアル素材が、その目的を説明できること。例えば、空間の確立、マテリアルの表現、キャラクターの生成、状態の説明などです。

受け入れ基準: 生成画像を一枚削除したとき、情報と体験に損失がなければ、それはおそらく単なる装飾です。もしすべての生成画像を普通のグラデーションに置き換えられるなら、視覚的な方向性はまだ深まっていません。

ビデオモデルをタイムラインツールとして活用する

この記事では、インターフェースデザインに適した二つのビデオ活用法が紹介されています。

一つ目は、透明感のあるループするモーショングラフィックスです。まず、無地の背景でループする映像を生成し、その後、カラーキーイングやビデオマット処理用のモデルを使用して背景を除去します。こうして、ガラスの破砕、回転、屈折、影、コースティクスなどの複雑な物理的動きをUIに重ね合わせます。ガラスの屈折をよりリアルにするには、ページの背景色と同じ色でビデオをレンダリングし、その背景に屈折の効果を焼き付けてから、背景を除去する方法が効果的です。

二つ目は、状態間のキーフレームトランジションです。二つの製品の静止画から中間のビデオを生成し、ビデオの進行をスクロールやジェスチャーにマッピングします。記事のスーツケースの例では、浮遊している状態、開いて着地する状態、物が上から落ちてくる状態が順に表示されます。前のビデオの最後のフレームが、次のビデオの開始フレームとして使用され、トランジションの不連続性を減らしています。

著者は fal.ai のようなアグリゲーションプラットフォームを使用して、エージェントがさまざまなビデオモデルから選択できるようにしています。サンプルのプロンプトで言及されている Seedance 2.5 は、当時のモデルの能力に基づいた提案であり、長期的な固定の答えではありません。

確認可能な成果物: モーションファイル、静止した代替フレーム、トリガー条件、インタラクションマッピング。

受け入れ基準： ループに明確なつなぎ目がないこと。開始時と終了時の状態が連続していること。スクロールの方向がオブジェクトの動きと一致していること。自動再生をオフにするか、reduced motion を有効にした場合でも、ユーザーがページを理解できること。メディアのサイズとデコードコストが、初回表示の体験を損なわないこと。

納品：削除、AI臭の除去、コピーライティングの書き直し

AIは要素を追加し続けるのが得意で、コードを自ら削除することはほとんどありません。作成者は納品段階で、情報や操作能力、状態に関するフィードバックを追加しない要素を削除する作業に最も多くの時間を費やします。

カロリーアプリの初稿はすでに完全な機能を備えていました。しかし同時に、ピンク色の光彩、グラデーションのプログレスバー、ランダムなテキストのアクセントカラー、重複したラベル、大きな空白領域、そしてiOS標準コンポーネントよりも粗雑な自作のボタンや入力欄も含まれていました。

彼の修正要求は、次の三つのグループだけでした。

1. ページを食べ物の画像を中心としたグリッドに変更する。
2. グラデーション、光彩、不要なコンテナを削除する。
3. 可能な限り標準のiOSコンポーネントを使用し、フォントサイズ、間隔、情報密度を引き締める。

削除前

削除後

改訂後、食べ物の画像とその日の摂取量が視覚的な焦点となり、インターフェースの色は少なく、テキストは短く、コントロールはシステムの習慣により近いものになりました。この前後の画像の組が示しているのは、作成者のデザイン上の判断であり、ユーザー調査やコンバージョン率の実験の結果ではありません。

すべての要素に対して、削除テストを一回実施できます。

• 削除した後、ユーザーは重要な情報を失うか？
• 操作の入り口を失うか？
• 現在の状態や次のステップを理解できなくなるか？
• このデザインの方向性において、最も特徴的な部分が損なわれるか？

四つの質問すべてが「いいえ」の場合、削除は、美化を続けるよりも効果的であることが多いです。

公開されているページでは、テクニック7「AI臭を取り除く」の見出しの時点でペイウォールが発生します。テクニック8「コピーライティングを手で書き直す」については、公開側の要約によって確認されています。公開されている情報には、これらの二つのセクションの完全なリストは含まれていないため、ここで作成者の代わりに詳細を補足することはしません。確認できる納品の原則は次の通りです。人間は、「テック製品らしく見せるため」だけに積み上げられた視覚的な副産物をチェックし、タイトル、ボタン、空の状態、エラーメッセージなど、製品のトーンに最も影響を与えるコピーライティングを自分自身で処理する必要があるということです。

検証可能なワークフローとして実行する

以下の実行順序は、公開されている方法論を、デザイン責任者とCoding Agentに渡すことができるプロセスとして整理したものです。

1. 製品の制約を明確に書き出す。 ターゲットユーザー、中核となるタスク、維持すべき機能、デバイスの境界を記録します。成果物は、問題定義をまとめた一ページです。
2. 8〜12個の短い方向性を生成する。 まず幅を広く、その後で深く掘り下げます。同じレイアウトで外観だけを変えることは許可されません。成果物は方向性のリストです。
3. 外部からのランダムな変動を取り入れる。 差異が乏しい方向性にはランダムな文字列を使用し、少なくとも4枚のサイドバイサイドのスクリーンショットを生成します。
4. 人の好みを注入する。 2〜3の方向性を選択し、好きな点、嫌いな点、過剰な点、欠けている点を項目ごとに書き出します。成果物は、禁止事項を含むデザインブリーフです。
5. 最初のバージョンのPOCを作成する。 Coding Agentにブリーフに従った実装を依頼しますが、この段階では本番運用レベルの完全性は追求しません。
6. 独立したスクリーンショットレビューを開始する。 レビューでは、結果と固定された品質ベースラインのみを確認します。まず一、二回のイテレーションを行い、意見が収束していることを確認します。
7. 理解のニーズに応じて画像と動画を追加する。 各メディアには、情報、素材、空間、状態に関する役割を持たせ、静止画やアニメーションなしの代替手段を用意します。
8. 削除レビューを実施する。 情報、操作、状態、または特徴を追加しない要素を削除し、成熟したシステムコンポーネントを優先的に使用します。
9. コピーライティングと最終検収を人間が行う。 重要なテキストを書き直し、レスポンシブ対応、パフォーマンス、アクセシビリティ、実際のタスクフローをチェックします。

このシステムの本質は、より長い「魔法のプロンプト」を書くことではありません。責任者が、複数の候補を生成し、結果を注意深く確認し、具体的な好みを表現し、安定した品質ベースラインを確立し、最後には完成したコードを削除することが求められます。AIは探索のスピードと実装能力を提供し、人間は方向性、基準、取捨選択を担当します。