# ウェブページ制作チェックリスト【初心者向け解説付き】
## 📱 レスポンシブデザイン
### - [ ] スマートフォン（320px〜）で表示確認
**意味**: 小さい画面でもちゃんと見られるかチェック
**なぜ必要**: ユーザーの半分以上がスマホでサイトを見ています
**確認方法**: ブラウザの開発者ツール（F12）でスマホ表示をシミュレート
### - [ ] タブレット（768px〜）で表示確認
**意味**: iPadなど中サイズの画面での見え方をチェック
**なぜ必要**: スマホとPCの中間サイズで、レイアウトが崩れやすい
**確認方法**: 開発者ツールでiPadサイズに設定して確認
### - [ ] デスクトップ（1024px〜）で表示確認
**意味**: 一般的なパソコンの画面サイズでの表示確認
**なぜ必要**: まだまだPC利用者も多い
**確認方法**: 普通にPCブラウザで開いて確認
### - [ ] 大画面（1440px〜）で表示確認
**意味**: 大きなモニターでの表示確認
**なぜ必要**: コンテンツが広がりすぎて読みにくくならないようにする
**確認方法**: ブラウザウィンドウを最大化して確認
### - [ ] 横向き表示の確認
**意味**: スマホやタブレットを横にしたときの表示
**なぜ必要**: 動画視聴時など、横向きで使う人もいます
**確認方法**: 開発者ツールでデバイスの向きを変更
### - [ ] viewport metaタグの設定
**意味**: ``の記述
**なぜ必要**: これがないとスマホで正しく表示されません
**確認方法**: HTMLの``内にこのタグがあるか確認
### - [ ] タッチ操作に適したボタンサイズ（最小44x44px）
**意味**: ボタンやリンクを指で押しやすい大きさにする
**なぜ必要**: 小さすぎると誤タップが増えてユーザーにストレス
**確認方法**: 開発者ツールで要素のサイズを測定
### - [ ] メディアクエリの適切な設定
**意味**: CSS で `@media (max-width: 768px) {}` のような画面サイズ別の指定
**なぜ必要**: 画面サイズによってレイアウトを変えるため
**確認方法**: CSSファイルに適切なブレークポイントがあるか確認
---
## 🔍 SEO対策
### 基本設定
### - [ ] titleタグの設定（各ページ固有、50-60文字）
**意味**: `ページタイトル`の設定
**なぜ必要**: Google検索結果に表示される最重要要素
**ポイント**: ページごとに異なるタイトルを。同じタイトルはNG
**例**: `美味しいコーヒーの淹れ方 | 初心者ガイド`
### - [ ] meta descriptionの設定（各ページ固有、150-160文字）
**意味**: ``
**なぜ必要**: 検索結果の下に表示される説明文になります
**ポイント**: 魅力的な文章でクリック率が変わります
**例**: `初心者でも美味しいコーヒーが淹れられる方法を写真付きで解説。必要な道具から豆の選び方まで、プロが教えるコツを紹介します。`
### - [ ] h1タグの適切な配置（1ページに1つ）
**意味**: `メインの見出し
`
**なぜ必要**: ページの主題を示す最重要見出し
**ポイント**: 1ページに複数あると何が主題かわからなくなる
**例**: `初心者のためのコーヒーの淹れ方
`
### - [ ] h2-h6タグの階層構造
**意味**: 見出しを h1 → h2 → h3 のように順番に使う
**なぜ必要**: 文章の構造がGoogleや読者に伝わりやすくなる
**NG例**: h1の次にいきなりh3を使う
**OK例**: h1 → h2 → h3 → h2 → h3
### - [ ] 画像のaltタグ設定
**意味**: `
`
**なぜ必要**: 視覚障害者や画像が表示されないときに内容を伝える、SEOにも効果
**ポイント**: 画像の内容を具体的に説明する
**NG例**: `alt="画像"`
**OK例**: `alt="ドリッパーでお湯を注いでいる様子"`
### - [ ] 適切なURL構造（シンプル、わかりやすい）
**意味**: URLを意味のある英単語で構成する
**なぜ必要**: ユーザーもGoogleもURLから内容を推測できる
**NG例**: `example.com/page123?id=abc`
**OK例**: `example.com/coffee/brewing-guide`
### - [ ] robots.txtファイルの設置
**意味**: サイトのルートに置くファイルで、検索エンジンへの指示を書く
**なぜ必要**: 検索結果に表示したくないページを指定できる
**場所**: `example.com/robots.txt`
**例**: 管理画面をクロールさせない設定など
### - [ ] XMLサイトマップの作成
**意味**: サイト内の全ページリストをXML形式で作成
**なぜ必要**: Googleがサイト構造を理解しやすくなる
**ツール**: WordPressならプラグイン、それ以外は自動生成ツール
**場所**: `example.com/sitemap.xml`
### 構造化データ
### - [ ] schema.orgのマークアップ（適切な種類）
**意味**: JSON-LD形式でページの情報を機械読み取り可能にする
**なぜ必要**: Google検索結果でリッチスニペット（星評価など）が表示される
**種類**: Article（記事）、Recipe（レシピ）、Product（商品）など
**ツール**: Googleの構造化データマークアップ支援ツール
### - [ ] Open Graphタグ（SNSシェア用）
**意味**: ``など
**なぜ必要**: FacebookやLINEでシェアされたときの見た目を制御
**必須項目**: og:title, og:description, og:image, og:url
**画像サイズ**: 1200x630pxが推奨
### - [ ] Twitter Cardタグ
**意味**: ``など
**なぜ必要**: Twitterでシェアされたときの表示を最適化
**種類**: summary（小さい画像）、summary_large_image（大きい画像）
**確認**: Twitter Card Validatorで事前チェック可能
### - [ ] canonicalタグの設定
**意味**: ``
**なぜ必要**: 重複コンテンツがある場合、どれが本物か指定する
**例**: スマホ版とPC版で別URLの場合など
**ポイント**: 基本的には自分自身のURLを指定
### パフォーマンスSEO
### - [ ] ページ読み込み速度（Core Web Vitals）
**意味**: Googleが定めた3つの速度指標（LCP、FID、CLS）
**なぜ必要**: 遅いサイトは検索順位が下がる
**目標**: 緑色（Good）の範囲に入れる
**測定**: PageSpeed InsightsやSearch Consoleで確認
### - [ ] モバイルフレンドリーテスト合格
**意味**: Googleのモバイルフレンドリーテストツールで合格する
**なぜ必要**: スマホで使いやすいサイトは検索で優遇される
**ツール**: https://search.google.com/test/mobile-friendly
**確認項目**: 文字サイズ、タップ要素の間隔など
### - [ ] HTTPSの実装
**意味**: URLが`https://`で始まる（暗号化通信）
**なぜ必要**: セキュリティとSEOの両方で必須
**取得方法**: レンタルサーバーなら無料で取得できることが多い
**表示**: ブラウザのアドレスバーに鍵マークが出る
### - [ ] 301リダイレクトの適切な設定
**意味**: 古いURLから新しいURLへの自動転送
**なぜ必要**: URL変更時にSEO評価を引き継げる、404エラーを防ぐ
**種類**: 301（恒久的）、302（一時的）
**設定**: .htaccessファイルやサーバー設定で行う
### - [ ] 404ページのカスタマイズ
**意味**: 存在しないURLにアクセスしたときの表示
**なぜ必要**: ユーザーを適切なページに誘導できる
**含めるもの**: ホームリンク、検索ボックス、人気ページへのリンク
**ポイント**: ユーモアを交えつつ、離脱を防ぐ
### ローカルSEO（実店舗がある場合）
### - [ ] Googleビジネスプロフィールの登録・最適化
**意味**: Google検索やマップに店舗情報を表示
**なぜ必要**: 「近くの○○」検索で表示される、ローカル検索の必須
**登録**: https://business.google.com から無料登録
**最適化**: 写真、営業時間、カテゴリ、投稿を充実させる
**確認**: Google検索で店舗名を検索して表示されるか
### - [ ] NAP情報の一貫性（Name, Address, Phone）
**意味**: サイト内のすべての場所で店舗名・住所・電話番号を統一
**なぜ必要**: 情報が異なるとGoogleが混乱し、ローカルSEOに悪影響
**確認**: フッター、お問い合わせ、会社概要で完全一致するか
**ポイント**: 表記ゆれ（株式会社/㈱、1-2-3/1丁目2番3号）も統一
### - [ ] ローカル構造化データ（LocalBusiness schema）
**意味**: JSON-LDで店舗情報を機械読み取り可能にする
**なぜ必要**: Googleが店舗情報を正確に理解できる
**含む情報**: name, address, telephone, openingHours, geo（緯度経度）
**ツール**: schema.orgのLocalBusinessドキュメント参照
### - [ ] 営業時間・住所の明記
**意味**: サイト上に見やすく営業時間と住所を表示
**なぜ必要**: ユーザーの利便性、ローカルSEOの基本
**推奨場所**: フッター、お問い合わせページ、トップページ
**追加情報**: 定休日、臨時休業の案内方法も考慮
### - [ ] Googleマップの埋め込み
**意味**: iframeでGoogleマップを表示
**なぜ必要**: アクセス方法が直感的にわかる
**実装**: Google Maps → 共有 → 地図を埋め込む
**注意**: 読み込み速度への影響を考慮（lazy loadingを使う）
### ローカルSEO（実店舗がある場合）
### - [ ] Googleビジネスプロフィールの登録・最適化
**意味**: Google検索・マップに店舗情報を表示
**なぜ必要**: 「近くのカフェ」などの検索で表示されるため
**登録**: https://business.google.com で無料登録
**最適化**: 写真追加、営業時間正確に、レビューへの返信
**効果**: ローカル検索結果の上位表示、Googleマップでの発見性向上
### - [ ] NAP情報の一貫性（Name, Address, Phone）
**意味**: サイト内外で店舗名・住所・電話番号を統一
**なぜ必要**: 情報が食い違うとGoogleが混乱し、順位が下がる
**確認箇所**: サイト内、Googleビジネス、SNS、ポータルサイト
**ポイント**: 表記ゆれ（株式会社/（株）、番地の書き方）も統一
**例**: ○「東京都渋谷区1-2-3」×「渋谷区1丁目2番3号」の混在はNG
### - [ ] ローカル構造化データ（LocalBusiness schema）
**意味**: JSON-LDで店舗情報を機械読み取り可能に
**なぜ必要**: Googleが店舗情報を正確に理解できる
**含む情報**: 店名、住所、電話、営業時間、価格帯、評価
**実装**: `