04-01_公開準備（プリフライト）
出典: 制作部署マニュアル 公開準備（プリフライト）（自動ミラー・正本は /Users/oogushiyuuki/manual-terasu）
このPhaseのゴール
デザイン・文面が完成した状態から、公開可能な品質まで仕上げること。ここで漏れがあると、後の全Phaseが影響を受けるため、TERASU納品品質の最重要関門。
Phase 1 を完了するまで、絶対に公開しないこと。 一度公開したサイトの問題は、公開後の修正コストが3〜10倍に膨らむ。
公開前 最終チェックリスト（30項目）
下記すべて が付いた状態で初めて Phase 2（公開作業）に進む。
A. デザイン・コンテンツ品質（8項目）
- [ ] 全ページのデザイン最終承認（クライアント確認済み）
- [ ] 文面校正完了（誤字脱字・敬体丁寧体の統一・専門用語の説明）
- [ ] キャッチコピー・CTA文言がブランドトーンと一致
- [ ] 画像の品質（解像度・トリミング・統一感）
- [ ] 画像のalt属性を全画像に設定（空altは装飾画像のみ許可）
- [ ] ロゴ・カラーがブランドガイドラインと一致
- [ ] 会社情報（住所・電話・代表者名）が正確に記載
- [ ] 法的ページ（プライバシーポリシー・特商法）の雛形を設置済み
B. リンク・フォーム・動作確認（8項目）
- [ ] 全リンクの疎通確認（外部リンク含む・404ゼロ）
- [ ] 内部リンクの整合性（パンくず・ナビ・フッター）
- [ ] お問い合わせフォーム送信テスト（指定メールに着信確認）
- [ ] フォームバリデーション（必須項目・形式チェック）
- [ ] フォーム送信後のサンクスページ表示確認
- [ ] 電話番号・メールアドレスがクリック/タップで起動
- [ ] SNSリンクが正しいアカウントに飛ぶ
- [ ] 404ページを専用ページで用意（デフォルトの白画面禁止）
C. レスポンシブ・ブラウザ対応（6項目）
- [ ] PC表示確認（Chrome / Safari / Firefox / Edge）
- [ ] タブレット表示確認（iPad縦横・Android）
- [ ] スマホ表示確認（iPhone Safari / Android Chrome）
- [ ] タッチ操作確認（タップ範囲が44px以上）
- [ ] 横スクロール発生なし（はみ出し要素ゼロ）
- [ ] ハンバーガーメニューが正しく開閉
D. パフォーマンス・SEO基礎（5項目）
- [ ] 画像のWebP化または十分な圧縮（1枚300KB以下推奨）
- [ ] PageSpeed Insights モバイル90点以上 / PC95点以上
- [ ] Core Web Vitals 全項目「良好」（LCP / CLS / INP すべて緑）
- [ ] title / description / OGP 設定完了
- [ ] 構造化データ（最低限 Organization と WebSite）設定
E. セキュリティ・基盤（3項目）
- [ ] SSL（https）動作確認（証明書有効・混在コンテンツなし）
- [ ] セキュリティヘッダ（HSTS・X-Frame-Options等）設定
- [ ] robots.txt / sitemap.xml 設置
必須技術設定の詳細
1. title タグ
仕様：
- 文字数：32文字以内（Google検索結果での表示限界）
- キーワードを前半に配置
- ブランド名は末尾（必須ではないが推奨）
- 全ページでユニーク
コード例：
<!-- TOP -->
<title>株式会社○○｜東京の税理士事務所 | 法人税申告のご相談</title>
<!-- サブページ -->
<title>サービス案内｜株式会社○○</title>
NGパターン：
- 全ページで同じtitle（重複コンテンツ扱い）
- 60文字超え（検索結果で切れる）
- キーワード羅列（「税理士｜会計｜決算｜申告｜相談｜東京」）
2. meta description
仕様：
- 文字数：120文字程度（モバイル検索結果での表示限界）
- 検索意図に応える本文＋CTA文言を含める
- 全ページでユニーク
- キーワードを自然に含める（詰め込みNG）
コード例：
<meta name="description" content="東京・港区の税理士事務所○○です。法人税申告・決算サポート・節税対策まで、創業20年の実績で経営者の課題に伴走。初回相談無料。お気軽にご相談ください。">
3. OGP（Open Graph Protocol）
SNSでシェアされた時のカード表示。設定漏れは流入機会の損失。
必須項目：
<meta property="og:type" content="website">
<meta property="og:title" content="株式会社○○｜東京の税理士事務所">
<meta property="og:description" content="法人税申告・決算サポート・節税対策まで、創業20年の実績で経営者の課題に伴走。">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/ogp.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:site_name" content="株式会社○○">
<meta property="og:locale" content="ja_JP">
** og:image は絶対URL（https://〜）で指定**。相対パス（/ogp.jpg）だとSNSで画像が表示されない致命バグ。
OGP画像仕様：
- サイズ：1200×630px（推奨）
- 形式：JPEG または PNG（透過不要）
- 容量：500KB以下推奨
- 内容：ロゴ＋キャッチコピー＋背景
4. Twitter Card
X（旧Twitter）でシェアされた時のカード。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@your_account">
<meta name="twitter:title" content="株式会社○○｜東京の税理士事務所">
<meta name="twitter:description" content="法人税申告・決算サポート・節税対策まで、創業20年の実績で経営者の課題に伴走。">
<meta name="twitter:image" content="https://example.com/ogp.jpg">
5. canonical URL
URL正規化。同じ内容が複数URLでアクセスできる場合、検索エンジンに「これが正規URL」と伝える。
<link rel="canonical" href="https://example.com/">
** 絶対URLで記述**。相対パス（/）だと正規化に問題が起きる可能性がある。
ありがちな重複URL：
- https://example.com/ と https://example.com/index.html
- http:// と https://
- www. あり・なし
- URLパラメータ付き（?utm_source=twitter）
→ いずれも canonical で正規URLを明示。
6. favicon
ブラウザタブ・ブックマーク・スマホホーム画面に表示されるアイコン。
最低限：
<link rel="icon" href="/favicon.ico">
モダン対応（推奨）：
<!-- ブラウザタブ用 -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- iOS ホーム画面用 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android / PWA 用 -->
<link rel="manifest" href="/site.webmanifest">
<!-- テーマカラー -->
<meta name="theme-color" content="#FACC15">
生成ツール：realfavicongenerator.net でロゴ1枚から全サイズ自動生成。
7. robots.txt
検索エンジンクローラーへの指示。
標準例（公開サイト用）：
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /internal/
Disallow: /thanks
Disallow: /private/
Sitemap: https://example.com/sitemap.xml
** 開発中の robots.txt 残しに注意。Disallow: / のままだと全ページが検索結果から消える**致命的事故が起きる。
8. sitemap.xml
サイト構造を検索エンジンに伝える地図ファイル。
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
<lastmod>2026-05-25</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://example.com/about</loc>
<lastmod>2026-05-25</lastmod>
<changefreq>monthly</changefreq>
<priority>0.9</priority>
</url>
<!-- 全ページを列挙 -->
</urlset>
運用ルール：
- 全ページ列挙（最大50,000URL / 50MB）
- lastmod は実際の最終更新日を正確に
- リニューアル時は必ず更新
- Search Console に送信（Phase 3 で実施）
9. 404ページ
存在しないURLにアクセスした時に表示するページ。デフォルトの白画面は絶対NG。
必須要素：
- ブランドロゴ・サイトナビゲーション
- 「お探しのページは見つかりませんでした」の明示
- TOPへの導線
- サイトマップへのリンク
- お問い合わせへの導線
Cloudflare Pages での設定：
ルートに 404.html を置けば自動的に404レスポンスで表示される。
10. 構造化データ（JSON-LD）
検索エンジンに「このサイトは何者か」を構造化して伝える。リッチリザルト表示の前提条件。
最低限：Organization + WebSite
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "株式会社○○",
"url": "https://example.com/",
"logo": "https://example.com/logo.png",
"description": "東京・港区の税理士事務所",
"address": {
"@type": "PostalAddress",
"streetAddress": "○○1-2-3",
"addressLocality": "港区",
"addressRegion": "東京都",
"postalCode": "100-0000",
"addressCountry": "JP"
},
"telephone": "+81-3-1234-5678",
"sameAs": [
"https://twitter.com/your_account",
"https://www.facebook.com/your_account"
]
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "株式会社○○",
"url": "https://example.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://example.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
検証ツール：Rich Results Test でエラーゼロを確認。
パフォーマンス最適化
画像最適化
手順：
1. 撮影・支給画像は元データを保管（再加工用）
2. 用途別にリサイズ（ヒーロー1920px / 通常1200px / サムネ400px）
3. WebP変換（squoosh.app で品質80% 推奨）
4. ファイルサイズ：1枚300KB以下を目安
5. loading="lazy" を首画面外の画像に付与
6. width/height 属性を明記（CLS対策）
コード例：
<img src="/hero.webp"
alt="サービスの説明"
width="1200"
height="630"
loading="lazy"
decoding="async">
Core Web Vitals
Google が公式評価する3指標。全部「良好」が必須。
| 指標 | 内容 | 良好ライン | 主な対策 |
|---|---|---|---|
| LCP（Largest Contentful Paint） | 最大要素の表示時間 | 2.5秒以内 | ヒーロー画像のWebP化・preload・Cloudflare CDN |
| CLS（Cumulative Layout Shift） | レイアウトのズレ | 0.1以下 | 画像のwidth/height明記・フォント先読み |
| INP（Interaction to Next Paint） | 操作への応答速度 | 200ms以内 | 重いJSの分割・サードパーティスクリプト最小化 |
計測：PageSpeed Insights でURL入れて即測定。
Cloudflare 最適化機能
すべてONにする：
- Auto Minify （HTML/CSS/JS圧縮）
- Brotli圧縮
- HTTP/3 (with QUIC)
- Early Hints
- Mirage（モバイル画像最適化）
セキュリティ設定
SSL（https）動作確認
- 全ページで
https://で表示 - 鍵マークが緑（モダンブラウザでは省略表示）
- 混在コンテンツ（Mixed Content）ゼロ
http://の画像・CSS・JS が混じってないか F12 → Console で確認
セキュリティヘッダ
Cloudflare Pages の _headers ファイルで設定：
/*
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: geolocation=(), microphone=(), camera=()
検証：securityheaders.com で A 以上を目指す。
公開前に絶対やってはいけないこと
| NG | 何が起きる |
|---|---|
開発中の robots.txt: Disallow: / を残す |
全ページが検索結果から消える |
noindex メタタグを本番ページに残す |
検索結果に出ない |
| 開発用のステージング URL を OGP に書く | SNSシェアで開発URLが拡散 |
| Google Analytics の開発用IDを残す | クライアントのデータが取れない |
console.log でデバッグ情報を残す |
F12で内部情報が丸見え |
.git/ .env をデプロイに含める |
機密情報漏洩 |
<title>サンプル</title> 等のプレースホルダ放置 |
検索結果に「サンプル」と表示 |
| OGP画像未設定 / 相対パス | SNSシェアで画像が出ない |
→ デプロイ前にこのNG表を必ず読み返すこと。
Phase 1 完了判定
- [ ] 公開前最終チェックリスト30項目すべて
- [ ] 必須技術設定10項目すべて完了
- [ ] PageSpeed モバイル90点+ / PC95点+ 達成
- [ ] Core Web Vitals 全項目「良好」
- [ ] Rich Results Test エラーゼロ
- [ ] OGP確認ツールで画像・タイトル・説明が正しく表示
- [ ] securityheaders.com で A 以上
- [ ] NG表のチェックすべてクリア
→ すべてOKなら Phase 2（ドメイン・公開作業）へ。