くまだどうも、くまだ です。
Web制作で、案件をいくつかって、個人的にやっておいたほうがよいもの（特に納品前チェック）をざっとまとめてみました。
自分とクライアントが困らないための予防策です。Web制作でつくるWebサイトは、無形商材とはいえ立派な商品なので、納品前の品質チェックはやっておきましょう。（ついでに制作前にやっておくこともいくつか書いておきます）
- 着手金をもらっておく
- 修正回数 無制限はなし。 上限設ける。
- 使用する画像について、フリー素材か有料の画像かの確認 ⇨有料の場合、画像の費用は別途負担してもらう
- 画像の圧縮
- imgタグ内alt属性の記述
- ページ内リンク・外部リンクの確認
- hover、click部分の確認
- ボタンタグとaタグ
- フォントやカラー、divタグの閉じタグチェック
- お問い合わせのチェック（テスト送信）
- 主要ブラウザチェック（Chrome,FireFox,Edge,Safari,(IE)）
- 表示崩れチェック
- HTML,CSSのチェック
- 不要なコードの削除
- headタグの項目（ディスクリプションやTwitterカードの表示ができるかどうかなど）
- cssファイルで基本的に納品(sassは納品しない) ⇨HTML/CSS/JavaScriptをzipファイルもしくはクライアント指定のサーバー上に納品。WordPressの場合、phpファイルで納品
- 使っていない画像の削除
- テストアップするときはBASIC認証かける
少しでも早くコーディングするために準備が大事です。
Web制作で個人的にやっている納品前チェック
納品前と、ついでにいくつか制作前にやっておくことも書いていきます。思いついた順に書いているので、工程が多少前後すると思います。
着手金をもらっておく
いきなり納品前の話です笑
これは納品前、というよりは着手前にやっておいたほうがいいかなと思っています。可能であれば前払い方式がいいと考えています。
成果報酬でお金をもらう、ということになると、Web制作で場合によっては一か月、二か月、クライアント様の都合次第で納期がもっと伸びる可能性があります。成果報酬の場合だと、手元にお金が入るのがもしかしたら数ヶ月先、なんてことも十分にありえます。（経験済み）
なので、それを防ぐためにも前払いでもらうのがいいかなと思います。また前払いでもらっておくことで、クライアント様に逃げられる（こっちのやり損）ということも防ぐことができます。
ちなみに、逃げられたという経験は今のところありません。
使用する画像について、フリー素材か有料の画像かの確認
有料の場合、画像の費用は別途負担してもらいます。画像はなるべくもらえるならもらっておきますが、ない場合はフリーのもので代用しておきます。同様にWebサイトにのせるテキスト・情報ももらっておきます。
画像の圧縮
画像圧縮は、こちらも納品前というより制作前に準備しておくといいです。画像が重いとWebサイトの表示スピードが遅くなるので、多少なりとも圧縮したものを使うようにすると良いでしょう。画像圧縮には、I love img やタイニーピングあたりがおすすめです。
gulpやwebpackが使えるなら、そちらでも画像圧縮することはできます。（自分はgulpを使っています）
imgタグ内alt属性の記述
こちらは画像が読み込まれなかった時のための施策です。
<img src=”” alt=”ここに画像の情報・テキストをいれる”>
ページ内リンク・外部リンクの確認
ページ内リンクや外部リンクへの導線がちゃんとできているかもチェックします。せっかく作ったページや流したいページがあるのに、そこに行けないっていうことももしかしたらあるかもしれないので、それもチェックしておきます。
なので、サイト内のリンク先をクリックして目的のページに飛ぶのか確認します。
個人的にページ遷移して別タブを開く場合は
- noopener noreferrer
- target=”_blank”
を付けています。
hoverとclick、タップ
モバイルと PC では、タップとクリックということで動作が異なるのでその辺の出し分けも必要ならJavaScriptで制御しておきます。
ボタンのチェック
aタグの周りだけクリックできるのはNG。aタグの周りをdivタグで囲っていたとして、ホバーで色が変わったり、カーソルが変わったりクリックはできるけど、リンク先に飛ばないのでは意味がありません。
なので、ボタン系は、ボタンのすれすれでクリックしてもリンク先に飛べるようにします。
フォントやカラー、htmlの閉じタグのチェック
フォントやカラーが反映されているのか、デザインカンプと実際の表示とで確認します。また、コードを書いたり消したりしているうちにhtmlでdivの閉じタグ忘れなどもありえますので、こちらも拡張機能やツールなどでチェックします。
お問い合わせのチェック(テスト送信)
こちらもテスト送信して、ちゃんと使えるものかどうかをチェックします。
クライアント様がせっかくお金をかけて作ったサイトにお問い合わせがあっても、全然届かなかったら意味がないので、こちらもちゃんと送信テストはしておきます。
主要ブラウザでの表示確認
Chrome、Firefox、Edge、Safari など主要ブラウザでの表示確認をします。ちなみに自分はwindows派で、Mac系での表示確認は中古でもっているiphoneのみです。そのあたりはMacをもっているチームメンバーに任せています。
最近個人的にやっているのは、320px幅からスタートして、100pxずつ足していきながら確認し、それを1920px、2000px以上まで確認するようにしています。
デザインカンプを見ながらコーディングすると思いますが、デザインカンプの幅以外も考慮しなければなりません。特に、ブレイクポイントの境目とか、中途半端なサイズも確認します。
IE対応に関しては、場合によっては必要・不必要な場面が出てくると思います。（クライアント様の注文次第）
個人的には、IE対応も視野にいれておいたほうが無難（安全）ではある、という認識です。
表示崩れのチェック
- デザインカンプと大きな違いはないか
- テキスト量が増えたとき、減ったときにレイアウトに表示崩れはないか
- 画像のサイズが違ったとき、レイアウトに表示崩れはないか
- 中途半端なサイズでみたとき、コンテンツがはみ出していないか、被っていないか
- 横スクロールは発生していないか
などなど、これらもチェック。
例えば、ブログ記事をカード型で配置するパターンもありますが、常に同じ大きさの画像が使われるとは限らないので、コーディングの段階で様々な大きさの画像を実際に配置してみて、レイアウトが崩れないかチェックしてみると良いです。
また、同じような事例で箇条書きでお知らせのタイトルを見せるレイアウトも、上記で述べたようにテキスト量が減ったとき、増えたときなどを想定してコーディングしておきましょう。
さらに、ブログ記事の一覧が例えば3つ横並びでレイアウトを制作する場合で、それが2つになったとき、4つになったときなども想定してコーディングするようにしましょう。
HTML、CSSのチェック
間違った書き方をしていないかチェックしましょう。
不要なコードの削除
制作途中で使わなくなったコードなどは削除しておきます。まあ、クライアント様がコードの中身を見ることはあまりないかもしれませんが、削除しておきます。
削除するのは惜しいけど、他で使えそうなコードであれば、Notionなどにメモしておくといいです。
headタグの項目（Twitterカードの表示ができるかどうかなど）
metaタグの中身、ディスクリプションやのogpタグの設定もしておきます。Twitterカードなどシェアしたときに表示されるようにもしておきます。Web制作の勉強しはじめたときはそれほど重要視していなかったのですが、けっこう重要項目が多いです。
cssファイルで基本的に納品する(sassは納品しない)
基本的にHTML、CSS、JavaScript系や画像系など納品します。クライアント様から指定があればSassなど他のファイルを求められることもあります。WordPressの場合は、phpファイルです。
納品方法は、今のところ自分の場合は、
- zipファイルで納品
- クライアント様指定のサーバーにファイルをあげて納品
サーバーにあげる場合は、あらかじめクライアント様からサーバー情報をもらっておきます。クライアント様の中には、ドメインを取得しただけでサーバーのほうに反映していないパターンもあるので、それもこちらでやっておいてもいいと思います。
反映させるのに1時間ぐらいかかる上に、SSL化も1時間かかるので先にやっておくといいです。これを例えば時間がない、納期ぎりぎりのときにやると非常にやきもきします笑
あとはFTPソフトにつなげるための情報ももらっておきます。
使っていない画像の削除
制作の仮定で使わなくなった画像（ダミー画像など） も削除しておきます。
修正回数 無制限はなし。 上限回数設ける。
こちらは納品前というより制作前の打合せ時にする決めごとです。
デザインが決まったら大幅なレイアウトの修正はなくすようにし、修正回数に上限を設けておきます。
クライアント様の中には、修正はわりと簡単に言ってくるので（簡単にできるでしょ？みたいな感じで、、、）簡単な修正ならいいのですが、大幅なレイアウト変更となると大変です。修正回数に上限を設けましょう。設けないと自分がしんどいハメになります。
特に個人的にしんどかったのは、レイアウトが決まってコーディングまでほぼ終わり、確認してもらう段階で、デザインがまた変更になった、みたいな。。。
今までやったその部分の作業がすべてむだになってしまうので、何回でも無料というのは辞めたほうがいいです。上限以上の修正が来た場合は一回につきいくら、みたいにして金額を設定したほうがいいかもしれません。
テストアップするときは、BASIC認証をつける
納品前に、テストアップして表示確認すると思うんですが、その際はベーシック認証をつけておきます（公開前なので）。
この状態で、クライアント様に確認していただき、ここでも修正があれば修正し、なければベーシック認証を外して公開となります。
確認事項多すぎだけど必須
他にも細々しいことありますが、きりがないのでこの辺りにしておきます。
こんな感じで私が行っているんですけど、もしかしたらこれはやらなくていい、今はやらなくていいというのはあるかもしれません。
こういうのがあったら柔らかく教えてくれればありがたいし、これをやっておくといいよというのも教えていただくと嬉しいです。
ここまで読んでくださりありがとうございました。