ChatGPTで作ったホームページ案を実装したい方へ｜AIで画像から使えるサイトへ変えます

ChatGPTで理想のホームページ画像を作ったものの、次の段階で止まっていないでしょうか。

- 画像はあるが、実際のページにできない

- ペライチなどで近い見た目を再現できない

- PCでは見えるがスマートフォンで崩れる

- ボタンやリンクを動かしたい

- 参考画像に近づけつつ、後から文章を更新したい

今回は、顧客がChatGPTで作った完成イメージをもとに、Codexで実際のホームページを構築しました。

画像をそのまま貼るだけではありません

ホームページとして使うには、見た目以外にも確認が必要です。

- 文章をHTMLとして読めること

- ボタンとリンクが動くこと

- PC、タブレット、スマートフォンへ対応すること

- 画面幅が変わっても文字と画像が重ならないこと

- 更新しやすい構造であること

- PDFで確認する場合に改ページが崩れないこと

参考画像を分解し、文章、写真、背景、ボタン、セクションへ置き換えました。

顧客フィードバックをAIの修正条件へ変えます

最初の実装後、約1分46秒の画面録画で修正希望をいただきました。

私はその内容を、

- どのセクションを直すか

- どの画面幅で問題が出るか

- 見た目と読みやすさのどちらを優先するか

- 写真を背景にするか要素として置くか

- PDFで同じページへ収めるか

へ分け、Codexへ渡しました。

実際に修正・確認した内容

- 文章と人物画像の重なりを解消

- 写真の端を自然にフェード

- PCでは写真を右端まで配置

- スマホでは一列表示へ変更

- 固定ヘッダーが見出しを隠す問題を修正

- PDFでセクションが途中分割されないよう調整

- 欠損していた人物画像を完全版へ差し替え

表示は1920px、1024px、390pxで確認し、横方向のはみ出しがないことを確認しました。PDFはA4横14ページで、対象セクションと差し替え画像も確認済みです。

AIへ任せる範囲と、人が残す範囲

AIエージェントは、コード実装、修正案、表示検証、PDF生成、原因調査を担当できます。

一方、次の判断は人が行います。

- 顧客の目的に合っているか

- 参考画像のどこを必ず残すか

- 見た目と使いやすさが競合したときの優先順位

- 公開して問題ない品質か

「AIが自動で全部作る」サービスではなく、顧客の要望をAIが実行できる形へ整理し、完成まで品質を確認する進め方です。

ご相談いただける内容

- ChatGPTで作った画像からホームページを制作

- 参考サイトや手書きラフからの実装

- ペライチ等で作った既存ページの再構築

- PC・スマートフォンの表示修正

- 文章と画像の重なり・余白の改善

- CTAボタン、LINE、SNSリンクの設置

- 提出・確認用PDFの作成

- 既存サイトの一部改修

事前に確認する内容

- 参考画像・参考サイトの利用権

- 公開する文章と写真

- 必要なページ数と機能

- 更新を誰が行うか

- 公開先のサーバーやドメイン

- 問い合わせフォーム等で扱う個人情報

制作時間の短縮率や公開後の問い合わせ増加は、まだ測定していません。まずは、実際の画面で使える状態まで作り、公開後にCTAクリックや問い合わせを確認します。

ChatGPTで理想の画像は作れたけれど、ホームページへ変える方法が分からない方は、参考画像と必要な機能を添えてご相談ください。