GitHubで公開されているフロントエンドチェックリストというドキュメントが、網羅されている内容が幅広く便利そうだったので、日本語に翻訳しました。

https://github.com/thedaviddias/Front-End-Checklist

日本語版は、以下のGitHubリポジトリにあります。GitHub側と自動的に連携するようにしておりますので、誤訳や誤りなどがあれば GitHub のプルリクエストまたは Issue で報告していただけると幸いです。

最終更新日時: 2017-11-19 03:50:47+09:00 (未翻訳)

The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your site / HTML page to production.













フロントエンドチェックリストは、みなさんがウェブサイトや HTML ページを本番環境で公開する前に確認するべきあらゆる項目を網羅したリストです。

これは、フロントエンド開発者たちの数年に及ぶ経験にもとづいており、さらに他のオープンソースのチェックリストの内容も追加されています。







目次

利用方法

フロントエンドチェックリストのすべての項目は大半のプロジェクトで必要とされていますが、いくつかの項目は省略できますし、必須でもありません。（たとえば管理用のウェブアプリケーションの場合は、RSSは必要ないでしょう。）私たちは三段階で重要度を評価しています。

は、 推奨 を意味していますが、個別のシチュエーションによっては省略することも可能です。

は、 を意味していますが、個別のシチュエーションによっては省略することも可能です。 は、 強く推奨 を意味していますが、ごく稀なケースでは必須ではなく省略することも可能です。いくつかの項目においては省略することによってパフォーマンスやSEOで悪影響がある可能性があります。

は、 を意味していますが、ごく稀なケースでは必須ではなく省略することも可能です。いくつかの項目においては省略することによってパフォーマンスやSEOで悪影響がある可能性があります。 は、必須を意味しており、いかなる理由でも省略することはできません。これらを省略することで機能が不完全だったり、アクセシビリティやSEOの問題が発生することがあります。テストの優先順位はまずこれらの項目からはじめるべきです。

チェックリストのいくつかのリソースでは、絵文字を使ってコンテンツの種類を理解したり、ヘルプを見つけやすいようにしています。

📖: ドキュメンテーションまたは文章

🛠: オンラインツール / テストツール

📹: メディアまたはビデオコンテンツ

Head

備考: HTMLドキュメントの <head> については、すべてのリストがこちらにあります。

Meta タグ

DOCTYPE宣言: Doctype が HTML5 であり、すべての HTML ページの先頭にあること。

<!doctype html>

次の3つの Meta タグ（Charset、X-UA、Viewport）は、 <head> の先頭にあるべきです。

文字コード: 文字コード (UTF-8) が正しく宣言されている。

<meta charset= "utf-8" >

X-UA-Compatible: Meta タグ X-UA-Compatible が存在している。

<meta http-equiv= "x-ua-compatible" content= "ie=edge" >

Viewport: viewport が正しく宣言されている。

<meta name= "viewport" content= "width=device-width, initial-scale=1" >

Title: title が全てのページで使用されている。（SEO: Google は、タイトルで使用される文字幅をピクセルで計算し、472から482ピクセルで切り詰めます。平均的な文字数は半角で55文字となります。）

<title> Page Title less than 55 characters </title>

Description: meta description が提供されており、これはユニークでありなおかつ150文字以下である。

<meta name= "description" content= "Description of the page less than 150 characters" >

Favicons: それぞれの favicon が作られており正しく表示されている。もし、 favicon.ico しかない場合、それはあなたのサイトのルートに設置されている。通常はマークアップは必要ない。しかしながら、以下の例のようにリンクをはることがまだ有効である。昨今では、PNG フォーマット が .ico フォーマットよりも推奨されている。（サイズ: 32x32px）

<link rel= "icon" type= "image/x-icon" href= "https://example.com/favicon.ico" > <link rel= "icon" type= "image/png" href= "https://example.com/favicon.png" >

Apple Touch Icon: apple-mobile-web-app-capable がある。 (すくなくとも 200x200pxのAppleアイコンファイルを作成すれば、必要な全ての寸法をサポートする。)

<link rel= "apple-touch-icon" href= "/custom-icon.png" >

Windows カスタムタイル: Windows カスタムタイルが提供されリンクされている。

<meta name= "msapplication-config" content= "browserconfig.xml" />

browserconfig.xml の必要最小限の構成は以下:

<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src= "small.png" /> <square150x150logo src= "medium.png" /> <wide310x150logo src= "wide.png" /> <square310x310logo src= "large.png" /> </tile> </msapplication> </browserconfig>

Canonical: 重複したコンテンツを避けるために rel="canonical" を使用している。

<link rel= "canonical" href= "http://example.com/2017/09/a-new-article-to-red.html" >

HTML タグ

Language 属性: あなたのサイトの言語を指定するための lang 属性が記述されている。

<html lang= "en" >

Direction 属性: 書字方向を指定するための dir 属性が <html> タグに指定されている。（これは他の HTML タグ上でも使用可能である。）

<html dir= "rtl" >

<link rel= "alternate" href= "https://es.example.com/" hreflang= "es" >

RSS フィード: もしあなたのサイトがブログ、もしくは記事をもっているなら、RSS へのリンクが提供されている。

インラインクリティカル CSS: ページロード時にすぐに表示される部分のコンテンツを整える CSS は（"above the fold content"）、クリティカル CSS によってコールされている。それは、主要な CSS の前の <style></style> の間に記述されている。（圧縮されている）

CSS 読み込み順: すべての CSS ファイルは <head> 内でいかなる JavaScript よりも先に読み込まれている。 (JS ファイルが時々非同期にあなたのページのトップに読み込まれる場合を除く。)

ソーシャル

Facebook OG と Twitter Cards は、すべてのウェブサイトに強く推奨します。 その他のソーシャルメディア用のタグは、特定の対象をターゲットとする際に、より確実に表示されるようになるでしょう。

Facebook Open Graph: すべての Facebook Open Graph (OG) はテストされ、不足がなく不具合もない。画像サイズは少なくとも 600 x 315 ピクセル以上であり、1200 x 630 ピクセルを推奨する。

備考: og:image:width と og:image:height を使用して画像の縦横サイズを指定すると、非同期にダウンロードして処理することなく、即座に画像をレンダリングすることができます。

<meta property= "og:type" content= "website" > <meta property= "og:url" content= "https://example.com/page.html" > <meta property= "og:title" content= "Content Title" > <meta property= "og:image" content= "https://example.com/image.jpg" > <meta property= "og:description" content= "Description Here" > <meta property= "og:site_name" content= "Site Name" > <meta property= "og:locale" content= "en_US" > <meta property= "og:image:width" content= "1200" > <meta property= "og:image:height" content= "630" >

Twitter Card:

<meta name= "twitter:card" content= "summary" > <meta name= "twitter:site" content= "@site_account" > <meta name= "twitter:creator" content= "@individual_account" > <meta name= "twitter:url" content= "https://example.com/page.html" > <meta name= "twitter:title" content= "Content Title" > <meta name= "twitter:description" content= "Content description less than 200 characters" > <meta name= "twitter:image" content= "https://example.com/image.jpg" >

⬆ トップに戻る

HTML

ベストプラクティス

HTML5 セマンティック要素: HTML5 セマンティック要素が適切に使用されている。(header, section, footer, main...)

エラーページ: 404 及び 5xx 用のエラーページが存在している。5xx エラーページは CSS が内蔵されている必要があることを覚えておくこと。（サーバーに対する追加のリクエストを行わないこと。）

Noopener: target="_blank" で外部リンクを使用する際には、 rel="noopener" 属性をつけて Tabnabbing 脆弱性を防ぐこと。もしあなたが古いバージョンの Firefox をサポートする必要があるなら、 rel="noopener noreferrer" を使用すること。

HTML のテスト

W3C 準拠:: すべてのページを HTML バリデーターでテストして、問題点を抽出する。

HTML Lint: ツールを使って HTML に問題があるかどうかを分析する。

⬆ トップに戻る

ウェブフォント

備考: Webフォントを使用すると、スタイルが適用されていないテキストが表示される現象（FFlash Of Unstyled Text）や フォントがロードされるまで表示されない現象（Flash of Invisible Text）が発生する可能性があります。フォールバックフォントを使用するか、ウェブフォントローダーを使用して動作を制御することを検討してください。

* 📖 Google Technical considerations about webfonts

ウェブフォントのフォーマット: WOFF, WOFF2 及び TTF はすべてのモダンブラウザでサポートされている。

ウェブフォントのサイズ: ウェブフォントのサイズは、すべての綴りが含まれた状態で 2MB を超えないこと。

ウェブフォントローダー: ウェブフォントローダーで、ロード時の挙動を制御する。

⬆ トップに戻る

CSS

Responsive Web Design: そのウェブサイトはレスポンシブデザインを採用している。

そのウェブサイトはレスポンシブデザインを採用している。 CSS Print: 印刷用のスタイルシートがそれぞれのページに対して正しく提供されている。

印刷用のスタイルシートがそれぞれのページに対して正しく提供されている。 Preprocessors: あなたのサイトは CSS プリプロセッサーを使用している。 (Sass が推奨される。)

あなたのサイトは CSS プリプロセッサーを使用している。 (Sass が推奨される。) Unique ID: もし ID が使用されているなら、そのページの中でユニークであること。

もし ID が使用されているなら、そのページの中でユニークであること。 Reset CSS: CSS のリセット (reset, normalize または reboot) が使用されており最新である。 (もしあなたが Bootstrap や Foundation などの CSS フレームワークを使用しているなら、それらはすでに導入されている。)

JS prefix: すべての class (または JavaScript で使用されいる ID) は、js- で始まっており、それらは CSS で使用されていない。

<div id= "js-slider" class= "my-slider" > <div id= "id-used-by-cms" class= "js-slider my-slider" >

内部 CSS 及びインラインスタイル: <style> による内部 CSS やインラインスタイルを使用することを避け、正当な理由でのみ使用する。（例： スライダー用の背景画像や CSS クリティカルなど）

による内部 CSS やインラインスタイルを使用することを避け、正当な理由でのみ使用する。（例： スライダー用の背景画像や CSS クリティカルなど） ベンダープレフィックス: CSS ベンダープレフィックスが、ブラウザの互換性に基づいて生成され、使用されている。

パフォーマンス

ファイルの結合: CSS ファイルが結合されている。 (HTTP/2 では不要)

CSS ファイルが結合されている。 (HTTP/2 では不要) 圧縮（Minify）: すべての CSS ファイルは圧縮されている。

すべての CSS ファイルは圧縮されている。 ノンブロッキング: CSS ファイルは DOM の読み込みに時間がかからないようにノンブロッキングである。

Unused CSS: 使用していない CSS は削除されていること。

CSS のテスト

文法: すべての CSS 及び SCSS にはエラーがないこと。

レスポンシブデザイン: すべてのページは、320px, 768px, 1024px のブレイクポイントでテストされていること。（可能であれば、アナリティクスの結果に基づいて他のブレイクポイントでもテストする。）

CSS バリデーター: CSS がテストされ、関連するエラーが修正されていること。

デスクトップブラウザ: すべてのページは現在あるすべてのデスクトップブラウザでテストされている。 (Safari, Firefox, Chrome, Internet Explorer, EDGE...)

すべてのページは現在あるすべてのデスクトップブラウザでテストされている。 (Safari, Firefox, Chrome, Internet Explorer, EDGE...) モバイルブラウザ: すべてのページは現在あるすべてのモバイルブラウザでテストされている。 (Native browser, Chrome, Safari...)

すべてのページは現在あるすべてのモバイルブラウザでテストされている。 (Native browser, Chrome, Safari...) OS: すべてのページは現在あるすべての OS でテストされている。 (Windows, Android, iOS, Mac...).

ピクセルパーフェクト: すべてのページはピクセルパーフェクトに近い状態であること。クリエイティブの品質によっては 100% 正確ではない場合があるが、テンプレートにほぼ近い状態である必要がある。

書字方向: すべてのページは、必要に応じて LTR 及び RTL でテストされていること。

⬆ トップに戻る

画像

Notes: 画像の最適化に関して総合的に理解するには、Addy Osmani による Essential Image Optimization をおすすめします。

ベストプラクティス

🛠 Imagemin

🛠 Use ImageOptim to optimise your images for free.

🛠 Use Kraken.io awesome alternative for both png and jpg optimization. Up to 1mb per files on free plan.

Retina: Retina ディスプレイをサポートするために2倍または3倍のイメージサイズの画像を提供している。

Retina ディスプレイをサポートするために2倍または3倍のイメージサイズの画像を提供している。 Sprite: 小さい画像はスプライト画像にまとめられている。（アイコンの場合は、SVGスプライトイメージに含めることができます。）

小さい画像はスプライト画像にまとめられている。（アイコンの場合は、SVGスプライトイメージに含めることができます。） Width and Height: 最終的に表示される際のサイズがわかっている場合、すべての <img> は、 height と width が指定されている。（ px または % を指定しない。）

最終的に表示される際のサイズがわかっている場合、すべての は、 と が指定されている。（ または を指定しない。） Alt テキスト: すべての <img> は Alt テキストが代替テキストとして指定されていること。

⬆ トップに戻る

JavaScript

ベストプラクティス

インライン JavaScript: インライン JavaScript がないこと。（HTML と混ざっているもの）

インライン JavaScript がないこと。（HTML と混ざっているもの） ファイルの結合: JavaScript ファイルは一つのファイルに結合されていること。

JavaScript ファイルは一つのファイルに結合されていること。 圧縮（Minify）: JavaScript ファイルは圧縮されていること。（ .min.js という拡張子を使用できる。）

JavaScript セキュリティ:

ノンブロッキング: JavaScript ファイルは、 async 属性を使用して非同期で読み込まれるか、 defer 属性を使用して遅延実行されている。

Modernizr: もし、ある特定の機能を使用する際には、Modernizr を使用して、 <html> の class を追加することができる。

JavaScript テスティング

ESLint: ESLint にてエラーが発生しないこと。（あなたの設定またはスタンダードなルールを基準とする。）

⬆ トップに戻る

セキュリティ

ウェブサイトをスキャンして確認する

ベストプラクティス

HTTPS: すべてのページ及び外部コンテンツで HTTPS が使用されている。（プラグイン、画像 ...）

HTTP Strict Transport Security (HSTS): HTTP ヘッダーには 'Strict-Transport-Security' が設定されている。

Cross Site Request Forgery (CSRF): CSRF 攻撃を防ぐために、あなたのサーバーへのリクエストにたいしては、それがあなたのウェブサイト/アプリから送信されていることを確認している。

Cross Site Scripting (XSS): あなたのサイトには、XSS が可能な脆弱性が存在していない。

Content Type Options サーバーからの X-Content-Type-Options ヘッダーによって、Google Chrome や Internet Explorer の mime-sniff による Content-Type に一致しない動作を防止する。

Content Security Policy Content Security Policy によってあなたのサイトで、コンテンツがどのように読み込まれるか、許可されている場所から読み込まれているかなどを定義している。これはクリックジャッキング攻撃等からも防御することができる。

⬆ トップに戻る

パフォーマンス

ベストプラクティス

ページの重さ: それぞれのページの重さは 500 KB以下である。

Minified HTML: HTML が圧縮 (Minify) されている。

Lazy loading: 画像やスクリプト、CSS は、レスポンス時間を改善するために遅延ロードされている。（それぞれのセクションで詳細をみてください。）

Cookie size: もし Cookie を使用しているなら、4096 バイトを超えていないこと、20以上の Cookie を使用していないこと。

Third party components: 外部の JS に依存するサードパーティの iframe やコンポーネントは（例えばソーシャル共有ボタン）、可能な限りスタティックなコンポーネントに置き換えられるべきである。これによって外部 API の呼び出しに制限を与えることができ、ユーザーのプライバシーを保護することができる。

HTTP リクエストの最適化

DNS resolution: サードパーティーサービスの DNS には dns-prefetch を使用して、アイドル時間中に名前解決を行う。

<link rel= "dns-prefetch" href= "https://example.com" >

Preconnection: サードパーティーサービスの DNS ルックアップ、TCP ハンドシェイク及び TLS ネゴシエーションには、 preconnect を使用してアイドル時間中に事前に行われている。

<link rel= "preconnect" href= "https://example.com" >

Prefetching: すぐに必要になりそうなリソース（たとえば遅延ロードを行なっている画像）は、 prefetch を使用してアイドル時間中にリクエストを行なっている。

<link rel= "prefetch" href= "image.png" >

Preloading: そのページで必要なリソース（たとえば <body> の最後に設置されているスクリプトなど）には preload を使用している。

<link rel= "preload" href= "app.js" >

パフォーマンステスト

Google PageSpeed: ホームページだけでなく、すべてのページがテストされており、90-100 のスコアであること。

⬆ トップに戻る

アクセシビリティ

Notes: You can watch the playlist A11ycasts with Rob Dodson 📹

ベストプラクティス

Color contrast: カラーコントラストは WCAG のレベル AA を満たしている。（モバイル向けには AAA）

見出し

H1: 全てのページには、サイトのタイトルとは違う H1 がある。

全てのページには、サイトのタイトルとは違う H1 がある。 Headings: 見出しは正しい順序で適切に使用されている。（H1 から H6）

ランドマーク

Role banner: <header> には role="banner" がある。

には がある。 Role navigation: <nav> には role="navigation" がある。

には がある。 Role main: <main> には role="main" がある。

セマンティック

適切な HTML5 input タイプが使用されている: これは、キーパッドやウィジェットが様々なタイプにカスタマイズされるモバイルデバイスでは特に重要である。

フォーム

Label: label は、それぞれのフォーム要素に関連づけられている。もし label を表示できない場合には aria-label を使用する。

アクセシビリティテスト

キーボード操作: すべてのインタラクティブな要素に到達可能で使用可能であることが、目に見える順序でキーボードだけを使ってテストされている。

すべてのインタラクティブな要素に到達可能で使用可能であることが、目に見える順序でキーボードだけを使ってテストされている。 スクリーンリーダー: すべてのページはスクリーンリーダーでテストされている。（VoiceOver, ChromeVox, NVDA or Lynx）

すべてのページはスクリーンリーダーでテストされている。（VoiceOver, ChromeVox, NVDA or Lynx） フォーカススタイル: もし、フォーカスが無効化されているなら、CSS による状態の可視化に置き換えられている。

⬆ トップに戻る

SEO

Google Analytics: Google Analytics がインストールされており、正しく設定されている。

Google Analytics がインストールされており、正しく設定されている。 見出し構造: 見出し用のテキストが、そのページの内容を理解することの手助けになっている。

見出し用のテキストが、そのページの内容を理解することの手助けになっている。 sitemap.xml: sitemap.xml が存在しており Google Search Console に登録されている。（旧 Google Webmaster Tools）

が存在しており Google Search Console に登録されている。（旧 Google Webmaster Tools） robots.txt: robots.txt によってブロックされていないこと。

Sitemap HTML: HTML サイトマップが提供されており、フッターのリンクからリンクされている。

Pagination link tags: Provide rel="prev" and rel="next" to indicate paginated content.

<link rel= "prev" href= "https://example.com/?page=1" > <link rel= "next" href= "https://example.com/?page=3" >

⬆ トップに戻る

翻訳

フロントエンドチェックリストは、他の言語でも提供されています。すべての翻訳者の皆さん、すばらしい仕事をしてくれてありがとう！

フロントエンドチェックリストバッジ

もし、フロントエンドチェックリストのルールに従っていることをアピールしたいなら、README ファイルにこのバッジを貼ってください。

➔

[ ![Front‑End_Checklist followed ]( https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg ) ](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ トップに戻る

貢献

訳注： オリジナル版への貢献と区別するため、オリジナルへの貢献については英語の原文そのままを掲載しておきます。

Open an issue or a pull request to suggest changes or additions.

Guide

The Front-End Checklist repository consists of two branches:

1. master

This branch consists of the README.md file that is automatically reflected on the Front-End Checklist website.

2. develop

This branch will be used to make some significant changes to the structure, content if needed. It is preferable to use the master branch to fix small errors or add a new item.

Support

If you have any question or suggestion, don't hesitate to use Gitter or Twitter:

Authors

David Dias

Contributors

This project exists thanks to all the people who contribute. [Contribute].



Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]





















License

⬆ トップに戻る