CodexでWebサイトを作る方法｜未経験者向け6つの工程

私がWebサイトを作ろうとしたとき、分からないのはコードだけではありませんでした。必要なページ、記事の増やし方、公開先。決めることの全体像が見えていなかったのです。

Codexを使えば実装は進みます。ただし、「誰が読むのか」が決まらないまま作らせると、見た目の整った空箱になりやすい。AI副業実践ノートの初回版も、公開はできたものの、運営者の動機や文章の温度が足りず、後から大きく直しました。

ここでは、その失敗を踏まえて、未経験者が小さなサイトを公開するまでを6つに分けます。

1. 作る理由を、自分の言葉で一文にする

最初に書くのはサイト名ではなく、作る理由です。

私の場合は、「AIを使えば、Web未経験の会社員でも副業を形にできるのか確かめたい」でした。その実験を公開する場所として、AIとWeb制作の記事サイトを選びました。

目的が決まると、読者も絞れます。すでに仕事でAIを使う専門家ではなく、興味はあるものの最初の作業が分からない人です。この一文が、デザイン、記事、機能を選ぶ基準になりました。

新しい技術を使うこと自体は、読者の利益になりません。半年後に誰が、どの端末から、どれくらいの頻度で更新するかを考えます。

このサイトは私一人で運営し、記事の変更をCodexへ頼みます。そこでAstroとMDXを選び、GitHubへ履歴を残す構成にしました。

複数人がブラウザから記事を更新するなら、管理画面のあるWordPressが候補です。問い合わせ、予約、会員機能が必要なら、それに合う仕組みも比べます。WordPressと静的サイトの選び方では、費用より先に更新担当を決める理由を書きました。

「おしゃれに作って」では、完成条件を確認できません。観察できる言葉へ置き換えます。

Web制作を初めて学ぶ会社員向けの1ページサイトを作ります。
白を基調にし、本文をスマートフォンで読みやすくしてください。
派手なグラデーションと過剰なアニメーションは使いません。

見出し、サービス説明、料金、問い合わせ先を載せます。
まず1ページだけ実装し、最後にビルド結果を報告してください。

既存サイトなら、残すページ、変えてはいけない色、使い続けるURLも書きます。私は広告コードを記事へ直接書かず、ASPから受け取った形のまま別ファイルで管理する条件を付けました。

公開済みの記事や画面を直す場合は、Codexへ渡すサイト修正の指示文で、対象、残す内容、確認方法、公開範囲を分けています。

トップ、記事、法務ページを一気に作ると、方向が違ったときの修正範囲が広がります。代表ページを一つ作り、文字の大きさ、余白、色、ボタンの位置を確認します。

会社員のミホさんが、知人のヨガ教室を想定した練習サイトを作るとします。最初に作るのはトップ1ページだけです。

教室の対象者、場所、料金、体験予約の方法を仮の条件として用意します。これは練習用の架空サイトだと明記し、実在する教室の住所や口コミは使いません。

スマートフォンでページを読み、「料金が見つかるか」「予約先を間違えないか」を確かめます。問題がなければ、講師紹介やよくある質問を足します。

ビルドが通っても、読みやすいサイトとは限りません。私は次の順番で確認しています。

文章は声に出して読みます。一文ごとの不自然な改行、同じ文末の連続、理由のない行動は、画面で読むと気づきやすくなります。

AI副業実践ノートでは、公開済みの記事を読んだ私が「なぜそれを作ろうと思ったのかがない」と指摘し、書き出しを全面的に変えました。コードの検査と、人が読む検査は別物です。

ローカルで正しく見えても、公開設定が違えばリンクや画像が壊れます。公開後は、次のURLを実際に開きます。

canonical、OGP、構造化データが仮URLを指していないかも確認します。Cloudflare Pagesへ独自ドメインを接続した作業は、aijissen-note.comを公開した記録で設定値まで載せています。

未経験者が最初から大規模サイトを作ると、AIの出力を評価する基準がありません。1ページを公開し、一つ直し、変更理由を説明できる状態を作るほうが、その後の学習へつながります。

この手順を使って私が実際に作ったものは、Web未経験の会社員がCodexでアフィリエイトサイトを作った記録で確認できます。コードの基礎から学びたい場合は、AIを使ったWeb制作の独学方法へ進んでください。