依頼内容は、必ず抜け漏れが発生します！
Webサイトの受注形態は、サイト全体、サイト内の一部コンテンツ、ページ、ランディングページなど様々な仕様が想定されます。
しかし、発注側から提示される仕様は決して明確ではなく、納品後に不具合が生じて、想定していた工数をオーバーしてしまうことも多々あります。
制作会社の場合、プロデューサーなりディレクターが細部まで確認を行った上で、受注、制作へと入るため、納品時に発覚するようなミスを極力回避します。
ところが、フリーランスの方が直接クライアントから受注した場合、ご自身がチェックを見逃すと、その代償は自分にふりかかってきます。「そんな話、聞いていません…」と開き直ることはできません。
クライアントが求めているのは「自分たちが気づかない点まで確認を怠らない、頼りになるパートナー」です。
企業サイトを制作する際に気をつけたいポイント
これらの企業サイト側は、共通で挿入されるヘッダーやフッターが用意されているため「コンテンツ領域のみ制作してください」という依頼がよく来ます。
制作に関するルール、ガイドラインといった資料は用意されていますが、かならずしもそれらの資料が抜け漏れなくまとめられているとは限りません。
以下に制作をすすめる上で注意しておきたいポイントをまとめてみました。
CSSのバッティング発生を回避するコーディングを！
サイト側を「親」、納品物を「子」と考えた場合、「親」側で用意されている html、css、JavaScriptと「子」側で納品した html、css、JavaScriptの間にバッティングが生じてしまい、ページに不具合が発生することがあります。
リセットCSSは外して納品する
企業サイトでは、デフォルト設定されているスタイルがたいてい存在します。納品物の中にリセットCSSを設定していると、そのスタイルが原因で表示が崩れるケースがあります。
リセットCSSなしで一旦納品し、納品後にもし不具合が生じたら調整する手順を選んだほうが賢明です。
要素型セレクタへの装飾は避ける
これは頻繁に発生する不具合です。親側で設定されているデフォルトのCSSと納品物のCSSがバッティングして、表示に不具合が発生するケース。
企業サイト等での納品経験がないと、制作時にあらかじめ注意すべき点として、気づくことができないようです。
よくあるケースとしては、html、body、aタグにcolorやbackground-colorなどのスタイルの装飾が挙げられます。
例えば、以下のようなスタイルです。
<style>
<!-- body、aなどの要素型セレクタに直接装飾しているケース -->
body {
background-color: #333;
}
a {
color: blue;
}
a::hover {
color: red;
}
</style>
<html>
<body> ・・・・・・・・・・・・・ </body>
</html>
これらスタイルは、完パケの状態で表示の確認を行っていても、親側のサイトにテストアップした時点で表示に不具合を発生させてしまいます。
この場合の対応策は、要素型セレクタのみにスタイルをあてないで、クラス名とセットで記述することです。
例えば、 bodyタグの場合は、bodyタグのひとつ下の階層全体をdivタグでくくって、ここにクラス名を設定すれば問題ありません。
<style>
<!-- divタグでくくり、クラス名「wrapper」を設定したケース -->
.wrapper {
background-color: #333;
}
.wrapper a {
color: blue;
}
.wrapper a::hover {
color: red;
}
</style>
<html>
<body>
<div class="wrapper" > ・・・・・・・・・・・・・ </div>
</body>
</html>
CSS、JavaScriptは外部ファイルで読み込む
納品ページでJavaScriptを使用している際、設定にも注意が必要です。
ケースバイケースではありますが、例えば、完パケの状態ではJavaScriptの挙動を確認できていたのが、テストアップした際に動かない…といった不具合が発生することがあります。
JavaScriptはhtmlファイル内に記述すると、可読性が悪くないうまく稼働しないことがあります。
この場合は外部ファイルにJavaScriptを記述して、htmlファイルに読み込ませることで回避します。
CSSも同様です。インラインでの装飾は避けて、外部ファイルからの読み込みで設定しましょう。
インラインでのスタイル記述は、メンテナンス性、拡張性の低いファイルとなってしまい、運用側に余計な工数、負担を強いる原因となってしまいます。
まとめ
「とりあえずページつくって！」という依頼をされるクライアントに出合うことが多々あります。
こういった曖昧な案件をクライアントの言うままに着手してしまうと、ゆくゆくは制作側が想定外の工数を要したり、請求外の作業を追ってしまうことにつながります。
事前確認、準備を徹底することで、NGなコーディングの回避はもちろん、NGな制作進行を回避する事も大切ですね。
下記に受注から納品までに必ず抑えておきたい手順をまとめてみましたので、参考までに。
制作ガイドラインは必ず入手する
ガイドラインがわからないままコーディングを行うと、納品後に追加修正の依頼が頻発します。
その際の修正コストをどちらが負担するかという問題になりかねません。もし、ガイドラインがないのであれば、納品後に発生した不具合修正のコストについては事前に取り決めしておくことが大切です。
仕様書に基づいて制作する
クライアントからの依頼内容は工数に関わる重要事項です。
クライアントから仕様書、指示書といったかたちで用意してもらえるのがベストですが、もらえない場合はクライアントからのヒアリングを制作側でまとめ、クライアントと共有しておくことは必須です。
納品後のメンテナンスを考慮してコーディングする
納品したファイルは手離れした時点で完成ではなく、運用側で修正、追加などの改廃がともなってきます。
誰がいつ、どこを修正したかまで分かる必要はありませんが、ブロックのはじまり、終わりがすぐ判別できるようコメントが追記されているファイルは、改廃作業がスムーズに行えます。
Web制作者としては、自分以外の制作者の方がスムーズに作業を行えるよう、こういった配慮を行うのはある意味常識と捉え、進めていきましょう。
コメント