website production

ホームページ制作でGPT・Copilot・Gemini・Codexをどう使い分ける？

構成相談、調査、Canvaや画像作成、HTML/CSS、GitHub、公開前チェックを実務目線で整理します。

このサイトは非公式ガイドです。最新の機能、料金、提供状況は提供元の情報を確認してください。AIの回答やコード変更は人間が確認してください。

ai-tools-workflow.md

research: Gemini
organize: ChatGPT / GPT
office: Microsoft Copilot
code assist: GitHub Copilot
implement: Codex
verify: human

このページで分かること

ホームページ制作として、調べもの、文章整理、Office作業、コード補助、サイト制作、SEO、Search Console作業のどこで何を使うかを整理します。

GPT・Copilot・Gemini・Codex比較ハブへ戻る

GPT・Copilot・Gemini・Codex比較ハブ全体の使い分けへ戻る

実務目線での使い分け

ChatGPTで構成相談

ページ構成、見出し、説明順、Codexへの指示文を整理します。

Geminiで調査

テーマの背景、関連語、Google系文脈を確認します。公開本文に使う前に人間が確認します。

画像や素材は別管理

Canvaや画像作成ツールで用意した素材は、配置、alt、表示確認としてCodexに渡すと安全です。

CodexでHTML/CSS作業

ページ作成、CSS調整、内部リンク、公開前確認を小さく分けて依頼します。

GitHub Copilotでコード補助

エディタ内の補完やコード支援として使う候補です。PR差分確認は人間が行います。

使い分け表

比較軸	ChatGPT / GPT	Gemini	Microsoft Copilot	GitHub Copilot	Codex
主な用途	作業前の相談、文章整理、指示文作成	調べもの、情報整理、Google系文脈の確認	Office文書、会議、表計算、社内文書の補助	エディタ内のコード補助、補完、開発中の支援	サイト制作、HTML/CSS修正、SEO反映、作業報告
調べもの	質問の整理や比較観点づくりに使いやすい	検索やGoogle系情報と合わせた確認の入口になりやすい	Office内の資料確認に向く場合がある	調査よりコード周辺の補助が中心	調査結果を実装作業へ落とす時に使う
文章整理	構成、見出し、指示文、報告書の読み解きに向く	要約や情報の下整理に使える	WordやPowerPoint文脈で候補になる	コードコメントやREADME補助に使える	実装内容や変更内容の報告に使う
Office作業	文章案や構成相談に使える	調査資料の整理に使える	Word、Excel、PowerPoint、Outlook、Teamsなどで候補	Officeそのものよりコード支援寄り	Office作業ではなくサイトやコード作業寄り
コード作業	方針相談や依頼文作成に向く	コードの周辺知識確認に使える	コード作業の主役ではない	エディタ内での補完や提案に向く	作業単位で修正、確認、報告を頼みやすい
サイト制作	構成や修正方針の整理に向く	競合観点やテーマ調査に向く	資料作成や表整理に向く	開発中のコード補助に向く	HTML/CSS、内部リンク、公開前確認に向く
SEO作業	検索意図や補強方針を整理しやすい	関連テーマや背景調査に使いやすい	資料化には向くがHTML反映は別作業	コード上の補助には使える	既存ページ補強やSEOタグ維持確認に使う
Search Console作業	クエリの受け皿判断を整理しやすい	関連語や背景の確認に使える	レポート整理には使える	直接の分析よりコード補助寄り	既存ページへの反映、リンク整理、確認に使う
初心者向きか	最初の相談相手にしやすい	調べものの入口にしやすい	Office環境がある人には候補	コード編集に慣れている人向き	テンプレートとチェックリストがあると使いやすい
注意点	回答をそのまま実装しない	最新情報や正確性は確認する	会社や組織の利用ルールを確認する	Secretsや設定ファイルに注意する	本番反映前に人間が差分と公開URLを確認する

本番反映前に確認すること

AIの回答やコード変更をそのまま採用しない
認証情報や機密情報を入力しない
公開URL、差分、変更ファイルを確認する
SEOタグ、robots、sitemap、ads.txtを不用意に変えない
内部リンク、画像、スマホ表示を確認する
大きな変更は小さな作業に分ける

FAQ

ホームページ制作で最初に使うAIは？

構成が未整理ならChatGPT、調査が必要ならGemini、実装ならCodexが候補です。

Codexにデザインを丸投げしてよいですか？

丸投げせず、対象箇所、参考ブロック、触らないもの、確認項目を分けます。

画像作成もCodexですか？

画像作成は別ツール、Codexは配置や表示確認に使う方が自然です。

公開前に何を確認しますか？

HTTP、SEOタグ、内部リンク、画像、スマホ表示、sitemap、robots、ads.txtを確認します。

次に読むページ

Codexの基本Codex実務の入口 GPTとCodexの作業フロー整理、実装、確認の流れ ChatGPTで整理してCodexへ渡す指示文を作る流れ CodexでSEO対策SEO作業の入口 Search ConsoleとSEO制作反応を見て改善する流れ Codexテンプレート集作業別の指示文 Codexチェックリスト集作業後確認の入口人間確認AI作業後に見ること公開前後チェック公開URLと表示確認 CopilotとCodex比較Copilot文脈の整理 GeminiとCodex比較Gemini文脈の整理