コーティングのチェックは、表示や動作確認だけではなく、コードの正確さなども見ていきます。クオリティを維持できているか、しっかり確認しましょう。
Webコーディングのチェックについて
デザインカンプからのコーディングが終わったら、クライアントに検品をお願いする前にセルフチェックを行いましょう。
代表的な項目をチェックリストにまとめました。 ただし、業務内容によって異なる部分・下記以上のチェックが必要な場合もあります。請け負った業務内容に応じて、チェックリストを作ると良いでしょう。
【コーディングセルフチェックリスト】
1.ブラウザチェック
- デザインカンプが再現されているか
- ホバーなどの設定もされているか
- テキスト入力にミスはないか
- 画像サイズ・画質は適切か
- ダミーの取り忘れはないか
- ブラウザを変えても表示は崩れないか
- スマホ幅やタブレット幅で見ても、表示は崩れないか
2.コードチェック
- コンソールエラーが出ていないか
- HTMLの文法ミスがないか
- CSSの文法ミスがないか
- リンク切れを起こしている箇所がないか
- タグ重複で>などが表示されていないか
- インデントは整っているか
3.機能チェック
- 仕様の動作フロー通りに動くか
- バリデーションが効いているか
- 正しくない使い方をしても、対応できるか（エラーで他の処理にも影響してしまう、など）
※その他は作成する機能による
4.SEOチェック
- 各ページでmeta tittleを設定しているか
- 各ページでmeta descriptionを設定しているか
- 見出しタグが適切に設定されているか
- alt属性の設定をしているか
- SEOキーワードが意識されているか
- xmlサイトマップを用意したか
5.そのほか
※受託した業務内容による
- ファビコン類は全ページで設定されているか
- 各ページに適したOGPタグが入っているか
- SNSとの連携は機能しているか
- 解析・計測ツール類のコードを挿入し、各ツールに反映されているか
- エラーページはきちんと表示されるか
- 表示速度が一定以上に保たれているか
下記では、チェック項目の内容・意味について解説します。
1.ブラウザチェック
コーディングはブラウザ表示を見ながら進めていきますが、完成したタイミングでもう一度しっかりと見直しをしましょう。制作のために使っていたブラウザ以外で確認する、幅を変えてみるなど事も必要です。
■デザインチェック
デザインカンプのとおりに、Webサイトが出来ているかをチェックします。
デザインカンプにどこまで合わせるかは、クライアントによって異なります。 Webサイトの柔軟性やコードの扱いやすさが重視される場合、デザインの完全再現を求められる場合に分かれる形です。
完全再現までする必要がない場合は、画像サイズ・余白・行間などが、デザインカンプと同じ印象を保てているかを確認しましょう。
【完全再現（ピクセルパーフェクト）要望の場合】 完全再現を求められる場合は、下記の方法で確認するコーダーが多いです。
1.コーディングしたページ全体のスクリーンショットを撮る 2.透明度を少し下げて、デザインカンプに重ねる
また、Chromeのアドオンには、上記操作と同じような感覚で画像とWebサイトを重ねて表示してくれる「PerfectPixel by WellDoneCode」というものもあります。デザイン会社系のコーディングのお仕事中心に考えている方は、インストールして、コーディング時点から使ってみても良いかもしれません。
ホバーなどの動作チェック
ホバーアクションやクリックアクションがある場合は、設定したアクションが実装されているか・動作するかを確認します。
そのほかスライダー、折りたたみ（アコーディオン等）などの機能を入れている場合も、動作に不備がないか確認しましょう。
表記チェック
表記ゆれ、スペルミス、コピペミスによる文字の欠けなどが無いか確認します。
画像チェック
サイトに使用している画像が、適切なサイズで書き出されているかを確認します。 サイズが大きすぎる・容量が大きすぎる（重すぎる）ものは、トリミングや圧縮を行います。
また、imgタグにはalt属性（代替テキスト）が設定されているかも確認しましょう。 装飾のためのワンポイントなどであれば代替えテキストは必要ありませんが、その時にも空のaltタグを入れておきます。
<img src="images/XXX.jpg" alt="">
ダミーチェック
制作過で入れていたダミーテキスト、画像の取り忘れがないかをチェックします。
ただし、場合によってはダミーのまま納品を求められる箇所もあります。 そのへんは臨機応変に対応しましょう。
■クロスブラウザチェック
ブラウザによって表示崩れや動作不良が起こらないかを確認します。
どこまでチェックするかは、クライアントや案件によって異なります。 基本的に、WebブラウザシェアランキングでダントツのトップになっているChromeは欠かせないですね。
まずはChromeで徹底チェック、そこから他ブラウザで崩れがないかをみていく方法がおすすめです。
【基本的にチェックするブラウザ】 * Google Chrome 最新版 * Safari 最新版 * Microsoft Edge 最新版 * Mozilla Firefox 最新版 * スマホ（iO系）- Safari * スマホ（Android系）- AndroidBrowser/Chrome
【ご依頼に応じてチェックするブラウザ】 * Internet Explorer（最新/旧バーション） * Opera * Chrome,Safari,Edge,Firefoxの旧バージョン
可能であれば、Mac、windows、iPhone、Androidスマホとすべて実機で確認するのがベスト。
ですが、出来ない場合は手持ちのもの+タブレットやスマホはブラウザのデベロッパーツールを使って行います。その場合は、ベンタ―プレフィックス別（Google Chrome、Firefox、IEの3ブラウザ）が中心になります。
ただし、稀にデベロッパーツールと実機での見え方が変わってくるケースもあることは念頭に置いておきましょう。特にiPhoneは実機だと見え方が違うことが多いです・
実機を用意する以外には、 Android Studioをインストールする（AndroidBrowserの表示確認） BrowserStackなどのラウザテスト環境サービスを使う などもあります。興味がある方は調べてみてください。
2.コードチェック
どのブラウザでも問題なく表示されていることが確認できたら、次はコーディングのミスがないかを確認します。レイアウトが崩れていなくても、ブラウザの補完機能によって表示されていることがあるので、コードチェックは必ず行いましょう。
コードチェックは 1.検証ツール（コンソール）でエラーが出ないか 2.チェックツールで文法ミスがないか
をチェックしていきます。
コードチェックが終わったら、コードを綺麗に整えます。 * 自分用にメモした不要なコメントがあるかチェック→削除 * インデントの最適化
■コードチェックツール
HTMLやCSSの文法をチェックしてくれる、チェックツール（チェッカー）と呼ばれるサービスもあります。様々なツールがありますので、いくつか使ってみて使いやすいものを選ぶと良いでしょう。
Web技術の標準化を行っている非営利団体である『W3C』では、HTML,CSS,リンクとそれぞれのチェッカーを用意してくれています。
HTMLチェッカー(Validator) http://validator.w3.org/
CSS検証サービス http://jigsaw.w3.org/css-validator/
リンクチェッカー http://validator.w3.org/checklink
W3CのValidatorの使い方は下記サイトが分かりやすいです。 https://www.itra.co.jp/webmedia/w3c-varidator.html
3.機能チェック
HTMLやCSSでのデザイン再現以外に、機能性の動作チェックも行いましょう。
例えば、サイト内検索機能が動くか。 コメント機能を使っていれば、コメントが付くか。 いいね機能があれば、カウントが正常に増検するか。 などが挙げられます。
お問い合わせフォーム、会員登録フォームなどのフォーム機能であれば * 入力ミスは弾いてくれるか(バリデーションが効くか) * 送信できるか * 自動返信メールが送られるか * フォームの情報が正しく記録されているか
など、設計に基づいた動作ができているか確認しましょう。
4.SEOチェック
SEO,基本的な内部施策の方がしっかり出来ているかを確認します。
クライアント指定、もしくはクライアントと話し合って決定したキーワードや文言に漏れがないか確認しましょう。特にmetaタグはコピペしたままになっていることがあるので要チェックです。
- meta tittleの設定
- meta descriptionの設定
- h1タグの設定
- h2以降の見出しタグの設定
- alt属性の設定
- xml形式のサイトマップを用意したか
- canonical設定もしくはURLの正規化をしているか
5.そのほかのチェック項目
クライアントとの契約内容によっては、上記以外の設定とチェックが必要な場合もあります。代表的なものをいくつか紹介します。
ファビコン類の設定
ファビコンやタッチアイコンなど、 ホーム画面やお気に入り・ブックマークに追加したとき表示されるアイコン類の設定を確認します。
OGPの設定
OGPとはWebサイトの内容をSNS上でシェアするための仕組み、どの様に表示させるかを指示するための設定です。SNS用のmetaタグですね。
「OGP設定をする」という契約をしている場合は、全てのページでOGPの設定が抜けていないか・コピペしたままになっていないか確認しましょう。
【OGP例】
<head prefix="og: http://ogp.me/ns#">
<meta name="og:url" content="WebページのURL">
<meta name="og:title" content="Webページのタイトル">
<meta name="og:image" content="Webページがシェアされた時に表示される画像（アイキャッチ）">
<meta name="og:description" content="Webページのディスクリプション">
<meta name="og:type" content="websiteもしくはarticle">
<!-- for Facebook -->
<meta property="fb:admins" content="adminID" />
<!-- fot Twitter -->
<meta name="twitter:card" content="カードの種類"/>
SNSとの連携
SNS共有ボタンの設定、SNSのタイムライン・動画などの埋め込みを設置する場合は、そちらの動作確認も行いましょう。
- 共有ボタン→各SNSのシェア画面が立ち上がるか
- 埋め込み→SNSへの投稿がサイトに表示される・更新されるか
解析・計測ツール類の導入
Google AnalitycsやGoogle Tag Managerなど、クライアントに指定された解析・計測・リマーケティング系機能のタグが必要箇所に埋め込まれているか確認します。
計測が必要な場合は、目標設定や計測結果が反映されるかも確認しましょう。
エラーページの表示
アクセスしたページが存在しなかった場合などに、設定したエラーページが表示されているようになっているかを確認します。（ローカル環境での.htaccess設定は難しいので、仮サーバーもしくは本番環境で確認）
表示速度のチェック
作成したページが重すぎないかも含めて、ページの表示速度をチェックしてみましょう。Googleの提供している「PageSpeed Insights」を使用します。(ローカル環境不可、仮サーバーもしくは本番環境で確認）
使い方はURLを入れて、分析ボタンを押すだけです。 少し待つと、モバイル、パソコン両方のスコアが表示されます。
PageSpeed Insights-https://developers.google.com/speed/pagespeed/insights/?hl=ja
↓
下の方に「改善できる項目」として、ページの読み込み時間を短縮できる可能性がある項目をリストアップしてくれます。スコアが低い場合は確認してみましょう。
まとめ
コーディングチェックはやることが多いですが、そのために様々なツールもリリースされています。このチェック作業に時間がかかる、など問題を感じたら、そういったツール類を探して取り入れてみましょう。