フロントエンジニアが作業・仕事・コーディング時に確認すること

2018/02/16web・PC
フロントエンジニアが作業・仕事・コーディング時に確認すること

データクオリティとか納品時のクオリティってどの程度必要なの?って思ってる方も多いと思います。Githubでチェックリストが公開されていたので、その中から優先度の高いものをピックアップしてみました。

目次

基本

HEAD」は、文書のヘッダ部分を指定するためのタグであり、<head>タグで囲まれた内容はそのhtmlファイルの内容・情報を宣言します。<html>タグと<body>タグの間に書きます。<title>タグ以外は<head></head>の内の内容は、通常、ブラウザの画面上には表示されません。HEADでは<title>、<meta>、<link>などのHTMLファイルのさまざまな情報が指定・定義されます。スタイルシート(CSS)やJavaScriptなどの外部ファイルを、<head></head>内に記述して読み込ませることもあります。

DOCTYPE宣言

言うまでもないと思いますが、これは必須です。

<!doctype html>

metaタグ3種

必ず上部に入れるべき3つのmeta情報。

<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Title

こちらも言わずと知れた「」です。ここで注意点は、GoogleはSEOにおいて内の文章を472から482ピクセルで切り詰めて文字数を扱うようです。その際おおよそ入る文字数が「55文字」ということを聞いたことがあります。Googleのtitleに関する記事はこちらです。

<title>Page Title</title>

Description

Descriptionです。はそのサイトの説明です。検索結果の一覧で表示されます。こちらもtitle同様、省略される可能性があるのでdescriptionの文字数は100文字〜120文字程度が望ましいとされています。descriptionとは、検索エンジンに伝えるページの概要になります。また、スマホ検索も考慮して、なるべく前半にページの内容をまとめる必要があります。そしてわかりやすさも重要です。

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

Favicons

ブラウザのタブなどに表示されるマークです。Favicons(ファビコン)はサイトのシンボルマークとして欠かせません。ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称です。 favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語を縮約したものです。ロゴマークをおくサイトが多く、近年は綺麗に生成できるサイトがあり便利です。

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

Apple Touchアイコン

初代iPhoneから使用されているiOSのホーム画面アイコンです。必須度は低めですが、ファビコンのiOS用となるアイコンです。iOSのスマホ画面のブックマークアイコンになるため、必要なすべての寸法をサポートするためには少なくとも200x200px寸法のApple Iconファイルを作成します。

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">

Windows Tiles

Internet Explorer 11 のライブ タイルを作って、ユーザーの関心を引いたりサイトの操作性を高めたりします。スタート画面にピン留めするときにタイルです。これも必須度は低めですが、IEでのピン留めの画像の設定ができます。小サイズは標準のタイルのサイズ70 x 70、最小画像サイズ56 x 56、推奨される画像のサイズ128 x 128、小サイズと中サイズのタイルはスタート画面で既定で使用できます。

<?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

重複ページが複数存在するときに「どのページ(URL)が最も大切かをGoogleに伝える役目があります。このタグを使わない、または適切に使用しないでおくと、もしかしたらGoogleにGoogleに「コピーコンテンツ」とみなされたり、あるいはユーザーがせっかく貼ってくれるリンク(被リンク)が分散してしまったり、といった悪影響が生じます。SEO対策として正しく使用したいですね。

<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML tags

Language attribute

lang 属性は、要素の内容がどのような言語で記述されているかを表します。この属性を使用できる要素はすべての HTML5 要素に対してとなります。html 要素に指定して、文書が日本語で書かれていることを表した場合はとなります。適切に指定することで、プログラムによる自動翻訳などが容易になることがあります。Bootstrapなどのテンプレートデータはもともと「en」になっているので、注意してください。

<html lang="en">

Direction attribute

dir属性は、要素のコンテンツのテキスト方向を指定します。ltrは左から右を意味し、左から右に書かれた言語(英語など)に使用され、rtlは右から左を意味し、右から左に書かれた言語(アラビア語など)に使用されます。autoはユーザーエージェントが決定します。

<html dir="rtl">

Alternate language

ウェブサイトの言語タグが指定され、現在のページの言語に関連しています。ユーザーが サーチエンジンやソーシャルブックマークなどで見つけたとき、その人の言語環境に合ったURLへ導いてくれます。Googleは検索ユーザーに正しい言語・地域別のウェブページ(URL)を検索結果に表示することができるとのことです。

<link rel="alternate" href="https://es.example.com/" hreflang="es">
Googleのガイドラインはこちら

Conditional comments

必要に応じてIEに条件付きコメントが表示されます。なお、バージョン10以降はこの機能は廃止され、他のブラウザと同様、単なるコメントとして扱われる事となりました。なので「IEそのものを検出する([if IE] など)」コメントは「IE9以下を検出する」と言うコメントと同義になります。

<!--[if expression]> HTML <![endif]-->

RSS feed

RSSとは、ニュースサイトやブログなど、Webサイトの見出しや要約をまとめてくれる技術です。RSS技術を使って配信される「RSSフィード」を使って、見る側のユーザーはWebサイトの更新情報や記事の要約などを素早くチェックすることができます。配信する側はWebサイトからRSSフィードを配信する必要があります。ブログやオウンドメディアを運営されている場合はぜひRSSを配信してください。

CSS Critical

CSSクリティカルは、最初のスクロールせずに見えるコンテンツページの表示に必要なスタイルシート。これをインラインでHTMLに埋め込むことによって、クリティカルレンダリングパスの最適化が図れます。

CSS order

CSSの読み込み順としてすべてのCSSファイルは、内のJavaScriptファイルの前に読み込まれるように設定すること。(JSファイルがページの上に非同期で読み込まれることがある場合を除きます)。

Social meta

FacebookのOGとTwitterカードは、どんなウェブサイトでも、載せておくことが望ましいようです。OGタグやTwitterカードの使い方や設定方法は別記事で紹介いたします。

Facebook Open Graph

いわゆる「OGタグ」といわれるやつです。Open Graphオブジェクトにはプロパティが含まれています。プロパティとはさまざまな方法でオブジェクトを説明する要素です。Open Graphタグによって表されるか、Object APIを使用して作成されたオブジェクト内で属性化されます。画像は少なくとも600 x 315ピクセルである必要がありますが、1200 x 630ピクセルが推奨されます。

<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">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Twitter Card

Twitterカードを使用すると、写真や動画などのリッチメディアをツイートに添付してウェブサイトへのトラフィックを促進できます。ウェブページに数行のHTMLを追加するだけで、そのコンテンツへのリンクが含まれるツイートにカードが追加されるようになり、そのツイートを投稿したユーザーのすべてのフォロワーにカードが表示されます。 (引用:Twitter Developers

Twitterで企業アカウントを運用されている方は、自社ホームページのコンテンツを紹介する時など、通常の投稿よりも目を引きやすい形式になるため、クリック率を高めることができます。

<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 Semantic Elements

HTML5 セマンティック要素が適切に使用されていること。
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>。

Error pages

いわゆるwordpress等だとページがない時などに表示される「404」ページとなんらかのエラー時に表示される「5xx」ページなどの用意が必要です。こういった専用ページはSEO的にも準備しておいた方が良いとのこと。ここで一つ注意すべきは「5xx」ページについては「CSSがページ内に記載されていること」が必要であるということです。

Noopener

ちょっとしたフィッシングサイト対策になります。「<target=”_blank”>」でリンクをひらかせる場合に「<rel=”noopener”>」をつけておくとフィッシング詐欺の手法Tabnabbing(タブナビング)の防止に効果的です。Firefoxの旧バージョンに対応させるには「<rel=”noopener noreferrer”>」を使うとのことです。「<target=”_blank”>」を使う際には絶対記述しといたほうがよいですね。

Tabnabbing(タブナビング)とは??

Tabnabbing(タブナビング)は非アクティブのタブをユーザが気づかないうちにフィッシング目的でなんらかのサービスや金融機関(銀行など)のログインページに書き換えてしまうフィンシング手法の一つです。

Clean up comments

ページを本番環境に送信する前に、不必要なコードを削除する必要があります。いわゆるゴミコードですね。コードだけではなく不要なファイルもきっちり削除していくようにしましょう。

HTML testing

W3C compliant

HTMLコードの問題点を特定のためにW3CバリデーターでW3C準拠サイトとしてのチェックを行なってください。

HTML Lint

ツールを使って自分のHTMLコードに問題があるかどうかを分析することが必要です。現在はエディタにLinterが付いているケースも多くあるので、そちらを利用して確認しましょう。

Link checker

いわゆるリンク切れをきっちりチェックしましょうということです。リンクチェックには以下のサイトがおすすめです。

WordPressを使っている場合プラグインの利用をおすすめします。

Adblockers test

広告ブロックが有効になっていても、ウェブサイトにコンテンツが正しく表示されルカどうか確認しましょう(広告ブロッカーを無効にするよう促すメッセージを表示できます)。

Webfonts

webサイトの見た目を向上させるために最近ではwebフォントを使う機会も増えていると思います。しかしwebフォントを利用している場合、スタイルが適用されていないテキストが表示されたり、ページの表示が遅くなりなかなかテキストが表示されないなどのケースがあります。こういったケースへの対策としてフォールバックフォントを利用したり、Webfontローダーを使用して動作を制御することを検討しなければいけません。

Webfont format

フォントファイル形式のWOFF, WOFF2 とTTF はモダンブラウザでサポートされています。

Webfont size

ウェブフォントのサイズは2MBを超えることがないようにしてください。(すべての違う綴りを含みます。)

Webfont loader

Webfont loaderでWebフォントのロード開始や完了などを判定し、Webフォント読み込み時のコントロールをするようにしておくといいでしょう。

CSSについて

CSSガイドラインとSassガイドラインをきっちりと確認してCSSを構築しましょう。各CSSのプロパティなどに不明点や疑問を持った場合は確実な理解のためにもCSSリファレンスを参照しましょう。

Responsive Web Design

サイトはレスポンシブデザインを使用しています。レスポンシブというか、スマホおよびPC、タブレットで問題のないサイトという理解で良いと思います。

CSS Print

いわゆる印刷用スタイルシートですが、予算の関係上難しい場合もあると思いますが、基本的には設定しましょう。

セキュリティについて

webサイトやwebシステムにおいて現在もっとも重要な要素といっても過言ではないのではないでしょうか。

HTTPS

サーバ証明書をインストールして https通信が全ページに適用されているようにしてください。画像やCSSのリンクについても注意してください。

HSTS

HSTSを設定する。プリロードHSTSにサイトを登録して「.htaccess」に以下のように記述してください。

Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

CSRF

サーバーへのリクエスト元が、運営しているサイト・アプリからかを確認する。

XSS

XSSが可能になっていないか確認する。

X-Content-Type-Options

X-Content-Type-Options : nosniffと設定することでContent-Typeに合致しない動作を回避します。

X-Frame-Options

X-Frame-Optionsを加えることでクリックジャッキングを対策する。Apacheの場合httpd.confに設定する。

##iframeを禁止する
Header always append X-Frame-Options DENY
##同一ドメインのみ許可する
Header always append X-Frame-Options SAMEORIGIN
##指定したドメインのみ許可する
Header always append X-Frame-Options ALLOW-FROM https://example.com

Content Security Policy

Content Security Policyを設定することでXSSなどの攻撃を排除する。いわゆるガイドラインを設定しましょうという話ですね。

パフォーマンス

ページ容量

ページは500KB以下をこころがけ、webサイトスピードテストをして問題になっている部分を解決する。

Minified HTML

HTML、JavaScript、CSS が圧縮(ミニファイ)されている。

Lazy loading(延長読み込み)

アクセスした時に画像を読み込むのではなく、ユーザーがスクロールなどして必要になったら読み込む。

Cookie size

Cookieは4096バイトを超えないようにする。20以上の使用もやめる。

Third party components

ソーシャルボタンなどの外部JSの部分は、できるだけ静的に作りAPIの無駄な呼び出しを防ぐ。

DNS resolution

外部ドメインからの読み込みは、dns-prefetchを使用して速度を早くする。
※ただし、httpsページではできません。

<link rel="dns-prefetch" herf="//www.example.com">

Preconnection

外部ドメインからの読み込みは、preconnectを使用して速度を早くする

<link rel="preconnect" herf="http://www.example.com">

Google PageSpeedでテスト

Google PageSpeedで全てのページをテストして、90以上のスコアであることを目指しましょう。

アクセシビリティ

プログレッシブエンハンスメント

主要機能はJavaScript無しでも動作するようにする。

Color contract

カラーコントラストは、PCはレベルAA、モバイルはレベルAAAを満たしている。

1.4.3コントラスト(最低限)

1.4.6コントラスト(高度)

見出し

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

Headings

H1~H6の見出しは正しい順序で適切にしようされている。

Role属性

アクセシビリティ向上のためにRole属性をつけましょう。

<header> role=”banner”
<nav> role=”navigation”
<main> role=”main”

セマンティック

適切なHTML5のinputタイプが使用されている。

Lavel

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

アクセシビリティテスト

納品前にはWaveツールを使ってテストをする。

スクリーンリーダー

全てのページがスクリーンリーダーでテストされている。

フォーカススタイル

フォーム選択時などに出るフォーカススタイルを有効にする。無効ならCSSによる状態の可視化に置き換えられている。

SEO

Google Analytics

Google Analytics、もしくはTag Mnagerがインストールされていて、正しく設定されている。

見出し構造

見出しの内容と、ページの内容が一致している。