Flow進め方と品質管理

実装を始める前に、カンプから読み取れないことを潰します。

• OS標準フォント（メイリオ、MS ゴシック、ヒラギノ角ゴシックなど）が使われていないか
• 有料Webフォント（Adobe Fonts、TypeSquareなど）のライセンスを確認したか
• Adobe Fontsを使う場合、サイト所有者側にAdobe CCの契約があるか
• デザイナーが個別にインストールしたフォントが使われていないか
• PCのコンテンツ幅は900〜1200px程度で適切か
• スマホのコンテンツ幅は360〜375px程度で適切か
• ブレークポイントの数はいくつか
• ブレークポイントの範囲はどこか
• タブレットサイズはPC表示とスマホ表示のどちらか
• 画像でコーディングする箇所はどこか
• ファーストビューの表示方法はどれか（全画面表示、高さ固定、縦横比を保ちつつ高さ可変）
• デザインの共通パターンから外れている箇所はないか（余白や装飾の規則性）
• テキストリンク、ボタン、画像リンクのマウスホバー効果はどうするか
• ローディングアニメーションの有無
• ファーストビューの動的表示の有無
• スクロールアニメーションの有無
• スクロール時にヘッダーを固定するか。固定する場合、ロゴやテキストの色、背景色、高さをどう変えるか
• 固定パーツの有無（トップへ戻るボタン、SNSシェアボタン、問い合わせボタン、チャットボット）
• 各リンクの遷移先はどこか（別ページ、ページ内の特定位置、PDFなどのファイル）
• アコーディオンの有無
• タブの有無
• スライダーの有無
• モーダルウィンドウの有無
• CMSの投稿機能はどこに入るか（お知らせ、イベント、制作実績、よくある質問など）
• CMSの検索機能はどこに入るか（キーワード検索、記事検索、商品検索など）
• その他の機能の有無（ユーザー登録、カート・決済など）
• 外部サイト情報の埋め込みはあるか（YouTube、Google Map、SNSタイムライン、レビュー、予約システム、カレンダー）
• カンプ以外で作成するページはあるか（フォームの確認画面・完了画面、プライバシーポリシー、404）
• ファビコンは支給されるか、こちらで作成するか
• titleタグの内容は決まっているか
• meta descriptionのテキストは決まっているか
• OGPタグの内容は決まっているか

• URLのパラメータが長すぎない
• URLにページ内容が分かる名称を付けている（複数単語はハイフンでつなぐ）
• 信頼性を担保するコンテンツを盛り込んでいる（プライバシーポリシー、住所、電話番号、コピーライト表記、情報開示方針、再配布方針、運営者情報、お問い合わせページ）
• titleに対策キーワードが含まれている
• titleの対策キーワードが文章の前方に置かれている
• titleがサイトのテーマと整合している
• meta descriptionが他ページと重複していない
• meta descriptionに対策キーワードが含まれている
• meta descriptionに特定のキーワードが過剰に含まれていない
• meta descriptionが120文字程度である
• リダイレクトリストを作成している
• noindexにするページを指定している（絞り込み、並べ替え、検索結果など重複の出る一覧ページ）

• 全ページに2クリックで到達できる（URLの階層の深さのことではない）
• クロスリンク（互いに行き来できるリンク）を貼っている
• 信頼性を担保するコンテンツを盛り込んでいる（プライバシーポリシー、住所、電話番号、コピーライト表記、情報開示方針、再配布方針、運営者情報、お問い合わせページ）
• SEO観点で権威性が求められるページに監修者情報を置いている
• 会社概要に法人番号を掲載し、国税庁や経済産業省の該当ページへ外部リンクしている
• 会社概要や人物紹介で権威性を裏付ける情報を載せ、該当サイトへ外部リンクしている（保有資格、認定、特許、セミナー、インタビュー、書籍、提携先）
• ファーストビューにメインコンテンツが見えている
• おおよそ検索ニーズ順にコンテンツが上から並んでいる
• 見出しに対策キーワードが含まれている
• h1からh2、h3へキーワードが論理的なツリー構造になっている
• h1は原則1ページに1つ
• h2がターゲットキーワードに対して必要なキーワードになっている
• h1の次がh3のように、見出しレベルが飛んでいない
• h2やh3が1つだけという状態になっていない
• 必要に応じて権威性のあるサイトへ発リンクしている
• 1ページからの発リンク数が多すぎない（200以内が目安）
• 内部リンクを最適化している（関連するキーワードの記事へ紐づけるなど）
• 内部リンクのアンカーテキストやボタンにキーワードを含めている（「詳しく見る」「こちら」だけになっていない）
• パンくずリストのトップページへのリンクにキーワードを含めている（「TOP」「ホーム」は避ける）
• 評価の低いページへリンクしていない（リンクする場合はnofollowを設定する）

• 各種ログイン情報を確認した（サーバー、ドメイン、FTP、WordPress、メールパスワード）
• 追加で必要な情報がないか確認した（Google APIの情報、ヒートマップなど）
• WordPressにログインし、制作に必要な情報を確認した（PHPとWordPressのバージョンなど）
• プラグインの仕様を確認した（サポートが切れていないか、有料のものを使っていないか）
• テスト環境を選定した（先方サーバーまたはステージング環境）
• 現行サイトで外部システムを使っていないか確認した
• ワイヤーと照らして追加工数が発生するものを確認した（ある場合は事前に金額を提示する）
• ワイヤーに対する疑義をすべて解消している

• スマホの最小幅（360px）で崩れがない（タイトルテキストの段落ちなど）
• 画像のアスペクト比が保持されている（画面幅が狭くなっても比率が保たれる）
• ループ出力の記事内テキストが自動で省略される（行数制限でバランスを保つ）
• 見出しタグがワイヤーフレームどおりに実装されている
• トップページのh1はヘッダーロゴ、下層ページはロゴのh1を外してページタイトルをh1にしている
• 写真やイラスト以外（見出しや表など）を画像で実装していない（パス化したテキスト、Webフォント読み込みを減らす目的は除く）
• altに関連する見出しの内容を入れている。人物や施設は固有名称と説明を入れている
• リンクをJavaScriptで貼らず、HTMLで貼っている
• 外部サイトへのリンクは新しいタブで開く
• 記事一覧のアイキャッチ未設定時に代替画像を出している
• 記事個別ページではアイキャッチ未設定時に画像を表示しない
• CMSの関連記事が最新順で表示されている（表示中の記事は含まない）
• コピーライトの西暦が自動で切り替わる
• PC・SPで追従バナーが実装されている
• すべてのリンクにホバーアクションを設定している（ヘッダーとフッターのロゴ、リンクバナー画像、トップへ戻るボタンが忘れがち）
• テキストリンクはopacity以外のホバーアクションにしている（下線が伸びる、色がつく、装飾が動くなど）
• パンくずリストが画面幅に収まらない場合は横スクロールできる
• 横スクロールする要素には常にスクロールバーが表示されている
• 不要な横スクロールが発生していない
• ページのコンテンツが少ない場合もフッターが最下部に配置されている

• 全ページでタイトルとディスクリプションが設定されている
• 全ページでOGPが設定されている
• ファビコンが設定されている
• ロゴのaltがサイト全体で同一になっている
• アクセスできないページが存在しない（リンク先がすべて想定どおり）
• ファイルの存在しないページで正しく404が返る
• 404ページのレイアウトを整えている（ページが見つからないことを明確に伝える、他ページと同じデザインにする、人気記事やトップへのリンクを置く、404ステータスコードを返す）
• 問い合わせページのロゴを非活性にしている
• 問い合わせページに追従導線やCTA、ヘッダー・フッターナビゲーションを置いていない
• プレースホルダーを設定している
• 郵便番号欄がある場合、入力時に住所欄が自動入力される
• 電話番号の入力欄を最小10文字、最大13文字に設定している
• スマホで電話番号欄に数字キーボードがデフォルトで出る
• 入力不備がある場合、送信ボタンを非活性にせずエラー文言を表示する
• バリデーションのエラー文を適切に設定している
• プライバシーポリシー同意にチェックを入れたときにエラー文が出ない
• プライバシーポリシーへのリンクを別タブで開く
• 問い合わせ後にサンクスページへ遷移する
• 自動返信メールを設定している
• 自動返信メールの内容が要件どおり（入力内容の写しが正しい、誤字脱字がない）
• 管理者宛て通知メールを設定している
• 管理者宛て通知メールの内容が要件どおり（入力内容の写しが正しく通知されている）

• XMLサイトマップを用意している（noindexのページは含めない）
• llms.txtを設置している
• robots.txtを設置している
• 検索結果に出す必要のないページ、質の低いページをnoindexにしている
• 会員サイトのログイン以降、ECのカート以降のページにnofollowを設置している
• 重複ページのURLを正規化している（canonicalタグ。末尾スラッシュありを正規URLに統一する）
• ページネーションは各ページに固有のURLを付与し、canonicalは各ページを参照している。最初のページへ戻るリンクを置いている
• リダイレクト回数が少ない（最大5回）
• 画像を圧縮している
• 画像のサイズを切り分けている（スマホは極力50KB以下に収める）
• レイアウトシフトが発生していない（imgタグにwidthとheightを指定する）
• 画像の遅延読み込みをしている（ファーストビューなど初期表示部分は遅延させない）
• ファイルサイズの大きい画像をWebP化している
• PageSpeed Insightsのスコアを確認している（LCP 2.5秒以下、CLS 0.1以下、FCP 1.8秒以下）
• 「WebSite」の構造化データを実装している（トップページのみ）
• 「AboutPage」の構造化データを実装している（会社概要などのページ）
• 「ContactPage」の構造化データを実装している（お問い合わせページのみ）
• 「Organization」の構造化データを実装している（トップと会社概要ページのみ）
• 「BreadcrumbList」の構造化データを全ページに実装している（トップページ以外）
• 「LocalBusiness」の構造化データを実装している（トップと店舗情報ページのみ）
• 「ProfilePage」と「Person」の構造化データを実装している（人物情報のあるページのみ）
• 「Article」の構造化データを実装している（投稿の個別記事のみ）
• 「FAQPage」の構造化データを実装している（よくある質問のあるページのみ）
• 「JobPosting」の構造化データを実装している（採用情報のあるページのみ）
• 「VideoObject」の構造化データを実装している（動画コンテンツのあるページのみ）
• 「Event」の構造化データを実装している（イベント情報のあるページのみ）

ページごとに一覧化して、1ページずつ潰します。

• カンプどおりのフォントで実装されている
• カンプどおりの色で実装されている
• PC表示をカンプと重ねてズレがない
• スマホ表示をカンプと重ねてズレがない
• タブレット表示をカンプと重ねてズレがない
• スマホの画面サイズで表示崩れがない
• タブレットの画面サイズで表示崩れがない
• PCの画面サイズで表示崩れがない
• Google Chromeで表示崩れがない
• Safariで表示崩れがない
• Firefoxで表示崩れがない
• Microsoft Edgeで表示崩れがない
• Windows実機で表示崩れがない
• Mac実機で表示崩れがない
• Android実機で表示崩れがない
• iPhone実機で表示崩れがない
• Androidタブレット実機で表示崩れがない
• iPad実機で表示崩れがない
• 誤字脱字、改行位置、ダミーテキストの残りがない（差分ツールで原稿と照合する）
• 画像がデザインと一致している
• 画像のファイル形式が適切（JPG、PNG、SVG）
• ダミー画像が残っていない
• 画像にウォーターマーク（透かし）が入っていない
• 画像を圧縮している
• マウスホバーアクションが設定されている
• 意図しない横スクロールがない
• アニメーションが指示どおりに動く
• コンソールエラーが出ていない
• 適切なHTMLタグを使用している
• 閉じタグの漏れがない
• 見出し構造が正しい
• alt属性が設定されている
• ファビコンが設定されている
• titleとmeta情報が設定されている
• OGPタグが設定されている
• noindexタグが残っていない
• 不要なコメント、コメントアウトが残っていない
• リンクが正しく遷移する
• トップへ戻るボタンが動く
• リンククリック時のスムーズスクロールが動く
• スライダー、アコーディオン、タブなどが動く
• フォームのバリデーションが動く
• フォームの画面遷移が正しい（確認画面、送信完了画面、戻る）
• フォームのメールが届く（管理者宛て、自動返信）
• サイトの表示が重くない

• ガイドラインや各種法律に照らして問題のある表現がない
• 表記ゆれがない
• コンテンツに誤字脱字がない
• 正しい箇所に正しい画像が入っている
• リンクがすべて正しい箇所に飛んでいる
• ファビコンとOGPを設定した
• コラムなどのCMSは入稿テストをすべて実施し、崩れがないか確認した
• PCのレイアウトに崩れがない
• SPのレイアウトに崩れがない
• 改行位置に違和感がない（スマホの360px幅で崩れるケースが多い）
• 文字装飾やテキストリンクが分かりにくくない
• 画像の粗い箇所がない
• ダミー画像がすべて本番用に差し替わっている（透かしがない）
• アクセスしたい情報へのリンクが設定されている
• 設定されているリンク先に誤りがない
• 違和感のある挙動がない
• ファイルの存在しないページで正しく404が返る

• Google Tag Managerに登録している
• GTMでGA4連携、オンクリック、サンクスページのPVを計測対象にしている
• Google Analyticsに登録している
• GA4でコンバージョン計測の対象を整理し、キーイベントに設定している
• GA4のイベントデータの保持期間を14か月に設定している
• Search Consoleに登録している
• 各種解析ツールに必要なアカウントを管理者権限で追加している
• 検索順位や被リンクの計測ツールに登録している（週次でチェックする）

• リニューアル前のサイトのファイルのバックアップを取っている
• リニューアル前のサイトのデータベースのバックアップを取っている
• WordPressのログインURLをデフォルトから変更している（セキュリティ対策をする場合）
• WordPressのログインページにベーシック認証をかけている（セキュリティ対策をする場合）
• 検索エンジン用サイトマップ（sitemap.xml）を生成している（noindexページは含めない）
• 画像検索を狙う場合、画像サイトマップ（images_sitemap.xml）を生成している
• ダミー記事を消している
• サイト証明書（HTTPS）を発行して適用している
• サーバーの所在地を日本にしている
• ドメインURLを正規化している（wwwのあり・なし）
• 計測用のタグを設置している
• GTMのスクリプトを遅延読み込みしている
• リダイレクトリストに基づいてリダイレクトを設定している
• サンクスページに直接到達できないようリダイレクトを設定している

• サイトマップに基づいてnoindexが設定されている
• PC・SPのレイアウトと文字装飾に崩れがない
• リンクが正しく機能し、リンク先URLに誤りがない（末尾はスラッシュ付きで統一する）
• 問い合わせテストを実施している（サンクスページへの遷移、自動返信メールの受信、管理者宛て通知メールの受信）
• GAで正しく計測されている（サンクスページ到達、オンクリックなどのコンバージョンを含む）

• 問い合わせ後にサンクスページへ遷移する
• 自動返信メールの送信元アドレスが指定どおりになっている（送信元ドメインをサイトのドメインと合わせる）
• 自動返信メールの内容が要件どおり（入力内容の写しが正しい、誤字脱字がない）
• 管理者宛て通知を設定している（各種ツールでの確認が済むまではテスト用アドレスのままにする）
• 管理者宛て通知メールの内容が要件どおり（入力内容の写しが正しく通知されている）
• reCAPTCHAを導入している（セキュリティ対策をする場合）
• reCAPTCHA導入時、右下のバッジを削除している（Googleポリシーへのリンクは別タブで開く。読み込み速度に影響するため不要なページでは読み込まない）
• 必要に応じてSMTPプラグインを導入している

• サイトマップを送信する
• 送信後のサイトマップにページの過不足がない（noindexページは含めない）
• トップページのフェッチをする
• WordPressのログイン情報を伝える
• お知らせの更新方法を伝える（汎用のマニュアルを提供する）
• デザインデータをフォルダに格納する

• 公開翌日から2日後にエラーチェックと解消、Search Consoleのインデックス状況を確認する
• 公開1週間後にエラーチェックと解消、Search Consoleのインデックス状況を確認する
• 公開1か月後にエラーチェックと解消、Search Consoleのインデックス状況を確認する