コーディングレビューのチェック方法【コーディング依頼して10年以上の経験より！】

htmlコーディングを制作依頼した場合や、
クラウドワークスなどのクラウドソーシングなどで制作を依頼する前に実績を確認する場合は、コーディングのクオリティーをチェックする必要があります。

Webデザイナー・ディレクターとして10年以上、主にhtmlコーディングをチェックしてきた経験からコーディングのチェック項目をお伝えします。
ここをチェックしておけばある程度、問題なし！

コーディング依頼する前に情報を共有しておく

まず、コーディング依頼する前の情報共有についてです。
ここが大事です。やってもらったあとに、そんなの聞いてないよ！とならないようにこちらはこのつもりでお願いしたい、ということを伝えます。

私がコーディングをお願いする場合に共有する情報とチェックリストです。
このようなことを毎回、最初に伝えたり、聞いたりしています。

コーディングのスケジュール、確認修正体制

こちらはこのくらいの希望でのスケジュールをお願いしたい、ということを伝えます。
私は、TOPページ1ページで3-5日くらいのスケジュール感で伝えることが多いです。（これはゆっくりめだと思います。実際TOPページのコーディングは1日前後くらいで終わるでしょう）
下層ページは、1ページだと2日くらい、2ページ以上だと、1ページ1日くらいのスケジュール感です。

コーダーさんの状況で、スケジュールは前後するので、制作前にいつまでに最初の確認が可能か、というのを確認します。

確認する方法と期間について
私は、TOPページは、クライアントにも確認いただくので少し時間がかかります。ただ、TOPページがきっちりあがってくる、ということは多くないので、修正期間は3回程度のやりとりを含めて1週間くらいを想定します。

下層ページは、私は、クライアント確認をしません。（重要なページは確認いただきますが）

そのため、修正1.2回程度と考え、1ページに1日程度かかる想定です。

デザインと違って、コーディングの修正は、そこまで大きくならないのが普通ですが、表示がおかしい場合の修正について、どのように対応してもらえるか、最初に指定しておいたほうがよいです。

ブレイクポイント

ブレイクポイントとは、
レスポンシブ対応の表示切り替えの幅のポイントのことです。
一般的に、768px以上がPC表示、767px以下がタブレット・モバイル表示ですが、　480px~（ここは色々調整をしています）モバイル表示、という感じです。
私はコーダーさんに伝えているのは
「ブレイクポイントは768px以上で切り分けしてもらって、モバイルで480px、375px、320pxでもおかしくなくみえるようにしてほしいです」
という風に伝えています。
基本は、767pxでの切り替えで、
767px、600pxなどで、2カラムで表示してても、320pxだと小さすぎる、というのがありますので、そこは調整してもらいます。

ブレイクポイントが増えると工数はあがりますので、金額が変わる可能性がありますが、基本は767px、他はおかしくならない程度で、ということを伝えれば、金額をそのままで対応いただける場合が多いです。

フォームなどの動きは実装してほしいか

フォームの実装は、バックエンドの実装になりますが、一般的にコーダーさんにお願いしても実装は可能です。別料金の場合がおおいです。工数あがりますので。
私はWordPressに組み込みをするのが前提な場合が多いので、お願いしないです。

meta情報はどうしたいか

title、description、OGP設定はなにも言わないと、設定してくれないので、この部分をどうするか、指示が必要です。

リニューアルの場合、元々既存サイトにあるtitle、description、OGP設定を流用することも多いので、そのまま使ってもらうか、こちらで考えたものを変更してもらうか、を指定します。

アンカーリンクはどうしたいか。リンク先

TOPだけ、下層ページだけ、などバラバラで頼む場合のリンク先にどうするか、を指定します。
私はWordPressですし、ややこしいので、コーディングしてもらったあとに最後に自分で設定していましたが、urlを先に決めていたら設定してもらったほうが楽ですね。

ホバーの動き

アンカーにマウスをのせたときの、ホバー・マウスオーバーの動きは、地味ですが、CV向上のためには大事です。指定しないと、こちらの意図と違った形になるので、こちらは指定が必要です。

ページTOPへ、やナビゲーションの内容、動き

ページ下部にある、ページTOPボタンはスムーススクロール（ページがスクロールするように移動するか）どうか、ナビゲーションの動きはどのようにしたいか、を指定します。

私は、ページTOPはスムーススクロールにしてもらい、ナビは、コーダーさんが今まで使っていたソースでうまくやってもらうように指定します。
（こちらで、ナビはこんな感じ！といっても、コーダーさんがその実装をやったことがなかったり、結構時間がかかったりする場合があるためです。こちらもナビのデザインをあえてする場合もありますが、しない場合にも対応いただけるように指示します。）

ファイル構成

ファイル構成の指定があれば、それを指定します。ファイル名についても、必要な場合は先に指定したほうがよいでしょう。

wordpressの実装を想定しているか否か

wordpressの実装を想定している場合に、画像と文章またコンテンツの量の増減がありますので、その場合にレイアウトが崩れないようにしてもらいます。これは、結構見落としがちです。

確認デバイス

一般的に、以下のようなデバイス、ブラウザで確認することが多いです。

• Windows（最新バージョン）-IE、chrome、firefox（最新バージョン）
• Mac（最新バージョン）-chrome、safari
• iphone（私はここは適当です、今7をもっているので7で）-safari
• アンドロイド（最新版、私はここは適当です、今7をもっているので7で）-標準ブラウザ、chrome

この辺で、問題なくみえるようにこちらで確認して何かあれば対応してもらう、ということを伝えます。

あと、私はクライアントさんのデバイスも確認しますが、
今は、cssがデバイスによって、すごくレイアウトが崩れるということが少ないと思っていて、ある程度確認しておけば大丈夫かと思います。

デバイスがないよ、という方は、Chromeデベロッパー・ツールなどでデバイス（というかサイズ）を切り替えて表示を確認することができるので、それで確認しましょう。

また、提案について、
コーディング制作者からこうしたほうがよいのでは、という提案はほとんどあがってこないので、もし提案がほしければ、「この辺はこんな感じで提案してほしい」と相談してみましょう。
ただ、ディレクター経験のあるコーダーさんは少ないこともあり、提案にはあまり期待しないほうがよいでしょう。

あがってきたコーディング内容をチェックする

実際に制作が始まりコーディングが上がってきたときに、そのまま納品、ではなく、問題ないかをきちんとチェックしておく必要があります。
この部分でクオリティーにかかわってくるので、時間をさいて確認しましょう。確認のポイントは、表示について、SEO設定について、WordPressについて、ソースについて、で確認します。

また、制作を契約する前に実績確認のときに、この部分がしっかり対応できているコーダーさんは安心できますが、実績に何か不具合がある場合は、これから制作をお願いするものも同じような不具合があがってくることがありますので注意が必要です。

コーディング制作物をデバイス・ブラウザでチェック

上記で、説明したブラウザ、デバイスでチェックします。
TOPをしっかり確認すれば、下層ページが同じようなレイアウトだった場合はある程度問題ないのですが、iphone、アンドロイドの表示、タブレットの表示は、PCがきれいでも、めちゃ崩れている場合もあるので、1回はチェックします。また、この崩れている箇所をコーダーさんに伝えるために、ブラウザ・デバイス・スクリーンショットで伝えるのがよいでしょう。
環境が変わると、違った表示になるので、簡単に伝えても伝わらないことが多いです。スクリーンショットについて、私はgyazoを使用しています。便利です。

タイトルに、h1　小タイトルにh2.h3などが設定されているか

ファイルのソースから、タイトルはh1になっているか、小タイトルにｈ2.h3になっているかは確認しています。SEOの最低限でマークアップの基本のものです。ブラウザからファイルのソースを表示させるのはchromeですとctrl+Uで確認、またはデベロッパーツールで確認できます。

デザインと同じフォント、余白が設定されているか

私はpsdをお渡ししてコーディングをお願いすることが多いですが、psdと同じように余白とフォントサイズが設定されているかを確認します。
結構独自ルールでコーディングしてくるコーダーさんもいますので、ここのチェックは必要です。フォントサイズ・余白はcssで確認します。
chromeですとデベロッパーツールで確認できます。また、こういったものを確認できる拡張機能もあるので、それを利用します。

サイト全体で、デザイン（余白やフォント）がそろっているか

ぺージ単体だと問題なくても、サイト全体で余白が違ったり、フォントが違っている場合もあるので、複数ページを見比べて確認します。

閉じタグエラーやファイルがなかったり、javascriptエラーがでていないか

表示は変わらないので、そこまで重要ではないかと思いますが、ページの速度などにかかわってくるので、chromeですと拡張機能・htmlファイルチェッカーで閉じタグエラーやファイルがなかったり、javascriptエラーがでていないかを確認します。

（wordpressの場合）画像・文章・テキストがなくてもきれいに表示されているか

wordpress実装を前提にした場合、画像の大きさ、文章の長さ、テキストの長さを変えてもきれいに表示されているか、を確認します。chromeですとデベロッパーツールで像の大きさ、文章の長さ、テキストの長さを変更できます。

（実績の確認時）コードの内容がきれいか

コードがきれいか汚いかは、実装に直接かかわってはいないのですが、これがきれいなコーダーさんは、変更にも強く、きっちり仕事をしてくれる方が多いです。閉じタグがないようなコーダーさんにはなるべく依頼しないようにしましょう。

コーディングチェックで使えるツール

私がコーディングチェックで確認しているときに使っているツールをご紹介します。
定番ものが多いかもしれませんが、ご参照ください。

chromeDevツール（Chrome）

ソースなどをみるための基本中の基本のツールです。これをメインで使って確認しています。
ここでhtml,cssの内容やレスポンシブ対応の第一チェックを行います。
あとconsole部分でファイルの404エラーなどがでてないか、jsエラーが出てないか、なども確認します。

HTMLエラーチェッカー（Chrome拡張機能）

閉じタグがあっているかを確認できるすぐれもの。

Link Checker（Chrome拡張機能）

リンクが切れているか確認できます。

gyazo

制作者とのやりとりで画面キャプチャーをこれでとります。短い動画もとれます。

コーディングチェックまとめ

以上が、私が確認しているコーディングチェックになります。

最初にすり合わせをして、最後に確認する、という流れでコーディングチェックをすることでクオリティーが保たれると思います。
ご参考ください。