注記

このページの日本語版はGoogle翻訳による機械翻訳です。

Quality Check List

Perfect Pixel

• PerfectPixelのChrome Extensionは必ず確認してください。
• PerfectPixelのChrome Extensionで重ねてみると、色味の違いがわかりないので、色味の怪しい箇所のカラーコードは確認して下さい。

File and Directory

• 必要のないディレクトリ・ファイルは削除すること。
• サイトの作成に使用していない、画像・フォントなどを確認して削除すること。

HTML

• W3C HTML バリデーションチェックを行うこと。
• html lang="ja"になっていることを確認すること。
• サイトに使用していないCDNのライブラリなどが読み込まれていないか確認すること。
• ヘッダー・フッターのロゴにリンクが設定されていることを確認すること。
• Googleマップを使用している場合、日本語になっていることを確認すること。
• title description keywordをタグがheadタグ内にあることを確認すること。（依頼元から指定がない限り空白で良い）
• リンク以外のクリックできる要素もcursor: pointerの設定が適用されていること。

Link tag

• サイトマップに基づいて全てのリンクが正しく設定されていることを確認すること。
• リンク先が不明である場合は"#"がはいっていること。
• 外部リンクにはtarget="_blank"が設定されていること。
• リンクは単一のターゲットではなくブロックである必要があります
• クライアントから指示がない場合は、全てのリンクにホバーアクションが設定されている(opacity: 0.7s, transition)

Image tag

• すべての画像にalt=""が設定されていること。
• 画像形式(png, jpg, svg)が適切に使用されてること。例えば、pngは背景透過、jpgは風景写真、svgはロゴなどのベクターデータ。
• 画像のアスペクト比が保たれており、縦横比に歪みがないこと。
• Chrome developer toolで画像の読み込みエラーが表示されないこと。
• Chrome developer toolのネットワークパネルを確認し、巨大な画像が読み込まれていないか確認すること。
• Retina対応しているか確認すること。

CSS

• W3C CSS バリデーションチェックを行うこと。
• ファイル名はコーディングルールに乗っ取れているか確認すること。
• クラス名はコーディングルールに乗っ取れているか確認すること。
• ディレクトリ構造はコーディングルールに乗っ取れているか確認すること。
• font-size line-height letter-spacingは例外を除き相対値(rem, em)などで指定されていること。
• reset.css normalize.cssなどのスタイリングの初期化が適用された上で独自CSSが適用されていること。

Font-family setting

• フォントは自分の環境だけで正しく表示されている可能性があるので、フォントがインストールされていないブラウザーでも確認すること、

Web Font

font-face (GoogleフォントとAdob​​eフォントを除く) を使用する場合は、次の2つの条件を確保する必要があります。

• すべてのブラウザをサポートするために、WOFF、WOFF2、およびTTFファイルが利用可能であることを確認してください。
• ウェブの読み込み速度を確保するため、フォントファイルは200kbを超えないようにしておりますが、超える場合はお客様と確認を取り交わしてください。

Javascript

• Chrome developer toolでJavaScriptのコンソールエラーが表示されていないこと。
• ES5, ES6の記法が混同していないこと。

Responsive

• 特定のサイズで文字に要素が重なり隠れていたり、可読性が落ちていないか確認すること。
• あらゆるサイズで横スクロールなどおかしな挙動が発生していないか確認すること。

Cross-Browser

お客様に指定された対応ブラウザ・実機でレイアウトやアニメーションの崩れがないことを確認してください。
特に指定がない場合はAGLの標準ルールに従ってください。