← 記事一覧へ

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

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

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

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」よりビジネス成果を要求。

まとめ

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 は数ヶ月かけてトラフィックを漏らします。

お問い合わせ