占いサイトを「作った後」の話
前回、実験として占いサイト「ヨルシルベ」を公開した。
最初の目的は単純で、
「AIを使えば、個人でもどのくらいの速度でWebサービスを作れるのか？」
を試してみることだった。
実際、サイトを作って公開するところまではかなり速い。
ただ、公開してみると当然ながら次が気になってくる。
せっかく作ったなら、もう少しちゃんと育ててみたい。
今回は、キャラクターの作り直しとWeb向け画像の最適化、さらに恋愛占いカテゴリの追加までをAIとCodexを使って進めてみた。
キャラクターをちゃんと作る
最初のキャラクターは、かなり猫に近かった。
でも、それだと少し普通すぎる。
そこで「猫ではない謎の生物」という方向に変更した。
黒から深紫の身体。
額には三日月。
小さくて少し眠そうな黄色い目。
左右に垂れた耳のようなものと、頭の上にもう一つ突起がある。
そして尻尾は二本。
普段は水晶玉の上に座っている。
性格も決めた。
こいつ自身は、占いをあまり信じていない。
占いサイトのキャラクターなのに、
「人間を12種類に分けて分かるなら、苦労しないだろ。」
みたいなことを平気で言う。
それでも毎日占っている。
昔、この生き物を助けた老女が占い師で、その手伝いをさせられている――という設定にした。
こういう設定を考えている時間の方が、サイトを実装している時間より長いかもしれない。
AI画像は、そのままWeb素材にはならない
キャラクター画像はAIで生成した。
ただし、高解像度画像をそのままWebサイトに置けばいいわけではない。
今回トップページ用に作った原版は、
1254 × 1254px / 約1.64MB
だった。
これをWeb表示用として、
720 × 720px / WebP / 約144KB
まで縮小・圧縮した。
トップページでは最大360px程度で表示するため、720pxあれば高DPIディスプレイでも十分な解像度になる。
つまり、
原画は高解像度で保存する。
Webでは必要なサイズまで小さくする。
という使い分けにした。
後ろ姿も同じ。
原版は、
1244 × 1265px / 約1.65MB
だが、Web版は、
410 × 417px / WebP / 約53KB
まで小さくした。
AIで綺麗な画像を作ることと、Webサイトを速くすることは別の問題だった。
| 画像 | 原版 | Web版 |
|---|---|---|
| トップキャラクター | 1254 × 1254px 約1.64MB | 720 × 720px WebP / 約144KB |
| 後ろ姿 | 1244 × 1265px 約1.65MB | 410 × 417px WebP / 約53KB |
画像生成AIとCodexを分業させる
今回の作業では、役割をかなり明確に分けた。
画像生成AIには、
「このキャラクターの後ろ姿を作る」
「背景透過でトップページ用画像を作る」
といったビジュアル制作を担当させる。
その画像をCodexに渡して、
「WebPに変換する」
「適切な解像度にする」
「レスポンシブ対応する」
「LCPやCLSを考慮する」
といったWeb実装を任せる。
この組み合わせはかなり便利だった。
ただ、一つ問題もあった。
AIは設定を普通に忘れる。
前から見ると耳のようなものが3つあるのに、後ろ姿では2つになったりする。
尻尾の形が変わることもある。
人間なら「同じキャラクターなんだから当然同じだろう」と考えるところでも、AIには明示的に伝える必要がある。
このあたりは、まだ人間が設定資料を管理する意味がある。
恋愛占いを5種類追加する
次に、トップページに1個だけあった「恋愛」を独立カテゴリにした。
作ったのは次の5種類。
恋愛占い一覧（/love）を入口として、それぞれ独立したページを持たせた。
実装自体はCodexにかなり任せている。
共通UIもコンポーネント化し、恋愛占い用のロジックも別モジュールに分離した。
星座の相性については12星座×12星座、144通りに対応。
「牡羊座 × 蟹座」と「蟹座 × 牡羊座」で結果が変わらないよう、入力順序を入れ替えても同じ結果になるようにした。
良い占いほど辛口にする
普通の占いサイトと同じことをやっても面白くない。
そこで、このサイトでは少し変なルールを作った。
結果が良いほどキャラクターは辛口になる。
かなり良い結果なら、
「かなりいい。……だからって調子に乗るなよ。」
普通なら、
「普通だ。普通で何が不満なんだ。」
逆に結果が悪い時だけ、少し優しくなる。
「……今日は無理して動かなくていい。これで全部決まるわけじゃない。気にするな。」
という具合だ。
復縁占いについても、「絶対復縁できる」といった期待を煽る方向にはしなかった。
相手の意思を尊重し、うまくいかない結果でも必要以上に落ち込ませない。
占いを信じていないキャラクターだからこそ、
占い結果に人間が振り回されることも否定する。
この矛盾が、このサイトの特徴になればいいと思っている。
AIに任せたもの、人間が決めたもの
今回かなりの部分をAIに作ってもらった。
ページ構成、Reactの実装、CSS、画像最適化、metadata、canonical、OGP、sitemap、テスト。
こういったものはAIが非常に速い。
一方で、
「どんなサイトにするのか」
「キャラクターをどういう性格にするのか」
「悪い占い結果をどう扱うのか」
「何を不快と考えるのか」
といった部分は人間側で決めた。
AI時代の個人開発は、
人間が全部作る
でも、
AIに全部作らせる
でもないのかもしれない。
人間が方向を決めて、AIに大量に作らせて、違うところを人間が直す。
今のところ、このやり方が一番しっくりくる。
公開した。次はGoogleに聞いてみる
恋愛占いを公開した。
でも、どのページが需要があるのかは分からない。
「あの人の気持ち」なのか。
「片思い」なのか。
「相性」なのか。
それとも「復縁」なのか。
ここから1週間ほど、Google Search ConsoleとCloudflare Web Analyticsを眺めてみる。
そして実際の数字を見て、次に何を作るか決める。
AIを使えば、ページを作ること自体はかなり速くなった。
でも、
何を作るか。
何を残すか。
何を面白いと思うか。
そこは、まだ人間側の仕事らしい。
とりあえず公開した。
あとはGoogleと人間がどう反応するか、しばらく眺めてみる。