AI coding guide for practical website work

Codexでホームページ制作する方法

Codexは、静的HTMLサイトの初期構築と相性が良いツールです。ページ一覧、共通レイアウト、SEOタグ、公開確認を一つの作業としてまとめやすいからです。

当サイトはOpenAI公式サイトではありません。Codexの使い方を実体験ベースで整理する非公式ガイドです。

この記事は2026年5月時点の情報をもとに整理しています。Codexの料金、対応プラン、アプリ、CLI、GitHub連携などは変更される可能性があります。最新情報はOpenAI公式情報をご確認ください。

設計

最初に、サイトの目的、ページ数、URL、title、H1、狙うキーワード、共通ナビ、フッター、禁止事項を整理します。WordPressを使わない静的サイトなら、構成を明確にしたうえでCodexに一括生成を依頼できます。

構築

1

ページ一覧を作る

トップ、主要ページ、FAQ、運営者情報、ポリシー類を決めます。

2

共通CSSを作る

白ベース、読みやすい本文幅、コードブロック、目次、FAQを整えます。

3

SEOタグを入れる

title、description、canonical、robots、OGPを各ページに入れます。

4

内部リンクを張る

トップから主要ページへ、関連ページ同士へ自然にリンクします。

公開確認

公開後は、全ページの200 OK、SSL、wwwの挙動、robots.txt、sitemap.xml、CSS読込、スマホ幅の崩れを確認します。既存サイトへの反映では、公開前バックアップも必須です。

よくある質問

Codexの仕様は固定ですか?

固定ではありません。利用できる機能、プラン、CLIやアプリの挙動は更新される可能性があるため、作業前にOpenAIの公式情報を確認するのが安全です。

初心者でも使えますか?

使えます。ただし、作業フォルダ、編集権限、Gitの扱い、秘密情報の管理は最初に整理しておくと安心です。