コラムColumn

デバッグ作業について

こんにちは。デバッガーのクラッカーです。最近ウェブ制作の仕事の仕組みを理解するために、デバッグの仕事をさせていただくことになりました。
役職が変わりましたが今後ともよろしくお願い致します。

今回のブログではなにを書こうかと迷いましたが、担当しているデバッグ作業についてまとめてみようと思います。
私自身デバッグの仕事を始めてからまだ時間があまり経っていないため、デバッグ作業について知らないことがたくさんありますが、
最近担当している作業についてまとめてみようと思います。

作業としては主にコーディング作業が進んだ状態で、作られたページがPSDデータ通りに制作されているかどうか、元のデータとウェブページを比べて
チェックしています。
また、alt名の記入作業等も担当することがあります。

1.チェック項目について

デバッグ作業においてチェックするべき項目はサイトやページによって変わってくるかと思いますが、コーディングがPSD通りに仕上げられているか
確認するためにチェックしなければならない項目は
・データファイルの更新日が最新かどうか
・リンクが張られているかどうか
・マージンのチェック
・line-heightのチェック
・文字サイズのチェック
・アライン線、高さ揃えのチェック
・誤字脱字・英語のスペルのチェック
・余白が適切かどうかのチェック
・効率と意味を考慮したスライスができているか
・alt名が記入されているか

などです。
私がチェックしているのは主にサイトを利用する上で表示に違和感を感じるところがないか、きちんと選択したページに移れるかどうか、
画像が表示されないとき・音声読み上げ機能に必要なalt名が記入されているか…という3点ですが、これはサイトを機能させる上で最低限必要な表示・動作
チェックだと思います。

その他にもコーディングのデータの中にある不要な要素を整理してあるかどうか等、専門的な知識が必要なチェック項目もありますが、
不要な要素の整理については、サイトの修正作業をする時に担当者の方が迷わないようにするために必要になります。

 

2.デバッグを担当してみて

出来上がったページをPSDデータと並べて見比べるとマージンや表のアライン線が揃っていなかったりします。
また、PSDデータのデザインの方がずれていたりする場合もあります。
デザインをしていた時は完璧なデータを作る難しさを感じていましたが、デバッグのときに自分の作成したPSDデータとコーディングデータを見比べて、
PSD側にミスがあった時はとても申し訳なく思いました。

PSDデータはコーダーさんにとってはコーディングの指示にもなるため、間違いのないように正確にページのデザイン作成をしなければなりませんが、
よくチェックしたつもりでもどこかが抜けていることはあると思います。
コーダーさん側の作業でもどこかが抜けていたり、複数のブラウザで確認してみるとブラウザによって表示が変わってしまっていたりします。
複数の人が制作工程にかかわり、またいろいろな角度から作成中のサイトを見て確認する過程で、サイトのクオリティーも上げていくのがウェブ制作なのかな
と感じました。
デバッグの作業効率を上げることも課題の一つですが、Web制作の工程を知っていることが効率UPにもつながることは多いと思います。
ワードプレス化するサイトの場合、静的コーディングのデータをパーツごとに分解してサイトを組み立てるため、ヘッダー・フッターの部分は1つの共通
パーツになります。
そのため、共通部分に関する作業は工程によっては省略できる可能性があります。
サイトのデバッグをする上でよく使用しているのが、サイトの要素検証で、alt記入ができているか、マージン・パディング・フォントサイズ等をチェック
するのに利用しています。
コーディングが分かるようになれば、もっと利用する価値が分かってくると思います。
デザインの練習でサイトの模写ををする時にもフォントサイズ等の情報が数値で確認できるため便利だと思いました。

3.最後に

デバッグを担当してみて、サイト制作について新しく知った事・まだ知らないことだらけだという気付きがありましたが、
いいサイトを作る上で知っていて無駄なことはないのではないかと思います。
デバッグ作業をしつつウェブ制作の仕組みを勉強しウェブに関する理解を深めようと思います。ありがとうございました。

マージン / alt名 / PSDデータ / アライン線 / コーディングデータ / チェック項目 / デバッグ

執筆者:ブログ担当

お問い合わせフォーム