DogAge2にカードデザインを追加
今回追加したのは、少し遊びのあるものから、プロフィールをきちんと見せやすいものまで、雰囲気の違う5種類です。
・ペット診察券風
・少女コミック風
・ロイヤル肖像画
・ペットパスポート
・イベントパス
今回の更新に合わせて、ペットカードデザイン一覧から登録なしでカード作成を試せるようにしました。
いきなり会員登録するのは少し重いと思うので、まずは写真や名前を入れて、どんな感じになるかだけ触れるようにしています。気に入ったら、そのまま登録して保存する流れです。
今までのカードはシンプルで背景色をいじる事で印象を変えられるデザインでしたが、今回追加したデザインはGPTimage2を使って手の混んだ感じのカードになりました。
今までも背景を切り抜いたPNG画像を使うと見栄えがよくなる「ベースボールカード風」「某カードゲーム風」といったカードは用意してましたが今回追加した「少女コミック風」は切り抜き用に作ったものなので切り抜かないといい感じにならないです。
最近のiPhoneやAndroidには、写真から被写体を切り抜く機能があるので、それを使ってペットだけの画像を作ってもらう想定です。
あと、殆ど分からないかもしれませんがカード画像を元にOGP画像を生成するようになっています。これもAIさんがHTMLを画像するhtml2canvasライブラリを見つけてきて実装してくれました。
Claude CodeってCSSだけで結構いいデザインのページを作ってくれるし、Antigravityはさらに（AI感はあるものの）いい感じに画像も添えてくれる、ただCODEXはGPTImage2を使った画像生成はいいけどそれ以外のデザインは弱い気がします。（今のところですが）
Tags: WEBアプリ, 人間年齢, 犬年齢, 生成AI, 電子名刺