副業 AI｜Codexでホームページを作る方法｜初心者が公開するまでの7ステップ

Codexでホームページは作れる？

作れます。Codexは、選んだ作業フォルダのファイルを読み、ページを作成・修正できます。OpenAI公式の案内でも、デスクトップアプリでフォルダを開き、ソフトウェア開発ではCodexを選んで作業する流れが紹介されています。

ただし、サイトの目的や誰に何を伝えるかまで、AIが自動的に正解を決めてくれるわけではありません。Codexは「考えたことを短時間で形にし、何度も直す相手」として使うのが合っています。

参考：OpenAI公式「Quickstart」

最初に用意したもの

パソコン

Codexでサイトのファイルを作成・確認するため

ChatGPT Plus

Codexを含むプラン。月額20ドル

GitHub

サイトデータと変更履歴を保存し、自動公開につなげるため

エックスサーバー

ホームページを公開する場所。約1,200円／月

独自ドメイン

このサイトでは sirokumap.com。月換算で約300円

ChatGPT Plusの日本円での支払額は、為替や税金によって変わります。また、APIや追加クレジットを利用した場合は別料金です。最新料金はOpenAI公式料金ページで確認できます。

公開までの7ステップ

最初の指示は、短くても具体的にする

最初から専門用語を並べる必要はありません。大切なのは、作りたい理由、読んでほしい人、必要な機能、希望する雰囲気を伝えることです。

一度で完成を求めるより、画面を見て「名前が固い」「読者より運営者の事情が目立つ」「記事へたどり着けない」と具体的に伝える方が、改善しやすくなりました。

Codexに任せたこと、人が決めたこと

特に、運営者の経験や料金、利用したサービスはAI任せにせず、自分で確認する必要があります。このサイトでも、サーバー名や月額料金を公開後に見直して修正しました。

GitHubからエックスサーバーへ公開する

このサイトは、Codexで作ったファイルをGitHubへ保存し、更新するとエックスサーバーへ自動で反映される仕組みにしました。記事を直すたびに手作業でファイルを送らなくてよいのが利点です。

1. 1
   Codexで作成・修正

   文章、ページ、デザイン、機能を更新します。

2. 2
   GitHubへ保存

   いつ、何を変えたか履歴を残します。

3. 3
   エックスサーバーへ自動反映

   公開用ファイルだけをサーバーへ送ります。

実際に困ったことと、直した内容

サイトが固く見えた

色、丸み、言葉を見直し、行政サイトのような印象から親しみやすい雰囲気へ変更。

運営者側の説明が多かった

「まだ探している途中」などの内情を減らし、読者が得られる情報を中心に修正。

記事へたどり着きにくかった

トップに新着記事を追加し、カテゴリ、記事検索、サイドウィジェットを整備。

カテゴリが開かなかった

見た目だけだったカテゴリに実ページを作り、リンク先を確認。

記事一覧が403になった

サーバー上のフォルダ名とページ名が重なったため、表示先を明示する設定を追加。

公開前に確認したいチェックリスト

• スマートフォンでも文字とボタンが見やすいか
• トップからカテゴリ、記事まで迷わず移動できるか
• プロフィール、問い合わせ、プライバシーポリシーがあるか
• 料金、サービス名、経験などの事実が正しいか
• 広告やアフィリエイトが分かるように表示されているか
• 公開URLが404や403になっていないか
• パスワードや個人情報が公開ファイルに入っていないか

まずは小さなサイトを1つ、公開まで進める

Codexを使う一番の価値は、難しい言葉を覚えることより、考えていることを実際のサイトとして確認できることだと感じました。

最初から大規模なサイトを目指す必要はありません。トップ、プロフィール、問い合わせ、記事1本の小さな構成でも、公開まで進めると次に必要なことが見えてきます。