知っておきたい！ノーコード・AI時代のHTML基礎知識
AIが書いてくれる時代に、なぜ知っておく必要があるのか
ノーコードツールやAIによるコード生成が当たり前になり、プログラミング経験がなくてもWebサイトを作れる時代になりました。「バイブコーディング」と呼ばれる、AIに自然言語で指示を出す開発スタイルも広まっています。
ただ、実際にやってみると気づくことがあります。見た目はそれっぽく出来上がるのに、Google検索に引っかからない。SNSでURLを共有しても画像もタイトルも出ない。スマートフォンで見ると表示が崩れる。
これらの原因の多くは、HTMLの「目に見えない部分」が整っていないことにあります。
この記事は、プログラムの書き方を教えるものではありません。HTMLがどんな情報を持っていて、Webサイトを構成する技術がどう役割分担しているのか。その全体像を、ざっくり掴んでもらうための記事です。全体像がわかると、AIへの指示の質が変わります。
HTMLとは ― Webページが持つ「情報の入れ物」
HTMLは、Webページの構造と情報を定義するための言語です。ブラウザで表示されるすべてのページは、HTMLファイルがベースになっています。
HTMLの中身は、大きく分けて2つのブロックで構成されています。
<head> ― ページの裏方情報
ブラウザの画面には直接表示されない、ページに関する「メタ情報」が入る場所です。ページのタイトル、検索エンジン向けの説明文、SNS共有時の表示設定、スマートフォン対応の設定などが含まれます。
<body> ― ページの本文
ブラウザに実際に表示されるコンテンツが入る場所です。見出し、文章、画像、リンク、フォームなど、ユーザーが目にするものはすべてここに書かれています。
つまりHTMLは、「ユーザーに見せる本文」と「検索エンジンやSNSに伝える裏方情報」の両方を一つのファイルに持っています。AIにページを作らせると、本文（<body>）はきれいに出来上がっても、裏方（<head>）が手薄になることがあります。ここが最初の落とし穴です。
Webサイトを支える技術の役割分担
HTMLだけでWebサイトが成り立っているわけではありません。いくつかの技術が役割を分担して、ひとつのページを作り上げています。AIが生成するコードにもこれらが混在しているので、「何がどの役割か」を知っておくと見通しがよくなります。
HTML ― 構造と情報
「ここが見出し」「ここが段落」「ここに画像がある」という、ページの骨格と情報を定義します。家に例えるなら、間取り図と住所表示にあたります。
CSS ― 見た目とデザイン
色、フォント、余白、レイアウトなど、「どう見えるか」を担当します。HTMLが間取り図なら、CSSは壁紙や家具の配置です。
最近のAI生成コードでは「Tailwind CSS」というフレームワークがよく使われています。text-blue-600（青い文字）、mt-4（上に余白）のように、見た目の指定を短いクラス名で書くスタイルです。AIに「色を変えて」「余白を広げて」と指示すると、このクラス名を書き換えてくれます。
JavaScript ― 動きと処理
ボタンを押したら何かが起きる、スクロールしたらアニメーションする、フォームの入力内容をチェックする。こうした「動的な処理」を担当します。家に例えるなら、電気系統や水回りの配管です。
フレームワーク ― 上記をまとめる仕組み
React、Next.js、Vueといった「フレームワーク」は、HTML・CSS・JavaScriptをまとめて効率よく開発するための枠組みです。AIが生成するコードの多くは、何らかのフレームワークの流儀に沿って書かれています。
これらの技術の細かい文法を覚える必要はありません。大事なのは、AIが生成したコードの中に「構造（HTML）」「見た目（CSS）」「動き（JavaScript）」が混在しているということを知っておくことです。「見た目を変えたい」のか「動きを変えたい」のか「情報を変えたい」のかを区別して指示できると、AIとのやり取りがスムーズになります。
見える部分と見えない部分 ― 本当に差がつくのは裏側
ここからが、この記事で一番伝えたいことです。
Webサイトには「目に見える部分」と「目に見えない部分」があります。デザインやレイアウトは目に見えるので、AIに指示しやすい。「ボタンを赤くして」「画像を大きくして」と言えば、だいたい思い通りになります。
問題は「目に見えない部分」です。ここが整っていないと、サイトの検索順位、SNSでの見え方、表示速度、アクセシビリティに大きく影響します。そして、AIはこの部分を自発的に最適化してくれるとは限りません。
ページタイトルと説明文
Googleで検索したとき、検索結果に表示されるタイトルと説明文。これはHTMLの<head>内に書かれた情報です。
タイトル ― 検索結果やブラウザのタブに表示される。SEOの最重要項目のひとつ
説明文（meta description） ― 検索結果でタイトルの下に表示される文章。クリック率に直結する
AIにページを作らせたとき、タイトルが「Untitled」のままだったり、説明文が空だったりすることがあります。「ページタイトルは○○にして」「説明文は○○と設定して」と明示的に指示する必要があります。
OGP ― SNS共有時の見え方
URLをLINEやX（Twitter）に貼ったとき、タイトル・画像・説明文がカード形式で表示されるのを見たことがあると思います。あれを制御しているのがOGP（Open Graph Protocol）という仕組みです。
これを設定していないと、URLを共有しても画像もタイトルも出ない素っ気ないリンクになります。せっかく作ったページの第一印象がここで決まるので、地味ですが重要です。
AIに「OGPを設定して」と一言伝えるだけで対応してくれます。でも、その「一言」を知っているかどうかで結果が変わります。
構造化データ ― Googleへの自己紹介
Googleの検索結果で、会社名の横に住所や電話番号が表示されたり、パンくずリスト（トップ > サービス > 看板制作 のような階層表示）が出たりすることがあります。あれは「構造化データ」と呼ばれる情報をHTMLに埋め込むことで実現しています。
ブラウザ上では見えませんが、Googleのクローラーがこの情報を読み取って、検索結果の表示を充実させてくれます。特に地域ビジネスにとっては、住所・電話番号・営業時間などを構造化データで伝えることで、ローカル検索での露出が変わります。
AIに「構造化データを追加して」と指示すれば生成してくれますが、この仕組みの存在を知らなければ指示のしようがありません。
画像の代替テキスト
画像には「代替テキスト（alt属性）」という、目に見えない説明文をつけることができます。画像が読み込めなかったときに表示されるほか、視覚障がいのある方が使うスクリーンリーダーがこのテキストを読み上げます。Googleの画像検索にも影響します。
AIに画像を配置させると、この代替テキストが空だったり「image」のような意味のない値になっていることがあります。「画像の内容を具体的に説明するテキストをつけて」と指示するだけで、アクセシビリティとSEOの両方が改善します。
スマートフォン対応（viewport設定）
スマートフォンでページを正しく表示するための設定も、HTMLの裏方情報に含まれます。この設定がないと、PCサイトがそのまま縮小表示されて文字が読めない、という状態になります。
最近のフレームワークでは初期設定で入っていることが多いですが、AIにゼロからHTMLを生成させた場合は抜けることがあります。
ページの表示速度
画像のサイズが大きすぎる、不要なファイルを読み込んでいる、フォントの読み込みが遅い。こうした問題は見た目ではわかりませんが、ページの表示速度に直結します。Googleは表示速度を検索順位の要素として考慮しているため、SEOにも影響します。
AIに「画像を最適化して」「不要な読み込みを減らして」と指示できるかどうかは、こうした裏側の仕組みを知っているかどうかにかかっています。
AIに指示するときのチェックリスト
ここまでの内容を、AIにWebサイトを作らせる・改善させるときのチェックリストとしてまとめます。
見える部分（AIが得意。自然言語の指示で十分）
デザイン、色、レイアウト、フォントサイズ
コンテンツの追加・修正
ボタンやフォームの配置
見えない部分（意識して指示しないと抜け落ちる）
ページタイトル ― 各ページに適切なタイトルが設定されているか
説明文（meta description） ― 検索結果に表示される説明文があるか
OGP ― SNS共有時にタイトル・画像・説明が表示されるか
構造化データ ― 会社情報やパンくずリストがGoogleに伝わるか
画像の代替テキスト ― すべての画像に意味のある説明がついているか
スマートフォン対応 ― viewport設定が入っているか
表示速度 ― 画像サイズや読み込みファイルが最適化されているか
見た目が整っていても、この裏側が空っぽだと、検索に引っかからず、SNSで共有しても味気ない表示になり、スマートフォンで崩れるサイトになります。
おわりに ― コードを読む必要はない。でも「何があるか」は知っておく
プログラムの文法を覚える必要はありません。AIが書いてくれます。
でも、Webサイトが「どんな情報を持っているか」「どの技術が何を担当しているか」を知っているだけで、AIへの指示の質が変わります。特に、メタ情報や構造化データのような「目に見えない部分」は、知っている人が指示しない限り最適化されません。
AIは聞かれたことには答えてくれますが、聞かれなかったことは黙っています。
この記事が、AIでWeb制作を始めた方にとって、最初の一枚の地図になれば幸いです。
