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

この回の目標

  • 見た目・動き・レスポンシブを整えられる
  • サイトを完成させられる
  • 公開しても恥ずかしくない品質にできる
  • 「Web制作の一連の流れ」を理解する
目次
  1. 見出し1
  2. 見出し2
    1. 見出し2-1
    2. 見出し2-2

第11回：公開前チェック・SEO・最終仕上げ

① 公開前の最終チェック項目

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

  • 画面幅 320px〜1920pxで崩れていないか？
  • iPhone幅（375px）は必ず確認
  • 文字がはみ出していないか
  • 横スクロールが出ていないか

テキストの誤字脱字

  • 全角スペース混入
  • 誤字
  • 句読点の統一
  • 余計な改行

画像の抜け・alt属性

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

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


/* 仮で入れたやつ */
/* .test { color:red; } */

リンク確認

  • ページ内リンクは動くか
  • 別ページへ飛べるか
  • target="_blank" の指定は適切か

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

よくあるHTMLエラー

<p>テキスト
<p><div>テキスト</div></p>
<img src="image.jpg">

CSSでありがちなミス


color: #000;
color: black;

エラーは「致命的かどうか」で判断するのが実務視点。

③ 表示速度・軽量化の基本

画像形式の復習

  • 写真 → jpg / webp
  • 透過 → png
  • ロゴ → svg

表示サイズに合った画像を書き出すことが重要。

CSS / JS読み込み順


<head>
  CSS
</head>
<body>
  HTML
  JS（最後）
</body>

④ SEOの考え方（基礎）

構造・タイトル・見出しはコーダーの重要な役割。

⑤ metaタグの基本


<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（紹介）


<meta property="og:title" content="タイトル">
<meta property="og:description" content="説明文">
<meta property="og:image" content="画像URL">

⑥ 見出し構造とSEO


<h1>Web制作サービス</h1>
<h2>特徴</h2>
<h2>料金</h2>

⑦ 画像とSEO


<img src="web-design-meeting.jpg" alt="Web制作の打ち合わせ風景">

装飾画像の場合：

<img src="bg.png" alt="">

⑧ SEOセルフチェック

  • titleは入っているか
  • descriptionはあるか
  • h1は1つか
  • altは最低限入っているか
  • 画像は重すぎないか

⑨ 完成

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

次回は「公開・納品・仕事のリアル」へ進みます。