Webサイト制作は、企画、文章、見た目、確認、公開まで工程が多く、初めての人には始めにくい作業です。ChatGPT CodexとGPT-5.6 Terraを使うと、要望を会話で伝えながらHTMLを作り、表示を見て直す流れを進めやすくなります。本記事では、公式情報を踏まえ、目的整理から公開前の確認までを5段階で説明します。
最初に知っておきたい利用環境
ChatGPT Codexは、コードの作成、確認、出荷を支援するAIエージェントです。OpenAIの案内では、ChatGPTアカウントでサインインし、デスクトップアプリのCodexモード、CLI、IDE拡張、Webなどから利用を始められます。利用上限や使える機能はプランごとに異なるため、作業前に自分の画面で確認すると安心です。
～無料版ユーザーおよび ChatGPT Go ユーザーは GPT‑5.6 Terra を利用できます。Plus、Pro、Business、Enterprise ユーザーは、GPT‑5.6 のSol、Terra、Luna から選択し、それぞれに推論レベルを設定できます。～
OpenAI
作る前に目的と材料を言葉にする
良いサイトは、きれいな見た目より先に、誰に何を伝え、読んだ人に何をしてほしいかを決めています。たとえばA型雇用事業所のページなら、対象者、不安の解消、見学への導線を分けて考えます。最初の依頼で目的が曖昧だと、AIは内容を補おうとして、実際の方針から外れた文章を作ることがあります。
依頼文には、サイト名、想定する読者、ページの目的、必要な見出し、使いたい色、避けたい雰囲気、掲載してよい連絡先を入れます。写真やロゴ、既存の文章があれば、作業フォルダに置いたうえで使う範囲も指定します。決まっていない項目は、勝手に決めず候補を三つ出すよう依頼すると調整しやすくなります。
最初の依頼は小さく具体的にする
一度に全機能を求めるより、まずトップページだけを作り、次に問い合わせ導線、最後にスマートフォン表示という順序が向いています。画面を見ながら変更理由を一つずつ伝えると、修正の影響範囲を読み取りやすくなります。公開用の文章は、事実確認が済んだものだけを渡すことも大切です。依頼文には、次のような要素を短く並べると効果的です。
- 目的は見学予約の増加、読者は利用を検討する本人と家族、最優先の行動は相談フォームへの移動です。
- 明るく信頼できる印象にし、実在しない実績、料金、住所、連絡先、利用条件は書かないでください。
- PCとスマートフォンで確認し、HTMLを一つのファイルで出力してから、変更点も短く説明してください。
この書き方なら、企画の判断は人が持ち、実装と案出しはCodexに任せられます。完成形を言い当てる必要はありません。読者、目的、守る条件を共有し、表示結果への感想を返すことで、次の修正に必要な情報が自然にそろいます。
CodexとTerraにHTMLを作ってもらう
準備ができたら、Codexに作業フォルダと依頼文を渡し、「最初にファイルを確認し、作成方針を短く説明してからHTMLを作る」と頼みます。これにより、いきなり大きな変更が入るのを避けやすくなります。GPT-5.6 TerraはCodexで選べるモデルの一つですが、モデル名だけで完成度が決まるわけではありません。
出力には、HTML、画面幅に応じたレイアウト、見出し階層、画像の代替テキスト、問い合わせへのリンクを求めます。Webページが目的なら、ボタンの文言も具体化します。「詳しく見る」だけでなく「見学を申し込む」のように、次の行動が分かる表現にすると、読み手が迷いにくくなります。
役割を分けて頼むと品質を確認しやすい
一つの依頼で文章、デザイン、実装、確認を混ぜると、何を直すべきかが見えにくくなります。最初は構成案、次に文章、次にHTML、最後に表示確認という順に依頼します。OpenAIの公式発表は、GPT-5.6がツールを使う作業やコーディングを想定していることを示していますが、成果物は必ず人が確認してください。
| 段階 | Codexに頼むこと | 人が確認すること |
|---|---|---|
| 設計 | 構成案と必要な情報の洗い出し | 目的と掲載してよい事実 |
| 制作 | HTMLと表示の調整 | 文言とリンク先 |
| 確認 | 修正候補と検査項目の提示 | 実機表示と公開判断 |
Terraを使う場面でも、依頼の質と検証の手順は変わりません。モデルが作ったHTMLをそのまま公開するのではなく、実際の画面で読みやすさ、入力フォーム、リンク、権利関係を確認する流れを組み込むことで、短い時間でも実用的なページへ近づけられます。
PCとスマートフォンで見た目を整える
HTMLを受け取ったら、最初にPCの広い画面とスマートフォンの狭い画面を見ます。PCで整っていても、スマートフォンでは見出しが途中で割れたり、横スクロールが出たり、ボタンが押しにくくなったりします。特に日本語は文字ごとに改行されやすいため、意図した改行と自動改行を分けて指定する必要があります。
修正依頼では「変です」だけで終えず、画面の幅、起きている現象、望む状態を一文で伝えます。たとえば「幅375pxで見出しが一文字ずつ改行される。指定した二行だけで表示し、横にはみ出さないようにしてほしい」と書けば、確認する場所と修正の基準が明確になります。
見た目以外も一緒に点検する
ボタンは色だけで意味を伝えず、文言も行動が分かるものにします。画像には代替テキストを付け、本文と背景の色は読み分けられるようにします。アニメーションを使う場合は、動きを控えたい人への配慮も必要です。派手な表現は注目を集めますが、本文や相談導線を読みにくくしてはいけません。
ChatGPT Sitesでは、会話をしながらウェブサイトを作り、画面で確認して手直しすることができます。ただし、公開したURLは「誰でも見られる本番のページ」になります。大切な情報が漏れないよう、公開する前に今の状態を保存し、見せたい人だけが見られる設定になっているかを必ず確認してください。
公開前の確認と次の改善を続ける
公開前には、本文、見出し、リンク先、電話番号、メールアドレス、フォームの送信先を一つずつ確認します。実在しない情報、生成した人物の体験談、許可のない写真、無断転載した文章は掲載しません。特に福祉、医療、金融、法律などでは、制度や条件をAIの説明だけで決めず、公的機関や運営者の一次情報を確認します。
公開した後は、アクセス数だけでなく、見学の申し込み、問い合わせ、最後まで読まれたか、どの画面で見るのをやめてしまったかを確認して直していきます。最初から完璧を目指す必要はありません。「ボタンが見つけにくい」「スマホだと文章が長すぎる」といった具体的な問題点を見つけ、月に1回など、無理のないペースで少しずつ直していく方が長続きします。
実際に作ったサイトの例
筆者は実際にCodexとChatGPT 5.6 Terraを使用して、A型雇用事業所のホームページを作成しました。あくまでこのようなサイトが作成できるという例なので、記事で紹介したような具体的な指示、たとえば読者、目的などは指示に含めていません。また、無料版を使用するため指示の回数は最低限に留めています。そのため、修正のループはありません。
まずはどのようなサイトを作成したいか簡潔に指示を行います。ChatGPT 5.6ではデザイン能力が向上しているため、それを最大限活かしてサイト作成をしてほしいと入力しました。プロンプトはなるべく簡潔にしています。以下はプロンプトと、実際に作成されたページの一部です。
ここからデータを修正していきます。Webサイトをどのように変更してほしいかあまり浮かばなかった時は、思いついたことをそのまま入力します。今回はシンプルなサイトが生成されたため、なるべく派手にしてほしいとお願いしました。また、スマートフォンでの表示が崩れていたため、「スマホとPCの両方で綺麗に見えるようにしてください」と指示を行いました。
今回は無料版のためあまり文字数を確保できませんでしたが、有料版を使用するときはもっと具体的な指示を行ったほうが効果的です。出てきたデータは必ず確認します。確認したら修正したいところを指示して、最終目標に少しずつ近づけていきます。そうして修正したいところがなくなればサイトの完成です。
今回は簡単なWebサイトを依頼しましたが、OpenAIの公式発表では3Dを使ったデザインを動かすWebサイトを作成できています。Webサイトを作るほかにも、ゲーム作成などにも向いているかもしれません。今回の新しいモデルは、AIの進化を肌で感じる結果となりました。これからのAIの進化にも期待したいです。
まとめ
Webサイト制作は工程が多く複雑ですが、ChatGPTのCodexモードでGPT-5.6 Terraを活用すれば、対話を通じてスムーズにHTMLの作成や修正が進められます。制作の際は目的やターゲットを明確にし、小さな単位で具体的に依頼することが大切です。完成したページはAI任せにせず、表示や情報の正確性を人が確認し、公開後に改善を続けることが成功の鍵となります。
あとがき
AIによる開発支援環境を日常に取り入れることで、専門知識がなくても自分のアイデアを即座に形にし、発信力を高めることができます。例えば、CodexでTerraを動作させ、事業所の紹介ページを自身の手でタイムリーに改修するような、外注に頼らない自立的な広報ライフが実現します。
まずは明日からできる一歩として、パソコンで空のフォルダを用意してCodexモードに同期させ、「このフォルダ内にindex.htmlを新規作成して、シンプルな紹介ページのコードを書いて」と指示を出してみましょう。
コメント