エンジニアがAIで低予算マーケティング素材を制作

エンジニアが高品質なマーケティング素材を制作するプロセスは、3つの主要段階で構成されています。まず、ChatGPT Webに対して「I am building {product name}. The key features are {...}. Give me 10 ideas for screenshots to include in the MacOS App Store that will help me sell to my customers」といったプロンプトを入力し、スクリーンショット案を10個取得します。重要なのは、技術的な詳細を知っているローカルエージェント（CodexやClaudeなど）ではなく、ChatGPT Webの標準版を選ぶことです。なぜなら、これらのローカルツールはコードベースにアクセスでき、マーケティング資料に不適切な技術用語を混ぜる傾向があるからです。

次に、各スクリーンショット案に対して、AIに「write an AI prompt for generating a screenshot image of {...}」と指示し、より詳細な生成用プロンプトを作成させます。その後、ChatGPT Images 2.0を使って画像を生成し、実際のアプリのスクリーンショットを組み込みます。著者の例では、プロフィールダッシュボード画面を表示する素材で、AIが実際のスクリーンショットと説明文を組み合わせて「美しい何か」を作成しています。この段階では、AIに修正や再生成を依頼することができますが、著者は「白紙から全体を再生成する方が編集よりも効果的」とアドバイスしています。

生成された画像は、寸法が誤っており、品質も低いという課題を抱えています。ここで登場するのがGoogle Stitch（FigmaのGoogle版）です。生成されたPNG画像をGoogle Stitchにアップロードし、「copy the image as closely as possible exactly this screen」と指示してHTML化します。Google Stitchはトークン制限があるため、初期構造の生成に特化させます。生成されたHTMLには、フォント色の誤りや不正確な要素があるため、次の段階で手動とAI支援の編集を行います。無制限トークンを持つChatGPT Webを使って、HTMLのコピー、スタイル、その他の細部を調整します。

最終段階では、修正が完了したHTMLをFirefoxやChromeで表示し、スクリーンショットを取得します。その後、画像編集ツールを使って、目標とする寸法に合わせてトリミングとリサイズを行い、App Storeなどにアップロード可能な形に仕上げます。著者は「sidequest」として、ChatGPTやGoogleが正確に再現できなかったアイコンについて、元の生成画像をSVGエディタで開き、ベクトルポイントで手動でトレースし直す手法も紹介しています。

ボーナスケーススタディとして取り上げたAvoVietnamの例では、AI導入前は「単純なスクリーンショットとグラデーション背景で怠惰に見える」素材でした。Codex 5.3を使った初期のChatGPT→HTML変換では、フォントサイズと配置が不正確で「高校生のデザイン学生か、デザイン知識のないソフトウェアエンジニアが作ったように見える」と著者自身が評価しています。Google Stitchワークフロー導入後は、著者は「プロフェッショナルデザイナーレベルではないが、独力で作るより無限に良い品質」を実現したと主張しており、この手法の実務的な効果を示しています。

このワークフローの背景には、エンジニアがマーケティング素材制作における従来の課題に直面していることがあります。著者は「プロフェッショナルデザイナーのレベルではないが、デザイン知識のないソフトウェアエンジニアが独力で作るより無限に良い」と述べており、実務的な現実に基づいています。AvoVietnamという実例では、AI導入前後の素材を比較することで、手法の実効性を示しています。

GoogleStitchとChatGPTの組み合わせが効果的なのは、各ツールの制約を理解した使い分けにあります。GoogleStitchは画像からHTML構造への変換に優れていますが、トークン制限があり、言語調整にはChatGPT Webの大容量を使うという補完関係が重要です。著者は「GoogleStitchが前提条件」とし、AIが生成する低品質な画像や不正確なフォント配置といった既知の問題を、手動調整やSVGの再トレースで対処するプロセスを確立しています。

まだコメントがありません。最初のコメントを投稿しましょう！