第11回: 実践（後編）：Webサイトの完成・品質チェック

この回の目標

  • 見た目・動き・レスポンシブを整えられる
  • サイトを完成させられる
  • 公開しても恥ずかしくない品質にできる
  • 「Web制作の一連の流れ」を理解する
目次
  1. 公開前の最終チェック
  2. HTML / CSS バリデーションチェック
  3. 表示速度の改善・軽量化
  4. SEOの考え方
  5. 見出し構造とSEO
  6. 画像とSEOの関係
  7. SEOセルフチェック
  8. まとめ

公開前の最終チェック

公開前チェックの重要性

コーディングが終わった瞬間は「やっとできた！」と達成感でいっぱい
でも、そこがゴールじゃない

  • 誤字脱字やリンク切れがあると、ユーザーは「このサイト、大丈夫かな？」と不安になってしまう
  • 自分が作ったサイトが、どんな画面サイズのスマホでも、どんな環境の人でも心地よく見られるかを確認するのは、エンジニアとしての「おもてなし」
  • 公開した後に大きなバグが見つかると、修正が何倍も大変になる

公開する前に、自分が作ったサイトは本当に公開できる状態なのか確認しよう

チェックする項目

レイアウト崩れ（PC / SP）

  • 画面幅 320px〜1920px で崩れていないか？
  • 文字がはみ出していないか
  • 自分のスマホでも必ず触ってみる

テキストの誤字脱字

  • 全角スペースが混入していないか？
  • 誤字・脱字はないか？
  • 句読点が統一されているか？
  • 余計な改行、改行忘れはないか？

画像の抜け・alt属性

  • 画像が正しく表示されているか
  • ダミー画像のままになっていないか
  • altが入っているか

不要なCSS・コメントアウト

  • テスト用に入れたCSSや、不要なコメントアウトは消しておく
/* 仮で入れたやつ */
/* .test { color:red; } */

リンク確認

  • すべてのボタンが正しく別ページへ飛べるか
  • ページ内リンクは動くか
  • target="_blank" の指定は適切か

HTML / CSS バリデーションチェック

バリデーションチェックとは？

ソースコード内の構文チェック、文法チェックを行い、「文法的に正しいか」を確認する作業

専用のツール（バリデーター）に通すことで、自分では気づけなかった「コードの正しさ」を客観的にチェックできる

HTMLでありがちなミス

閉じタグ漏れ

<p>テキスト

不正な入れ子

<p><div>テキスト</div></p>

<p>タグは段落を表すので、その中でブロック要素（<div>, <ul>, <section>など）を配置することは禁止

alt 属性忘れ

<img src="image.jpg">

CSSでありがちなミス

セミコロン（ ; ）の忘れ・コロン（ : ）との打ち間違い

1箇所忘れるだけで、その下の指定が全部無視されてしまう

color: #333   /* 最後のセミコロンが抜けている */
color; #333;  /* コロンがセミコロンになっている */

全角スペースの混入

「全角スペース」が紛れ込むと、記述は合っているのになぜかその一行だけ効かないなどの症状が発生する

エディターの拡張機能を使うことで、全角スペースを強調表示することができる

単位の付け忘れ

0 の時は単位がなくてもいいけど、それ以外は必須

  • NG: width: 100; （px？ %？）
  • OK: width: 100px; / width: 100%;

同じプロパティの重複

同じセレクタの中に、同じプロパティを2回書いてしまう

.btn {
  color: #fff;
  background-color: #28A745;
  color: #000; /* ◀︎ 下に書いた方が勝っちゃう！ */
}

おすすめチェックツール

  • W3C Markup Validation Service (HTML用)

    世界標準のHTMLチェックツール
    ファイルをアップロードするか、URLを貼るだけでエラーを教えてくれる

  • W3C CSS Validation Service (CSS用)

    CSSの記述ミスや、使えないプロパティがないかチェックしてくれる

どうしても消せないエラーもある

エラー0が理想だけど、外部ツール（地図やSNSボタン）の影響で消せないエラーが出ることもある

「自分が書いた部分に致命的なミスがないか」を優先して判断しよう

「致命的かどうか」で判断するのが実務視点

表示速度の改善・軽量化

「重いサイト」は、ユーザーが待てずに離脱してしまう原因になる

改善するためのチェック項目

画像の軽量化

  • 写真は WebP か JPG、ロゴは SVG になっている？
  • 必要以上に大きなサイズ（横幅5000pxなど）の画像を使っていない？

CSS / JSの読み込み順

  • CSSは <head> 内で先に、重い JS は </body> の直前で後に読み込もう
<head>
  CSS読み込み
</head>
<body>
  コンテンツ
  ・・・

  JS読み込み（最後）
</body>

SEOの考え方

SEO（Search Engine Optimization）とは？

「Googleなどの検索エンジンに、自分のサイトを正しく理解してもらい、見つけてもらいやすくする工夫」のこと

検索した人が「あ、このサイトに知りたいことが書いてありそう！」と思えるように、裏側で整えてあげるのがコーダーの仕事

metaタグ を使って、検索エンジンにサイトの情報を適切に伝えよう

metaタグの基本

metaタグは、ブラウザの画面には映らないサイトの自己紹介カードのようなもの

  • <title>: 検索結果で一番大きく出る名前
  • <meta name="description">: サイトの説明文（120文字前後）
  • <meta name="viewport"">: 表示領域の調整（レスポンシブ対応のサイトにするために必要）
<head>
  <meta charset="UTF-8">
  <title>サービス名｜キャッチコピー</title>
  <meta name="description" content="サービスの説明文を120文字前後で書く">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

OGP

LINEやX（旧Twitter）でシェアした時に出る「カード」の設定
これがあるだけで、クリック率が上がる

  • property="og:title": タイトル
  • property="og:description": 説明文
  • property="og:image": 画像URL
<meta property="og:title" content="第11回: 実践（後編）：Webサイトの完成・品質チェック - Coding Lab">
<meta property="og:description" content="コーディングが終わった後の「最終チェック」と「SEO対策」を解説。誤字脱字やレイアウト崩れの確認、metaタグやOGPの設定など、公開前に欠かせないポイントを指差し確認。機械と人間の両方の目で見直すことで、世界中の誰にでも正しく届く、高品質なWebサイトを目指します。">
<meta property="og:image" content="https://school.coding-lab.jp/images/mv.jpg">

画像URLは、いつもの ../img/（相対パス） ではなく、公開した後の https://〜（絶対パス） を書く必要がある

見出し構造とSEO

見出しとSEOの関係

ブラウザや検索エンジンは、「どのタグで囲まれているか」を見てそのページに何が書いてあるかを探っている

  • 見出しタグ（h1〜h6）を正しく使うことは、サイトの「目次」を伝えるのと同じこと
  • 「h1＝一番大事なテーマ」「h2＝主要なトピック」という階段がハッキリしていると、「このサイトは整理されていて、ユーザーに分かりやすい」と高く評価されやすい
  • 第10回で考えた「情報の優先順位」が、そのままSEOの強さに繋がる
    • h1（タイトル）: このページは何についてのページ？（1ページに1つ）
    • h2（大見出し）: どんな特徴やサービスがある？
    • h3（中見出し）: それぞれの詳しい内容は？
h1 第11回: 実践（後編）：Webサイトの完成・品質チェック
  h2 公開前の最終チェック
    h3 公開前チェックの重要性
    h3 チェックする項目
      h4 レイアウト崩れ（PC / SP）
      h4 テキストの誤字脱字
      h4 画像の抜け・alt属性
      h4 不要なCSS・コメントアウト
      h4 リンク確認
  h2 HTML / CSS バリデーションチェック
    h3 バリデーションチェックとは？
    h3 HTMLでありがちなミス
      h4 閉じタグ漏れ
      h4 不正な入れ子
      h4 alt 属性忘れ
    h3 CSSでありがちなミス
      h4 セミコロン（ ; ）の忘れ・コロン（ : ）との打ち間違い
      h4 全角スペースの混入
      h4 単位の付け忘れ
      h4 同じプロパティの重複
    h3 おすすめチェックツール
      h4 W3C Markup Validation Service (HTML用)
      h4 W3C CSS Validation Service (CSS用)
    h3 どうしても消せないエラーもある

画像とSEOの関係

imgタグの alt は、「画像が表示されない時」や「読み上げソフト」のための大切なテキスト

alt にはどんな文言を入れる？

意味のある画像

  • 内容を具体的に書く
<img src="web-design-meeting.jpg" alt="Web制作の打ち合わせ風景">

ロゴ画像

  • 会社名、サービス名を書く（「ロゴ」という言葉は入れなくてOK）
<img src="logo.svg" alt="株式会社〇〇">

装飾用の画像

  • 空っぽにする（読み上げをスキップさせるため）
<img src="bg.png" alt="">

SEOセルフチェック

SEO最終確認

SEOの設定が完了したら、公開前にこれだけは確認しよう

  • title は全ページ固有のものが入っている？（全ページコピペで同じものになっていないか？）
  • description は入っている？
  • h1 は1つだけになっている？
  • alt は適切に入っている？
  • 画像は重すぎない？（1枚1MB超えは要注意）

チェックにおすすめのツール

  • META SEO inspector

    Chrome の拡張機能
    metaタグ情報や見出し構造が簡単に確認できる

まとめ

今回のまとめ

今回作ったのは小規模なWebサイト
しかし設計・構造・軽量化・見出し設計の考え方は大規模サイトでも同じ

次回の予定

公開の仕方や納品方法など、仕事のリアルについて学びます