Web制作の案件を初めて受注して、もうそろそろ納品！
納品前に必ずチェックしておくべきことはあるのかな？
チェックするべき項目を制作経験のある人から教えて欲しい！
今回の記事では、駆け出しフリーランスの方でWeb制作の案件を初めて受けて、納品する際に必ずチェックするべきポイントをいくつかご紹介します！
僕は、実際にWeb系のIT企業に勤めており、エンジニアとして仕事したり、ベトナム人がコーディングしたものをチェックして納品する仕事も行なっています。
本記事でご紹介する納品前にチェックするべきポイントを抑えておかないと、、、
- できないエンジニアと思われ継続的に依頼が来ない
- 修正レポートと共に返される（時給が減る）
- 単価が減る場合がある
このようにクライアントへの印象が悪くなったり、自分の時給が急激に減ってしまうことになります！
- 初めてWeb制作の案件を受注した方
- これからWeb制作の案件を受注しようと考えている方
- 実務ではどのレベルまでチェックして納品しているのか
法人レベルの納品前チェックができていれば、クライアントへの印象はバッチリです！
Web制作の納品前に必ずチェックしておくべきポイント
さて、早速Web制作の納品前に必ずチェックしておくべきポイントをご紹介していきますが、技術的な部分を話すとキリがないので、最低限これだけは抑えておけばOKなポイントを解説します。
レスポンシブテストは必ず実機で
レスポンシブ テストできていない方非常に多いです！
よくありがちなのが、GoogleChromeの検証ツールだけでチェックして納品というパターンです。
最もベストなチェック方法は、
- Chromeブラウザでチェック
- IE11でチェック
- iPhone実機でチェック
- Android実機でチェック
この4つのチェックは必ず行うようにしましょう。
なぜなら実際にChromeの検証ツールでみるテストチェックと、実機での表示が異なる場合があるからです。
結構この現象は制作現場でも起こっているので、Web制作の納品前には必ずチェックするようにしましょう！
リンク切れチェック
aタグのリンク切れがないか全てチェックします。
ページ数が多い場合は、手動でチェックするのは大変なのでツールを使って効率よくチェックしましょう。
W3Cが提供しているリンクチェックツールを使うと良いでしょう。
URLを貼り付けてボタンをクリックするだけで簡単です。
画像がクリアに表示されるか
デザインデータからコーディングする際は、Photoshop、Illustratorから画像をスライスしたり書き出したりしますが、いざWeb上で表示すると、画像がぼやけている時が結構あります。
ただ画像を貼り付けるだけでなく、しっかりと目視で確認して
- 画像がクリアに見えるか
- 画像が文字の場合ちゃんと読むことができるか
- 画像のアウトラインが消えているか
このような点をチェックするようにしましょう！
CSS、Jsファイルが圧縮されているか
実務経験がない方は、「CSSファイルって圧縮できるの？」と思う方もいることでしょう。
サイトが重くならないためにもCSS,Jsファイルの圧縮は必須です。
圧縮するためには、ツールを使用して効率よく圧縮します。
→ 圧縮ツール https://refresh-sf.com/
デザインと10px前後か
デザインデータと100%同じにするには時間もかかるので、する必要はありませんが、せめて10px前後には収めておきましょう。
ただ単に、目視でデザインデータとコーディングしたWebサイトを比較するのではなく、しっかりとツールを使ってチェックするようにしましょう。
ツールを使うことにより、目視では確認できない要素のズレをチェックすることができます。
→【Chrome拡張機能】ピクセルパーフェクトをPerfectPixelを使ってする方法
Alt属性が指定されているか
imgタグを挿入した際にはalt属性も正しく書くようにしましょう。
<img src="/images/banner1.jpg" alt="ここにalt属性を書く">DOCTYPE宣言 されているか
おそらくできていない方はいないと思いますが、念のために書いておきます。
htmlファイルの先頭にDOCTYPE宣言を記述するようにしましょう。
<!DOCTYPE html>viewportが正しく宣言されているか
これも当たり前ですが、レスポンシブ化が正しくできるように、<head>タグ内にviewportを正しく宣言しましょう。
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>lang属性が記述されている
これもたまにあるのですが、<html lang=”en”> となっていることがあります。
<html lang="ja">日本語のサイトを作る際は、必ずjaになっているかチェックするようにしましょう。
CSSファイルはjsファイルより先に読み込まれているか
<head>内でCSSファイルとjsファイルの読み込みをコーディングするかと思いますが、
CSSファイルを読みこむ→ Jsファイルを読み込むようにしましょう！
以下がCSSファイルとjsファイルの読み込みの違いです。
Jsを先に読み込んだ場合
- ページの読み込み
- ページの読み込みが完了したら、jsファイルを読み込む
- その後CSSファイルの読み込み
CSSを先に読み込んだ場合
- ページの読み込み&CSSファイル読み込み
- jsファイルの読み込み
Jsファイルは、ページの読み込みが終わった後に読み込む性質があるので、jsを先に読み込んでしまうと、CSSの読み込みが遅くなり、結果的にサイトの読み込み速度が低下してしまうことになります。
<!-- CSS MAIN-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="./css/base.css"/>
<!--JS MAIN -->
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="./vendor/swiper/swiper.min.css"/>
</head>このようにcss→jsで読み込むようにしましょう！
Web制作の納品前に必ずチェックしておくべき10のポイント まとめ
意外と見落としている部分が多かった〜！
助かった〜〜！！
いかがでしたでしょうか？
初めてのWeb制作案件を受けた方であれば、おそらく何個かはできてないポイントがあったかと思います。
技術的な面では、まだまだ細かいチェックポイントはあるので、技術的な部分はクライアントとしっかり打ち合わせをして確認するようにしましょう！
最後までご覧いただきありがとうございました！
