Webサイトできあがり時に絶対チェックしたい項目 フルスクラッチ編

みなさん、こんにちは(こんばんは?)
久々の運動により全身筋肉痛になった伊藤です。
今は少し引いているのですが、あまりにすごいので日曜日はずっと家に引きこもってしまいました。
どれくらいすごかったかというと、1時に寝て12時に起きて、追加で18時に寝て22時に起きました。
座り仕事がずっとで家でもずっと液晶画面とにらめっこという生活なので、もうちょっと体を動かす機会を作らないといけませんね……!

前置きはさておき、今回は特にフルスクラッチ制作の場合にチェックしたい点です。

【周辺サービス】

□Google Analyticsを埋め込んでいるか?
□Search Consoleの設定が完了しているか?

Google Analyticsは、アクセス解析の定番ツールです。
これを使用することで、ウェブページの効果測定を行うことができるので、これに関わらず解析系のサービスを入れないとウェブページを作る意味がかなり薄くなってしまいます。
またSearch Consleも検索時の見え方が確認できたり、SEO的に欠けている点を指摘してくれるので、必ず導入しておきましょう。

【画像の注意事項】

□画像のサイズは大きくないか?
□imgのaltタグが正しく設定されているか?

画像サイズが大きすぎると、ページの読み込みが遅くなってしまいます。今やパソコンでは日本にいれば大体どんなプロバイダでも画像がすぅーっと表示されますが、スマートフォンではそうはいきません。
そのため、画像のサイズはどんなに大きくても300KB以下には抑えてしまいたいところです。
制作時に適切な拡張子・最大サイズに気を配ってみると良さげです。

【SEOの注意事項】

□robotsタグがnoindexになったままでないか?
□title、descriptionに正しい情報が入力されているか?
□faviconが設定されているか?
□SNSにてシェアされたときの挙動は想定されているか?

最も致命的な注意事項はrobotsタグです。
robotsタグの内容がnoindexになったままだと、サイトが検索結果に表示されなくなってしまいます。
title、descriptionも仮の内容が入りっぱの場合、閲覧者から見てなんじゃこりゃ?なことに……。
以上2点は影響がかなり大きいので確認必須レベルです。
忘れないように気を付けていきましょう!

【フォーム編】

□フォームがENTERキーだけでなく投稿ボタンでも動くようになっているか?
□メールアドレス設定を正しく行っているか?

フォームの設定ですが、実は投稿ボタンでは動かなくなってしまうことがあります。
原因は完全には把握していないのですが、タグの組み方が悪いとそうなってしまうみたいですね。
恐ろしいことにENTERキーではしっかり動作するため、テストでは気づき難いくせに非常に影響が大きいので要チェックです。
また、メールアドレスもテストアドレスのままだと変なところにメールが行ってしまうことに……。
リスクを減らすためにも、そもそものテストアドレスは問題が起きないアドレスに設定しておくのも一つの手です。

【PHP・DB連動編】

□画像の圧縮・リサイズ処理がなされているか?
□想定外の情報が入った場合の動きは想定されているか?(とても長い・ファイルの種類が違う・項目が空など)

自作の管理画面を作ったときにチェックする項目となります。
実運用すると、意外なエエラー箇所が発生することも。
考えうる箇所に関しては、一通りテストしてしっかり確認していきましょう。

今回は以上のような形です。
皆さまのお役に立てれば幸いです!
気を付けるべき点を明文化することで、ミスも少なくなると思います。
そして、デスクワークが多い方は運動不足にもお気を付けを……!

伊藤

伊藤

三重県で生まれ育ち、大学は毎日長久手市まで通っていましたが、就職に際して名古屋の地に引っ越してきました。AIではディレクション、コーディング、デザインなど、制作関連の色々なことを担当しています。