ChatGPT SitesでWordPressのトップページを作成してみた｜初心者がAFFINGERに組み込むまでの全記録

導入文

「ブログのトップページを作り直したい。でも、Web制作会社へ依頼するほどの予算はかけにくい」

個人ブログや個人事業のサイトを運営していると、このように感じる人は多いのではないでしょうか。私もその一人でした。

そこで今回、ChatGPT Sitesを使ってブログのトップページを作成し、WordPressテーマのAFFINGERへ実際に組み込みました。

最初から強い期待があったわけではありません。普段からChatGPTのチャット機能は利用していたため、「HTMLを生成するところまではできるだろう」という程度の認識でした。

ところが、実際に使ってみると、特に驚いたのはコード生成そのものではなく、完成した画面を見ながら修正を重ねられることでした。スクリーンショットを送ると修正箇所を判断してくれ、公開ページのコードをもとにWordPressやAFFINGERの設定まで一緒に考えられました。

一方で、AIに任せればワンクリックで完成するほど単純ではありません。WordPressとAFFINGERの設定が干渉し、どちらの設定が画面に反映されているのか分からず、何度も試す場面もありました。

この記事では、AIやWeb制作を学び始めたばかりの私が、ChatGPT Sitesでトップページを作成した流れを、成功した点だけでなく失敗や苦労も含めて紹介します。

ChatGPT Sitesでトップページを作ろうと思った理由

個人事業のサイトに大きな制作費をかけにくかった

個人事業主や個人ブロガーにとって、Webサイトは重要な営業・情報発信の拠点です。しかし、トップページを専門業者へ依頼すると、当然ながら制作費がかかります。

知識がなければ有識者に依頼するのが一般的ですが、できることならコストを抑えたいというのが本音でした。

私自身もWeb制作の専門家ではありません。それでもChatGPT Sitesを使えば、非エンジニアでもトップページを形にできるのかを試してみたいと思いました。同じように「自分で作りたいが、何から始めればよいか分からない」という人の参考になれば、という思いもこの記事を書いた理由です。

ブログの役割を分かりやすく伝えたかった

通常のブログ記事が時系列で並ぶだけでは、初めて訪れた人に「このサイトで何を得られるのか」が伝わりにくくなります。

そこで、トップページを単なる新着記事一覧ではなく、教育・IT・学習支援といった発信内容や、相談サービスへの導線を整理するページにしたいと考えました。

ChatGPT Sitesを選んだ理由

会話しながらWebページを作れるから

ChatGPT Sitesを選んだ最大の理由は、専門的なコードを一から書かなくても、自然な言葉で希望を伝えられることです。

例えば、Web制作では次のような要望が出てきます。

• この部分の余白を少し広げたい
• スマートフォンでは縦並びにしたい
• ボタンの色をサイト全体に合わせたい
• この案内をもう少し目立たせたい
• WordPressへ入れたときに崩れる原因を知りたい

従来なら、該当するHTMLやCSSを探し、どこを書き換えるか判断する必要があります。ChatGPT Sitesでは、プレビューを見ながら言葉で修正を頼めるため、初心者でも試行錯誤を続けやすいと感じました。

制作前は「HTMLを作る機能」くらいに考えていた

正直に言うと、制作前の期待はそれほど高くありませんでした。

普段からChatGPTを使っていたため、HTMLやCSSを生成できること自体は想像できました。しかし、完成までの修正作業も含めて使いやすいかどうかは別問題だと思っていました。

実際に印象が変わったのは、最初のコードが出た後です。ChatGPT Sitesの強みは、一度で完璧なページを作ることよりも、人間が画面を確認し、AIと相談しながら直していく工程にあると感じました。

ChatGPT Sitesによるトップページ作成の流れ

1．トップページの目的と掲載内容を伝えた

最初に行ったのは、デザインの細かな指定ではなく、サイトの目的や掲載したい内容を伝えることでした。

トップページ作成では、いきなり「おしゃれなページを作って」と依頼するだけでは、見た目は整ってもサイトの目的に合わない可能性があります。

そこで、次のような情報を整理しながら制作を進めました。

• 誰に読んでもらいたいサイトなのか
• 教育・IT・学習支援の何を発信するのか
• どの記事やサービスへ誘導したいのか
• 初めて訪れた人に何を伝えたいのか
• WordPressへ最終的に組み込むこと
• 既存テーマとしてAFFINGERを使っていること

トップページの役割を先に決めたことで、単に要素を並べるのではなく、読者が上から順に内容を理解できる構成を考えやすくなりました。

2．ChatGPT Sitesで最初のレイアウトを生成した

必要な内容を伝えると、ChatGPT SitesがHTMLとCSSを含むトップページのたたき台を作成しました。

ここまでは、おおむね想像通りでした。生成AIにコードを書いてもらうだけなら、通常のチャット機能でも可能です。

しかし、実際の制作では、最初に出てきたデザインをそのまま採用したわけではありません。文章量、余白、色、各セクションの順番、スマートフォンでの見え方などを確認しながら、少しずつ修正しました。

3．プレビューを見ながら会話で修正した

今回、最も便利だと感じた工程です。

生成されたページをプレビューし、「この部分を直したい」と伝えると、該当箇所のHTMLやCSSを調整してくれました。コードの行番号やクラス名が分からなくても、画面上の位置や見た目を言葉で伝えられます。

例えば、修正の依頼は次のような形で行えます。

このセクションの余白をもう少し狭くしてください。

スマートフォンではボタンを横幅いっぱいにしてください。

この見出しだけ既存サイトの青系デザインに合わせてください。

一度で理想の状態にならなくても、プレビューを見て追加の指示を出せます。Web制作初心者にとって、「コードのどこを直すか」ではなく「画面をどう変えたいか」から相談できるのは大きな利点でした。

4．スクリーンショットを送り、表示の問題を確認してもらった

言葉だけでは説明しにくい場合は、表示画面のスクリーンショットを送りました。

HTMLの生成については想像通りでしたが、修正過程は想像よりもやりやすかった。

これが、実際に使って最も印象に残った点です。

「何となく余白がおかしい」「WordPressへ入れるとSitesのプレビューと見え方が違う」といった問題は、初心者には原因を言語化しにくいものです。スクリーンショットがあれば、ChatGPT側に画面全体のバランスや崩れている場所を見てもらえます。

もちろん、画像だけで原因を必ず特定できるわけではありません。それでも、状況を共有するための手段としては非常に便利でした。

5．完成したコードをWordPressへ組み込んだ

ChatGPT Sites上でレイアウトを整えた後、生成したHTMLとCSSをWordPressへ組み込みました。

大まかな流れは次のとおりです。

1. ChatGPT SitesでトップページのHTML・CSSを整える
2. WordPressにトップページ用の固定ページを用意する
3. 固定ページへHTMLを組み込む
4. 必要なCSSを追加する
5. WordPress側でその固定ページをトップページに指定する
6. PC・スマートフォンの両方で表示を確認する
7. AFFINGERの既存設定と干渉する部分を調整する

ChatGPT Sitesのプレビューで完成していても、WordPressへ貼り付ければ必ず同じ表示になるわけではありません。テーマ側のCSSやWordPressの共通設定が加わるため、ここからもう一段階の調整が必要でした。

WordPress・AFFINGERへの組み込みで苦労したこと

WordPressとAFFINGERのどちらが影響しているのか分かりにくかった

今回、最も苦労したのはここです。

WordPress本体にも表示設定があり、AFFINGERにも独自の設定があります。さらに、固定ページ内のHTMLと追加CSSも関係します。

そのため、表示に問題が起きたとき、原因の候補が一つではありませんでした。

• WordPress本体の設定
• AFFINGER管理の設定
• 固定ページ固有の設定
• 生成したHTML
• 追加したCSS
• キャッシュ
• PCとスマートフォンの表示差

特に困ったのは、「変更したのに反映されない」「どちらの設定が優先されているのか分からない」という場面です。

コードを見ただけで、WordPressとAFFINGERのどの設定が原因かを初心者が判断するのは簡単ではありません。結局、自分で一つずつ設定を変え、表示を確認し、元に戻すという切り分け作業も必要になりました。

ChatGPTだけでなく、ネット検索も併用した

AIに聞けば何でも即座に解決するわけではありません。

AFFINGERにはテーマ固有の設定名や仕様があります。また、導入しているバージョンやプラグインによっても管理画面が異なることがあります。

そこで、ChatGPTにコードや設定の候補を考えてもらいながら、WordPress・AFFINGERの設定についてはネット検索でも確認しました。

今回の経験から、AI Web制作では次の使い分けが現実的だと感じました。

• ChatGPT：原因の候補出し、コードの確認、修正案の作成
• スクリーンショット：現在の表示状態の共有
• 公開ページのコード：どの要素・CSSが効いているかの確認
• ネット検索：テーマ固有の設定名や最新仕様の確認
• 自分での操作：設定を一つずつ変えて原因を切り分ける

AIだけにすべて任せるのではなく、人間側も結果を確認しながら進める必要があります。

修正は一度にまとめず、一つずつ確認した

複数の設定を同時に変えると、どの変更によって直ったのか分からなくなります。

そのため、実際には次の流れを繰り返しました。

1. 修正したい箇所を一つ決める
2. スクリーンショットや症状をChatGPTへ伝える
3. 設定またはコードを一か所変更する
4. キャッシュの影響も考えながら表示を確認する
5. 問題がなければ次の修正へ進む

地道ですが、WordPress初心者ほどこの進め方が安全です。大幅に書き換えてから不具合が起きると、元に戻すのも難しくなります。

実際に使って感じたChatGPT Sitesのメリット

プレビューと会話を行き来しながら改善できる

最大のメリットは、作って終わりではなく、画面を見ながら改善できる点です。

最初から詳細なデザイン仕様書を用意できなくても、実物を見れば「ここは違う」と判断できます。ChatGPT Sitesは、その判断を次の修正につなげやすいサービスでした。

コードが分からなくても修正内容を伝えやすい

Web制作の知識が少なくても、「上から2番目の案内」「青いボタン」「スマホで横にはみ出している部分」のように、見た目を基準に相談できます。

コードを完全に理解していなくても制作を前へ進められるため、個人事業主やブロガーが最初の成果物を作る手段として相性がよいと感じました。

スクリーンショットとコードの両方から相談できる

画面の見た目はスクリーンショット、技術的な原因はHTMLやCSSというように、複数の情報を使って相談できました。

表示されているページのコードを読み取り、WordPressやAFFINGERのどの設定が関係しそうかを一緒に考えられたことで、作業はかなりスムーズになりました。

外注前のたたき台としても使える

最終的に専門家へ依頼する場合でも、ChatGPT Sitesでたたき台を作っておけば、希望する構成やデザインを具体的に共有できます。

「何となく見やすくしてほしい」と依頼するより、実物を見せながら相談できるため、認識のずれを減らせるでしょう。

ChatGPT Sitesを使って感じたデメリットと注意点

WordPressへ組み込んだ後の調整は必要

ChatGPT Sites内できれいに表示されても、WordPressテーマ上で同じように表示されるとは限りません。

既存テーマのCSS、プラグイン、固定ページの設定などが干渉するためです。特にAFFINGERのように設定項目が多いテーマでは、テーマ側の理解も多少必要になります。

AIの提案が必ず正しいとは限らない

AIが示した設定名が、自分の管理画面には存在しないこともあります。また、原因の候補が複数ある場合、最初の提案で直らないこともあります。

AIの回答をそのまま正解と考えず、バックアップを取り、一つずつ確認することが大切です。

細かな指示と確認に時間がかかる

「AIなら数分で完成する」と期待すると、実際の作業とのギャップを感じるかもしれません。

初稿の作成は速い一方、文章、導線、余白、スマートフォン表示、WordPressへの実装を整えるには、何度もやり取りが必要でした。

ただし、この時間はすべて無駄ではありません。自分のサイトの構造や、良いトップページに必要な要素を学ぶ時間にもなりました。

利用上限を考えた使い分けが必要

私はChatGPT Plusプランを利用していますが、Sites（WORK）にも利用上限があります。

文章の推敲や構成案までSitesで行うと、レイアウト調整へ使える量が減る可能性があります。今後は次のように使い分ける予定です。

• 通常のチャット：記事構成、掲載文、修正指示の整理
• ChatGPT Sites：トップページのレイアウト作成、プレビュー確認
• Codex：コードを直接扱う修正、複数ファイルにまたがる作業

すべてを一つの機能で行うより、工程ごとに適した機能を使うほうが効率的だと考えています。

今ならCodexも組み合わせて制作する

今回の制作では、表示の問題が起きるたびにスクリーンショットを送り、修正箇所を説明する場面がありました。

ChatGPT Sitesはプレビューを見ながらデザインを整える作業に向いています。一方、Codexであれば、サイトのファイルやコード全体を確認し、該当箇所を探して直接修正するような使い方ができます。

今後は、次のように役割を分けたいと考えています。

工程	向いている機能	具体的な使い方
構成・文章	通常のChatGPT	掲載内容、見出し、CTA文の作成
見た目の作成	ChatGPT Sites	レイアウト生成、プレビューを見ながら調整
コード修正	Codex	ファイルやコードを確認して該当箇所を修正
WordPress固有設定	ChatGPT＋ネット検索	原因候補の整理、公式情報やテーマ情報の確認
最終判断	自分	PC・スマホで表示と導線を確認

特に、同じような修正を何度も行う場合や、どのコードが影響しているか探す作業では、Codexを使うとさらにスムーズになる可能性があります。

ChatGPT Sitesでトップページを完成させた感想

完成したときに最も感じたのは、「非エンジニアでも、ここまで形にできるのか」という驚きでした。

もちろん、プロのWeb制作者と同じ技術を身につけたわけではありません。また、今回のページがすべての面で完璧だとも考えていません。

それでも、自分の目的に合わせたトップページを実際に作り、WordPressへ組み込んで公開できたことは、一つの明確な成果になりました。

私は現在、DMM 生成AI CAMPで生成AIを勉強しています。しかし、テキストを読むだけでは、実務で使える感覚は身につきにくいと感じています。

今回の制作を通して、生成AIを習得する近道は、実際に使って一つの成果物を完成させることだと分かりました。

知識をすべて身につけてから始める必要はありません。分からないことがあっても、調べ、試し、修正しながら完成させる。その過程そのものが学習になります。

ChatGPT Sitesで失敗しないために学んだこと

最初にサイトの目的を決める

デザインより先に、「誰に、何を伝え、どこへ案内するか」を整理します。目的が曖昧なまま作り始めると、見栄えは良くても成果につながらないトップページになりやすいためです。

最初の出力を完成品だと思わない

AIが最初に作ったものは、あくまでたたき台です。プレビューを見て違和感を言葉にし、修正を重ねる前提で使うほうがうまくいきます。

WordPressへ入れた後に必ず再確認する

ChatGPT Sitesのプレビューだけで判断せず、WordPressへ入れた後にPCとスマートフォンの両方を確認します。

特に見るべき点は次のとおりです。

• 文字や画像が画面からはみ出していないか
• ボタンが押しやすい大きさか
• リンク先が正しいか
• 余白が広すぎたり狭すぎたりしないか
• AFFINGER固有の見出しや装飾が重なっていないか
• キャッシュ削除後も同じ表示になるか

一度に複数の設定を変えない

不具合を直すときは、一か所ずつ変更して確認します。これだけで原因の切り分けがかなり楽になります。

AIとネット検索を併用する

AIは問題整理とコード作成に強い一方、テーマ固有の最新仕様は公式情報や利用者の解説のほうが確実な場合があります。どちらか一方に頼り切らないことが大切です。

ChatGPT Sitesをおすすめできる人・おすすめできない人

ChatGPT Sitesをおすすめできる人

• WordPressのトップページを低コストで作りたい個人事業主
• 自分のブログにオリジナルのトップページを用意したい人
• HTMLやCSSを一から書くのは難しいが、画面を見ながら修正したい人
• AI Web制作を実際の成果物で学びたい人
• 外注前に構成やデザインのたたき台を作りたい人
• 完璧を待たず、試して改善できる人

ChatGPT Sitesをおすすめしにくい人

• AIに一度指示するだけで、確認せず完成させたい人
• WordPressの設定や表示確認をまったく行いたくない人
• 大規模サイトや高度な機能を、専門家の確認なしで構築したい人
• デザインやコードの品質を厳密に保証する必要がある企業サイト担当者
• 不具合が出たときに設定を一つずつ確認する作業が難しい人

高度な要件や事業への影響が大きいサイトでは、最終的に専門家へ確認を依頼するほうが安全です。一方、個人サイトや小規模なトップページのたたき台には、非常に有力な選択肢だと感じました。

ChatGPT Sitesに関するよくある質問

ChatGPT SitesだけでWordPressのトップページを作れますか？

トップページのHTML・CSSやレイアウトのたたき台は作れます。ただし、WordPressへの組み込み、固定ページの設定、使用テーマとの干渉確認は別途必要です。ChatGPT Sitesだけですべてが自動的に完了するわけではありません。

HTMLやCSSの知識がなくても使えますか？

基本的なページ作成や見た目の修正は、自然な言葉で依頼できます。ただし、トラブル時に備えて、HTMLとCSSがそれぞれ何を担当しているかという最低限の知識があると進めやすくなります。

AFFINGERでもChatGPT Sitesのコードを使えますか？

今回、実際にAFFINGERへ組み込みました。ただし、AFFINGER独自のCSSや管理設定と干渉する可能性があります。プレビューどおりにならない場合は、WordPress側とAFFINGER側の両方を確認する必要があります。

スマートフォン表示にも対応できますか？

対応できますが、必ず実機またはブラウザの表示切り替えで確認してください。PCでは問題がなくても、スマートフォンでは文字、ボタン、画像、余白が崩れる場合があります。

ChatGPT SitesとCodexはどう使い分ければよいですか？

プレビューを見ながらページの見た目を作るならChatGPT Sites、既存コードを調査し、ファイル単位で修正するならCodexが向いています。構成や文章は通常のChatGPTで先に作ると、利用上限も有効に使えます。

まとめ｜AI Web制作は、まず一つ成果物を作ることから

今回は、ChatGPT Sitesを使ってWordPress・AFFINGERのトップページを作成しました。

実際に使って感じた要点は次のとおりです。

• HTML生成よりも、プレビューを見ながら修正できる点が便利だった
• スクリーンショットや公開ページのコードを使うと相談しやすかった
• WordPressとAFFINGERの設定が干渉し、原因の切り分けには苦労した
• AIだけでなく、ネット検索と自分での表示確認も必要だった
• 今後は文章を通常チャット、レイアウトをSites、コード修正をCodexと使い分けたい
• 生成AIはテキストを読むだけでなく、成果物を作ることで理解が深まる

私は、AIについて十分な知識を持つ専門家ではなく、現在も勉強中です。この記事も、あくまで非エンジニアの初学者がChatGPT Sitesを使ってトップページを作成した体験談です。

それでも、実際に使い、一つの成果物を完成させたことで、生成AIを仕事や情報発信にどう取り入れられるかが具体的に見えてきました。

これからは、仕事がなくなるという単純な話ではなく、できる仕事量が増え、人が判断すべきこととAIへ任せることを分ける時代になるのだと思います。

まずは一度使ってみる。そして、今抱えている作業の中にAIで改善できるものがないか考えてみる。小さくても一つ成果物を作ることが、生成AI活用の第一歩になります。