AIに画像を直接作らせるのではなく、HTMLを書かせるようにしたら iPhone アプリのCVRが2倍になった

最近アプリ開発にハマってまして、半年で5個ほどアプリをリリースしています。
特に今は、電子書籍をまとめるアプリ「ブックネスト」に注力しています。
今回はそのアプリについて、ちょっとした AI の使い方の工夫で CVR が2倍(2%->4%)になった話をします。

はじめに

他のアプリの CVR が 5% くらいあるなかで、ブックネストだけ2%と低いのでなんでかな？と思い仮説を立ててみました。

• 「何ができるアプリかユーザーに伝わってないのでは？」

例えば、チャンネルブロッカーというアプリも出しているのですが、これって YouTube のチャンネルをブロックするアプリであることって一瞬でわかるんですよね。
その仮説をもとに、ブックネストでは App Store の画像を「何ができるアプリか伝わりやすいもの」に変えてみよう。と思ったわけです。

AI に直接画像生成させる

良い感じの画像を作ろうにも私には無理だったので、ChatGPT に画像生成させてみることにしました。
シンプルに「アプリのスクリーンショット」+「上下に説明の文字入れ」で作ってもらおうとしたんですが、なんかうまくいかず。

• 文字が崩れる
• レイアウトが画像間で安定しない
• 修正を何度も頼むと崩壊していく

ってな感じでした。

AI に HTML と CSS を生成させる

試しに「LPを作るノリ」でHTMLを書かせる方式をやってみました。それこそ別件で AI に LP 作らせてた時に、もう私がデザインとかしなくて良いじゃんってなってたのでその応用で。
ClaudeCode に HTML と CSS を書かせて、それをブラウザで表示して撮影という流れです。
それで作られたのが以下になります。
CSS 周りの調整で AI とは何回かやりとりしたものの、1時間かかってないと思います。

ClaudeCodeに作らせた AppStore 用画像1

ClaudeCodeに作らせた AppStore 用画像2

私が自力で作ったものと比べると、もう雲泥の差でした。
個人的には大満足です。

結果としても、この画像を使用しただけでCVR は 2% -> 4% に改善しまして、効果は絶大でした。
AIに「コード」としてレイアウトを組ませるアプローチは、個人アプリ開発者にはかなり相性がいいかもしれません。

※ 画像中の書影に関しては版元ドットコムの利用規約を遵守して利用しています。

補足: ブラウザでの撮影手順

当時何をしたか覚えておらず、私自身の環境や設定に依存している可能性があるので、動作保証はできませんが、一応以下の手順で現在も撮影が可能でした。

• AI に作成させた HTML をダブルクリックして Chrome で開く
• F12 を押して開発者モードに入る
• 画像の①をクリックし、上部のサイズを iPhone 用なり、iPad 用なりに調整する。DPR（デバイスピクセル比）は、1.0 に設定する。
• 画像の②をクリックし、Capture full size screenshot をクリックする

Chromeでのスクリーンショット撮影手順