あけましておめでとうございます。
酒倉です^^

正月ボケも相まって、ここのところ小さなミスが続いています・・・。

A8のクリエイティブチームは、
ディレクターさんに制作物をお渡しする前に、
一度課内のマネージャー、または全員でチェックをするようにしています。

もちろん課内チェックの前に、セルフチェックをするのですが・・・

「こんなに分かりやすいところに誤字があった><」
「閉じタグがなくてエラーが出てた泣」

などの小さなミスが、課内チェックの時に見つかると、
ああ、なんで自分で気が付けなかったんだろう><
と自分自身を追い詰めますし、チェックしてくださるチームのみんなにも申し訳なくなります。

私ほどではないかもしれませんが、
デザイナーの皆さんも一度は、こういった経験があるのではないでしょうか。

なので今回は、WEBデザイナーが納品前にチェックすべき項目をまとめてみようと思います！
自分自身の備忘録と、誰かのお役に立てれば幸いです。

デザインのセルフチェック

①指示内容に沿ったデザインになっているか

デザインを作っているうちに、段々自分好みのデザインに暴走しているときがありませんか？
初心忘るべからず。先方のご希望のデザインになっているか、都度確認しましょう。

②文章に誤字はないか

ディレクターさんから頂いたテキストに誤字はないか、自分がテキストのコピペをミスしていないか、
そもそも伝わりにくい文章がないかチェックしましょう。デザインの時点で相談・修正しておくと、後々がスムーズです。

③追加対応の情報の反映はできているか

打ち合わせ後に、追加や削除の依頼が来ることがあります。きちんとメモを取り、デザインへの反映も忘れないようにしましょう。

コーディングのセルフチェック

①html、cssソースでエラーは出ていないか

不要なタグを入れっぱなしだったり、閉じタグを忘れていたり。
firefoxのデベロッパーツールや、
https://validator.w3.org/やAnother HTML-lint gatewayなどのチェックツールを使って、
エラーが出ていないか見てみましょう。

②コンソールエラーは出ていないか

特に、動きのあるページを作っているときは確認しましょう。
こちらもデベロッパーツールでチェックできます。

③テキストのコピペミスはないか

photoshopからテキストをコピーしてくる時、貼り付けを間違っている可能性があります。
また、時には文字化けしている可能性もあるので、文章校正ツール – so-zou.jpのようなツールを使って確認しましょう。
また、VS Codeならテキスト校正くんも便利です。

④head内の情報は合っているか

head内のタイトルやディスクリプション、キーワードやOGPの設定は見落としがちです。
今回作ったページの内容に合っているか確認しましょう。

⑤機種依存文字を変換したか

文字コードがUTF-8なら問題ないのですが、そうでない場合、文字化けが起こったりするので、機種依存文字の変換を行いましょう。

https://www.doe.co.jp/benri-tool/sp-chara.php

⑥各種ブラウザ・デバイスのチェックはできたか

現在、A8のクリエイティブチームではchrome、firefox、Edge、safariでのブラウザチェックと、
スマホ・タブレットでのチェックを行っています。きれいなレスポンシブになっているか確認しましょう。
ブラウザによる差異は徐々に少なくなってきましたが、
どのブラウザでも情報が伝えられるようにしっかりチェックしましょう。

⑦リンクはちゃんと飛んでいるか

テストページのリンクのままになっていないか、404になっていないか、すべてのリンクをチェックしましょう。

まとめ

いかがでしたでしょうか。
自分の中で気を付けたい点をまとめてみたのですが・・・細かく見ていけばもっとたくさんあるかもしれませんね。
2021年こそ、セルフチェックを入念に行い、自分もチームも、ディレクターさんも気持ちよく仕事ができるように注意していこうと思います。

それでは今日はこの辺で。

※当サイトのリンクに関しては、アフィリエイトリンクは含まれておりません