ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

Web制作の納品前に必ずチェックしておくべき10のポイント

ツール関連
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
プログラミング学習者にお得なブラックフライデー特集!!

Udemyで1万円以上のプログラミング学習教材が全て1200円の大セール!!

他にもデザイン、機械学習、WordPress、スマホアプリなど、プログラミングに関する教材がお得に購入できるので、めったにないこの機会にぜひチェック!!

セールの詳細はこちら!

AmazonでAdobe製品がセール中!

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

→ セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

Web制作の案件を初めて受注して、もうそろそろ納品!

納品前に必ずチェックしておくべきことはあるのかな?

チェックするべき項目を制作経験のある人から教えて欲しい!

今回の記事では、駆け出しフリーランスの方でWeb制作の案件を初めて受けて、納品する際に必ずチェックするべきポイントをいくつかご紹介します!

僕は、実際にWeb系のIT企業に勤めており、エンジニアとして仕事したり、ベトナム人がコーディングしたものをチェックして納品する仕事も行なっています。

本記事でご紹介する納品前にチェックするべきポイントを抑えておかないと、、、

  • できないエンジニアと思われ継続的に依頼が来ない
  • 修正レポートと共に返される(時給が減る)
  • 単価が減る場合がある

このようにクライアントへの印象が悪くなったり、自分の時給が急激に減ってしまうことになります!

こんな方にオススメ
  • 初めてWeb制作の案件を受注した方
  • これからWeb制作の案件を受注しようと考えている方
  • 実務ではどのレベルまでチェックして納品しているのか
Hiko
Hiko

法人レベルの納品前チェックができていれば、クライアントへの印象はバッチリです!

スポンサーリンク

Web制作の納品前に必ずチェックしておくべきポイント

さて、早速Web制作の納品前に必ずチェックしておくべきポイントをご紹介していきますが、技術的な部分を話すとキリがないので、最低限これだけは抑えておけばOKなポイントを解説します。

レスポンシブテストは必ず実機で

レスポンシブ テストできていない方非常に多いです!

よくありがちなのが、GoogleChromeの検証ツールだけでチェックして納品というパターンです。

最もベストなチェック方法は、

  • Chromeブラウザでチェック
  • IE11でチェック
  • iPhone実機でチェック
  • Android実機でチェック

この4つのチェックは必ず行うようにしましょう。

なぜなら実際にChromeの検証ツールでみるテストチェックと、実機での表示が異なる場合があるからです。

結構この現象は制作現場でも起こっているので、Web制作の納品前には必ずチェックするようにしましょう!

リンク切れチェック

aタグのリンク切れがないか全てチェックします。

ページ数が多い場合は、手動でチェックするのは大変なのでツールを使って効率よくチェックしましょう。

W3Cが提供しているリンクチェックツールを使うと良いでしょう。

W3C Link checker

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を先に読み込んだ場合

  1. ページの読み込み
  2. ページの読み込みが完了したら、jsファイルを読み込む
  3. その後CSSファイルの読み込み

CSSを先に読み込んだ場合

  1. ページの読み込み&CSSファイル読み込み
  2. 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制作案件を受けた方であれば、おそらく何個かはできてないポイントがあったかと思います。

技術的な面では、まだまだ細かいチェックポイントはあるので、技術的な部分はクライアントとしっかり打ち合わせをして確認するようにしましょう!

最後までご覧いただきありがとうございました!

HikoPro
HikoPro

最後までご覧いただきありがとうございました!

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
ツール関連
HikoPro Blog

コメント

タイトルとURLをコピーしました