Codexが使えない人向けの手動公開ガイド
ChatGPTでホームページを作る方法
Codexが使えない環境でも、ChatGPTにHTMLやCSSを作ってもらい、自分でファイル保存とアップロードを行えば、小さなホームページは公開できます。ここでは、ChatGPTだけでコードを作り、FTPやサーバーのファイルマネージャーで手動公開する流れを整理します。
利用できる機能は、ChatGPTのプランや環境により異なる場合があります。ChatGPTだけでサーバーへ自動アップロードできるわけではありません。重要な公開作業では、アップロード後に必ずブラウザで表示確認してください。
ChatGPTだけで作る基本の流れ
最初は複雑な仕組みを入れず、HTMLとCSSだけで作る静的サイトにすると失敗を減らせます。問い合わせフォームやデータベースを使う機能は、慣れてから検討しましょう。
- ChatGPTにページ構成を作ってもらう
- HTMLを作ってもらう
- CSSを作ってもらう
index.htmlとstyle.cssとして保存する- サーバーへアップロードする
- ブラウザで表示確認する
robots.txtとsitemap.xmlを作る- Search Consoleに登録する
ChatGPTに頼む時の例文
下の文例を使うと、ページ構成、HTML、CSSを分けて頼みやすくなります。実際の会社名や個人情報は、公開してよい内容だけにしてください。
サイト構成
小規模なホームページを作りたいです。
トップページ、サービス紹介、よくある質問、問い合わせ案内の4ページ構成で、初心者向けにHTMLとCSSを分けて作ってください。HTML作成
以下の条件で index.html を作ってください。
・日本語サイト
・スマホ対応
・白ベース
・title / meta description / canonical / robots を入れる
・CSSは assets/css/style.css に分ける前提CSS作成
このHTMLに合わせて、読みやすいCSSを作ってください。
スマホ表示を優先し、余白を広めにしてください。ファイルとして保存する方法
ChatGPTが出したHTMLやCSSは、メモ帳やVS Codeなどのエディタに貼り付けて保存します。保存時の文字コードはUTF-8にし、拡張子が .txt にならないように注意してください。
- トップページは
index.htmlという名前で保存する - CSSは
assets/css/style.cssに保存する - フォルダ名とファイル名は半角英数字中心にする
- 文字コードはUTF-8にする
index.html.txtのような名前になっていないか確認する
アップロード方法
公開するには、作ったファイルをサーバーの公開ディレクトリに置きます。FTPソフトを使う方法と、サーバー管理画面のファイルマネージャーを使う方法があります。
FTPソフトでアップする
FileZillaやWinSCPなどのFTPソフトを使うと、パソコン上のファイルをサーバーへ転送できます。ログイン情報は人に見せず、入力内容をスクリーンショットに写さないようにしてください。
- サーバーのFTP情報を用意する
- 公開ディレクトリを開く
index.htmlをアップロードするassets/css/style.cssを同じ構造でアップロードする- 公開URLをブラウザで開く
ファイルマネージャーでアップする
初心者には、サーバー管理画面にあるファイルマネージャーの方が分かりやすい場合もあります。管理画面へログインし、公開ディレクトリを開いて、HTMLとCSSをアップロードします。
- サーバー管理画面へログインする
- 公開ディレクトリを開く
index.htmlをアップロードするassets/css/style.cssをアップロードする- 公開URLを開いて表示確認する
公開前に確認すること
アップロードしたら、必ずブラウザで表示を確認します。パソコンだけでなく、スマホでも見ておくと安心です。
- トップページが表示される
- スマホで崩れていない
- CSSが読み込まれている
- titleが入っている
- meta descriptionが入っている
- canonicalが正しい
- robotsが
index,followになっている - リンク切れがない
- 画像が表示される
- 問い合わせ先や案内が分かる
robots.txt と sitemap.xml
小さなサイトでも、robots.txt と sitemap.xml を作っておくと、検索エンジンにページを伝えやすくなります。ChatGPTにURL一覧を渡して、sitemap.xmlの形に整えてもらうこともできます。
以下のURLをもとに、sitemap.xmlを作ってください。
条件：XML形式、lastmodは今日の日付、公開するURLだけ入れる。
URL：
https://example.com/
https://example.com/service/
https://example.com/faq/sitemap.xml には公開するURLを入れます。作成後はサーバーにアップロードし、Search Consoleから送信します。
Search Consoleに登録する
サイトを公開したら、Google Search Consoleに登録します。所有権確認を行い、sitemap.xmlを送信すると、数日から数週間かけて表示回数や検索クエリを確認できるようになります。
- Search Consoleにサイトを追加する
- 所有権確認を行う
sitemap.xmlを送信する- 数日から数週間かけて表示回数や検索クエリを見る
- 公開後の確認日はカレンダーなどで管理する
ChatGPTだけで作る場合の注意点
ChatGPTだけで作る場合、既存ファイルの確認、保存、アップロード、表示確認は人間が行います。上書き前にはバックアップを取り、アップロード先を間違えないようにしてください。
- 既存ファイルの確認は人間が行う
- アップロード先を間違えない
- 上書き前にバックアップを取る
- HTML/CSSの保存ミスに注意する
- 大規模サイトや既存サイト修正は慎重にする
- フォームやメール送信は難易度が上がる
- DBや.htaccessは初心者が触らない方がよい
Codexとの違い
- コードを出してもらう
- 保存やアップロードは人間が行う
- 表示確認も人間が行う
- 小さな静的HTMLサイトから始めやすい
- 既存ファイルを読める
- 修正対象を確認できる
- ファイルを編集できる
- 確認結果を報告できる
- ただし使えるプランや環境が必要
既存サイトの修正や複数ファイルの確認まで任せたい場合は、Codexを使う方法もあります。ただし、このページではCodexが使えない人でも進められる手動公開の流れを中心にしています。
まとめ
Codexがなくても、ChatGPTだけでホームページ用のHTMLやCSSを作ることはできます。初心者は、まず小さな静的HTMLサイトから始め、ファイル保存、アップロード、ブラウザ確認、sitemap送信までを一つずつ進めると安全です。
FTPが難しく感じる場合は、サーバーのファイルマネージャーの方が分かりやすいこともあります。既存サイト修正や複数ファイル管理を任せたい場合は、Codexも選択肢になります。
似ているページとの違い
このページの役割
このページは、ホームページ制作の手順を詳しく見るためのページです。制作相談の入口はホームページページ、Codexと進める場合はCodex計画ページ、公開後に育てる場合はSearch Consoleページが役立ちます。