ChatGPT・Codexでホームページを作って公開する方法｜画像の準備からXREAへのアップロードまで

まずはWindowsに、作業用フォルダーを作る。

この記事では、Windowsのパソコンで、ローカルフォルダーを扱えるCodexのデスクトップ環境を使います。ブラウザーのChatGPTに文章を送るだけでは、パソコン内に同じファイル構成が自動でできるとは限りません。

1. Windowsのデスクトップの、アイコンがない場所を右クリックします。
2. 「新規作成」→「フォルダー」を選びます。
3. 名前を ホームページ作成 にして、Enterキーを押します。
4. できたフォルダーをダブルクリックして開きます。
5. その中で同じ操作を行い、HP用素材 というフォルダーを作ります。

デスクトップ/
└─ ホームページ作成/  ← Codexで選ぶ作業場所
   └─ HP用素材/       ← 写真を入れる場所

サイトに使う写真を「HP用素材」に入れる。

今回はフリー画像を使って制作しました。Codexが読めるように、使用する画像をダウンロードし、パソコンの作業フォルダーへ用意します。スマートフォンにしか写真がない場合は、先にパソコンへ保存してください。

1. Windowsキー＋Eでエクスプローラーを開き、写真の保存場所を表示します。
2. 使う写真を選び、Ctrl＋Cでコピーします。複数選ぶ場合はCtrlキーを押しながらクリックします。
3. デスクトップの ホームページ作成 → HP用素材 を開きます。
4. Ctrl＋Vで貼り付けます。元の写真を残して作業できます。
5. 貼り付けた写真をダブルクリックし、意図した画像か確認します。

ホームページ作成/
└─ HP用素材/
   ├─ 2tトラック.jpg
   └─ 社員画像.jpeg

上の名前は今回の例です。お手元の写真の名前が違っていても構いません。写真の内容と用途を後のプロンプトに書きましょう。例：「2tトラック.jpg は車両紹介に、社員画像.jpeg は会社紹介に使用」。

この記事の写真名は配置例です。読者のパソコンへ写真が自動で追加されるものではありません。

Codexで「ホームページ作成」フォルダーを選ぶ。

次に、Codexにどのフォルダーで作業してもらうかを指定します。選ぶのは写真１枚ではなく、写真フォルダーを含む「ホームページ作成」です。

1. Codexを利用できるデスクトップアプリを開き、利用するChatGPTアカウントでログインします。未導入の場合は、公式の導入ガイドに沿って準備します。
2. プロジェクトの追加操作を開きます。「Add new project（新しいプロジェクトを追加）」が表示される環境では、その項目から進みます。Windowsでは Ctrl＋Oからフォルダー選択を開ける環境もあります。
3. フォルダー選択画面で「デスクトップ」を開き、「ホームページ作成」を選んで確定します。「HP用素材」だけを選ばないようにしてください。
4. そのプロジェクト内で新しいチャット／作業を開き、下の確認用文章を送ります。

制作を始める前に、現在の作業フォルダーの場所と、
その中の「HP用素材」に入っている画像ファイル名を教えてください。
まだファイルの作成や変更はしないでください。

すでにプロジェクトを作っている場合

プロジェクトのメニューにある 「Edit project」→「Add folder」から「ホームページ作成」を追加する方法もあります。複数のフォルダーが付いている場合は、そのフォルダーを 「Make primary」で主な作業場所にして、新しいチャットを開きます。画面の名称はアプリの版によって異なります。

画面の操作は、OpenAI公式：プロジェクトとフォルダーとWindowsアプリの案内を参照してください。

まずは、サイトに入れたい情報を整理。

「いい感じに作って」だけでは、伝えたいことが十分に伝わりません。誰に見てもらい、何を知ってほしいのかを具体的に書き出します。最初は短い箇条書きで大丈夫です。

以下のプロンプトをコピーして、空欄にご自身の会社情報を記入してください。

以下の情報をもとに、会社の信用向上を目的とした
１ページのホームページを制作してください。

【会社の情報】
会社名：
所在地：
代表者名：
設立年：
公開する電話番号：
公開するメールアドレス：
受付時間：

【事業の情報】
主なサービス：
主に扱う荷物：
対応エリア：
車両や設備：
対応できない業務：

【会社の特徴】
得意な仕事：
仕事で大切にしていること：
安全への取り組み：
環境への取り組み：
社員教育や地域活動：
事業所の立地による利点：

【サイトの目的】
主に見てほしい相手：
伝えたい会社の印象：
見た人に取ってほしい行動：

【デザインと素材】
希望する色や雰囲気：
参考サイト：
使用するTemplate PartyのテンプレートURL：
https://template-party.com/template/tp_lp3/tp_lp3_clinic_slide/
素材の保存場所：作業フォルダー内の「HP用素材」
提供する写真と、それぞれの内容：
（記入例）2tトラック.jpg：車両紹介に使用
（記入例）社員画像.jpeg：会社紹介に使用

【制作条件】
・HTML、CSS、必要に応じてJavaScriptを使ってください。
・XREAにアップロードして公開できる静的サイトにしてください。
・スマホとパソコンの両方に対応してください。
・実績、認証、取引先、お客様の声を創作しないでください。
・不明な情報は確認事項としてまとめてください。
・他サイトの画像を無断で流用しないでください。
・テンプレートの利用条件とクレジット表記を守ってください。
・問い合わせフォームの送信機能は、設置方法を相談してください。
・有料サービスの申し込みや課金は行わないでください。

【納品形式】
作業フォルダー内に「aoba-transport」を作り、その中に保存：
index.html
css/：CSSファイル
js/：JavaScriptファイル
images/：使用画像

コードを返信するだけでなく、実際のファイルを作成してください。
「HP用素材」の元画像は変更せず、公開用の画像を
aoba-transport/images/ にコピーして使ってください。
今回の例では、社員写真をteam.jpg、トラック写真をtruck.jpgに
してください。画像形式が違う場合は拡張子だけ変えず変換してください。
ファイル名と参照先を統一し、画像やリンクの動作を確認してください。
完成後、公開に必要なファイルと確認事項を教えてください。

ChatGPTで内容を相談し、Codexで形にする。

STEP 04の文章をコピーして空欄を埋め、STEP 03で開いたCodexのチャット入力欄に貼り付けて送信します。会社情報がまとまっていなければ、先にChatGPTで相談してから、その内容をプロンプトに反映します。

導入方法は、OpenAI公式クイックスタートを確認してください。利用できる機能や上限は、プラン・利用環境によって異なります。

1. 素材のファイル名と、写真を使う場所を確認してから送信します。
2. Codexから不明点を聞かれたら回答します。架空の会社なら、そのことと、仮情報はデモと分かる表示にすることを伝えます。
3. 作成が終わったら、保存先を確認します。この記事では ホームページ作成/aoba-transport に統一します。

今回のデザインは、Template Partyのテンプレートを土台にしています。レイアウトを活かしつつ、文章・色・写真を運送会社向けに整えました。

無料利用では指定のクレジットを残す必要があります。公式利用規約を確認して利用してください。

４つのファイル・フォルダーを確認する。

今回のサイトは、文章・見た目・動き・写真を分けて管理しています。

ホームページ作成/aoba-transport/
├─ index.html
├─ css/
│  ├─ template.css
│  └─ style.css
├─ js/
│  └─ main.js
└─ images/
   ├─ team.jpg
   └─ truck.jpg

自分のパソコンで、完成ファイルを開く

1. エクスプローラーで「デスクトップ」→「ホームページ作成」→「aoba-transport」を開きます。
2. index.html と css・js・images があるか確認します。上の図のように階層が分かれていればOKです。
3. index.html をダブルクリックします。アプリ選択が出たら、EdgeやChromeなどのブラウザーを選びます。
4. 文章、写真、色、メニューを確認します。ブラウザーの横幅を狭めて、表示が崩れないかも見ます。

これはパソコン内の確認です。アドレスが file:///... や http://127.0.0.1:... のページは、そのまま他の人に送っても公開サイトとして見てもらえません。XREAへのアップロードは後の工程です。

気になる箇所は、同じCodexのチャットで直す

aoba-transport のサイトを修正してください。
・最初の大きな見出しを「地域の物流を、まっすぐ支える。」に変更
・車両紹介にはHP用素材の「2tトラック.jpg」を使用
・スマホ幅で見出しが画面からはみ出さないように調整
修正は実際のファイルへ反映し、変更したファイル名を教えてください。

修正後はブラウザーを再読み込みして確認します。ダブルクリックでは動かない機能がある場合は、Codexに「ローカルプレビューを起動して、開くURLを教えて」と依頼してください。

XREAで、公開する場所を用意する。

サイトができたら、XREAの登録ページから案内に沿ってアカウントを作成します。無料で試す場合は、料金やプランを確認しながら進めましょう。

参考記事は2020年公開です。現在の画面やキャンペーン条件と異なる場合は、XREA公式マニュアルも確認してください。

公開URLと、ファイルの置き場所を合わせる。

XREAの「サイト設定」で、使用するURLとドキュメントルートを確認します。ドキュメントルートは、そのサイトのファイルを置くフォルダーのことです。

独自ドメイン用のフォルダーが別にある場合もあります。公開したいURLに対応する場所へアップロードすることが大切です。

完成ファイルを、そのままの構成でアップロード。

XREAの管理画面で「サイト設定」→「FTP設定」→「net2ftp ファイルマネージャー」と進みます。画面の詳細は公式の操作手順も参照してください。

1. 公開先の public_html を開く。
2. 「アップロード」を押し、ファイル選択でパソコンの ホームページ作成/aoba-transport/index.html を選びます。アップロード画面の送信操作を実行し、一覧に index.html が増えたことを確認します。
3. 「新規ディレクトリ」で css・js・images を作る。
4. サーバー側の css を開き、パソコン側の aoba-transport/css にあるCSSファイルをアップロードします。
5. 同じ要領で、サーバー側の js にJavaScriptファイル、images に公開用の画像ファイルをアップロードします。
6. サーバーの一覧を確認し、下の配置になっていれば、公開URLをブラウザーで開きます。

/public_html/
├─ index.html
├─ css/      ← template.css・style.css
├─ js/       ← main.js
└─ images/   ← team.jpg・truck.jpg

写真が表示されない。原因は「s」１文字。

ページは公開できたのに、写真だけが出てこない。その原因は、画像フォルダーの名前の違いでした。

ファイルマネージャーでフォルダー名を images に変更すると、社員写真とトラック写真が表示されました。

• 画像をアップロードしたか
• 入れるフォルダーは正しいか
• ファイル名・フォルダー名は一致しているか
• .jpg と .jpeg、大文字・小文字に違いはないか

修正後も変わらなければ、ブラウザーを再読み込みします。

「サーバーIPアドレスが見つからない」エラーは別の問題です。その場合は画像ではなく、公開URLやDNS設定を確認します。

パソコンとスマホで、完成を確認。

最後に公開URLを開き、実際の表示と操作をチェックします。

• 文章と写真が正しく表示される
• スマホで文字が読みやすい
• メニューとページ内リンクが動く
• FAQが開閉できる
• 会社情報と問い合わせ先に間違いがない

デモの問い合わせ欄は見本表示で、送信機能はありません。紹介URLはHTTPです。HTTPS化は別途確認する工程として残しています。

会社の情報と写真を用意し、AIと相談して形にして、サーバーへ届ける。最初からすべてのコードを書かなくても、確認と修正を重ねることで、実際にアクセスできるホームページを作ることができました。