Day20｜出来上がったWebサイトをチェックしよう！

それでは、出来上がったWebサイトを確認していきましょう🙌

公開まであと少し、駆け抜けていきましょう！

課題3-2-2｜Webサイトをチェックしよう！

実際にWebサイトの形になったら、目視・検証モードでの確認と、ツールを使用しての確認を実施します。確認項目を見ていきましょう！

Webサイトの確認項目

まずは、目視と検証モードを使って確認していきましょう！

目視での確認は、ユーザー目線の確認がメインです。Webサイトの使用感や情報に誤りがないかを確認します。ブレイクポイント周辺の確認にはブラウザの検証モードが便利です。

また、複数の実機・ブラウザでの確認も必ず実施しましょう。

Windows OSで動作しているChromeでの表示とMac OSで動作しているChromeでの表示ですら崩れが生じることがあったり、Safariだと更に問題が起こっているという場合もあります。コーダーも確認しているとは思いますが、改めて抜け漏れがないかダブルチェックをするようにしてください。

またアニメーション等の動きがある部分に関しては事前に伝えていたイメージと合致しているか確認しましょう。

問い合わせフォーム（ある場合）とセキュリティ対策に関しては本番環境に上げてからで問題ありません。（本番環境ようにセッティングするとテスト環境では動作しないものもあるため）

---

コラムでWebサイトのチェックフェーズで便利なChromeの拡張機能を2つ紹介しています！使用したことがない場合はぜひ確認してみてくださいね🙌

「Lighthouse」では快適にWebサイトを閲覧できるかという数値や、SEOに関する大まかな数値を確認することができます。ただし、あくまでも限られた環境での参考値ではあるので、こだわり過ぎなくてOKです。表示速度に関しては、体感を大事にして良いです🙆‍♀️

「SEO META in 1 CLICK」は具体的にコードの情報から抜け漏れがあるかどうかを吸い出してくれます。

SEOに拘らないサイトにしても、クローラにWebサイトを巡回してもらうためには最低限の実装は必要です。また、アクセシビリティの観点からも設定が推奨されている項目でもあるので必ず確認しましょう！

ここまでの確認が済んだら、いよいよテスト環境をクライアントに見てもらいます。今回はカリキュラムの都合上省略しますが、Webサイトのどこを確認すべきかも併せて伝えましょう。基本的にはコードや内部構成などはわからない方がほとんどなので、一般ユーザー目線・自社目線で見えている範囲を確認してもらうことになります！

今回の課題で確認を飛ばしても良いところ

今回の実践課題の特性上、Webサイトチェックのタイミングでチェックを飛ばしてもOKなところをお伝えしておきます🙏

逆に言うと、これら以外でデザインカンプと違う場所があればそれはチェックすべき項目です！

しっかりチェックしてくださいね💪

課題を送信しよう！

【前提】
コーダーからテスト環境にアップしたと連絡がありました。中身を確認してフィードバックを送信しましょう！

フィードバックの方法はお任せします。

コーダーに修正してほしい箇所が確実に伝われば問題ないです🙆‍♀️

※筆者個人的には1つ目のフィードバックが来るのが最も安心感があります。ただ、個人的な意見ではあるので、先にコーダーに聞いてみるのもよいかもしれませんね！

次の工程を確認しよう！

次はいよいよ納品をします！

• Webサイトの本番環境へのアップロードと表示のチェック
• 納品書・請求書、その他書類の作成
• 納品時・納品後について

以上の内容を確認していきます。

この段階まで来たら、クライアントからの指定がない場合は「いつWebサイトを公開するか（公開が可能か）」を連絡しておきましょう。テスト環境ではうまくいっていたが本番環境では違う挙動をするといったことも十分にあり得るので、クライアントも対応できる日を選んで公開日を設定してくださいね💪

まとめ

本日はWebサイトチェックについてお伝えしました🙌

見るべき箇所は今回紹介した分で「最低限」となります。確認作業を何度も重ねていくことで、また、Webの仕様・ルールが変わっていくと共に「これも見たほうがいいな」という項目はどんどん出てくるかと思います。そんな時はチェック表をどんどんアレンジして、自分の“最強チェック表”を作ってくださいね🙌