Rufat Nuriyev 更新

サイトオーナーのための HTML：納品検収で最低限理解すべきこと

ノートパソコンの画面上のHTMLコードとWebサイトのページ構造

HTML はページの「骨組み」です。見出し、本文、ボタン、フォーム、リンクを定義します。これがないと、ブラウザはメイン見出し、商品価格、問い合わせフォームの位置が分かりません。オーナーが自分でマークアップを書く必要はありませんが、外注サイトの検収時に HTML の基礎を知っていると、支払い前に問題を見つけられます。SEO 用タイトルの欠落、壊れたフォーム、Google に読めない「画像だけの文字」、alt のない写真、全ページで重複する H1 などです。プログラミング講座ではなく、30 分の常識チェックリストです。

  • HTML - ブラウザと検索エンジンが読むページ構造
  • オーナーに必要な理由 - 納品を理解した上で受け入れ、マークアップで SEO と CV を失わない
  • 確認項目 - 見出し、フォーム、リンク、画像 alt、モバイル表示
  • CSS・JS との関係 - HTML は「何があるか」、CSS は「見た目」、JavaScript は「動き」
  • 主なリスク - 画面は綺麗だが、下層のマークアップが空または不良

ガラスのプレゼンテーションボード上のHTML、CSS、JSの役割の図

HTML を平易に説明

HTML（HyperText Markup Language）はマークアップ言語であり、プログラミング言語ではありません。タグでブロックを記述します。<h1> - メイン見出し、<p> - 段落、<a> - リンク、<form> - フォーム、<img> - 画像。

簡略例：

<h1>タシケントのマンションリフォーム</h1>
<p>工期 14 日から。無料現地調査。</p>
<a href="/contacts/">お問い合わせ</a>

ブラウザは HTML をコードとして表示せず、この指示でページを組み立てます。Google や Yandex も HTML に依存します。<title>、<h1>、リンクテキストなど。

技術 役割 たとえ
HTML ブロックの構造と意味 建物の骨組み
CSS 色、フォント、余白、レスポンシブ 内装と外観
JavaScript クリック、カート、スライダー、チャット エレベーター、空調
PHP / バックエンド サーバーデータ、注文、メール 壁の向こうの設備

重要： WordPress、Tilda、Bitrix、Django サイトもブラウザへ HTML を返します。CMS が自動生成するだけです。検収では結果を見れば十分です。

検収チェックリスト

1. 見出しと SEO マークアップ

  • ページごとに 1 つの <h1>
  • H2、H3 の階層が論理的
  • <title> が一意でキーワードを含む
  • meta description が空でなく、他ページのコピーでない

2. テキスト vs 「文字入り画像」

価格やキャンペーンが JPG/PNG のみ だと検索エンジンは読めません。SEO 監査 では赤信号です。

ルール： 重要テキストは HTML 内に。

3. 画像：alt

  • 商品写真に alt 必須
  • ロゴ alt に社名

4. リンク

  • 電話は tel:+998...
  • 内部リンクに 404 なし
  • リンク文字が意味を持つ

5. フォーム

  • フィールドに name、id
  • 送信は <button type="submit">
  • 送信後に明確な完了メッセージ
  • モバイル：tel、email タイプ

6. モバイル版

横スクロールなしで読めること。UX と GEO プロモーション に影響。

7. 言語とエンコーディング

  • <html lang="ja">
  • UTF-8 で文字化けなし

セマンティック HTML

タグ 用途
<header> ヘッダー
<nav> ナビ
<main> メインコンテンツ
<article> 記事
<section> セクション
<footer> フッター

セマンティクスは Google が本文を理解するのに役立ちます。全部 <div> だと SEO に不利。

HTML、CSS、JavaScript - 検収時の責任分担

不満 原因 担当
字体・色がダサい CSS デザイナー
ボタンが効かない JavaScript フロント
Google がテキストを見ない HTML / SSR 開発 + SEO
フォームメールが来ない バックエンド（PHP） バックエンド
スマホで崩れる CSS + HTML コーディング

マークアップにテキストがない - HTML とコンテンツの問題です。

よくある外注ミス

  • 全ページ同じ <title>
  • 汎用 H1
  • 空の meta
  • ビルダー利用だが文案・meta を編集不可 - ロックイン
  • 非表示キーワード - ペナルティリスク
  • PDF iframe だけのページ - SEO 弱い

プログラミングなしで HTML を見る

  1. ページのソースを表示
  2. DevTools (F12) - Elements
  3. SEO 拡張機能
  4. Google Search Console
  5. W3C バリデータ - 任意

30 分ルート： トップ、サービス、問い合わせ、商品 1 件 - 各 page で title、H1、フォーム、電話、alt。

HTML 修正を求めるべきとき

状況 対応
重要ページに unique な title/H1 なし 署名前
価格表が PNG のみ HTML へテキスト移行
フォーム成功表示だけでメールなし バックエンド + HTML
JS オフで真っ白 SEO のため HTML にコンテンツ（JavaScript 参照）
商品 alt なし 広告前

CMS で「完璧 W3C」よりビジネス成果を要求。

チェックリストを短縮してよいケース

すべてのサイトに 30 分のフルチェックが必要なわけではありません。以下の場合は、要点（フォームが動く、電話がタップできる、モバイルで表示が崩れない）だけの確認に絞ってもかまいません。

  • 社内向けサイト(管理画面、イントラネット)で、検索で見つかる必要がない場合
  • 単発キャンペーン用のランディングページで、短期間しか使わずオーガニック検索での上位表示を狙わない場合
  • 信頼できる外注先で、保証期間があり迅速な修正実績がある場合
  • 販売や検索集客が目的ではなく、単発のオフラインイベント用の案内ページである場合

それ以外、特に検索から問い合わせを獲得したいページでは、チェックリストを省略しないでください。

まとめ

HTML は目に見えにくい基盤で、ブラウザ、検索、外注品質の判断材料になります。HTML/CSS/JS の違い、短いチェックリスト、画像だけのテキスト拒否、title・H1・alt 用の CMS アクセス。

悪い HTML は順位とリードを静かに奪います。

よくある質問

経営者は HTML を学ぶ必要がある？

日常業務では不要 - CMS とチェックリストで足ります。検収と SEO 管理なら基礎は有用。2-3 時間でトップの title ミスを防げます。

HTML と CSS の違いは？

HTML - ページに何があるか。CSS - どう見えるか。構造は HTML、見た目は CSS。

WordPress の HTML はどこから？

CMS が自動生成します。管理画面で編集し、システムがマークアップを組み立てます。WordPress、Bitrix、OpenCart も参照。

HTML が悪いと分かるサインは？

全 page 同じ title、H1 なし/複数、重要文が画像のみ、ラベルなしフォーム、死リンク、alt なし。ソース表示、SEO 拡張、SEO 監査。

HTML は SEO と売上に効く？

はい。 title、H1、インデックス可能テキスト、alt、モバイルで壊れにくいフォーム、tel: リンク。悪い HTML は数ヶ月かけてトラフィックを漏らします。

この記事の用語

CV — Computer Vision — コンピュータビジョン

Tilda — block-based website and landing page builder — サイトやLP向けのブロック型ビルダー

CMS — Content Management System — コンテンツ管理システム

GEO — Generative Engine Optimization — 生成系検索の回答向け最適化

SSR — Server-Side Rendering — サーバーサイドレンダリング

iframe — embedded HTML frame

OpenCart — open-source PHP e-commerce platform — オープンソースのPHP ECプラットフォーム

お問い合わせ