未分類

AIでHTMLを作る方法｜初心者でもWebページを作れる手順を解説

2026.08.31

検索者の悩み

「HTMLを勉強したいけれど、どこから書けばいいかわからない」「AIにWebページを作ってもらえると聞いたけれど、本当に初心者でも使えるの？」「ChatGPTにHTMLを書いてもらったあと、どうやって確認すればいい？」と疑問に思う人も多いでしょう。

HTMLは、Webページの見出し、文章、画像、リンク、ボタンなどの構造を作るための言語です。たとえば、ブログ記事のタイトルを表示したり、画像を置いたり、別のページへのリンクを作ったりできます。

現在は、ChatGPTなどのAIに「こんなWebページを作りたい」と日本語で伝えるだけで、HTMLのたたき台を作ってもらえます。ただし、AIが作ったコードをそのまま使うのではなく、内容を確認しながら少しずつ修正することが大切です。

MDNでは、HTMLをWebコンテンツの構造や意味を定義するための基本技術として説明しています。
https://developer.mozilla.org/ja/docs/Web/HTML

先に結論

AIでHTMLを作るなら、「作りたいページを日本語で説明する → HTMLを書いてもらう → コードの意味を説明してもらう → ブラウザで表示する → 修正をAIに頼む」という流れがおすすめです。

たとえば、「自己紹介ページを作りたい」とだけ頼むよりも、「名前、プロフィール、趣味、問い合わせボタンがあるシンプルな自己紹介ページをHTMLで作ってください」と伝える方が、希望に近いコードになります。

重要なのは、最初から完璧なページを作ろうとしないことです。まず簡単な形を作り、そこから見出し、画像、リンク、色などを少しずつ追加していく方が失敗しにくくなります。

超簡単な説明

HTMLは、Webページの「骨組み」を作るものだと考えるとわかりやすいです。

たとえば、家を作るときに部屋や壁の位置を決めるのがHTMLです。見た目の色やデザインを整えるのはCSS、ボタンを押したときの動きなどを作るのはJavaScriptです。

CSSとは、文字の色、余白、背景色など、Webページの見た目を整えるための言語です。JavaScriptとは、ボタン操作や計算など、Webページに動きを付けるための言語です。

AIには、「HTMLだけ作って」「CSSも一緒に付けて」と指定できます。初心者なら、まずHTMLだけを作って仕組みを理解してから、CSSやJavaScriptを追加する方法がおすすめです。

AIでHTMLを作る手順

1．作りたいページを日本語で説明する

最初に、「何を作りたいか」を整理します。

たとえば、「自己紹介ページ」「店舗案内ページ」「商品紹介ページ」「簡単なプロフィールページ」などです。

AIには、「HTML初心者です。自己紹介用のWebページを作ってください。見出し、プロフィール文、趣味の一覧、SNSへのリンクを入れてください」と頼みます。

さらに、「できるだけ簡単なコードにしてください」と伝えると、初心者向けの構成になりやすくなります。

OpenAIも、AIへの指示では目的や条件を具体的に伝えるほど、意図に合った回答を得やすいと案内しています。
https://help.openai.com/ja-jp/articles/10032626-prompt-engineering-best-practices-for-chatgpt

2．HTMLの基本構造を作ってもらう

HTMLには基本的な形があります。

代表的な要素として、html、head、bodyなどがあります。

headはページの設定情報を入れる部分で、bodyは実際に画面へ表示される内容を書く部分です。

AIに「HTMLの基本構造も含めてください」と頼めば、ブラウザでそのまま開ける形にしてもらえます。

3．コードの意味を説明してもらう

AIがHTMLを作ったら、そのままコピーするだけで終わらせず、「初心者向けに1つずつ説明してください」と聞いてみましょう。

たとえば、<h1>はページの最も重要な見出し、<p>は文章、<a>はリンクを作るためのタグです。

タグとは、HTMLで「ここは見出し」「ここは文章」と役割を指定するための記号です。

意味がわからない部分があれば、「このdivは何のために使っていますか？」のように、その部分だけ質問しても構いません。

4．HTMLファイルとして保存して確認する

コードができたら、テキストエディタなどに貼り付け、ファイル名をindex.htmlとして保存します。

そのファイルをブラウザで開くと、Webページとして表示されます。

ここで文字が表示されるか、リンクが動くか、画像が表示されるかを確認します。

HTMLの基本的な書き方や各要素について不安がある場合は、MDNのHTMLガイドで確認できます。
https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Structuring_content

5．修正したい部分をAIに伝える

表示を確認したら、気になる部分をAIに修正してもらいます。

たとえば、「プロフィール画像を追加してください」「趣味を箇条書きにしてください」「ページ下部に問い合わせ先を追加してください」と頼みます。

さらに、「変更した場所だけ教えて」と伝えれば、どこを直したのか確認しやすくなります。

実例

たとえば、簡単な自己紹介ページを作りたい場合は、AIに次のように依頼します。

「HTML初心者です。自己紹介用のWebページを作ってください。タイトルは『私のプロフィール』にして、自己紹介文、趣味3つ、好きなWebサイトへのリンクを入れてください。CSSは使わず、HTMLだけで作ってください。」

AIがコードを作ったら、次に「趣味の部分を番号付きの一覧にしてください」と頼みます。

さらに、「プロフィール画像を表示する場所を追加してください」「画像が表示されなかった場合に代わりの文字が出るようにしてください」と追加できます。

このように、最初は簡単なHTMLを作り、必要な機能を少しずつ追加すると理解しやすくなります。

失敗・注意点

AIでHTMLを作るときに注意したいのは、AIが作ったコードが必ず正しいとは限らないことです。

タグの閉じ忘れ、不要なコード、古い書き方などが含まれる場合があります。そのため、必ずブラウザで表示を確認しましょう。

また、HTMLだけで見た目まで完璧にしようとすると、コードがわかりにくくなる場合があります。

ページの構造はHTML、見た目はCSS、動きはJavaScriptと役割を分ける方が管理しやすくなります。

もう一つ注意したいのが、個人情報です。AIにプロフィールページを作ってもらう場合でも、本名、住所、電話番号などをそのまま入力する必要はありません。

公開するWebページに個人情報を載せる場合も、本当に公開して問題ない内容か確認しましょう。

FAQ

Q．HTMLを知らなくてもAIでWebページを作れますか？

簡単なページなら作れます。

ただし、AIが作ったHTMLを修正したり、問題を見つけたりするためには、h1、p、a、imgなど基本的なタグを少しずつ覚えると便利です。

Q．AIに何と頼めばいいですか？

「HTMLを書いて」だけではなく、ページの目的と入れたい内容を具体的に伝えます。

たとえば、「カフェの紹介ページをHTMLで作ってください。店名、営業時間、メニュー3つ、住所、問い合わせリンクを入れてください。初心者向けの簡単なコードにしてください」という形です。

Q．AIが作ったHTMLが表示されない場合はどうしますか？

コード全体と、どのような状態になっているかをAIに伝えます。

「このHTMLをブラウザで開いても画像が表示されません。原因を初心者向けに説明して、修正してください」と聞くと、原因を探しやすくなります。

Q．HTMLだけでWebサイトを作れますか？

文章や画像、リンクを表示するだけならHTMLだけでも作れます。

ただし、見た目を整えるならCSS、ボタンを押したときの処理などを追加するならJavaScriptも使うことが一般的です。

Q．AIで作ったHTMLをそのまま公開してもいいですか？

公開前に必ず内容と動作を確認しましょう。

リンク先、画像、著作権、個人情報、スマートフォンでの表示なども確認してから公開する方が安全です。

次にやること

まずは、AIに**「HTML初心者です。『こんにちは』という見出しと、簡単な自己紹介文を表示するWebページを作ってください。HTMLの基本構造を含め、各タグの意味も説明してください」**と入力してみましょう。

できたコードをindex.htmlとして保存し、ブラウザで開いて確認します。

その後、「画像を追加したい」「リンクを追加したい」「趣味を一覧にしたい」と一つずつ変更してみます。

AIでHTMLを作るときに大切なのは、作る → 表示する → 理解する → 修正するという流れです。

AIに全部任せるのではなく、「このタグは何をしているのか」「なぜこの書き方なのか」と質問しながら使えば、Web制作そのものを学ぶ教材としても活用できます。