HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

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

約7分
About|HikoPro

About|HikoPro

1998年生まれ|ITライフクリエイター
Webクリエイター|YouTuber|Blogger

学生時代は、タイピングのテストでクラス最下位レベルのパソコン音痴。
もっと自分の市場価値を高めたいと思い、、、
▷バンコク不動産▷インドIT留学▷ベトナムIT企業エンジニアを経て
Web系のフリーランスとして独立。

その後もっと大きい市場でインパクトのあることをしたいと思い、
ITメガベンチャーに就職。

#GoProAwards受賞 #14ヵ国渡航 #Z大学創業者 #ネコ好き

YouTube

I make videos of computer hack information and useful applications that
enrich people's work and life.


PC Hack

Web Create

Life Style

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

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

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

Leave A Reply

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)