Opus 5.5 把民宿实拍做成可点击建筑模型网站
用 Claude Code(Opus 5.5)把民宿实拍转成建筑模型风缩略图,点击切换实景,含六语言与移动端适配,全程约一个半小时。
【検証】Claude Code(Opus 5.5)と、民泊の写真を「建築模型」にしてサイトに実装してみた 実際の部屋の写真を、AIで建築模型みたいなミニチュアに。 模型をタップすると、元の写真に切り替わります。 動画は、模型を1つずつタップして実写に切り替えているところです。 これ、民泊の部屋でやったら絶対かわいいなと。 流れはこんな感じです。 1. 実写を4枚選ぶ(BBQテラス、リビング、板張りの和室、庭側の寝室) 2. Opusが部屋ごとにプロンプトを書き分ける 3. 画像を描くのはCodex(GPT Image 2)に任せる 4. 仕上がりをOpusがチェック 5. サイトに組み込んで、スマホ表示まで確認 一番おもしろかったのは4のチェックでした。 リビングの模型、パッと見は完璧だったんです。 でもOpusが画像を拡大して「照明が天井のないところで宙に浮いてます」と。 模型なので天井は外してあるんですよね。 それなのに、シャンデリアとペンダントライトだけ空中に残ってた。 しかもこれ、自分が見る前にOpusが見つけて、照明だけ消して作り直してくれてました笑 ほかは一切いじらずに。 クッションの色(黄色・白・幾何学柄・黒)や、丸いローテーブル2つの重なり方まで、ちゃんと実物どおりです。 サイト側の実装もOpus 5.5。 ・模型をタップすると実写に切り替わる(動画のやつ) ・6言語対応(日英仏西韓中) ・スマホは2列、PCは4列 ・画像は1枚60〜230KBまで圧縮 ・「写真をもとにAIで作ったイメージです」の注意書き 最後の注意書きは、個人的に一番こだわったところです。 ホテル業界でも、AIで作った画像をそのまま出してブランドを落としている、という声が出ています。 なので模型は実写の代わりにはしていません。 必ず実写とセットで見せて、お部屋選びの判断はあくまで実写と360°ビューで。 模型は「ちょっと楽しんでもらう入口」という位置づけです。 仕上げに、書いたコードをCodexにレビューさせたら 「スクリーンリーダーだと、見えていない方の画像まで読み上げてしまう」 と1件指摘が。 これもOpusがその場で直しました。 AIが書いたコードを別のAIにレビューさせるの、地味ですがかなり効きます。 かかったのは、いつものサブスクだけ。 Claude Code、ChatGPT(Codex)、X Premium+(Grok)の3つで、API代はゼロです。 画像1枚あたり、Codexの週の利用枠の1%くらいでした。 調べ始めてからサイトに組み込むまで、だいたい1時間半。 民泊やレンタルスペースをやっている方なら、手元の写真でそのまま試せます。 気になった方はぜひやってみてください! 次はこの流れで「家まるごとの3D間取り」に挑戦します。 #ClaudeCode #民泊