こんにちは、大阪の堀江にあるWeb制作会社、Double Factory（ダブルファクトリー ）のプランナー丸山です。
以前、「Double Factory（ダブルファクトリー ）のアフターサービス」について、記事を書きましたが、今回はコーディング後にチェックしていることについて述べたいと思います。
Web制作を依頼して、デザインも決まって後はコーディングのみ！！となったものの、コーディングって何？？いったい何をチェックすればいいの？？よく分からない用語もありそうだし大変そう…と、思われるかもしれませんが安心して下さい！
Double Factory（ダブルファクトリー ）がコーディング後にチェックすることを公開します！分かりにくそうな用語は簡単に説明と、なぜやるのかポイントも以下にまとめておりますので、ぜひご覧下さい。
コーディングとは？
Google CromeやInternet Explorerなどブラウザで、デザインしたWebサイトをHTMLなどの言語を使って見えるようにすることです。
プログラミング言語を使って組み立てていき、間違いがあるとページがうまく表示されないこともあるので、コーディング後にWebサイトをチェックすることは必須です。
以下で、どんなことを、なぜ、どんな風にDouble Factory（ダブルファクトリー ）がチェックしているのか述べていきます。
コーディング後にチェックすること
動作
レスポンシブデザイン
PC、タブレット、スマートフォンでの表示・動作はスムーズか、レイアウト崩れはないか。
★レスポンシブデザインとは、PCやタブレット、スマートフォンなど違うデバイスから見ても、幅や表示方法を変えることで同じURLとHTMLで表示できる手法です。この手法が出来るまで、PC・スマートフォンを分けてWebサイトを制作していたので、時間や費用もかかっていました。デバイスによって表示を切り替えをしてくれる分、各デバイスでユーザーが使いやすくみやすい表示をしているか確認することは必須になります。
リンク
リンクのあるボタンやテキストをクリックして確認。
どのようにリンクを開くかもチェック（target_blankなど）
リンク切れがないか、ページ内リンクも確認
★リンク切れはユーザーにとってはもちろん、SEOの観点からも良くないのでしっかりチェックします。
メニューやアコーディオン
メニューやアコーディオンの開閉チェック。
★動かないとユーザーが欲しい情報のページにたどり着けないこともあります。
hover時の動き
hovar時の設定と挙動があるか確認。
hover:リンク要素などに、マウスを乗せた時に色が半透明になったりする表現のこと
★リンクがある部分を分かりやすくするために重要なアクションになります。
JavaScriptの挙動
正しい動きをしているか確認。
★プログラミングに近いこともあるので、内容によってはJavaScriptの部分のテスト指示書を作成しております。
Webサイトの重さ
遅い場合、画像が適正な大きさに圧縮されているか確認。
★Webサイトが重いとページを開くのに時間がかかり、離脱率が高くなります。
スクロールエフェクト
スクロールに応じて画面が切り替わったり、そのアクションが動いているか検証。
★アクションが動かないとユーザーに伝えたいことが伝わらないことも。
横スクロール
スクロールした時のデザインの確認。
★デザイン崩れが起きることもあります。
表示とソース
各ブラウザとデバイスでの表示
Chrome、FireFox、IE（Windowsのみ）、Safari（Macのみ）の最新バージョンで表示崩れがないかチェック。
Mac、Windows PC、iPad、Androidタブレット、iPhone、Androidスマートフォンの各デバイスの最新バージョンで、表示崩れがないか確認。（Mac、iPad、iPhoneは実機でチェック）
JavaScriptの挙動もチェック。
★ブラウザやデバイスによって、見え方が変わっていたり、崩れが起きている場合があるので各ブラウザやデバイスでしっかり確認していきます。
バリデーター
HTMLとCSSがルールに沿って記述されているか、間違いがないかソフトウェアで確認。
★正しいソースコードで記述することでSEOの観点からも重要で、また事前にエラーや抜け漏れを防いだりできます。
404ページ
オリジナルの404ページが表示されるかチェック。
★404ページとは、アクセスしたページが存在しない場合に表示されるページのことです。
そのページがあることによりWebサイトからの離脱を抑えたり、遷移してもらえたり、間接的にSEO効果が上がります。
SEO
meta要素の設定
各ページのtitle、description（Webサイトの紹介文）、OGP（SNSでシェアされた時、ページのタイトル、URL、画像などを表示させる仕組み）などの文言が適切なものか確認。
★各ページに適した文章を入れると、ユーザーが検索した時にヒットしやすくなります。特にタイトルは対策キーワードを入れているか確認します。
h1、h2などの見出しタグ
特に大見出しとなるh1はタイトルとしてつけることが多いので適切か、h2以降は文章構成に合っているか確認。
★検索順位に影響するものと言われているのと、設定することでユーザーにとって分かりやすいコンテンツにすることができます。
altの属性
画像に設定するもので、その画像のポイントやコンテンツに合っているか確認。
★検索エンジンからの流入が期待できるのと、SEOとアクセシビリティの観点も設定しておくべきところです。
index登録と確認
検索エンジンのデータベースへの登録とサイト公開後にインデックスされたかの確認。
★そのデータベースに登録されないと、どれだけユーザーにとって有益なページでも、対策キーワードを練り込んでいても検索結果に出てこないので、SEO対策の上でも重要となります。
デザイン
デザインとWebサイトの比較
元デザインと比較して違う部分や、幅など大きなズレがないか確認。
★元デザインと違っていた場合、使いにくいWebサイト、また間違った情報を提供してしまうことにも繋がります。
色
文字や背景色がデザインと合っているかチェック。
★文字や背景色はブランドイメージにもつながるので重要です。
誤字脱字
テキストが指定のものと合っているか比較。バナーなどの文言にもミスがないかチェック。
★正しい情報をユーザーに伝えるため、また変換間違いなども確認していきます。
余白
空白や余白が入っていることがあるので、あれば削除。
★不要な空白や余白は読みづらく、またWebサイトの品質に関わります。
その他
favicon(ファビコン)の設定
小さな画像でも認識できるかチェック。
★ブラウザでタブに表示されている小さな画像のことで、Webページをブックマークした時、検索結果などにも表示されます。ワンポイントでその会社のブランドイメージを印象づけ、たくさんタブを開いている時に何のサイトか分かりやすいメリットもあります。
サイトマップの送信
Google Search Consoleからxml形式のファイルを送信とサーバーに設置できているか確認。
★サイトマップとはWebサイトの構造を一覧で記載しているもので、それを検索エンジンに伝えるためのファイルのことです。Googleのクローラーがサイトの読み込みをスムーズに読み込むために必要です。
Google Analytics（グーグルアナリティクス）の設置
正しいタグ・位置に入っているか確認。
★Google Analyticsとは、Googleが提供しているアクセス解析ツールで基本的には無料で使えます。Webサイトに訪れたのはどんなユーザか、行動や使用されたデバイスを分析するなどのデータを計測できます。
Google Search Console（グーグルサーチコンソール）への登録
WordPressでの設定画面からの設置を確認。
★Google検索での、Webサイトの表示回数や順位、クリック数やどの検索ワードで訪れたかをなどを確認できる無料サービスです。
［Google Search Console（グーグルサーチコンソール）とGoogle Analytics（グーグルアナリティクス）の違いって？］
Google Search Console（グーグルサーチコンソール）とは、Webサイトを管理するツールで、簡単にいうとユーザーWebサイトに入る前の分析に使います。ページのクリック数や、ユーザーがどのキーワードで検索してWebサイトにたどり着いたのかなどを知るが出来ます。
Google Analytics（グーグルアナリティクス）とはユーザーがWebサイトに入ったあと、どのように利用しているか分析するためのアクセス解析ツールです。どんなユーザーがWebサイト内をどのように行動したのかなどを確認できます。
この2つの違いについては、詳しく記事を書きたいと思います。乞うご期待！
フォーム
設定した項目の動作
テキストフィールド、セレクトボックス、ラジオボタン、チェックボックス、テキストエリアなど、設定した項目が動作するか。
★ユーザーからのお問い合わせの内容に関わるので、実際に入力や選択をして確認します。
エラーメッセージ
未入力の必須項目があった場合に、エラーメッセージを出しているか。
★エラーメッセージがないと、何が送信に必要な項目かお客様に伝わらず、お問い合わせ頂く機会を失うことになります。
送信の完了画面
送信ボタンを押して、確認画面の後に完了画面に遷移するかチェック。
★完了画面にならないと、お問い合わせの内容が送信出来たのかユーザーに不安を与えてしまいます。
自動返信メール
管理者とユーザーに、自動返信のメールが届いているか確認。
★管理者にメールが届かないとユーザーの方からのお問い合わせに気付けず、ビジネスの機会を逃すことにもつながる恐れがあります。またユーザーに自動返信メールを送ることで問い合わせが届いたと安心して頂けます。
まとめ
以上となります、いかがでしたでしょうか？
Webサイトが完成するまでの過程は、やることや確認しなければならないことが多いのですが、完成した時の達成感はなんとも言えません。また公開してからも、Google Search Console（グーグルサーチコンソール）やGoogle Analytics（グーグルアナリティクス）を使って分析したり、ニュースの配信や記事の更新など、Webサイトを育てていくことは重要となります。
Webサイトのリニューアルや新規での制作をご検討されていて、分からないこと、不安なことがあればぜひDouble Factory（ダブルファクトリー ）までご相談ください！
公開後が勝負！
公開までのステップも安心してお任せください！
大阪の堀江にあるWeb制作会社、Double Factory（ダブルファクトリー ）への相談はこちらまで！