ChatGPTでWebサイトを作る方法｜ホームページ・LP制作を初心者向けに解説

「自分のホームページを作ってみたいけれど、HTMLやCSSが分からない」

「商品やサービスを紹介するランディングページを作りたい」

「Web制作に興味はあるけれど、何から始めればよいか分からない」

このような人に役立つのが、ChatGPTを使ったWebサイト制作です。

ChatGPTに作りたいサイトの目的やデザインを伝えると、ページ構成や文章だけでなく、HTML・CSSなどのコードも作成してもらえます。

プログラミング未経験者でも、ChatGPTに質問しながら進めることで、シンプルなホームページやランディングページを形にすることは可能です。

ただし、ChatGPTへ「ホームページを作って」と依頼するだけで、すべてが自動的に完成するわけではありません。

Webサイトを完成させるには、次のような作業が必要です。

サイトの目的を決める
掲載する情報を整理する
ページ構成を考える
HTML・CSSを生成する
ブラウザで表示を確認する
デザインや文章を修正する
スマートフォン表示を確認する
WordPressやサーバーで公開する

この記事では、ChatGPTを使ってWebサイトを作る流れを、初心者向けに順番に解説します。

ホームページやLPの作り方だけでなく、コードの保存方法、レスポンシブ対応、デザイン改善、WordPressでの活用方法、公開前の注意点まで紹介します。

専門用語もできるだけ分かりやすく説明するため、Web制作を初めて行う人も一つずつ進めてみてください。

この記事でわかること

ChatGPTでWebサイトを作れる仕組み
ChatGPTがWeb制作でできること・できないこと
HTML・CSS・JavaScriptの基本的な役割
ChatGPTでホームページを作る手順
ChatGPTでLPを作る方法
Webサイトをスマートフォン対応にする方法
ChatGPTにデザインやコードを修正してもらう方法
WordPressでChatGPTを活用する方法
Webサイト制作で注意したいポイント
そのまま使えるWebサイト制作プロンプト

こんな人におすすめ

自分や店舗のホームページを作りたい人
商品やサービスを紹介するLPを作りたい人
HTMLやCSSを使ったことがない人
Web制作の副業に興味がある人
WordPressの固定ページを作りたい人
既存サイトのデザインや文章を改善したい人
ChatGPTを仕事に活用したい人

ChatGPTでWebサイトは作れる？
1. ChatGPTがWebサイト制作でできること
2. ChatGPTだけでは完了しないこと
3. 初心者がChatGPTで作りやすいWebサイト
4. 初心者には難しいWebサイト
Webサイト制作で使うHTML・CSS・JavaScriptの役割
1. HTMLはページの内容と構造を作る
2. CSSは色・余白・配置を整える
3. JavaScriptはメニューやボタンに動きを加える
4. 初心者はHTMLとCSSから始めればよい
ChatGPTでWebサイトを作る前に準備すること
1. サイトの目的を決める
2. 誰に見てもらうか決める
3. 必要なページと情報を整理する
4. 参考にしたいデザインを決める
5. 公開方法を先に決める
  1. HTMLファイルをサーバーへ公開する
  2. WordPressで公開する
6. ChatGPTへ伝える情報をまとめる
ChatGPTでホームページを作る手順
1. STEP1 サイトの構成を作ってもらう
2. STEP2 各セクションの文章を作ってもらう
3. STEP3 デザインの方向性を決める
4. STEP4 HTML・CSSを生成してもらう
5. STEP5 コードをファイルとして保存する
6. STEP6 ブラウザで表示を確認する
7. STEP7 修正したい部分をChatGPTへ伝える
8. STEP8 スマートフォン表示を確認する
9. STEP9 公開前チェックを行う
10. STEP10 サーバーまたはWordPressで公開する
  1. HTMLファイルをサーバーへ公開する場合
  2. WordPressで公開する場合
初心者向けのWebサイトコード実例
1. 完成するページのイメージ
2. 最初はHTMLだけで表示できる形にする
3. コードのどこを書き換えればよいか
4. 初心者が理解しておきたいコードの見方
HTML・CSS・JavaScriptを分けて管理する方法
1. HTMLとCSSを分けるメリット
2. HTMLからCSSを読み込む方法
3. HTMLからJavaScriptを読み込む方法
4. ChatGPTに3ファイルへ分割してもらうプロンプト
5. CSSが反映されないときの確認項目
6. 画像を表示する方法
7. 画像ファイル名で注意すること
8. 画像が表示されないときの確認項目
ChatGPTでホームページを作る基本手順の振り返り
ChatGPTでLPを作る方法
1. この章でできるようになること
2. LPと一般的なホームページの違い
3. LPを作る前に決める情報
4. ChatGPTにLP構成を作ってもらう
5. LPの文章を作ってもらう
6. LPのHTML・CSSを作ってもらう
7. CTAを分かりやすく配置する
8. 誇張表現や根拠のない表現を確認する
レスポンシブデザインでスマートフォンに対応する方法
1. レスポンシブデザインとは
2. スマホ対応を最初のプロンプトに含める
3. メディアクエリを追加してもらう
4. PCでは横並び、スマホでは縦並びにする
5. 文字やボタンの大きさを確認する
6. 画像が画面からはみ出さないようにする
7. 表はスマートフォンで切れやすい
8. スマートフォン表示の崩れをChatGPTに直してもらう
9. レスポンシブ対応後に確認する項目
ChatGPTでWebデザインを改善する方法
1. 曖昧な指示ではなく具体的に伝える
2. 色を変更して統一感を出す
3. 余白を整えて読みやすくする
4. 文字を読みやすくする
5. ボタンを目立たせる
6. 参考サイトに近い雰囲気を伝える
ChatGPTが生成したコードを修正する方法
1. エラー相談で伝えるべき情報
2. コード全体ではなく必要な部分だけ直してもらう
3. HTML・CSS・JavaScriptを混ぜずに提示してもらう
4. 一度に複数の修正を依頼しすぎない
5. エラーメッセージをそのまま伝える
6. 修正後のコードを必ず確認する
ChatGPTをWordPressのWebサイト制作に活用する方法
1. この章でできるようになること
2. WordPressでホームページを作る主な方法
3. WordPress固定ページの構成を作ってもらう
4. カスタムHTML用コードを作ってもらう
5. 追加CSSを使うときの注意点
6. WordPressテーマとCSSが競合する場合
7. WordPressではお問い合わせフォームを別に用意する
8. ChatGPTにWordPress操作を相談するときのポイント
ChatGPTで作ったWebサイトを公開する方法
1. この章でできるようになること
2. レンタルサーバーへアップロードする
3. ファイルをアップロードするときの注意点
4. 独自ドメインとサーバーの役割
5. WordPressで公開する
6. 静的サイト向けの公開サービスを利用する
7. 公開前にバックアップを作る
8. 公開後に確認する項目
完成後は小さな改善を続けよう
ChatGPTでWebサイトを作るときの注意点
1. ChatGPTが作るコードは必ず正しいとは限らない
2. 個人情報や機密情報を入力しない
3. 著作権や商標に注意する
4. 存在しない実績や口コミを掲載しない
5. 法律上必要な表示を確認する
6. フォームの安全性を確認する
7. 決済や会員機能を安易に自作しない
8. SEOはコードを作っただけでは完了しない
9. 表示速度にも注意する
10. アクセシビリティを確認する
ChatGPTでのWebサイト制作が向いている人
1. 小規模なWebサイトを作りたい人
2. Web制作の基礎を学びたい人
3. 試作品を短時間で作りたい人
4. 文章作成とコード制作をまとめて進めたい人
ChatGPTでのWebサイト制作が向いていない人
1. 複雑なシステムを作りたい人
2. 完全に任せて公開したい人
3. 独自性の高いデザインを求める人
4. 保守や更新を行えない人
ChatGPTとWeb制作サービスを使い分ける
ChatGPTを使ったWebサイト制作のよくある質問
1. ChatGPTだけでWebサイトは作れますか？
2. Web制作未経験でも使えますか？
3. 無料版のChatGPTでもコードを書けますか？
4. ChatGPTが作ったコードは商用利用できますか？
5. ChatGPTが作ったコードには著作権がありますか？
6. ChatGPTのコードが動かないときはどうすればよいですか？
7. エラーメッセージが英語でも大丈夫ですか？
8. 長いコードは一度に貼り付けてもよいですか？
9. スクリーンショットだけでも修正できますか？
10. ChatGPTにコードを書き直してもらえば安全ですか？
11. Pythonコードはどこで実行できますか？
12. HTML・CSS・JavaScriptのどれから学ぶべきですか？
13. ChatGPTにWebアプリも作ってもらえますか？
14. ChatGPTでスマートフォンアプリも作れますか？
15. ChatGPTにすべてのコードを書かせても勉強になりますか？
ChatGPTでWebサイトを作る方法のまとめ
作成したWebサイトを公開してみましょう

ChatGPTでWebサイトは作れる？

結論からいうと、ChatGPTを使ってWebサイトを作ることは可能です。

ChatGPTは、Webサイトの構成を考えたり、ページに掲載する文章を作ったり、HTMLやCSSのコードを生成したりできます。

生成されたコードをファイルとして保存し、ブラウザで開けば、実際のWebページとして表示できます。

現在のChatGPTでは、コードが通常の文章とは分けてコードブロックに表示されます。対応しているコードでは、コピー、編集、プレビューなどの操作を利用できる場合もあります。

ただし、利用できる操作は、使用しているプラン、端末、モデル、ワークスペース設定、機能の提供状況などによって異なります。

また、ChatGPTが得意なのは、あくまでもWebサイト制作を支援することです。

作成したコードが必ず正しく動くとは限らないため、表示確認や修正は利用者自身が行う必要があります。

ChatGPTがWebサイト制作でできること

ChatGPTは、Webサイト制作のさまざまな工程で活用できます。

主な活用方法は次のとおりです。

作業	ChatGPTに依頼できること
企画	サイトの目的やターゲットの整理
構成	必要なページやセクションの提案
文章	見出し、紹介文、ボタン文言の作成
HTML	ページの構造を作るコードの生成
CSS	色、余白、配置などを整えるコードの生成
JavaScript	メニューやボタンに動きを加えるコードの生成
デザイン	配色、レイアウト、フォントの提案
スマホ対応	レスポンシブデザイン用コードの追加
修正	表示崩れやエラーの原因調査
改善	文章、導線、ボタン、デザインの改善提案

たとえば、次のように依頼できます。

個人で運営するオンライン英会話サービスの
1ページ型ホームページを作りたいです。

ターゲットは、英語を学び直したい30〜50代の会社員です。

必要なセクションを順番に提案してください。

このように、サイトの種類、ターゲット、目的を伝えると、ChatGPTから必要な構成案を出してもらえます。

構成が決まったら、各セクションの文章やHTML・CSSも順番に作成できます。

ChatGPTだけでは完了しないこと

ChatGPTはWebサイト制作を幅広く支援できますが、すべての作業を自動で完了できるわけではありません。

基本的には、次の作業を利用者自身で行います。

ドメインを取得する
レンタルサーバーを契約する
WordPressを用意する
作成したファイルをサーバーへアップロードする
Webサイトを公開する
スマートフォンやパソコンで表示を確認する
リンクやボタンの動作を確認する
文章や画像の著作権を確認する
セキュリティ対策を行う
公開後の更新や管理を行う

ChatGPTにHTML・CSSを作ってもらっただけでは、インターネット上にホームページが公開されるわけではありません。

Webサイトを公開するには、作成したデータをWordPressへ入力したり、サーバーへアップロードしたりする作業が必要です。

また、ChatGPTが作成したコードには、記述ミスや不要な処理が含まれることがあります。

コードをそのまま公開するのではなく、必ずブラウザで表示や動作を確認しましょう。

初心者がChatGPTで作りやすいWebサイト

ChatGPTを使ったWebサイト制作では、最初から複雑なサイトを作るよりも、ページ数や機能が少ないサイトから始めるのがおすすめです。

初心者でも比較的作りやすいのは、次のようなWebサイトです。

1ページ型のホームページ

会社、店舗、個人事業、サークルなどの情報を、1ページにまとめたWebサイトです。

ページを分けずに、上から順番に情報を掲載します。

たとえば、次のような構成です。

メインメッセージ
サービス紹介
特徴
利用の流れ
料金
よくある質問
お問い合わせ案内

ページ数が少なく管理しやすいため、初めてのWeb制作に向いています。

ランディングページ

ランディングページは、特定の商品やサービスを紹介し、購入や申し込みにつなげるためのページです。

一般的には「LP」と呼ばれます。

商品を紹介するだけでなく、読者の悩み、商品の特徴、利用するメリット、料金、申し込みボタンなどを順番に配置します。

ChatGPTは、LPの構成や紹介文、ボタンの文言を考える作業にも活用できます。

サービス紹介ページ

自分が提供しているサービスの内容を、分かりやすく紹介するページです。

たとえば、次のようなサービスに活用できます。

Webライティング
動画編集
オンライン講座
コンサルティング
ハンドメイド制作
家事代行
英会話レッスン

サービスの特徴や料金、利用の流れを整理することで、読者が内容を理解しやすくなります。

ポートフォリオサイト

自分の作品や実績を紹介するWebサイトです。

Webデザイナー、ライター、イラストレーター、動画編集者などが、自分のスキルを伝えるために利用できます。

ChatGPTには、自己紹介文、実績の説明、サービス案内、問い合わせへの誘導文などを作成してもらえます。

店舗案内ページ

飲食店、美容室、教室、サロンなどの情報を掲載するページです。

次のような内容を整理できます。

店舗の特徴
メニュー
営業時間
所在地
電話番号
アクセス方法
予約方法

掲載したい情報をChatGPTへ渡せば、読みやすい順番に整理してもらえます。

初心者には難しいWebサイト

ChatGPTを使えばさまざまなコードを生成できますが、複雑な機能を持つWebサイトを初心者が一人で完成させるのは簡単ではありません。

特に、次のようなサイトには高度な知識が必要です。

会員登録やログイン機能があるサイト
クレジットカード決済を行うサイト
商品を販売する大規模なECサイト
予約情報を管理するサイト
個人情報をデータベースへ保存するサイト
利用者が文章や画像を投稿できるサイト
複雑な検索機能を持つサイト
複数の利用者が同時に操作するWebアプリ

これらのサイトでは、画面のデザインだけでなく、データベース、サーバー、セキュリティ、個人情報保護などの知識も必要です。

ChatGPTがコードを生成できたとしても、安全に運営できるとは限りません。

決済、会員管理、個人情報の保存などを扱う場合は、専門知識を持つ制作者や開発会社への相談を検討しましょう。

Webサイト制作で使うHTML・CSS・JavaScriptの役割

ChatGPTでWebサイトを作るときは、主にHTML、CSS、JavaScriptという3つの言語を使用します。

言語と聞くと難しく感じるかもしれませんが、最初から細かい文法をすべて覚える必要はありません。

まずは、それぞれが何を担当しているのか理解しておきましょう。

HTMLはページの内容と構造を作る

HTMLは、Webページの内容と構造を作るための言語です。

たとえば、次のような要素を配置します。

見出し
文章
画像
リンク
ボタン
表
箇条書き
お問い合わせ項目

HTMLは、Webサイトの「骨組み」にあたります。

たとえば、次のHTMLは、見出しと文章を表示するコードです。

<h1>初心者向けオンライン英会話</h1>
<p>自宅で気軽に英語を学べるオンラインレッスンです。</p>

<h1>と</h1>で囲まれた部分が大きな見出しとして表示されます。

<p>と</p>で囲まれた部分は通常の文章です。

文字の内容を変えたい場合は、タグで囲まれた日本語部分を書き換えます。

<h1>ここにサイトのメインタイトルを入れる</h1>
<p>ここにサービスの説明文を入れる</p>

初心者は、最初からすべてのタグを覚えるのではなく、ChatGPTが作ったコードのどこに文章が書かれているのかを確認するところから始めましょう。

CSSは色・余白・配置を整える

CSSは、Webページの見た目を整えるための言語です。

HTMLだけでも文章や画像は表示できますが、そのままでは簡素な見た目になります。

CSSを使うと、次のようなデザインを設定できます。

文字の色
背景色
文字サイズ
ボタンの形
セクション間の余白
画像の大きさ
横並びや縦並び
枠線や影
パソコンとスマートフォンでの表示変更

たとえば、次のCSSでは、見出しを青色にします。

h1 {
  color: blue;
}

背景を薄いグレーにしたい場合は、次のように指定します。

body {
  background-color: #f5f5f5;
}

CSSでは色を英単語で指定することもできますが、実際のWeb制作では、#ffffffや#2563ebなどのカラーコードを使うことが一般的です。

ChatGPTに「青と白を基調にした、信頼感のあるデザインにしてください」と伝えれば、条件に合ったCSSを作成してもらえます。

JavaScriptはメニューやボタンに動きを加える

JavaScriptは、Webページに動きや機能を追加するための言語です。

たとえば、次のような場面で使われます。

ボタンを押したときに表示を変える
スマートフォン用メニューを開閉する
よくある質問の回答を開閉する
入力内容を確認する
画像を切り替える
ページをスクロールさせる

HTMLとCSSだけでもシンプルなホームページは作れます。

そのため、最初からJavaScriptを多く使う必要はありません。

必要な動きがあるときだけ、ChatGPTに追加してもらう方法がおすすめです。

初心者はHTMLとCSSから始めればよい

初めてWebサイトを作る場合は、HTMLとCSSを使ったシンプルなページから始めましょう。

最初にJavaScriptや複雑な機能を加えると、エラーが起きたときに原因を見つけにくくなります。

まずは、次の状態を目標にしてください。

見出しや文章が表示される
画像が表示される
色や余白が整っている
リンクやボタンが正しく動く
スマートフォンでも読みやすい

この基本が完成してから、必要に応じてメニューの開閉やアニメーションなどを追加します。

ChatGPTをまだ使い始めたばかりの方は、基本的な使い方を先に理解しておくと、この記事の内容もスムーズに実践できます。

→ ChatGPTの始め方｜アカウント登録から初めての使い方まで完全ガイド

ChatGPTでWebサイトを作る前に準備すること

ChatGPTを使えば、すぐにコードを作ってもらえます。

しかし、目的や掲載内容を決めないまま依頼すると、誰に何を伝えるサイトなのか分からない、使いにくいWebページになりやすくなります。

コードを作る前に、Webサイトの目的やターゲットを整理しておきましょう。

サイトの目的を決める

最初に「何のためにWebサイトを作るのか」を決めます。

たとえば、同じホームページでも、目的によって必要な内容は変わります。

サイトの目的	必要になりやすい内容
店舗を紹介する	営業時間、所在地、メニュー、予約方法
サービスを販売する	特徴、料金、実績、申し込み方法
作品を紹介する	プロフィール、作品一覧、制作実績
問い合わせを増やす	サービス内容、信頼材料、連絡方法
商品を紹介する	商品の特徴、利用メリット、購入方法
イベントを案内する	開催日時、会場、内容、参加方法

目的が決まっていないと、ChatGPTも必要なページや文章を判断できません。

最初のプロンプトには、次のように目的を明記します。

個人で運営している英会話教室のホームページを作ります。

Webサイトの目的は、教室の特徴を伝えて、
無料体験レッスンへの申し込みを増やすことです。

「ホームページを作ってください」とだけ伝えるよりも、目的を加えることで、必要な構成やボタンを提案してもらいやすくなります。

誰に見てもらうか決める

次に、Webサイトを見てもらいたい相手を決めます。

この相手を「ターゲット」と呼びます。

たとえば、次の2つでは、適切な文章やデザインが異なります。

小学生向けの英会話教室
40代会社員向けのビジネス英会話

小学生向けであれば、明るい色や親しみやすい表現が適しています。

会社員向けであれば、落ち着いた配色や信頼感のある文章が適しているでしょう。

ターゲットを伝えるときは、次の項目を分かる範囲で整理します。

年齢
職業
性別
興味
悩み
Webサイトを訪れる目的
商品やサービスを選ぶときに重視すること

すべてを細かく決める必要はありません。

たとえば、次の程度でも十分です。

ターゲットは、英語を学び直したい30〜50代の会社員です。

仕事が忙しく、決まった時間に教室へ通うのが難しい人を想定しています。

この情報があると、ChatGPTは「自宅で受講できる」「時間を選びやすい」といった内容を提案しやすくなります。

必要なページと情報を整理する

Webサイトの目的とターゲットを決めたら、掲載する情報を整理します。

1ページ型のホームページであれば、次のような情報が必要です。

サイト名
メインメッセージ
サービスの説明
サービスの特徴
選ばれる理由
料金
利用の流れ
運営者情報
よくある質問
お問い合わせ方法

複数ページのWebサイトでは、次のようにページを分けることもできます。

トップページ
├── サービス紹介
├── 料金
├── 運営者情報
├── よくある質問
└── お問い合わせ

初めて作る場合は、すべてを1ページにまとめても問題ありません。

最初から多くのページを作ると、文章やデザインを管理する作業も増えます。

まずは必要最低限の情報で公開し、後からページを追加する方法もあります。

参考にしたいデザインを決める

ChatGPTはデザインの提案もできますが、「おしゃれなサイトにしてください」だけでは、希望と異なるデザインになる可能性があります。

次のような条件を具体的に伝えましょう。

使用したい色
サイトの雰囲気
文字の印象
写真を多く使うか
余白を広くするか
角を丸くするか
ボタンを目立たせるか
明るいデザインか落ち着いたデザインか

たとえば、次のように指定します。

白と青を基調にした、清潔感と信頼感のあるデザインにしてください。

余白を広めに取り、初心者でも読みやすい大きな文字を使用してください。

ボタンには緑色を使用し、無料体験への導線が分かりやすいデザインにしてください。

色を厳密に指定したい場合は、カラーコードも伝えられます。

メインカラー：#2563EB
アクセントカラー：#16A34A
背景色：#F8FAFC
文字色：#1F2937

カラーコードが分からない場合は、「信頼感のある青」「優しい緑」「高級感のある黒と金」のような言葉でも指定できます。

公開方法を先に決める

Webサイトの公開方法は、大きく分けて2つあります。

HTMLファイルをサーバーへ公開する

ChatGPTに作ってもらったHTML、CSS、JavaScriptなどのファイルをレンタルサーバーへアップロードする方法です。

コードをそのまま使いやすい反面、ページの更新にもファイル編集が必要です。

次のような人に向いています。

HTML・CSSを学びながら作りたい
シンプルな1ページサイトを作りたい
WordPressを使わずに公開したい
ファイルを自分で管理したい

WordPressで公開する

WordPressの固定ページやブロックエディターを使って、Webサイトを作る方法です。

文章、画像、ボタンなどを管理画面から編集できるため、公開後も更新しやすいのが特徴です。

次のような人に向いています。

すでにWordPressを使っている
ブログとホームページを一緒に運営したい
コード編集をできるだけ減らしたい
管理画面から文章や画像を更新したい

WordPressには、HTMLを直接入力できるカスタムHTMLブロックも用意されています。また、テーマや構成によっては、管理画面から追加CSSを設定できます。

ただし、ChatGPTが生成したページ全体のコードを、そのままWordPressへ貼り付ければ必ず同じ表示になるとは限りません。

WordPressテーマのCSSやプラグインの設定が影響し、デザインが崩れる場合があります。

WordPressで使用する場合は、最初から次のように伝えましょう。

WordPressの固定ページで使用します。

ブロックエディターとカスタムHTMLブロックを使う前提で、
できるだけ既存テーマと競合しにくいコードを作ってください。

公開方法を先に決めておくことで、作成後にコードを大きく作り直す可能性を減らせます。

ChatGPTへ伝える情報をまとめる

ここまで決めた内容を「制作情報シート」としてまとめます。

次のテンプレートをコピーし、分かる範囲で記入してください。

【Webサイト制作情報】

サイトの種類：
例：1ページ型ホームページ、LP、ポートフォリオ

サイトの目的：
例：無料体験レッスンへの申し込みを増やす

ターゲット：
例：英語を学び直したい30〜50代の会社員

商品・サービス：
例：オンライン英会話レッスン

掲載したい内容：
例：サービス紹介、特徴、料金、利用の流れ、FAQ、お問い合わせ

デザインの雰囲気：
例：清潔感、信頼感、初心者向け

使用したい色：
例：白、青、緑

メインのボタン：
例：無料体験レッスンに申し込む

公開方法：
例：HTMLファイル、WordPress固定ページ

スマートフォン対応：
必要

参考サイトやデザイン：
例：余白が広く、文字が読みやすいシンプルなサイト

その他の希望：
例：難しいアニメーションは使わない

この情報を先に整理する理由は、ChatGPTから一貫性のある回答を得るためです。

会話の途中でターゲットやデザインが何度も変わると、前に作成した文章やコードとの整合性が取れなくなることがあります。

最初に制作条件をまとめ、変更したときは最新版の条件をもう一度提示しましょう。

ChatGPTへの指示を分かりやすく整理する基本は、以下の記事でも詳しく解説しています。

関連記事：【保存版】ChatGPTプロンプト50選｜コピペで使える実例付きテンプレート集【2026年版】

ChatGPTでホームページを作る手順

ここからは、ChatGPTを使って1ページ型のホームページを作る流れを、10ステップで解説します。

今回の例では、オンライン英会話サービスのホームページを想定します。

作成するページには、次の内容を入れます。

ヘッダー
メインメッセージ
サービス紹介
選ばれる理由
利用の流れ
料金案内
よくある質問
お問い合わせ案内
フッター

最初から完成したコードを一度に作らせるのではなく、構成、文章、デザイン、コードの順番で進めるのがポイントです。

一つずつ確認しながら進めることで、修正箇所が分かりやすくなり、初心者でも作業を続けやすくなります。

STEP1 サイトの構成を作ってもらう

最初に、ホームページへ掲載する内容と順番をChatGPTに考えてもらいます。

この段階では、まだコードを作成する必要はありません。

先に構成を決める理由は、伝えるべき情報の抜けや重複を防ぐためです。

次のようなプロンプトを使用します。

オンライン英会話サービスの1ページ型ホームページを作ります。

ターゲットは、英語を学び直したい30〜50代の会社員です。

Webサイトの目的は、無料体験レッスンへの申し込みを増やすことです。

初心者にもサービス内容が伝わりやすく、
申し込みまで自然に進めるページ構成を提案してください。

各セクションについて、
・セクション名
・掲載する内容
・この位置に配置する理由
を説明してください。

このプロンプトでは、単に「構成を作って」と依頼するのではなく、ターゲットと目的を明確にしています。

さらに、「この位置に配置する理由」も求めることで、なぜその順番が適切なのかを理解できます。

ChatGPTからは、次のような構成が提案される可能性があります。

ヘッダー
ファーストビュー
よくある悩み
サービスの特徴
選ばれる理由
レッスンの流れ
料金
利用者の声
よくある質問
無料体験への案内
フッター

構成案が出たら、不要なセクションを削除し、必要な項目を追加します。

たとえば、利用者の声をまだ集めていない場合は、無理に掲載する必要はありません。

実在しない利用者の声や実績をChatGPTに作らせて、そのまま掲載するのは避けましょう。

STEP2 各セクションの文章を作ってもらう

構成が決まったら、各セクションの文章を作成します。

すべての文章を一度に作らせることもできますが、長い文章では内容が重複したり、細かい条件が反映されなかったりすることがあります。

初心者は、セクションごとに作成する方法がおすすめです。

まずは、ページの最上部に表示するファーストビューの文章を依頼します。

オンライン英会話サービスのホームページに掲載する
ファーストビューの文章を作成してください。

ターゲットは、英語を学び直したい30〜50代の会社員です。

サービスの特徴は次のとおりです。

・オンラインで受講できる
・朝6時から夜11時まで予約できる
・初心者向けの個別レッスン
・無料体験レッスンがある

次の3つを作成してください。

・メイン見出し
・補足説明文
・申し込みボタンの文言

大げさな表現は避け、
初心者にも分かりやすい文章にしてください。

このプロンプトでは、ChatGPTに自由に考えさせるのではなく、実際のサービス内容を渡しています。

事実と異なる文章を作らせないためにも、料金、営業時間、サービス内容などは正確な情報を入力しましょう。

出力された文章は、そのまま採用する必要はありません。

次のように追加で修正を依頼できます。

メイン見出しを、もう少し短くしてください。

「忙しい会社員でも続けやすい」という特徴が
一目で伝わる文章に修正してください。

また、サービス紹介や利用の流れについても、同じようにセクションごとに作成します。

オンライン英会話サービスの「利用の流れ」を作成してください。

次の4ステップで説明します。

1. 無料体験へ申し込む
2. 希望日時を選ぶ
3. オンラインで体験レッスンを受ける
4. 継続するか決める

各ステップに、
・短い見出し
・50文字程度の説明
を付けてください。

文章を作成するときは、ChatGPTにすべてを任せるのではなく、元となる事実を渡すことが重要です。

STEP3 デザインの方向性を決める

文章が完成したら、ホームページ全体のデザインを決めます。

この段階では、次の項目を整理します。

メインカラー
アクセントカラー
背景色
文字色
文字の大きさ
ボタンの形
セクションの余白
画像の使用方法
サイト全体の雰囲気

デザインの方向性が決まっていないと、ChatGPTが作るCSSも統一感のない内容になりやすくなります。

次のように依頼します。

オンライン英会話サービスのホームページに合う
デザインルールを提案してください。

ターゲットは30〜50代の会社員です。

次の条件を満たしてください。

・信頼感がある
・初心者でも読みやすい
・白と青を基調にする
・申し込みボタンは緑色にする
・余白を広めにする
・派手なアニメーションは使わない
・スマートフォンでも見やすくする

次の項目を具体的に提案してください。

・メインカラー
・アクセントカラー
・背景色
・文字色
・見出しの大きさ
・本文の大きさ
・ボタンのデザイン
・セクション間の余白

出力されたカラーコードや文字サイズは、後でHTML・CSSを作成するときに使用します。

たとえば、次のようなデザインルールにまとめます。

メインカラー：#2563EB
アクセントカラー：#16A34A
背景色：#F8FAFC
文字色：#1F2937
見出し：太字で大きく表示
本文：16px以上
ボタン：角を少し丸くする
セクション間の余白：広め

この情報を保存しておくと、後から別のページを追加するときも同じデザインを再現しやすくなります。

STEP4 HTML・CSSを生成してもらう

構成、文章、デザインが決まったら、ChatGPTにHTML・CSSを作成してもらいます。

初心者が最初に試す場合は、HTMLとCSSを一つのファイルにまとめた形式がおすすめです。

一つのファイルだけで表示確認できるため、CSSの接続方法が分からなくても始められます。

次のように依頼します。

これまで決めた構成、文章、デザインルールを使って、
1ページ型ホームページのHTMLを作成してください。

初心者が確認しやすいように、
CSSはHTML内の<style>タグにまとめてください。

次の条件を守ってください。

・1つのindex.htmlファイルだけで表示できる
・スマートフォン対応にする
・難しいJavaScriptは使わない
・各セクションにコメントを入れる
・後から文章を書き換えやすい構造にする
・画像がなくても不自然に見えないデザインにする
・ボタンのリンク先は仮に「#contact」とする

コードの後に、
どの部分を書き換えればよいか初心者向けに説明してください。

「CSSはHTML内の<style>タグにまとめる」と指定することで、1ファイルで表示できるコードを作成できます。

また、「各セクションにコメントを入れる」と指定しておくと、コード内に次のような目印が入ります。

<!-- ファーストビュー -->
<section class="hero">
  ...
</section>

<!-- サービス紹介 -->
<section class="service">
  ...
</section>

コメントはWebページ上には表示されません。

コードを読む人のための目印として使われます。

どこがサービス紹介で、どこが料金表なのかを確認しやすくなるため、初心者には特に役立ちます。

STEP5 コードをファイルとして保存する

ChatGPTが作成したコードは、そのままではパソコン上のWebページとして保存されていません。

コードをテキストエディターへ貼り付け、HTMLファイルとして保存する必要があります。

Windowsではメモ帳でも保存できますが、Visual Studio Codeなどのコード編集ソフトを使うと、コードを見やすく管理できます。

保存の基本手順は次のとおりです。

ChatGPTが生成したHTMLコードをコピーする
テキストエディターを開く
コードを貼り付ける
ファイル名をindex.htmlにする
文字コードをUTF-8にする
分かりやすいフォルダーへ保存する

フォルダー名は、次のように英数字で付けると管理しやすくなります。

english-school-site

その中に、index.htmlを保存します。

english-school-site
└── index.html

ファイル名を付けるときは、次の点に注意してください。

index.html.txtになっていないか確認する
全角英数字を使わない
ファイル名に空白を使わない
拡張子を.htmlにする
大文字と小文字を混在させない

Windowsのメモ帳で保存する場合は、「ファイルの種類」を「すべてのファイル」に変更してから、index.htmlと入力します。

そのまま保存すると、index.html.txtになる場合があるため注意してください。

STEP6 ブラウザで表示を確認する

保存したindex.htmlをダブルクリックすると、通常はWebブラウザでページが開きます。

Google ChromeやMicrosoft Edgeなどで、作成したページを確認できます。

この段階では、まず次の項目を確認します。

見出しが表示されているか
日本語が文字化けしていないか
背景色や文字色が反映されているか
セクションの順番が正しいか
ボタンが表示されているか
文章が途中で切れていないか
横に大きくはみ出していないか

ページが表示されない場合は、ファイル名やコードの保存方法を確認します。

特に多いのが、次のようなミスです。

ファイルが.txt形式になっている
HTMLコードの一部しかコピーしていない
コードブロックを示す記号まで貼り付けている
保存後の古いページを見ている
開いているファイルと編集したファイルが異なる

ChatGPTの回答では、コードの前後に次のような記号が表示されることがあります。

```html

この記号は、コードの種類を示すためのものです。

HTMLファイルへ貼り付けるときは、コード本体だけをコピーし、前後の記号は含めないようにします。

STEP7 修正したい部分をChatGPTへ伝える

最初に生成されたホームページが、希望どおりに完成するとは限りません。

文字の大きさ、色、余白、配置などを確認し、気になる部分を一つずつ修正します。

修正を依頼するときは、「見た目を良くしてください」のような曖昧な指示を避けましょう。

次のように、変更したい場所と内容を具体的に伝えます。

ファーストビューの見出しが小さく感じます。

パソコンでは48px、
スマートフォンでは32pxにしてください。

ほかのデザインは変更せず、
必要なCSSだけを提示してください。

「ほかのデザインは変更しない」と伝えることで、修正したくない部分まで書き換えられる可能性を減らせます。

ボタンの色を変更したい場合は、次のように依頼します。

「無料体験に申し込む」ボタンを、
青色から緑色に変更してください。

通常時は#16A34A、
カーソルを乗せたときは#15803Dにしてください。

変更するCSSの場所と、
修正後のコードを提示してください。

修正箇所だけを出力してもらうと、コード全体を毎回貼り直す必要がありません。

ただし、どこへ貼り付ければよいか分からない場合は、次のように依頼します。

私はHTML初心者です。

先ほどの修正コードを、
現在のコードのどこへ貼り付ければよいか説明してください。

置き換える部分がある場合は、
修正前と修正後を並べてください。

初心者であることを明記すると、専門用語を減らして説明してもらいやすくなります。

STEP8 スマートフォン表示を確認する

Webサイトは、パソコンだけでなくスマートフォンでも見られます。

パソコンで問題なく表示されていても、スマートフォンでは次のような問題が起こることがあります。

文字が小さすぎる
画像が画面からはみ出す
横並びの項目がつぶれる
ボタンが押しにくい
表が横に切れる
左右に不要なスクロールが発生する
メニューが使いにくい

スマートフォン表示に合わせてレイアウトを変える仕組みを、レスポンシブデザインと呼びます。

ChatGPTにコードを依頼するときは、最初からスマートフォン対応を条件に含めましょう。

このホームページをレスポンシブデザインにしてください。

画面幅が768px以下の場合は、次のように変更してください。

・横並びの項目を縦並びにする
・見出しを少し小さくする
・左右の余白を16pxにする
・ボタンを押しやすい大きさにする
・画像が画面幅を超えないようにする

変更に必要なCSSを提示してください。

パソコンでスマートフォン表示を確認する場合は、ブラウザの開発者ツールを利用できます。

Google Chromeでは、ページを開いた状態で右クリックし、「検証」を選択します。

その後、スマートフォンとタブレットの形をしたアイコンを押すと、画面幅を切り替えて表示を確認できます。

開発者ツールが難しい場合は、公開前の仮ページを実際のスマートフォンで開いて確認しても問題ありません。

STEP9 公開前チェックを行う

ホームページの見た目が完成したら、すぐに公開するのではなく、内容と動作を確認します。

最低限、次の項目をチェックしましょう。

文章

誤字や脱字がないか
サービス内容が正しいか
料金や営業時間が最新か
誇張した表現がないか
仮の文章が残っていないか

デザイン

文字が読みやすいか
色の組み合わせに問題がないか
セクション間の余白が適切か
ボタンが目立っているか
パソコンとスマートフォンで崩れていないか

リンクとボタン

ボタンを押すと正しい場所へ移動するか
外部リンクのURLが正しいか
存在しないページへ移動しないか
電話番号やメールアドレスが正しいか

画像

画像が表示されているか
画像が大きすぎないか
利用許可のある画像か
代替テキストが設定されているか
ファイル名に日本語や空白が含まれていないか

信頼性

運営者情報が確認できるか
問い合わせ方法が分かるか
必要に応じてプライバシーポリシーがあるか
商品やサービスの条件が明記されているか

ChatGPTにも公開前チェックを依頼できます。

以下のホームページを公開前の確認担当者としてチェックしてください。

次の観点で問題点を指摘してください。

・文章の分かりやすさ
・誤解を招く表現
・申し込み導線
・スマートフォンでの見やすさ
・HTMLの記述ミス
・アクセシビリティ
・不足している情報

コードを大きく作り直さず、
優先度が高い順に改善点を提示してください。

【ここにHTMLコードを貼る】

ただし、ChatGPTの確認だけで安全性や正確性が保証されるわけではありません。

料金、連絡先、利用条件などの重要情報は、必ず自分でも確認してください。

STEP10 サーバーまたはWordPressで公開する

最後に、完成したホームページをインターネット上へ公開します。

公開方法によって作業が異なります。

HTMLファイルをサーバーへ公開する場合

レンタルサーバーのファイル管理画面やFTPソフトを使い、作成したファイルを公開用フォルダーへアップロードします。

基本的には、次のファイルをまとめてアップロードします。

website
├── index.html
├── style.css
├── script.js
└── images
    └── main-visual.jpg

一体型HTMLで作成した場合は、index.htmlだけで表示できることもあります。

ただし、画像を使用している場合は、画像ファイルも一緒にアップロードする必要があります。

HTML内で指定しているファイル名と、実際のファイル名が異なると画像は表示されません。

WordPressで公開する場合

WordPressでは、固定ページを新規作成し、文章や画像をブロックエディターで配置します。

ChatGPTが作成したHTMLを使用する場合は、カスタムHTMLブロックを利用できます。

ただし、ページ全体のHTMLコードには、WordPress側で自動的に用意される要素が含まれていることがあります。

たとえば、次のようなタグです。

<!DOCTYPE html>
<html>
<head>
<body>

WordPressの固定ページへ貼り付ける場合は、これらを含むページ全体のコードではなく、<body>内の必要な部分だけを使用するのが基本です。

WordPressで使うコードをChatGPTに依頼するときは、次のように伝えます。

このHTMLをWordPressの固定ページで使用できる形に変更してください。

カスタムHTMLブロックへ貼り付ける部分だけを出力してください。

次のタグは含めないでください。

・<!DOCTYPE html>
・<html>
・<head>
・<body>

CSSは別にして、
WordPressの追加CSSへ貼り付ける形で出力してください。

既存テーマのデザインへ影響しにくいように、
専用のクラス名を付けてください。

専用のクラス名を付けることで、ほかのページへCSSが影響する可能性を減らせます。

たとえば、一般的な.buttonではなく、次のような名前を使用します。

.sf-web-lp-button {
  display: inline-block;
}

WordPressテーマやプラグインによっては、同じ名前のクラスがすでに使われている場合があります。

記事やページ専用の分かりやすい名前を付けることが重要です。

公開後は、実際のURLをパソコンとスマートフォンの両方で開き、表示やリンクをもう一度確認しましょう。

初心者向けのWebサイトコード実例

ここでは、ChatGPTに作ってもらえるシンプルな1ページ型ホームページの例を紹介します。

今回作るのは、オンライン英会話サービスの紹介ページです。

次の内容を1ページにまとめます。

ヘッダー
ファーストビュー
サービス紹介
選ばれる理由
利用の流れ
よくある質問
お問い合わせ案内
フッター

最初は、HTMLとCSSを一つのファイルにまとめた形で作成します。

この方法であれば、index.htmlを保存してブラウザで開くだけで表示を確認できます。

完成するページのイメージ

ページの最上部には、サービス名と無料体験へ誘導するボタンを配置します。

その下に、サービスの特徴や利用の流れ、よくある質問を順番に並べます。

全体は、白と青を基調にしたシンプルなデザインです。

申し込みボタンには緑色を使い、読者が次に取る行動を分かりやすくします。

ページ構成は次のとおりです。

ヘッダー
↓
ファーストビュー
↓
サービス紹介
↓
選ばれる理由
↓
利用の流れ
↓
よくある質問
↓
お問い合わせ案内
↓
フッター

初心者が最初に作るページでは、複雑なアニメーションや多くの機能を入れる必要はありません。

まずは、文章、ボタン、レイアウトが正しく表示されることを優先しましょう。

最初はHTMLだけで表示できる形にする

次のコードは、HTMLの中にCSSを含めた一体型のコードです。

コード全体をコピーし、index.htmlという名前で保存すると、ブラウザで表示できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>初心者向けオンライン英会話</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        sans-serif;
      color: #1f2937;
      line-height: 1.8;
      background-color: #ffffff;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    .container {
      width: min(1100px, calc(100% - 40px));
      margin: 0 auto;
    }

    .site-header {
      background-color: #ffffff;
      border-bottom: 1px solid #e5e7eb;
    }

    .header-inner {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .site-logo {
      margin: 0;
      color: #2563eb;
      font-size: 24px;
      font-weight: 700;
    }

    .header-button {
      display: inline-block;
      padding: 12px 20px;
      color: #ffffff;
      font-weight: 700;
      background-color: #16a34a;
      border-radius: 8px;
    }

    .header-button:hover {
      background-color: #15803d;
    }

    .hero {
      padding: 96px 0;
      text-align: center;
      background-color: #eff6ff;
    }

    .hero-label {
      margin: 0 0 12px;
      color: #2563eb;
      font-weight: 700;
    }

    .hero h1 {
      max-width: 820px;
      margin: 0 auto 24px;
      font-size: 48px;
      line-height: 1.3;
    }

    .hero-text {
      max-width: 700px;
      margin: 0 auto 32px;
      font-size: 18px;
    }

    .main-button {
      display: inline-block;
      padding: 16px 28px;
      color: #ffffff;
      font-weight: 700;
      background-color: #16a34a;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgb(22 163 74 / 20%);
    }

    .main-button:hover {
      background-color: #15803d;
    }

    .section {
      padding: 80px 0;
    }

    .section-light {
      background-color: #f8fafc;
    }

    .section-title {
      margin: 0 0 40px;
      text-align: center;
      font-size: 36px;
      line-height: 1.4;
    }

    .lead-text {
      max-width: 760px;
      margin: 0 auto;
      text-align: center;
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .card {
      padding: 32px;
      background-color: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgb(15 23 42 / 6%);
    }

    .card h3 {
      margin-top: 0;
      color: #2563eb;
      font-size: 22px;
    }

    .step-list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      padding: 0;
      list-style: none;
      counter-reset: step;
    }

    .step-list li {
      padding: 28px 20px;
      text-align: center;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 8px 24px rgb(15 23 42 / 6%);
      counter-increment: step;
    }

    .step-list li::before {
      display: block;
      margin-bottom: 12px;
      color: #2563eb;
      font-size: 14px;
      font-weight: 700;
      content: "STEP " counter(step);
    }

    .step-list h3 {
      margin: 0 0 12px;
      font-size: 20px;
    }

    .faq-list {
      max-width: 820px;
      margin: 0 auto;
    }

    .faq-item {
      margin-bottom: 20px;
      padding: 28px;
      background-color: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
    }

    .faq-item h3 {
      margin: 0 0 12px;
      font-size: 20px;
    }

    .faq-item p {
      margin: 0;
    }

    .contact {
      text-align: center;
      background-color: #2563eb;
      color: #ffffff;
    }

    .contact .section-title {
      color: #ffffff;
    }

    .contact-text {
      max-width: 700px;
      margin: 0 auto 32px;
    }

    .site-footer {
      padding: 28px 0;
      text-align: center;
      background-color: #0f172a;
      color: #ffffff;
    }

    .site-footer p {
      margin: 0;
    }

    @media (max-width: 768px) {
      .container {
        width: min(100% - 32px, 1100px);
      }

      .header-inner {
        min-height: 64px;
      }

      .site-logo {
        font-size: 20px;
      }

      .header-button {
        padding: 10px 14px;
        font-size: 14px;
      }

      .hero {
        padding: 72px 0;
      }

      .hero h1 {
        font-size: 32px;
      }

      .hero-text {
        font-size: 16px;
      }

      .section {
        padding: 64px 0;
      }

      .section-title {
        margin-bottom: 32px;
        font-size: 28px;
      }

      .card-grid,
      .step-list {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>

<body>
  <!-- ヘッダー -->
  <header class="site-header">
    <div class="container header-inner">
      <p class="site-logo">Easy English</p>

      <a class="header-button" href="#contact">
        無料体験に申し込む
      </a>
    </div>
  </header>

  <main>
    <!-- ファーストビュー -->
    <section class="hero">
      <div class="container">
        <p class="hero-label">初心者向けオンライン英会話</p>

        <h1>
          忙しい毎日でも、無理なく英語を学び直せる
        </h1>

        <p class="hero-text">
          朝6時から夜11時まで受講可能。
          初心者向けの個別レッスンで、
          自分のペースに合わせて英語を学べます。
        </p>

        <a class="main-button" href="#contact">
          無料体験レッスンを予約する
        </a>
      </div>
    </section>

    <!-- サービス紹介 -->
    <section class="section">
      <div class="container">
        <h2 class="section-title">
          Easy Englishとは
        </h2>

        <p class="lead-text">
          Easy Englishは、英語を基礎から学び直したい人のための
          オンライン英会話サービスです。
          パソコンやスマートフォンを使って、自宅から受講できます。
        </p>
      </div>
    </section>

    <!-- 選ばれる理由 -->
    <section class="section section-light">
      <div class="container">
        <h2 class="section-title">
          選ばれる3つの理由
        </h2>

        <div class="card-grid">
          <article class="card">
            <h3>初心者向けの個別指導</h3>
            <p>
              一人ひとりの理解度に合わせて、
              基礎から丁寧にレッスンを進めます。
            </p>
          </article>

          <article class="card">
            <h3>朝から夜まで受講可能</h3>
            <p>
              朝6時から夜11時まで予約できるため、
              仕事や家事の予定に合わせて学べます。
            </p>
          </article>

          <article class="card">
            <h3>オンラインで完結</h3>
            <p>
              教室へ通う必要はありません。
              自宅や外出先から受講できます。
            </p>
          </article>
        </div>
      </div>
    </section>

    <!-- 利用の流れ -->
    <section class="section">
      <div class="container">
        <h2 class="section-title">
          無料体験までの流れ
        </h2>

        <ol class="step-list">
          <li>
            <h3>申し込む</h3>
            <p>専用フォームから必要事項を入力します。</p>
          </li>

          <li>
            <h3>日時を選ぶ</h3>
            <p>希望するレッスン日時を選択します。</p>
          </li>

          <li>
            <h3>体験する</h3>
            <p>オンラインで体験レッスンを受講します。</p>
          </li>

          <li>
            <h3>検討する</h3>
            <p>体験後に継続するかどうかを決められます。</p>
          </li>
        </ol>
      </div>
    </section>

    <!-- よくある質問 -->
    <section class="section section-light">
      <div class="container">
        <h2 class="section-title">
          よくある質問
        </h2>

        <div class="faq-list">
          <article class="faq-item">
            <h3>英語がほとんど分からなくても受講できますか？</h3>
            <p>
              はい。初心者向けの内容から始めるため、
              基礎に不安がある人も受講できます。
            </p>
          </article>

          <article class="faq-item">
            <h3>スマートフォンでも受講できますか？</h3>
            <p>
              はい。安定したインターネット環境があれば、
              スマートフォンやタブレットでも受講できます。
            </p>
          </article>

          <article class="faq-item">
            <h3>無料体験後に必ず契約する必要がありますか？</h3>
            <p>
              いいえ。体験後に内容を確認してから、
              継続するかどうかを決められます。
            </p>
          </article>
        </div>
      </div>
    </section>

    <!-- お問い合わせ案内 -->
    <section id="contact" class="section contact">
      <div class="container">
        <h2 class="section-title">
          まずは無料体験から始めませんか？
        </h2>

        <p class="contact-text">
          レッスン内容や受講方法を確認してから、
          継続するかどうかを決められます。
        </p>

        <a class="main-button" href="mailto:example@example.com">
          無料体験について問い合わせる
        </a>
      </div>
    </section>
  </main>

  <!-- フッター -->
  <footer class="site-footer">
    <div class="container">
      <p>&copy; 2026 Easy English</p>
    </div>
  </footer>
</body>
</html>

このコードは、そのまま公開用として使うための完成品ではありません。

文章、サービス内容、連絡先などを、自分のWebサイトに合わせて変更する必要があります。

また、コード内のメールアドレスは仮のものです。

<a class="main-button" href="mailto:example@example.com">

実際に使用する場合は、example@example.comの部分を正しいメールアドレスに変更してください。

メールアドレスをWebページへ直接掲載すると、迷惑メールが届く原因になる場合もあります。

本格的なお問い合わせ受付には、WordPressのお問い合わせフォームや外部フォームサービスなどを利用する方法があります。

コードのどこを書き換えればよいか

コード全体を見ると難しく感じるかもしれませんが、最初に変更する場所は限られています。

初心者は、まず次の7項目を書き換えてみましょう。

サイト名

ヘッダー部分の次の文章を変更します。

<p class="site-logo">Easy English</p>

たとえば、店舗名が「青空英会話教室」であれば、次のように変更します。

<p class="site-logo">青空英会話教室</p>

ページタイトル

ブラウザのタブなどに表示されるタイトルは、<title>タグで指定します。

<title>初心者向けオンライン英会話</title>

次のように、サイト名やサービス内容が分かるタイトルへ変更します。

<title>青空英会話教室｜初心者向けオンラインレッスン</title>

このタイトルは、検索結果に表示される情報の一つとして使われる場合もあります。

ページの内容が伝わる文章にしましょう。

メイン見出し

ファーストビューの大きな見出しは、次の部分です。

<h1>
  忙しい毎日でも、無理なく英語を学び直せる
</h1>

自分のサービスが提供する価値に合わせて変更します。

たとえば、地域密着型の教室なら、次のような文章が考えられます。

<h1>
  初心者でも安心して通える地域の英会話教室
</h1>

サービスの説明文

<p>と</p>で囲まれている文章は、ページ上の説明文です。

<p class="hero-text">
  朝6時から夜11時まで受講可能。
  初心者向けの個別レッスンで、
  自分のペースに合わせて英語を学べます。
</p>

営業時間、サービス内容、特徴などを、実際の情報に変更します。

ボタンの文言

申し込みボタンの文章は、<a>タグの中に書かれています。

<a class="main-button" href="#contact">
  無料体験レッスンを予約する
</a>

目的に応じて、次のような文言へ変更できます。

無料相談に申し込む
サービス資料を請求する
予約状況を確認する
お問い合わせはこちら
商品の詳細を見る

ボタンには、「押した後に何が起こるか」が分かる文章を使いましょう。

「詳しくはこちら」だけでは、読者が移動先を判断しにくい場合があります。

リンク先

ボタンを押したときの移動先は、hrefの中に指定します。

href="#contact"

#contactは、同じページ内のお問い合わせ案内へ移動する指定です。

外部の申し込みページへ移動させる場合は、URLを入力します。

href="https://example.com/application"

Example Domain

実際に使用する申し込みページのURLへ変更してください。

配色

ページ内の色は、CSSのカラーコードで指定しています。

たとえば、メインの青色には次のコードを使用しています。

color: #2563eb;

ボタンの緑色は次の部分です。

background-color: #16a34a;

色を変更したいときは、ChatGPTに現在のカラーコードを渡して修正してもらえます。

現在のホームページでは、
メインカラーに#2563EB、
ボタンに#16A34Aを使用しています。

全体を、落ち着いた紺色とオレンジ色の配色に変更してください。

読みやすさを保ったカラーコードを提案し、
変更が必要なCSSだけを提示してください。

色の変更後は、文字と背景の区別がつきにくくなっていないか確認しましょう。

初心者が理解しておきたいコードの見方

HTMLでは、文章や画像をタグで囲んでページの構造を作ります。

たとえば、次のコードでは、sectionというまとまりの中に見出しと文章が入っています。

<section class="section">
  <h2>サービス紹介</h2>
  <p>ここにサービスの説明を入れます。</p>
</section>

class="section"は、CSSでデザインを指定するための名前です。

CSS側では、先頭に.を付けて指定します。

.section {
  padding: 80px 0;
}

このCSSは、sectionというクラス名が付いた部分に余白を設定しています。

HTMLとCSSは、次のように対応しています。

HTML：class="section"
CSS：.section

HTMLのクラス名を変更した場合は、CSS側の名前も合わせて変更しなければ、デザインが反映されなくなります。

初心者のうちは、理由が分からないままクラス名を変更しない方が安全です。

文章や色だけを変更し、レイアウトの調整はChatGPTに依頼するとよいでしょう。

HTML・CSS・JavaScriptを分けて管理する方法

一体型のHTMLは、最初の表示確認には便利です。

しかし、ページが長くなると、HTMLの中に文章とデザインが混在し、コードが読みにくくなります。

Webサイトを継続して修正する場合は、HTML、CSS、JavaScriptを別々のファイルに分ける方法が一般的です。

基本的なファイル構成は次のとおりです。

website
├── index.html
├── style.css
└── script.js

それぞれの役割は次のとおりです。

ファイル	役割
index.html	見出し、文章、画像、ボタンなどの構造
style.css	色、余白、文字サイズ、配置などのデザイン
script.js	メニュー開閉などの動きや処理

JavaScriptを使わないWebサイトであれば、最初は次の2ファイルだけでも問題ありません。

website
├── index.html
└── style.css

HTMLとCSSを分けるメリット

HTMLとCSSを分けると、次のようなメリットがあります。

文章とデザインを別々に確認できる
コードが読みやすくなる
配色や余白をまとめて変更しやすい
複数ページで同じCSSを使える
修正する場所を見つけやすい

たとえば、複数のページで同じstyle.cssを読み込めば、CSSを1か所変更するだけで、すべてのページのボタン色を変更できます。

一方で、ファイルの接続方法を間違えると、CSSが反映されません。

初心者は、ファイル名と保存場所を正確にそろえることが重要です。

HTMLからCSSを読み込む方法

HTMLからCSSを読み込むには、index.htmlの<head>内に次のコードを記述します。

<link rel="stylesheet" href="style.css">

配置例は次のとおりです。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>初心者向けオンライン英会話</title>

  <link rel="stylesheet" href="style.css">
</head>

href="style.css"は、同じフォルダーにあるstyle.cssを読み込むという意味です。

フォルダー構成は次のようにします。

website
├── index.html
└── style.css

index.htmlとstyle.cssが別のフォルダーに保存されていると、正しく読み込まれない場合があります。

HTMLからJavaScriptを読み込む方法

JavaScriptを別ファイルにする場合は、index.htmlの</body>の直前に次のコードを記述します。

<script src="script.js"></script>

配置例は次のとおりです。

  <script src="script.js"></script>
</body>
</html>

src="script.js"は、同じフォルダーにあるscript.jsを読み込むという意味です。

基本のフォルダー構成は次のとおりです。

website
├── index.html
├── style.css
└── script.js

今回のサンプルページは、JavaScriptがなくても表示できます。

そのため、無理にscript.jsを作る必要はありません。

スマートフォン用メニューの開閉や、よくある質問をクリックで開閉する機能などを追加するときに使用します。

ChatGPTに3ファイルへ分割してもらうプロンプト

一体型HTMLを自分で分割するのが難しい場合は、ChatGPTに依頼できます。

以下の一体型HTMLを、
次の3ファイルに分けてください。

・index.html
・style.css
・script.js

条件は次のとおりです。

・HTML内の<style>タグの内容をstyle.cssへ移動する
・JavaScriptがある場合はscript.jsへ移動する
・index.htmlからCSSとJavaScriptを正しく読み込む
・デザインや文章は変更しない
・JavaScriptが不要な場合は、script.jsは作らない
・各ファイルを別々のコードブロックで出力する
・保存するファイル名を明記する

【ここに現在のHTMLコードを貼る】

このプロンプトを使う理由は、デザインや文章を変えずに、ファイル構成だけを整理してもらうためです。

「改善してください」と同時に依頼すると、ChatGPTが文章やレイアウトまで変更する場合があります。

まずはファイル分割だけを依頼し、デザイン改善は別の指示として行いましょう。

CSSが反映されないときの確認項目

HTMLとCSSを分けた後、ページが文字だけの簡素な表示になった場合は、CSSが読み込まれていない可能性があります。

次の項目を確認してください。

ファイル名がstyle.cssになっているか
style.css.txtになっていないか
HTML内の名前と実際のファイル名が同じか
index.htmlとstyle.cssが同じフォルダーにあるか
<link>タグを<head>内に記述しているか
ファイル名の大文字と小文字が一致しているか
保存後にブラウザを更新したか

たとえば、実際のファイル名がstyles.cssなのに、HTMLで次のように指定していると読み込まれません。

<link rel="stylesheet" href="style.css">

実際のファイル名に合わせて変更します。

<link rel="stylesheet" href="styles.css">

問題が解決しない場合は、現在のフォルダー構成とコードをChatGPTに伝えます。

HTMLとCSSを別ファイルにしましたが、
CSSが反映されません。

現在のフォルダー構成は次のとおりです。

website
├── index.html
└── style.css

index.htmlのhead内には、
次のコードがあります。

<link rel="stylesheet" href="style.css">

考えられる原因を、
初心者向けに優先度が高い順で教えてください。

画像を表示する方法

Webサイトへ画像を追加する場合は、画像ファイルも制作フォルダー内へ保存します。

画像が1枚だけであれば、index.htmlと同じフォルダーへ保存できます。

website
├── index.html
├── style.css
└── main-visual.jpg

HTMLでは、次のように記述します。

<img
  src="main-visual.jpg"
  alt="オンライン英会話を受講している人物"
>

srcには画像ファイルの場所を指定します。

altには、画像の内容を説明する文章を入力します。

画像が表示されない場合や、画像を見られない環境でも内容が伝わるようにするためです。

画像が複数ある場合は、imagesフォルダーにまとめると管理しやすくなります。

website
├── index.html
├── style.css
├── script.js
└── images
    ├── main-visual.jpg
    ├── service-01.jpg
    └── service-02.jpg

この場合は、HTMLで次のように指定します。

<img
  src="images/main-visual.jpg"
  alt="オンライン英会話を受講している人物"
>

images/は、imagesフォルダーの中にある画像を読み込むという意味です。

画像ファイル名で注意すること

画像のファイル名は、半角英数字とハイフンを使うと安全です。

推奨例は次のとおりです。

main-visual.jpg
online-lesson.jpg
service-flow.png

次のようなファイル名は避けることをおすすめします。

メイン画像.jpg
image 01.jpg
画像(完成版).png

日本語や空白、記号を含むファイル名でも表示できる場合はありますが、サーバーへアップロードした後に問題が起きる可能性があります。

ファイル名は、次のルールで統一すると管理しやすくなります。

半角英数字を使う
単語の区切りにはハイフンを使う
空白を使わない
内容が分かる名前にする
拡張子を勝手に変更しない

画像が表示されないときの確認項目

画像が表示されない場合は、次の点を確認します。

画像ファイルが指定したフォルダーにあるか
HTMLに書いたファイル名と完全に一致しているか
.jpgと.pngを間違えていないか
大文字と小文字が一致しているか
images/の指定が正しいか
ファイル名に余分な空白がないか
画像自体が破損していないか

たとえば、実際の画像ファイルがmain-visual.pngであるにもかかわらず、HTMLで.jpgを指定すると表示されません。

<img src="images/main-visual.jpg" alt="">

正しくは次のようにします。

<img src="images/main-visual.png" alt="">

ChatGPTに確認を依頼するときは、コードだけでなく、フォルダー構成も一緒に伝えましょう。

画像がWebページに表示されません。

現在のフォルダー構成は次のとおりです。

website
├── index.html
├── style.css
└── images
    └── main-visual.png

HTMLでは次のように指定しています。

<img src="images/main-visual.jpg" alt="サービス紹介画像">

原因と修正方法を教えてください。

この例では、実際の拡張子が.pngであるのに対し、HTMLでは.jpgを指定していることが原因です。

エラーを相談するときは、現在の状況を省略せずに伝えることで、原因を見つけてもらいやすくなります。

ChatGPTでホームページを作る基本手順の振り返り

ここまでの内容で、ChatGPTを使ってホームページを作る基本的な流れは身に付いています。

HTMLでページの土台を作る
CSSでデザインを整える
JavaScriptで動きを付ける
ブラウザで表示して確認する

最初からすべてを覚える必要はありません。まずは実際に1ページ完成させ、「自分でWebサイトを作れた」という成功体験を得ることが大切です。

このあと紹介する内容は、さらに見た目や使いやすさを向上させるための応用編です。必要になったタイミングで少しずつ取り入れていきましょう。

ホームページ制作だけでなく、検索エンジンからの集客も考えている方は、SEOを意識した記事の作り方もあわせて学ぶのがおすすめです。

→ ChatGPTでSEO記事を書く方法｜検索上位を狙える記事作成術

ChatGPTでLPを作る方法

ChatGPTは、商品やサービスを紹介するランディングページの制作にも活用できます。

ランディングページは、一般的に「LP」と呼ばれます。

LPは、特定の商品やサービスを紹介し、購入、申し込み、資料請求、問い合わせなどの行動につなげることを目的としたページです。

一般的なホームページが会社やサービス全体を紹介するのに対し、LPは一つの商品やサービスに内容を絞ることが多くあります。

ChatGPTを使えば、LPの構成、見出し、説明文、ボタン文言、HTML・CSSまで一連の制作を進められます。

ただし、ChatGPTが作成した文章をそのまま掲載するのではなく、実際の商品内容や料金、実績と一致しているか必ず確認しましょう。

この章でできるようになること

この章では、ChatGPTを使って商品やサービスを紹介するLP（ランディングページ）の作り方を学びます。

「問い合わせを増やしたい」「商品を販売したい」「副業用の紹介ページを作りたい」という方でも、ChatGPTへ適切な指示を出すことで、初心者でも見やすく分かりやすいLPを作成できます。

LPと一般的なホームページの違い

ホームページとLPは、どちらもWebページですが、目的や構成が異なります。

比較項目	一般的なホームページ	LP
主な目的	会社やサービス全体を紹介する	特定の申し込みや購入につなげる
ページ数	複数ページの場合が多い	1ページで完結することが多い
情報量	幅広い情報を掲載する	一つの商品やサービスに集中する
リンク	複数のページへ移動する	申し込み先へ誘導するリンクを中心にする
構成	会社概要、サービス、実績、問い合わせなど	悩み、解決策、特徴、料金、申し込みなど
ゴール	理解や信頼を深めてもらう	行動してもらう

LPでは、読者がページを上から読み進めることを想定して情報を配置します。

そのため、情報の順番が重要です。

たとえば、ページの最初から料金や申し込みボタンだけを見せても、サービスの価値が伝わっていなければ申し込みにはつながりにくいでしょう。

読者の悩みに共感し、その悩みをどのように解決できるかを伝えたうえで、申し込み方法を案内する流れが基本です。

LPを作る前に決める情報

ChatGPTにLPを作ってもらう前に、商品やサービスの情報を整理します。

最低限、次の内容を用意しましょう。

商品・サービス名
商品・サービスの内容
ターゲット
ターゲットが抱える悩み
その悩みをどう解決するか
主な特徴
利用するメリット
料金
申し込み方法
提供条件
実績や根拠
よくある質問
ボタンを押した後の移動先

たとえば、オンライン英会話サービスであれば、次のように整理できます。

商品・サービス名：
Easy English

ターゲット：
英語を学び直したい30〜50代の会社員

主な悩み：
仕事が忙しく、決まった時間に教室へ通えない

解決方法：
朝6時から夜11時まで、自宅からオンラインで受講できる

特徴：
初心者向け個別レッスン
オンライン完結
無料体験あり

料金：
月額8,800円

申し込み方法：
専用フォームから無料体験を予約する

主なCTA：
無料体験レッスンを予約する

この情報を整理する理由は、ChatGPTが存在しない特徴や料金を勝手に補わないようにするためです。

情報が不足している場合、ChatGPTは一般的な内容を加えることがあります。

公開用のLPでは、必ず実際の情報だけを使いましょう。

ChatGPTにLP構成を作ってもらう

最初に、LP全体の構成を作成します。

次のようなプロンプトを使用します。

オンライン英会話サービスのLPを作成します。

ターゲットは、英語を学び直したい30〜50代の会社員です。

主な悩みは、
仕事が忙しく、決まった時間に教室へ通えないことです。

サービスの特徴は次のとおりです。

・朝6時から夜11時まで受講できる
・初心者向けの個別レッスン
・オンラインで完結する
・無料体験レッスンがある

LPの目的は、無料体験への申し込みを増やすことです。

読者が内容を理解し、
自然に申し込みまで進めるLP構成を提案してください。

各セクションについて、
・見出し案
・掲載する内容
・この順番にする理由
を説明してください。

このプロンプトでは、読者の悩みとLPの目的を具体的に伝えています。

ChatGPTからは、次のような構成が提案される可能性があります。

ファーストビュー
読者の悩み
サービスによる解決方法
サービスの特徴
選ばれる理由
利用方法
料金
利用者の声
よくある質問
無料体験への案内

提案された構成に、必ずすべてのセクションを入れる必要はありません。

たとえば、利用者の声や実績がない場合は、無理に追加しないようにします。

代わりに、サービス内容、運営者情報、サポート体制など、実際に確認できる情報を掲載しましょう。

LPの文章を作ってもらう

構成が決まったら、各セクションの文章を作成します。

LPでは、読者に強く訴えかける文章が使われることがあります。

しかし、根拠のない断定や過度な不安をあおる表現は避ける必要があります。

次のように、表現条件も含めて依頼しましょう。

オンライン英会話サービスのLPに掲載する
ファーストビューの文章を作成してください。

ターゲットは、英語を学び直したい30〜50代の会社員です。

サービスの特徴は次のとおりです。

・朝6時から夜11時まで受講できる
・初心者向けの個別レッスン
・オンラインで完結する
・無料体験レッスンがある

次の内容を作成してください。

・メイン見出し
・補足説明
・申し込みボタンの文言

条件は次のとおりです。

・難しい言葉を使わない
・過度に期待をあおらない
・必ず成果が出るような表現を使わない
・忙しい会社員でも始めやすいことを伝える
・各案を3つずつ提示する

複数案を出してもらうことで、サービスに合う文章を比較できます。

出力された文章が長い場合は、次のように修正を依頼します。

メイン見出しを30文字以内に短くしてください。

「オンラインで学べる」
「初心者向け」
という特徴が一目で伝わる形にしてください。

読者の悩みを紹介する部分では、実際のターゲットが感じていることをもとに作成します。

オンライン英会話のLPに掲載する
「このような悩みはありませんか？」の文章を作ってください。

ターゲットが抱える悩みは次のとおりです。

・英語を学び直したいが何から始めればよいか分からない
・仕事が忙しく、教室へ通う時間がない
・グループレッスンでは質問しにくい
・英語を話すことに自信がない

不安を過度にあおらず、
読者が自分の悩みだと感じられる文章にしてください。

悩みの文章は、商品を売るために不安を大きく見せるのではなく、読者の状況を整理する目的で使用します。

LPのHTML・CSSを作ってもらう

文章と構成が完成したら、HTML・CSSを作成します。

最初は、すべての文章を含めた完成版ではなく、構成を確認できる試作品を作ってもらう方法もあります。

以下のLP構成をもとに、
デザイン確認用のHTMLとCSSを作成してください。

【LP構成】
1. ファーストビュー
2. 読者の悩み
3. サービスによる解決方法
4. 3つの特徴
5. 利用の流れ
6. 料金
7. よくある質問
8. 無料体験への案内

条件は次のとおりです。

・1ページ型LPにする
・白と青を基調にする
・CTAボタンは緑色にする
・スマートフォン対応にする
・難しいアニメーションは使わない
・各セクションにコメントを入れる
・文章は後から書き換えやすくする
・HTMLとCSSは別ファイルにする

index.htmlとstyle.cssを
別々のコードブロックで提示してください。

最初から細かいデザインを大量に指定すると、コードが複雑になることがあります。

まずは、情報の順番、文字の読みやすさ、CTAの位置を確認し、その後に装飾を追加しましょう。

CTAを分かりやすく配置する

CTAとは、読者に次の行動を促す部分です。

LPでは、主に次のようなボタンがCTAとして使われます。

無料体験に申し込む
資料を請求する
無料相談を予約する
商品を購入する
お問い合わせをする
メールマガジンに登録する

CTAは、ページの最後に一度だけ配置するのではなく、内容に応じて複数回配置できます。

たとえば、次の位置が考えられます。

ファーストビュー
サービスの特徴を説明した後
料金を説明した後
よくある質問の後
ページの最後

ただし、短い間隔で何度も同じボタンを表示すると、読みにくく感じる場合があります。

読者がサービス内容を理解した後に、自然に申し込みへ進める位置へ配置しましょう。

ChatGPTには、次のように改善を依頼できます。

以下のLP構成を確認し、
CTAボタンを配置するのに適した場所を提案してください。

目的は、無料体験への申し込みを増やすことです。

ボタンを増やしすぎず、
読者がサービス内容を理解した後に
自然に申し込める配置にしてください。

各配置場所について、
なぜその位置がよいのか説明してください。

【ここにLP構成を貼る】

CTAボタンの文言は、「送信」「クリック」などの曖昧な表現よりも、行動後の内容が分かる文章がおすすめです。

たとえば、次のようにします。

無料体験レッスンを予約する

この文言であれば、ボタンを押した後に無料体験の予約へ進むことが分かります。

誇張表現や根拠のない表現を確認する

ChatGPTが作成したLPの文章には、強い表現が含まれることがあります。

たとえば、次のような表現です。

誰でも必ず英語が話せる
短期間で確実に成果が出る
絶対に失敗しない
業界で最も優れている
利用者満足度100％
今だけ必ず得をする

これらの表現は、根拠がなければ掲載しないようにします。

数字や実績を掲載するときは、次の情報を確認しましょう。

いつ調査した数字か
誰を対象にした調査か
何人に調査したか
どの条件で測定したか
第三者が確認できる根拠があるか

ChatGPTに文章確認を依頼するときは、次のように伝えます。

以下のLP文章を、
誇張表現や誤解を招く表現がないか確認してください。

特に次の点をチェックしてください。

・根拠のないNo.1表現
・必ず成果が出るような断定
・実際より有利に見せる料金表現
・存在しない実績や利用者の声
・過度に不安をあおる表現
・サービス内容と一致しない説明

問題がある文章は、
理由と修正案を提示してください。

【ここにLP文章を貼る】

最終的な掲載判断は、ChatGPTだけに任せず、運営者自身でも行いましょう。

レスポンシブデザインでスマートフォンに対応する方法

Webサイトを作るときは、パソコンだけでなく、スマートフォンでの見やすさも考える必要があります。

画面の大きさに合わせて、文字サイズや配置を変える設計をレスポンシブデザインと呼びます。

ChatGPTに「スマートフォン対応にしてください」と伝えることで、レスポンシブ用のCSSを作成してもらえます。

ただし、コードを追加しただけで必ず見やすくなるわけではありません。

パソコンとスマートフォンの両方で実際に表示し、修正を繰り返すことが重要です。

レスポンシブデザインとは

パソコンとスマートフォンでは、画面の横幅が大きく異なります。

パソコンでは横に3つ並べられるカードも、スマートフォンで同じように並べると、文字や画像が小さくなってしまいます。

そのため、画面幅に合わせて次のようにレイアウトを変更します。

パソコン：3つのカードを横並び
スマートフォン：1つずつ縦並び

ほかにも、次のような調整を行います。

見出しを少し小さくする
左右の余白を狭くする
ボタンを押しやすくする
画像を画面幅に合わせる
メニューを折りたたむ
表を横にスクロールできるようにする
不要な装飾を減らす

レスポンシブデザインでは、CSSのメディアクエリという仕組みがよく使われます。

スマホ対応を最初のプロンプトに含める

Webサイトのコードを作成してもらう段階で、最初からスマートフォン対応を条件に入れておきましょう。

1ページ型ホームページのHTMLとCSSを作成してください。

次のレスポンシブ対応を含めてください。

・パソコンとスマートフォンの両方で見やすくする
・画面幅768px以下では横並びを縦並びにする
・スマートフォンの左右余白は16pxにする
・本文は16px未満にしない
・ボタンを指で押しやすい大きさにする
・画像が画面幅を超えないようにする
・横方向の不要なスクロールが発生しないようにする

「スマートフォン対応」とだけ伝えるよりも、具体的な条件を付けることで、希望に近いコードを作成してもらいやすくなります。

メディアクエリを追加してもらう

メディアクエリは、画面幅に応じてCSSを切り替えるための記述です。

たとえば、次のコードは、画面幅が768px以下のときだけ適用されます。

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

パソコンでは、次のCSSで3列にします。

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

画面幅が768px以下になると、メディアクエリ内のCSSが適用され、1列表示へ変わります。

初心者がメディアクエリを自分で追加するのが難しい場合は、現在のコードをChatGPTへ渡します。

以下のHTMLとCSSをスマートフォン対応にしてください。

画面幅が768px以下になった場合は、
次のように変更してください。

・3列のカードを1列にする
・見出しを48pxから32pxにする
・セクションの上下余白を80pxから56pxにする
・左右の余白を16pxにする
・ボタンを横幅いっぱいにする

現在のデザインや文章は変更せず、
追加または修正するCSSだけを提示してください。

【ここに現在のコードを貼る】

修正するCSSだけを求めることで、コード全体を置き換える作業を減らせます。

PCでは横並び、スマホでは縦並びにする

カード、料金プラン、サービスの特徴などは、パソコンでは横並びにすると見やすくなります。

一方、スマートフォンでは縦並びにするのが基本です。

次の例では、パソコンで3列、タブレットで2列、スマートフォンで1列にしています。

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

画面幅ごとに列数を調整すると、急にレイアウトが崩れるのを防ぎやすくなります。

ただし、区切りとなる画面幅はサイトによって異なります。

768pxや600pxはよく使われる目安ですが、必ずその数値でなければならないわけではありません。

実際の表示を確認して調整しましょう。

文字やボタンの大きさを確認する

スマートフォンでは、文字やボタンが小さすぎると操作しにくくなります。

本文は、読みやすさを考えて16px程度を基準にするとよいでしょう。

body {
  font-size: 16px;
}

見出しは、パソコンとスマートフォンでサイズを変えます。

.hero h1 {
  font-size: 48px;
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 32px;
  }
}

ボタンには、文字の周囲に十分な余白を取ります。

.main-button {
  display: inline-block;
  padding: 16px 28px;
}

スマートフォンでは横幅いっぱいにする方法もあります。

@media (max-width: 600px) {
  .main-button {
    display: block;
    width: 100%;
    text-align: center;
  }
}

ただし、ページ内のすべてのボタンを横幅いっぱいにすると、見た目が単調になる場合があります。

重要なCTAボタンだけを大きくするなど、役割に応じて調整しましょう。

画像が画面からはみ出さないようにする

画像には、次のCSSを設定しておくと、画面幅を超えて表示されるのを防ぎやすくなります。

img {
  max-width: 100%;
  height: auto;
}

max-width: 100%;は、画像を親要素の横幅より大きくしない指定です。

height: auto;は、横幅に合わせて高さも自然に調整する指定です。

背景画像を使用する場合は、次のような指定が使われます。

.hero {
  background-image: url("images/main-visual.jpg");
  background-size: cover;
  background-position: center;
}

ただし、パソコンでは見えていた人物や商品が、スマートフォンでは切れてしまうことがあります。

背景画像の重要な部分が中央にない場合は、スマートフォン用に位置を変える必要があります。

@media (max-width: 768px) {
  .hero {
    background-position: 65% center;
  }
}

実際の画像に合わせて数値を調整してください。

表はスマートフォンで切れやすい

料金表や比較表は、項目数が多いとスマートフォン画面に収まりません。

無理に文字を小さくするのではなく、表全体を横にスクロールできるようにする方法があります。

HTMLでは、表を専用の要素で囲みます。

<div class="table-scroll">
  <table>
    <!-- 表の内容 -->
  </table>
</div>

CSSでは次のように指定します。

.table-scroll {
  overflow-x: auto;
}

.table-scroll table {
  min-width: 700px;
}

この方法では、表だけを横に動かして確認できます。

ただし、横スクロールに気づかない読者もいるため、「横にスクロールできます」と補足する方法もあります。

項目が少ない場合は、スマートフォンでは表をカード形式に変更することも検討しましょう。

スマートフォン表示の崩れをChatGPTに直してもらう

スマートフォンで表示が崩れた場合は、問題が起きている状況を具体的に伝えます。

次の情報を添えると、原因を見つけてもらいやすくなります。

問題が起きている画面幅
問題が起きている場所
現在のHTML
現在のCSS
希望する表示
パソコン表示は変更するか
スクリーンショット

たとえば、次のように依頼します。

スマートフォン表示で、
「選ばれる理由」の3つのカードが横にはみ出します。

パソコンでは3列表示のままにし、
画面幅768px以下では1列表示に変更してください。

ほかのセクションは変更しないでください。

現在のHTMLとCSSを確認し、
原因と修正用CSSを提示してください。

【ここにHTMLを貼る】

【ここにCSSを貼る】

スクリーンショットを添付できる場合は、どの部分に問題があるかを画像で伝えることもできます。

その場合も、「この画像を直して」だけでなく、次のように具体的に伝えましょう。

添付したスクリーンショットでは、
スマートフォン表示でCTAボタンが右側にはみ出しています。

希望する状態は次のとおりです。

・ボタンを画面内に収める
・左右に16pxの余白を残す
・文字を2行にしない
・パソコン表示は変更しない

現在のCSSを確認して、
修正箇所だけを提示してください。

レスポンシブ対応後に確認する項目

スマートフォン対応のCSSを追加したら、次の項目を確認します。

ページ全体が横にはみ出していないか
見出しが大きすぎないか
本文が小さすぎないか
ボタンを押しやすいか
横並びが無理なく縦並びになっているか
画像の重要部分が切れていないか
表や料金プランを確認できるか
セクション間の余白が広すぎないか
リンク同士が近すぎないか
メニューを操作できるか

一つのスマートフォン幅だけでなく、複数の画面幅で確認することも重要です。

たとえば、次の幅で確認します。

320px前後
375px前後
390px前後
768px前後
パソコン表示

特定の機種名に完全に合わせるよりも、画面幅を少しずつ変えながら、途中でレイアウトが崩れないか確認するとよいでしょう。

ChatGPTでWebデザインを改善する方法

ChatGPTにHTMLやCSSを作ってもらえば、Webページの形を短時間で作れます。

しかし、最初に生成されたデザインが、そのまま理想どおりになるとは限りません。

たとえば、次のような問題が起こることがあります。

色の組み合わせが希望と違う
文字が小さくて読みにくい
余白が狭く窮屈に見える
ボタンが目立たない
セクション同士の区切りが分かりにくい
全体的に古い印象がある
スマートフォンで見にくい
デザインに統一感がない

このような場合は、Webサイト全体を一度に作り直すのではなく、問題を一つずつChatGPTに伝えて修正します。

変更範囲を限定することで、正常に表示されていた部分まで崩れるリスクを減らせます。

曖昧な指示ではなく具体的に伝える

デザイン改善を依頼するときに、次のような指示を出すと、ChatGPTが大幅にコードを書き換える可能性があります。

もっとおしゃれなデザインにしてください。

「おしゃれ」という言葉の意味は人によって異なります。

ChatGPTが考えるおしゃれなデザインと、自分が希望するデザインが一致するとは限りません。

次のように、変更したい場所と希望する状態を具体的に伝えましょう。

ファーストビューを改善してください。

現在は文字とボタンが左側に寄りすぎています。

次のように変更してください。

・内容を中央揃えにする
・見出しの最大幅を800pxにする
・見出しと説明文の間を24px空ける
・CTAボタンの上を32px空ける
・パソコン表示だけを変更する
・色や文章は変更しない

必要なHTMLとCSSの修正箇所だけを提示してください。

このプロンプトでは、次の条件を明確にしています。

どの場所を変更するか
現在どのような問題があるか
どのような状態にしたいか
変更しない部分
出力してほしい範囲

条件を具体的にするほど、不要な修正を減らしやすくなります。

色を変更して統一感を出す

Webサイトの印象は、配色によって大きく変わります。

多くの色を使いすぎると、ボタンや重要な情報が目立たなくなる場合があります。

初心者は、次のように役割ごとの色を決めると管理しやすくなります。

色の役割	使用する場所
メインカラー	見出し、アイコン、重要な装飾
アクセントカラー	CTAボタン、強調部分
背景色	ページ全体、セクション
文字色	見出し、本文
補助色	枠線、薄い背景、注釈

たとえば、次のように決めます。

メインカラー：#2563EB
アクセントカラー：#16A34A
背景色：#F8FAFC
文字色：#1F2937
補助色：#E5E7EB

現在のCSSで同じ色が何度も使われている場合は、CSS変数へまとめる方法もあります。

:root {
  --color-primary: #2563eb;
  --color-accent: #16a34a;
  --color-background: #f8fafc;
  --color-text: #1f2937;
  --color-border: #e5e7eb;
}

それぞれの場所では、次のように使用します。

.section-title {
  color: var(--color-primary);
}

.main-button {
  background-color: var(--color-accent);
}

body {
  color: var(--color-text);
  background-color: var(--color-background);
}

CSS変数を使うと、最初に設定した色を変更するだけで、複数の場所へまとめて反映できます。

ChatGPTには、次のように依頼できます。

以下のCSSで使われている色をCSS変数にまとめてください。

条件は次のとおりです。

・現在の配色は変更しない
・:root内に色をまとめる
・分かりやすい変数名を付ける
・同じカラーコードは同じ変数を使う
・レイアウトや文字サイズは変更しない

修正後のCSS全体を提示してください。

【ここにCSSを貼る】

コード全体を受け取った後は、元のCSSと大きく異なる部分がないか確認しましょう。

余白を整えて読みやすくする

Webサイトが窮屈に見える場合は、文字サイズだけでなく余白も確認します。

主に調整するのは、次の3種類です。

文字と文字の間
要素同士の間
セクション同士の間

CSSでは、主にmarginとpaddingを使用します。

marginは要素の外側の余白です。

.section-title {
  margin-bottom: 40px;
}

この例では、見出しの下に40pxの余白を設けています。

paddingは要素の内側の余白です。

.card {
  padding: 32px;
}

この例では、カードの枠と中の文章の間に32pxの余白を設けています。

セクション全体の上下に余白を付ける場合は、次のようにします。

.section {
  padding: 80px 0;
}

スマートフォンでは、パソコンより少し狭くする方法があります。

@media (max-width: 768px) {
  .section {
    padding: 56px 0;
  }
}

余白を増やしすぎると、ページが必要以上に長くなる場合があります。

見た目だけでなく、情報のまとまりが分かりやすいかを確認しながら調整しましょう。

文字を読みやすくする

文字の読みやすさは、文字サイズだけで決まりません。

次の項目も重要です。

行間
1行の長さ
文字色
背景色との区別
見出しと本文の差
太字の使い方

本文の行間は、次のように設定できます。

body {
  line-height: 1.8;
}

文章の横幅が広すぎる場合は、最大幅を設定します。

.lead-text {
  max-width: 760px;
  margin: 0 auto;
}

パソコン画面いっぱいに長い文章が表示されると、視線を左右へ大きく動かす必要があり、読みにくくなることがあります。

文章の最大幅を制限することで、読みやすい長さに調整できます。

ChatGPTには、次のように確認を依頼できます。

以下のCSSを、文章の読みやすさという観点で確認してください。

次の項目をチェックしてください。

・本文の文字サイズ
・行間
・1行の長さ
・見出しと本文の差
・文字色と背景色
・スマートフォン表示

現在の雰囲気は維持し、
修正が必要な部分だけを優先度順に提示してください。

【ここにCSSを貼る】

ボタンを目立たせる

CTAボタンは、読者に取ってほしい行動を示す重要な要素です。

ボタンが背景に埋もれていると、申し込みや問い合わせの導線が分かりにくくなります。

ボタンを改善するときは、次の項目を確認します。

背景と区別できる色か
文字が読みやすいか
押せる形に見えるか
周囲に十分な余白があるか
文言が分かりやすいか
スマートフォンで押しやすいか

基本的なボタン例は次のとおりです。

.main-button {
  display: inline-block;
  padding: 16px 28px;
  color: #ffffff;
  font-weight: 700;
  background-color: #16a34a;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgb(22 163 74 / 20%);
}

カーソルを乗せたときの変化も加えられます。

.main-button:hover {
  background-color: #15803d;
  transform: translateY(-2px);
}

ただし、動きを大きくしすぎると、落ち着かない印象になる場合があります。

ボタンが少し上へ動く、色が少し変わるなど、控えめな変化でも十分です。

スマートフォンでは、指で押しやすいように余白を確保します。

@media (max-width: 600px) {
  .main-button {
    width: 100%;
    padding: 16px 20px;
    text-align: center;
  }
}

参考サイトに近い雰囲気を伝える

参考にしたいWebサイトがある場合、その特徴を言葉で説明してChatGPTへ伝えられます。

ただし、他社サイトのデザインやコードをそのまま複製するのは避けましょう。

参考にするのは、次のような一般的な要素です。

配色
余白の広さ
写真の使い方
見出しの大きさ
カードの配置
ボタンの形
全体の雰囲気

たとえば、次のように依頼します。

現在のホームページを、
次のような雰囲気に改善したいです。

・白い背景を中心にする
・余白を広くする
・大きな見出しを使う
・カードには薄い枠線と控えめな影を付ける
・青をメインカラーにする
・装飾を増やしすぎない
・信頼感のある企業サイトの印象にする

他社サイトをコピーせず、
一般的なデザイン要素として反映してください。

現在のHTMLとCSSを確認し、
変更案を提示してください。

参考画像をChatGPTへ添付できる場合もありますが、画像だけでは希望する部分が伝わらないことがあります。

「余白を参考にしたい」「ボタンの形を参考にしたい」など、注目してほしい箇所も言葉で伝えましょう。

ChatGPTが生成したコードを修正する方法

ChatGPTが作ったコードに問題がある場合は、エラーの内容や表示状態を具体的に伝えます。

コード全体を何度も作り直すよりも、原因を特定して必要な部分だけを修正する方が安全です。

エラー相談で伝えるべき情報

コードの修正を依頼するときは、次の情報をできるだけそろえます。

何を作ろうとしているか
どの部分に問題があるか
現在どのように表示されているか
本来どのように表示したいか
使用しているHTML
使用しているCSS
使用しているJavaScript
エラーメッセージ
問題が起きる画面幅
使用している環境

たとえば、次のように伝えます。

1ページ型ホームページを作っています。

「選ばれる理由」のカードを3列にしたいのですが、
現在は縦に並んでいます。

パソコンでは3列、
画面幅768px以下では1列にしたいです。

現在のHTMLとCSSを確認し、
原因と修正箇所を教えてください。

ほかのデザインは変更しないでください。

【HTML】

【CSS】

「動きません」「崩れました」だけでは、ChatGPTが原因を判断しにくくなります。

どの部分が、どの環境で、どのような状態なのかを説明しましょう。

コード全体ではなく必要な部分だけ直してもらう

一部の色や余白を変更したいだけであれば、コード全体を再生成する必要はありません。

次のように依頼します。

料金セクションの背景色だけを変更します。

現在の色：
#FFFFFF

変更後の色：
#F8FAFC

ほかの色、余白、文字サイズ、HTMLは変更しないでください。

修正するCSSの場所と、
修正後のコードだけを提示してください。

差し替える場所が分からない場合は、修正前と修正後を並べてもらいます。

どのコードを置き換えるか分からないため、
次の形式で説明してください。

1. 修正するファイル名
2. 修正前のコード
3. 修正後のコード
4. 修正する理由

この形式であれば、初心者でも変更箇所を確認しやすくなります。

HTML・CSS・JavaScriptを混ぜずに提示してもらう

複数のファイルを使用している場合は、どのファイルを修正するのか明確にしてもらいましょう。

修正コードを、
次のファイルごとに分けて提示してください。

・index.html
・style.css
・script.js

変更しないファイルは、
「変更なし」と明記してください。

各コードブロックの前に、
保存するファイル名を書いてください。

ファイル名が分からない状態でコードを貼り付けると、正しく動作しない可能性があります。

特にJavaScriptをCSSファイルへ貼り付けるなど、ファイルの種類を間違えないように注意してください。

一度に複数の修正を依頼しすぎない

次のような依頼は、修正範囲が広すぎます。

色と文字とメニューとスマホ表示を直して、
アニメーションも付けてください。

複数の修正を一度に依頼すると、どの変更が原因で新しい問題が起きたのか分かりにくくなります。

次のように分けて進めると安全です。

スマートフォン表示を直す
色を変更する
文字サイズを調整する
メニューを追加する
最後にアニメーションを加える

修正するたびに、ブラウザで表示を確認しましょう。

正常に動いた状態のファイルをコピーして残しておくと、問題が起きたときに元へ戻せます。

エラーメッセージをそのまま伝える

ブラウザの開発者ツールやコード編集ソフトにエラーが表示された場合は、内容を省略せずにChatGPTへ伝えます。

JavaScriptを実行すると、
ブラウザのコンソールに次のエラーが表示されます。

Uncaught TypeError: Cannot read properties of null

このエラーの意味を初心者向けに説明し、
考えられる原因と修正方法を教えてください。

【HTML】

【JavaScript】

エラーメッセージには、問題の種類や発生場所を特定する情報が含まれています。

自分で意味が分からなくても、そのままコピーして伝えましょう。

ただし、コード内にAPIキー、パスワード、個人情報などが含まれている場合は、送信前に削除してください。

修正後のコードを必ず確認する

ChatGPTが修正案を提示しても、必ず正しいとは限りません。

修正後は次の項目を確認します。

元の機能が動いているか
修正した場所が希望どおりか
ほかの場所が崩れていないか
パソコン表示に問題がないか
スマートフォン表示に問題がないか
リンクやボタンが動くか
エラーが新しく発生していないか

コードの一部を差し替えた後は、ブラウザを更新します。

変更が反映されない場合は、強制再読み込みやキャッシュの削除が必要になることもあります。

まずは保存できているか、正しいファイルを開いているかを確認しましょう。

ChatGPTをWordPressのWebサイト制作に活用する方法

ChatGPTは、HTMLファイルを使ったWeb制作だけでなく、WordPressのページ制作にも活用できます。

WordPressでは、管理画面から文章、画像、ボタンなどを配置できるため、HTMLを一から書かなくてもWebサイトを作れます。

ChatGPTには、主に次の作業を依頼できます。

固定ページの構成作成
見出しや本文の作成
ボタン文言の作成
ブロックの配置提案
カスタムHTMLの作成
追加CSSの作成
スマートフォン表示の改善
ページ内リンクの作成
FAQの作成
CTAの改善

ただし、WordPressテーマによって使える機能や表示方法が異なります。

使用しているテーマや編集方法を最初に伝えましょう。

この章でできるようになること

ここまででホームページの基本的な作り方は理解できました。

この章では、ChatGPTで作成したHTMLやCSSをWordPressへ取り込み、実際のWebサイトとして公開・運用する方法を紹介します。

「コードは作れたけれど、どこへ貼り付ければいいのか分からない」という初心者の方でも安心して進められる内容です。

WordPressでホームページを作る主な方法

WordPressでページを作る方法には、主に次の3つがあります。

ブロックエディターで作る

見出し、段落、画像、ボタン、カラムなどのブロックを組み合わせてページを作ります。

コード編集を減らしたい初心者に向いています。

ChatGPTには、次のように依頼できます。

WordPressのブロックエディターで、
1ページ型のサービス紹介ページを作ります。

使用するブロックを上から順番に提案してください。

各ブロックについて、
・ブロック名
・入力する見出し
・入力する文章
・配置のポイント
を説明してください。

HTMLコードではなく、
WordPressの操作手順として教えてください。

このように依頼すると、コードではなく、ブロックエディターでの作業手順として整理してもらえます。

カスタムHTMLブロックを使う

WordPressのカスタムHTMLブロックへ、HTMLコードを貼り付ける方法です。

独自のレイアウトを作りたい場合に使えます。

ただし、<!DOCTYPE html>や<head>などを含むページ全体のコードは、そのまま固定ページへ貼り付けません。

基本的には、表示したい部分のHTMLだけを使用します。

<section class="sf-service-section">
  <h2>サービス紹介</h2>
  <p>ここにサービス内容を入力します。</p>
</section>

CSSは、テーマの追加CSS機能や子テーマなどで設定します。

テーマやページビルダーの機能を使う

WordPressテーマやページビルダーには、独自のボタン、カラム、装飾ブロックなどが用意されている場合があります。

この場合は、無理にHTMLを追加せず、テーマの機能を使った方が管理しやすいことがあります。

ChatGPTに相談するときは、使用テーマやページビルダー名を伝えます。

WordPressテーマのCocoonを使用しています。

固定ページでサービス紹介ページを作ります。

できるだけカスタムHTMLを使わず、
ブロックエディターとCocoonの機能を使って作りたいです。

おすすめの構成と、
使用するブロックを順番に教えてください。

テーマの仕様は更新によって変わる場合があります。

管理画面で実際に利用できる項目も確認しながら進めましょう。

WordPress固定ページの構成を作ってもらう

ホームページやLPをWordPressで作る場合も、最初に構成を決めます。

WordPressの固定ページで、
オンライン英会話サービスの紹介ページを作ります。

ターゲットは、
英語を学び直したい30〜50代の会社員です。

目的は、
無料体験レッスンへの申し込みを増やすことです。

ブロックエディターで作成できる構成を提案してください。

各セクションについて、
・H2見出し
・掲載する内容
・使用するWordPressブロック
・CTAの配置
を説明してください。

提案された構成をもとに、WordPressの管理画面でブロックを配置します。

HTML・CSSを使わずに作る場合でも、ChatGPTは文章作成や配置設計に活用できます。

カスタムHTML用コードを作ってもらう

WordPress用のHTMLを依頼するときは、ページ全体ではなく、貼り付け可能な部分だけを求めます。

WordPressの固定ページにある
カスタムHTMLブロックへ貼り付けるコードを作成してください。

内容は、サービスの特徴を3つ並べるセクションです。

条件は次のとおりです。

・<!DOCTYPE html>は含めない
・<html>、<head>、<body>は含めない
・CSSは別にする
・クラス名の先頭にsf-service-を付ける
・パソコンでは3列
・スマートフォンでは1列
・ほかのページに影響しにくい構造にする

HTMLとCSSを別々に提示してください。

クラス名に共通の接頭語を付けると、既存テーマのCSSと名前が重なる可能性を減らせます。

たとえば、次のようにします。

<section class="sf-service-feature">

CSSも同じクラス名を指定します。

.sf-service-feature {
  padding: 64px 0;
}

追加CSSを使うときの注意点

WordPressの追加CSSへコードを貼り付けると、そのCSSがサイト全体へ読み込まれる場合があります。

一般的なクラス名を使うと、意図していない場所へ影響する可能性があります。

たとえば、次のような名前は、テーマ側でも使われている可能性があります。

.button {
  background-color: green;
}

このCSSでは、サイト内にあるすべての.buttonへ影響する可能性があります。

ページ専用のクラス名へ変更します。

.sf-english-lp-button {
  background-color: #16a34a;
}

さらに、ページ全体を専用の要素で囲む方法もあります。

<div class="sf-english-lp">
  <!-- ページの内容 -->
</div>

CSSでは、ページ専用クラスの内側だけに適用します。

.sf-english-lp .sf-english-lp-button {
  background-color: #16a34a;
}

このように範囲を限定すると、ほかのページやボタンへ影響しにくくなります。

WordPressテーマとCSSが競合する場合

ChatGPTが作成したHTML・CSSをWordPressへ貼り付けると、次のような問題が起こることがあります。

見出しの色が変わる
ボタンの形が変わる
余白が広くなる
横幅が狭くなる
箇条書きにテーマの装飾が付く
表示が中央揃えにならない
スマートフォンで崩れる

これは、WordPressテーマがもともと持っているCSSと、追加したCSSが同時に適用されるためです。

問題が起きた場合は、WordPress上で表示された状態と使用テーマをChatGPTへ伝えます。

WordPressテーマのCocoonを使用しています。

カスタムHTMLブロックへサービス紹介セクションを追加しましたが、
見出しにテーマ側の装飾が付いてしまいます。

このセクション内のH2だけ、
独自のデザインにしたいです。

ほかの記事や固定ページのH2には影響させないでください。

現在のHTMLとCSSを確認し、
修正方法を教えてください。

【HTML】

【CSS】

特定のセクション内だけを指定することで、影響範囲を限定できます。

.sf-english-lp .section-title {
  padding: 0;
  border: none;
  background: none;
}

ただし、テーマ側のCSS構造によっては、追加の指定が必要になる場合があります。

実際の画面を確認しながら調整しましょう。

WordPressではお問い合わせフォームを別に用意する

HTMLの見た目だけでお問い合わせフォームを作っても、入力内容が自動的にメールで送信されるわけではありません。

たとえば、次のようなHTMLを表示することはできます。

<form>
  <input type="text" placeholder="お名前">
  <input type="email" placeholder="メールアドレス">
  <button type="submit">送信する</button>
</form>

しかし、送信先や処理を設定していなければ、実際の問い合わせ受付には使えません。

WordPressでは、お問い合わせフォーム用のプラグインや外部フォームサービスを利用する方法があります。

ChatGPTにフォームの見た目を作ってもらうことはできますが、次の作業は別に必要です。

送信処理の設定
送信先メールアドレスの設定
自動返信メールの設定
迷惑メール対策
個人情報の取り扱い表示
動作確認

見た目が表示されているだけで、問い合わせが届くと思い込まないように注意しましょう。

ChatGPTにWordPress操作を相談するときのポイント

WordPressについて質問するときは、次の情報を伝えると回答が具体的になります。

使用しているWordPressテーマ
使用しているエディター
固定ページか投稿ページか
カスタムHTMLを使うか
追加CSSを使うか
作りたいページの種類
現在困っていること
希望する表示
パソコンとスマートフォンのどちらで問題があるか

たとえば、次のように依頼します。

WordPressテーマはCocoonです。

固定ページをブロックエディターで作成しています。

サービスの特徴を3つ横並びにしたいのですが、
スマートフォンでは1つずつ縦並びにしたいです。

カスタムHTMLを使わず、
WordPressのカラムブロックで作る手順を
初心者向けに説明してください。

同じページを作る場合でも、使用するテーマや編集方法によって手順は異なります。

最初に環境を伝えたうえで、実際の管理画面と照らし合わせながら進めましょう。

WordPressへコードを取り込めるようになると、ブログ記事や固定ページも効率よく作成できます。ChatGPTを使った記事制作にも興味がある方は、こちらも参考にしてください。

→ ChatGPTでブログ記事を書く方法｜初心者でもSEO記事を効率よく作成できる完全ガイド

ChatGPTで作ったWebサイトを公開する方法

ChatGPTでHTML・CSSを作成しても、そのままでは自分のパソコン内でしか確認できません。

インターネット上で誰でも見られるようにするには、Webサイトのファイルをサーバーへアップロードするか、WordPressなどの仕組みを使って公開する必要があります。

主な公開方法は次の3つです。

レンタルサーバーへアップロードする
WordPressで公開する
静的サイト向けの公開サービスを利用する

初心者は、自分の目的と今後の更新方法に合った方法を選びましょう。

この章でできるようになること

ホームページが完成したら、次はインターネット上へ公開しましょう。

この章では、初心者でも迷わないように、Webサイトを公開する基本的な方法と、それぞれの特徴を分かりやすく解説します。自分の目的に合った公開方法を選べるようになります。

レンタルサーバーへアップロードする

HTML・CSS・画像などを使って作成したWebサイトは、レンタルサーバーへファイルをアップロードすることで公開できます。

基本的な流れは次のとおりです。

レンタルサーバーを契約する
独自ドメインを用意する
公開用フォルダーを確認する
Webサイトのファイルをアップロードする
URLへアクセスして表示を確認する

サーバーによって、公開用フォルダーの名称や操作方法は異なります。

一般的には、サーバーのファイル管理画面やFTPソフトを使います。

アップロードするファイルの例は次のとおりです。

website
├── index.html
├── style.css
├── script.js
└── images
    ├── main-visual.jpg
    └── service-image.png

通常、index.htmlがトップページとして表示されます。

たとえば、次のURLへアクセスした場合です。

https://example.com/

サーバー側の公開フォルダーにindex.htmlが正しく配置されていれば、その内容が表示されます。

ファイルをアップロードするときの注意点

サーバーへファイルをアップロードするときは、フォルダー構成を変えないように注意します。

パソコン内では、次のような構成だったとします。

website
├── index.html
├── style.css
└── images
    └── main-visual.jpg

HTMLでは、画像を次のように指定しています。

<img src="images/main-visual.jpg" alt="サービス紹介画像">

この状態で、画像だけを別の場所へ移動すると表示されなくなります。

たとえば、サーバー上で次のように配置した場合です。

public
├── index.html
├── style.css
└── main-visual.jpg

HTMLはimagesフォルダー内を探すため、画像を見つけられません。

サーバーへアップロードするときも、パソコン内と同じ構成を保ちましょう。

独自ドメインとサーバーの役割

Webサイトを公開するときによく使われるのが、独自ドメインとレンタルサーバーです。

それぞれの役割は異なります。

項目	役割
独自ドメイン	Webサイトの住所
レンタルサーバー	Webサイトのファイルを保存する場所

たとえば、次のようなURLがあります。

https://example.com/

このうち、example.comがドメインです。

HTML、CSS、画像などのデータは、サーバー側に保存されています。

Webサイトを長期的に運営する場合は、独自ドメインを使うことで、サイト名に合ったURLを作れます。

ただし、ドメインとサーバーには契約費用や更新費用がかかる場合があります。

申し込み前に料金と更新条件を確認しましょう。

WordPressで公開する

WordPressを使用する場合は、管理画面から固定ページや投稿ページを作成して公開できます。

コードをすべてサーバーへ直接アップロードしなくても、見出し、文章、画像、ボタンなどを配置できます。

基本的な流れは次のとおりです。

WordPressへログインする
固定ページを新規作成する
見出し、文章、画像を配置する
必要に応じてカスタムHTMLを追加する
プレビューで確認する
パーマリンクを設定する
公開する
実際のURLで表示を確認する

ホームページとして使う固定ページを作成した場合は、WordPressの表示設定でトップページに指定できます。

ただし、テーマや設定によって画面の名称や手順が異なる場合があります。

静的サイト向けの公開サービスを利用する

HTML・CSSだけで作成したシンプルなWebサイトは、静的サイトを公開できるサービスを利用する方法もあります。

この方法は、ポートフォリオ、学習用ページ、試作品などに向いています。

利用するサービスによっては、次のような特徴があります。

無料プランがある
HTML・CSSをそのまま公開できる
独自ドメインを設定できる
ファイル更新を自動化できる
HTTPSに対応している

一方で、管理画面が初心者には難しい場合や、外部サービスのアカウント作成が必要な場合もあります。

公開方法や料金体系は変更される可能性があるため、利用前に公式情報を確認しましょう。

公開前にバックアップを作る

ファイルをサーバーへアップロードする前に、完成したWebサイトのコピーを残しておきましょう。

たとえば、次のように保存します。

website-backup-2026-07-17

修正前の状態を残しておけば、公開後に問題が起きた場合でも元へ戻しやすくなります。

特に、ChatGPTにコード全体を書き換えてもらう場合は、毎回バックアップを取るのがおすすめです。

バックアップには、次のファイルを含めます。

HTML
CSS
JavaScript
画像
使用した文章
設定内容
フォームの送信先
使用している外部サービスの情報

WordPressの場合は、テーマやプラグインの更新前にもバックアップを取ると安心です。

公開後に確認する項目

Webサイトは、サーバーへアップロードしただけで完成ではありません。

公開後は、実際のURLへアクセスして次の項目を確認します。

表示

ページが正しく開くか
文字化けしていないか
CSSが反映されているか
画像が表示されているか
パソコンとスマートフォンで崩れていないか

リンク

ヘッダーのリンクが動くか
CTAボタンが正しいページへ移動するか
ページ内リンクが動くか
外部リンクが正しいか
存在しないページへ移動しないか

フォーム

入力できるか
必須項目が動作するか
送信できるか
管理者へメールが届くか
自動返信が届くか
迷惑メールフォルダーへ入っていないか

内容

料金が正しいか
営業時間が正しいか
連絡先が正しいか
仮のURLや文章が残っていないか
サンプル用のメールアドレスが残っていないか

公開後の確認は、管理画面へログインした状態だけでなく、通常の閲覧状態でも行いましょう。

可能であれば、別のブラウザやスマートフォンからも確認します。

完成後は小さな改善を続けよう

ここまで実践できれば、ChatGPTを使ったホームページ制作の基本的な流れは一通り身に付いています。

もちろん、最初から完璧なWebサイトを作る必要はありません。

まずはシンプルな1ページでも公開してみることが大切です。実際に作って改善を繰り返すことで、ChatGPTへの指示の出し方やWebサイト制作のコツも自然と身に付いていきます。

次は、安全に運用するための注意点や、安心して利用するために知っておきたいポイントを確認していきましょう。

ChatGPTでWebサイトを作るときの注意点

ChatGPTはWeb制作を効率化できますが、出力された内容をそのまま信頼して公開するのは危険です。

コード、文章、画像、法律上の表示などを、人が確認する必要があります。

ChatGPTが作るコードは必ず正しいとは限らない

ChatGPTが生成したコードには、次のような問題が含まれる場合があります。

タグの閉じ忘れ
クラス名の不一致
CSSが反映されない
JavaScriptのエラー
存在しないファイルを読み込んでいる
スマートフォンで表示が崩れる
古い書き方が含まれる
不要なコードが多い
アクセシビリティへの配慮が不足している

見た目が表示されていても、内部に問題がないとは限りません。

特に、フォーム、決済、ログイン、会員登録などを含む場合は、専門的な確認が必要です。

個人情報や機密情報を入力しない

コードの相談をするときに、パスワード、APIキー、顧客情報などをそのまま入力しないようにします。

入力を避けるべき情報の例は次のとおりです。

サーバーのログイン情報
WordPressのパスワード
FTPアカウント
APIキー
決済サービスの秘密鍵
顧客の氏名や住所
問い合わせ内容
社内限定の情報
公開前の商品情報
契約書の機密部分

コード内に次のような値が含まれている場合は、削除または置き換えてから相談します。

API_KEY=xxxxxxxxxxxxxxxx

たとえば、次のように仮の値へ変更します。

API_KEY=YOUR_API_KEY

エラーメッセージやスクリーンショットにも個人情報が含まれる場合があります。

送信前に画面全体を確認しましょう。

著作権や商標に注意する

ChatGPTに文章やデザインを作ってもらう場合でも、他者の著作物を無断で使用してよいわけではありません。

特に注意するのは次の内容です。

他社サイトの文章
他社のロゴ
商品画像
イラスト
写真
キャラクター
有料フォント
音楽や動画
デザイン素材
商標を含む表現

「このサイトと同じものを作って」と依頼するのではなく、参考にしたい一般的な要素を伝えましょう。

たとえば、次のようにします。

余白が広く、白を基調とした
シンプルで信頼感のあるデザインにしてください。

画像や素材を使用する場合は、商用利用の可否、クレジット表記、加工条件などを確認します。

存在しない実績や口コミを掲載しない

ChatGPTは、文章を自然に見せるために、架空の実績や口コミを作ることがあります。

たとえば、次のような内容です。

利用者満足度98％
導入企業500社
業界No.1
利用者から高評価
3か月で売上が2倍
有名企業も導入

根拠がない場合は掲載してはいけません。

利用者の声を掲載する場合は、実際に許可を得た内容を使用しましょう。

匿名にする場合でも、文章を大きく変えると本来の意味と異なる可能性があります。

法律上必要な表示を確認する

Webサイトの内容によっては、法律や規約に基づく表示が必要です。

たとえば、次のようなページや情報が考えられます。

プライバシーポリシー
特定商取引法に基づく表記
利用規約
免責事項
運営者情報
広告であることの表示
Cookieに関する説明
個人情報の利用目的

必要な内容は、販売方法、業種、地域、扱う情報によって異なります。

ChatGPTにひな形を作ってもらうことはできますが、法的に十分かどうかは保証されません。

重要なWebサイトでは、専門家や関係機関へ確認しましょう。

フォームの安全性を確認する

お問い合わせフォームや申し込みフォームでは、個人情報を扱うことがあります。

見た目だけのHTMLフォームを作っても、安全な送信処理が自動的に付くわけではありません。

次のような対策が必要になる場合があります。

HTTPS対応
入力内容の検証
迷惑送信対策
不正なコードの入力対策
個人情報の保存方法
送信先の管理
自動返信内容の確認
エラー時の表示
データの削除方法

フォーム処理を自作する場合は、専門知識が必要です。

初心者は、信頼できるフォーム機能やサービスを利用する方が安全な場合があります。

決済や会員機能を安易に自作しない

ChatGPTに依頼すれば、決済画面やログイン画面のコードらしきものを作成できます。

しかし、表示できることと、安全に運用できることは別です。

次のような機能を含むWebサイトは、難易度が大きく上がります。

クレジットカード決済
会員登録
ログイン
パスワード再設定
個人情報の保存
購入履歴
有料コンテンツ
予約管理
管理者画面

これらの機能では、情報漏えいや不正アクセスを防ぐ対策が必要です。

初心者がChatGPTのコードだけを頼りに公開するのは避けましょう。

既存のECサービス、予約システム、会員管理サービスなどを利用する方法があります。

SEOはコードを作っただけでは完了しない

ChatGPTでWebサイトを作成しても、それだけで検索結果の上位へ表示されるわけではありません。

SEOでは、次のような要素も関係します。

読者の検索意図
ページ内容の質
タイトル
見出し構成
内部リンク
表示速度
スマートフォン対応
サイトの信頼性
情報の更新
他ページとの関連性

HTMLでは、最低限次の情報を確認します。

<title>ページタイトル</title>
<meta
  name="description"
  content="ページの内容を分かりやすく説明する文章"
>

ただし、タイトルやメタディスクリプションを設定しただけで順位が上がるわけではありません。

読者に役立つ情報を、分かりやすく提供することが重要です。

表示速度にも注意する

Webサイトへ大きな画像や複雑な動きを追加すると、表示が遅くなる場合があります。

特に注意するのは次の項目です。

容量の大きな画像
多数の動画
不要なJavaScript
外部フォントの読み込み
アニメーションの多用
大量のプラグイン
同じライブラリの重複読み込み

画像は、表示サイズに合った大きさへ調整します。

たとえば、Webページ上で横幅600px程度しか使わない画像に、横幅5000pxの画像をそのまま使用する必要はありません。

表示速度が気になる場合は、ChatGPTに次のような確認を依頼できます。

以下のHTMLとCSSを、
表示速度の観点から確認してください。

特に次の点をチェックしてください。

・不要なコード
・大きすぎる画像指定
・重複しているCSS
・不要なJavaScript
・外部ファイルの読み込み
・改善するときの優先順位

デザインを大きく変えず、
初心者でも対応できる改善案を提示してください。

アクセシビリティを確認する

Webサイトは、さまざまな環境や利用者が閲覧します。

次のような点を確認しましょう。

画像に適切な代替テキストがあるか
文字と背景を区別しやすいか
キーボードで操作できるか
見出しの順番が適切か
ボタンの意味が分かるか
入力欄に説明があるか
動きが激しすぎないか
文字を拡大しても読めるか

画像には、内容に応じてalt属性を指定します。

<img
  src="images/online-lesson.jpg"
  alt="パソコンを使ってオンライン英会話を受講する様子"
>

装飾目的で意味を持たない画像では、空のalt属性を使用する場合もあります。

<img src="images/decoration.svg" alt="">

すべての画像に同じ説明を入れるのではなく、その画像の役割に合わせましょう。

ChatGPTでのWebサイト制作が向いている人

ChatGPTを使ったWebサイト制作は、すべての人に同じように向いているわけではありません。

目的や必要な機能によって、向き不向きがあります。

小規模なWebサイトを作りたい人

次のようなシンプルなWebサイトは、ChatGPTを活用しやすい分野です。

個人のプロフィール
ポートフォリオ
店舗紹介
サービス紹介
イベント案内
1ページ型ホームページ
小規模なLP
学習用ページ

掲載する内容が少なく、複雑な機能が必要ない場合は、構成やコードを確認しながら作成できます。

Web制作の基礎を学びたい人

ChatGPTは、HTMLやCSSの意味を質問しながら学べる点もメリットです。

たとえば、次のように質問できます。

このCSSが何をしているのか、
1行ずつ初心者向けに説明してください。

専門用語を使う場合は、
その意味も説明してください。

【ここにCSSを貼る】

コードをただコピーするだけでなく、意味を確認しながら使うことで、少しずつ修正できる範囲が広がります。

試作品を短時間で作りたい人

本格的に制作する前に、ページ構成やデザインの方向性を確認したい場合にも向いています。

たとえば、次のような用途です。

新サービスの画面イメージ
LPの構成確認
社内提案用の試作品
デザインの比較
ボタンや導線の確認

最初から完成品を目指すのではなく、試作品として作成し、必要に応じて専門家へ引き継ぐ使い方ができます。

文章作成とコード制作をまとめて進めたい人

ChatGPTは、見出し、本文、CTA、FAQなどの文章と、HTML・CSSの両方を作成できます。

そのため、次の作業をまとめて進めたい人に向いています。

ページ構成を決める
文章を作る
ボタン文言を考える
HTMLへ組み込む
CSSでデザインする
修正案を出す

ただし、文章の事実確認とコードの動作確認は別に必要です。

ChatGPTでのWebサイト制作が向いていない人

次のような場合は、ChatGPTだけで制作を完結させるのは難しい可能性があります。

複雑なシステムを作りたい人

次のような機能を含むWebサイトでは、設計やセキュリティの専門知識が必要です。

大規模なECサイト
会員制サービス
決済機能
予約管理
複雑な検索
顧客管理
社内システム
多数の外部サービス連携

ChatGPTはコード作成の補助には使えますが、全体設計、テスト、セキュリティ確認まで自動で保証するものではありません。

完全に任せて公開したい人

ChatGPTが作成した内容を確認せず、そのまま公開したい人には向いていません。

Web制作では、次の確認が必要です。

文章の正確性
デザイン
コード
リンク
スマートフォン表示
法律上の表記
セキュリティ
更新方法

人による判断や確認を避けることはできません。

独自性の高いデザインを求める人

ChatGPTに一般的なWebデザインを作成してもらうことはできます。

しかし、ブランド戦略に基づく独自性の高いデザインや、細部まで作り込んだ表現では、デザイナーの経験や判断が必要になる場合があります。

特に、次のような案件です。

企業ブランドの全面刷新
高級感が重要なサイト
独自のアニメーション
複雑なビジュアル表現
厳密なデザインシステム
多数のページで統一されたUI

ChatGPTで試作品を作り、専門家へ方向性を伝えるために使う方法もあります。

保守や更新を行えない人

Webサイトは、公開後も更新が必要です。

たとえば、次の作業があります。

料金変更
営業時間変更
お知らせ追加
セキュリティ更新
リンク切れ確認
フォーム確認
バックアップ
サーバー契約の更新

公開時点で完成と考え、更新や管理を一切行えない場合は、運営が難しくなる可能性があります。

管理を外部へ依頼するか、更新しやすいサービスを選ぶことも検討しましょう。

ChatGPTとWeb制作サービスを使い分ける

Webサイトの作り方は、ChatGPTを使ったコード制作だけではありません。

目的に応じて、次の方法を使い分けられます。

方法	向いているケース
ChatGPT＋HTML・CSS	学習、試作品、小規模サイト
WordPress	記事や固定ページを継続的に更新する
ノーコードツール	コードを減らしてデザインを作りたい
ECサービス	商品販売や決済を安全に行いたい
予約サービス	日時予約や顧客管理を行いたい
制作会社・専門家	高品質、複雑な機能、業務利用

ChatGPTだけで無理にすべて作る必要はありません。

構成や文章作成にはChatGPTを使い、決済や予約には専用サービスを使うなど、組み合わせる方法もあります。

目的、予算、更新頻度、安全性を考えて選びましょう。

ChatGPTを使ったWebサイト制作のよくある質問

最後に、ChatGPTを使ったWebサイト制作について、初心者が疑問に感じやすい点をまとめます。

ChatGPTだけでWebサイトは作れますか？

簡単なWebページ、短いスクリプト、学習用コード、試作品などであれば、ChatGPTを使って作成できます。

ただし、ChatGPTだけで完全に自動化できるわけではありません。

生成されたコードを保存し、実行し、エラーを確認し、必要に応じて修正する作業は必要です。

また、次のような複雑なシステムでは、専門知識が求められます。

決済機能
会員登録
個人情報の保存
大規模なデータベース
業務用システム
高度なセキュリティ対策

ChatGPTは、プログラマーの代わりにすべてを保証する道具ではなく、コード作成や学習を支援する補助ツールとして使うのが適切です。

Web制作未経験でも使えますか？

プログラミング未経験でも使えます。

ChatGPTには、専門用語を使わずに説明するよう依頼できます。

たとえば、次のように質問します。

以下のコードを、
プログラミング未経験者にも分かる言葉で説明してください。

条件は次のとおりです。

・1行ずつ説明する
・専門用語には意味を付ける
・このコードが何をしているか最初に要約する
・変更してよい場所と変更しない方がよい場所を分ける

【ここにコードを貼る】

ただし、コードをすべて理解してから使わなければならないわけではありません。

最初は、次の流れを理解できれば十分です。

ChatGPTへ目的を伝える
コードを作ってもらう
正しいファイルへ保存する
実行する
問題があれば状況を伝える
少しずつ修正する

使いながら、HTML、CSS、JavaScriptなどの役割を覚えていきましょう。

無料版のChatGPTでもコードを書けますか？

利用できる機能や制限の範囲内で、コードの作成や説明を依頼できます。

ただし、利用できるモデル、回数、ファイル機能、処理できる情報量などは、プランや時期によって異なる場合があります。

無料版でも短いコードや基本的な質問には活用できますが、長いコードや複数ファイルを扱う場合は、分割して依頼する必要があるかもしれません。

現在のプランごとの機能については、ChatGPTの公式画面や公式情報を確認してください。

ChatGPTが作ったコードは商用利用できますか？

ChatGPTが生成したコードは、OpenAIの利用規約や適用される法律、第三者の権利に反しない範囲で、商用サイトや仕事に利用できます。

OpenAIの利用規約では、ユーザーとOpenAIの関係において、法律で認められる範囲でユーザーが出力を所有するとされています。

ただし、ChatGPTの出力はほかの利用者の出力と似る可能性があり、コードの正確性、安全性、独自性、第三者の権利を侵害していないことが保証されるわけではありません。

公開前には、特に次の点を確認しましょう。

他者のコードをそのまま再現していないか
使用するライブラリのライセンス
画像やフォントの利用条件
コードの安全性
商用環境で正常に動くか
第三者の権利を侵害していないか

ChatGPTが出力したコードの中に、外部ライブラリや素材が含まれている場合は、それぞれの利用規約やライセンスを確認します。

商用利用できることと、安全性や権利上の問題がないことは別です。

ChatGPTが作ったコードには著作権がありますか？

コードの権利関係は、利用したサービスの規約、コードの内容、使用した外部素材、地域の法律などによって判断が異なる場合があります。

また、短く一般的なコードと、独自性の高い大規模なコードでは扱いが同じとは限りません。

実際に公開または販売する場合は、少なくとも次の点を確認してください。

ChatGPTの利用規約
使用した外部ライブラリのライセンス
参考にしたコードの利用条件
勤務先や依頼主との契約
公開先サービスの利用規約

権利関係が重要な案件では、専門家へ確認する方が安全です。

ChatGPTのコードが動かないときはどうすればよいですか？

まず、問題が起きている状況を整理します。

次の項目を確認してください。

コードを正しいファイルへ保存したか
ファイル名を間違えていないか
HTMLとCSSが正しく接続されているか
JavaScriptを読み込んでいるか
保存後にブラウザを更新したか
エラーメッセージが表示されていないか
コードを一部削除していないか
全角記号が混ざっていないか
拡張子が正しいか

ChatGPTへ相談するときは、次の情報を伝えます。

以下のコードが動きません。

作りたいもの：
お問い合わせボタンを押すと、
メッセージを表示する機能

現在の状態：
ボタンを押しても何も起きない

使用環境：
Windows
Google Chrome
Visual Studio Code

表示されたエラー：
エラーは表示されていません

確認してほしいこと：
原因
修正するファイル
修正前と修正後のコード
初心者向けの説明

【HTML】

【CSS】

【JavaScript】

「動きません」だけでなく、作りたい動作と現在の状態を分けて伝えることが大切です。

エラーメッセージが英語でも大丈夫ですか？

英語のエラーメッセージでも、そのままChatGPTへ伝えられます。

たとえば、次のように依頼します。

次のエラーメッセージの意味を、
初心者向けの日本語で説明してください。

Uncaught ReferenceError: menuButton is not defined

次に、
・考えられる原因
・確認する場所
・修正例
を教えてください。

エラーメッセージを自分で翻訳して短くするよりも、全文をそのまま伝えた方が原因を判断しやすくなります。

行番号やファイル名が表示されている場合は、それも一緒に伝えましょう。

長いコードは一度に貼り付けてもよいですか？

コードが短ければ、一度に貼り付けても問題ありません。

長いコードでは、次のようにファイルごとに分けた方が確認しやすくなります。

【index.html】

【style.css】

【script.js】

さらに、問題が起きている部分が分かる場合は、関連する部分だけを貼る方法もあります。

ただし、必要なコードまで省略すると原因を特定できないことがあります。

どこまで送ればよいか分からない場合は、最初に次のように質問できます。

JavaScriptのメニュー開閉が動きません。

原因確認のために、
HTML、CSS、JavaScriptのどの部分を送ればよいですか？

コード内にパスワード、APIキー、メールアドレス、個人情報などが含まれていないかも確認してください。

スクリーンショットだけでも修正できますか？

スクリーンショットから、表示上の問題やデザイン改善案を相談することはできます。

たとえば、次のような問題です。

ボタンが画面からはみ出している
余白が狭い
文字が重なっている
画像の位置がずれている
スマートフォンで横スクロールが発生している

ただし、スクリーンショットだけでは、実際のHTMLやCSSの原因を正確に判断できない場合があります。

より具体的な修正コードが必要な場合は、次の情報も伝えましょう。

スクリーンショット
HTML
CSS
問題が起きる画面幅
希望する表示

ChatGPTにコードを書き直してもらえば安全ですか？

コードを書き直してもらっても、安全性が保証されるわけではありません。

見た目の修正と、セキュリティの確認は別です。

特に、次の機能では慎重な確認が必要です。

ログイン
パスワード
決済
会員登録
ファイルアップロード
データベース
個人情報の送信
管理画面
外部APIとの連携

重要な機能を公開するときは、専門知識を持つ人による確認を行いましょう。

Pythonコードはどこで実行できますか？

Pythonコードは、Pythonを実行できる環境で使用します。

主な方法は次のとおりです。

自分のパソコンにPythonをインストールする
Visual Studio Codeなどのエディターを使う
ブラウザ上の実行環境を使う
ノートブック形式の環境を使う
クラウド開発環境を使う

自分のパソコンで実行する場合は、Python本体のインストールや実行設定が必要です。

初心者は、ChatGPTに環境を伝えて手順を確認するとよいでしょう。

WindowsでPythonのコードを実行したいです。

プログラミング未経験者向けに、
次の内容を順番に説明してください。

1. Pythonが入っているか確認する方法
2. 入っていない場合の準備
3. sample.pyを作る方法
4. Visual Studio Codeで実行する方法
5. エラーが出たときの確認方法

インストール画面やエディターの仕様は更新されることがあるため、実際の画面も確認しながら進めてください。

HTML・CSS・JavaScriptのどれから学ぶべきですか？

Webサイトを作りたい初心者は、次の順番で学ぶと理解しやすいでしょう。

HTML
CSS
JavaScript

HTMLは、見出し、文章、画像、ボタンなどの構造を作ります。

CSSは、色、余白、文字サイズ、配置などのデザインを担当します。

JavaScriptは、メニューの開閉、ボタンを押したときの処理、表示の切り替えなどの動きを加えます。

最初から3つを完璧に覚える必要はありません。

HTMLで文章を表示し、CSSで見た目を整え、その後に必要なJavaScriptを追加する流れがおすすめです。

ChatGPTにWebアプリも作ってもらえますか？

簡単な計算ツール、入力フォーム、クイズ、ToDoリストなどの試作品であれば作成できます。

ただし、データを長期間保存する機能、ログイン、複数ユーザーでの利用などを加えると、次の知識が必要になります。

フロントエンド
バックエンド
データベース
サーバー
認証
セキュリティ
テスト
運用

画面上では動いていても、安全に公開できるとは限りません。

最初はブラウザ内だけで動く小規模なツールから始めるとよいでしょう。

ChatGPTでスマートフォンアプリも作れますか？

ChatGPTは、スマートフォンアプリの構成、画面設計、コード作成、エラー修正などにも活用できます。

ただし、アプリを実際に公開するには、次の作業が必要になる場合があります。

開発環境の準備
実機でのテスト
アカウント登録
ストアの審査
プライバシー情報の設定
アイコンや画面画像の準備
不具合修正
公開後の更新

スマートフォンアプリは、簡単なHTMLページより制作工程が多くなります。

初心者は、まずWebページやブラウザ上で動くツールを作り、プログラミングの基本に慣れてから挑戦する方法があります。

ChatGPTにすべてのコードを書かせても勉強になりますか？

コードをコピーするだけでは、仕組みを理解しにくい場合があります。

学習目的で使う場合は、次のような依頼を組み合わせると効果的です。

このコードについて、
次の順番で説明してください。

1. コード全体の目的
2. HTMLの役割
3. CSSの役割
4. JavaScriptの役割
5. 自分で変更する練習問題
6. 練習問題の答え

さらに、コードの一部を自分で変更して結果を確認します。

たとえば、次のような変更です。

見出しの文章を変える
ボタンの色を変える
カードを1つ追加する
余白を広くする
画像を差し替える
メッセージ内容を変える

小さな変更を繰り返すことで、コードと画面の関係を理解しやすくなります。

ChatGPTを使ったWeb制作に慣れてきたら、画像生成や資料作成なども組み合わせることで、さらに効率よくコンテンツを作れるようになります。

ChatGPTでWebサイトを作る方法のまとめ

ChatGPTを使えば、プログラミング未経験者でも、目的を伝えながらコード作成を進められます。

特に、次のような用途で活用できます。

HTML・CSSを使ったWebページ作成
JavaScriptを使った簡単な機能追加
Pythonを使った作業の自動化
Excel VBAやマクロの作成
エラーの原因確認
コードの解説
既存コードの改善
WebサイトやLPの試作
WordPress用の文章やコード作成

基本の進め方は次のとおりです。

作りたいものを具体的に決める
必要な機能を整理する
ChatGPTにコードを作ってもらう
ファイル名と保存場所を確認する
コードを実行する
エラーや表示を確認する
問題を具体的に伝えて修正する
機能を一つずつ追加する
パソコンとスマートフォンで確認する
安全性や権利関係を確認して公開する

ChatGPTへ依頼するときは、「コードを書いて」だけでなく、次の情報を伝えることが重要です。

何を作りたいか
誰が使うか
どの環境で動かすか
必要な機能
希望するデザイン
使用する言語
出力してほしいファイル
変更してよい範囲
初心者向けの説明が必要か

情報が具体的であるほど、希望に近いコードを受け取りやすくなります。

一方で、ChatGPTが生成したコードは、正しさ、安全性、権利関係を自動的に保証するものではありません。

特に、決済、ログイン、会員登録、個人情報、データベースなどを扱う場合は、専門的な確認が必要です。

最初は、シンプルなWebページや短い自動化コードから始めましょう。

生成されたコードを動かし、分からない部分を質問し、少しずつ修正することで、プログラミングの仕組みを理解できるようになります。

ChatGPTは、完成した答えを受け取るだけの道具ではありません。

コードを書いてもらい、意味を質問し、エラーを一緒に確認しながら使うことで、初心者の学習と制作を支える実用的なパートナーになります。

作成したWebサイトを公開してみましょう

📌SkillForge編集部おすすめ

ChatGPTを使えば、ホームページやランディングページの作成を効率化できます。

しかし、作っただけでは多くの人に見てもらうことはできません。

実際にインターネットへ公開し、検索やSNSからアクセスを集めるには、Webサーバーと独自ドメインが必要です。

SkillForgeでもWordPressとエックスサーバーを利用してサイトを運営しています。これからWebサイトやブログを公開したい方は、まずは信頼性の高いレンタルサーバーを選ぶことをおすすめします。

※本記事にはアフィリエイト広告が含まれています。