コーディング後の納品前チェック項目について
記事IT・テクノロジー
はじめまして、ココナラでHTML/CSSコーディングサービスを出品しているLakis web studio..と申します。
当サービスでは品質を保つためにどのような項目を納品前にチェックしているのか、出品サービスの説明欄には記載しきれないため、以下にまとめました。当サービスに興味を持ってくださったお客様のご安心につながると幸いです。
◆ベーシック認証
制作過程でコーディング中のwebサイトをお客様に確認していただくために、構築環境のサーバーにデータをアップします。外部の人がこの仮のwebサイトを閲覧できないようにするために、ベーシック認証を設定します。
◆ブラウザ表示崩れチェック
以下のブラウザの最新バージョンにおいて、デザイン通りにコーディングが出来ているかどうか、表示崩れが起きていないかどうか確認いたします。
・スマホ：Android, iPhone（Chrome, Safari）
・タブレット：iPad（Chrome, Safari）
・PC：Windows（Chrome, Microsoft Edge, Firefox）
通常、Internet Explorerに対応したコーディングは行っておりません。また、作業環境がWindowsですので、Macでの確認作業は出来かねますことをご了承くださいませ。
◆コンソールチェック
コンソールエラーとは、ブラウザの開発者ツールのコンソールに表示されるエラーメッセージのことです。この部分にJavaScriptやCSSのエラー等が表示されます。コンソールに問題のあるエラーが残っていると、ブラウザの処理速度が低下し、Webページの読み込み時間が長くなる可能性があるので、Webページのパフォーマンス向上の為にエラーをチェックします。
◆リンクチェック
リンク切れが発生している場合、検索エンジンの評価が低下する可能性があるのでツールを使いリンク切れチェックを行います。また、リダイレクト先に正しいページやファイルが設定されているか、PCとスマホの両方で実際にリンクを押して調べます。
ユーザーエクスペリエンスを損なわないために、リンクエリアのチェックも大切です。aタグで囲んでいる部分が狭すぎたり、リンクになるべきところが囲まれていなかったりしないか、実際に少し離れた部分にカーソルを合わせて調べます。
◆文字校正
webサイトに使用する文章は、お客様に用意していただくものを使用しますが、納品前に誤字脱字や日本語としておかしい文章が無いか、会社情報など固有の情報に誤りが無いか確認します。
SEOの観点から、特に固有名詞は異なる表記が複数記載されていると問題があるので、表記の揺れが無いかも確認いたします。
誤りを見つけた場合は修正前にお客様に確認させてもらった後、対応いたします。
◆お問い合わせフォームチェック
Googleフォームを使用する場合と、WordPressのプラグインなどその他のメールフォームシステムを使用する場合で少し異なりますが、基本的にお問い合わせフォームそのものの挙動と自動返信メールの文章の確認をいたします。
まず、必須項目を入力しないまま送信ボタンを押したときにエラーがきちんと出るかや、入力フォームにフォーカスしたときに拡大されないかなどフォームが正常に動作しているか確認いたします。また、お問い合わせフォームの確認ページや送信完了ページが存在する場合、送信ボタンを押した後にリダイレクトするか挙動の確認をします。
自動返信メールの確認では、こちらがメールの文章を作成いたしますので、お客様にその文章のご確認をしていただきます。
◆内部SEO対策チェック
新規webサイトを「ゴリゴリ検索上位に表示させる！」、といったことは出来ませんが、当コーディングサービスでは最低限のSEO対策をさせていただきます。実際にGoogleのページ評価に影響がないものもありますが、クリック率アップなどの効果もあったりするので、対策するに越したことはありません。大まかには『検索エンジンにクロールを促すもの』と、『検索エンジンが理解しやすいようにするもの』と、『ユーザビリティのために設定するもの』の3種類ありますので、簡単にご説明します。
まず、『検索エンジンにクロールを促すもの』は、検索エンジンにインデックスしてほしいURLを見つけてもらうにwebサイト全体の構成サイトマップを設置したり、反対にインデックスしてほしくないURLを伝えたりします。
次に『検索エンジンが理解しやすいようにするもの』に関しては、コーディングそのものと、メタデータの設定があります。
webサイトの内容を検索エンジンに正確に理解されるためには、正しいHTMLのルールで可能な限り画像ではなくテキストで記述しマークアップすることが大切です。そのためコーディング完了後に、W3Cのwebサイトでソースコードの文法チェックをします。加えて構造化データという専用のコード形式を設置することで、更に内容が理解されやすくなります。
また、検索エンジンだけでなくユーザーにとってもどのようなページか端的に伝えるために、metaタイトル・ディスクリプションの部分にキーワードを含ませて簡潔に内容をまとめます。
最後に『ユーザビリティのために設定するもの』は、alt属性への適切な記述やページスピードの改善が挙げられます。不具合で画像が表示されていないときでもユーザーに内容が分かるように、表示速度が遅くなってユーザーがwebサイトから離れないようにするなど、ページのユーザー体験を向上させることで結果的にSEO対策になるというものです。
◆まとめ
最後に、以下の表に納品前にチェックしている項目をまとめました。他にもお任せいただいた範囲によって、SSL対応しているかや404ページが設定されているかなど確認項目が加わります。
これだけにとどまることなく、もっとお客様により高品質なwebサイトご提供するにはどうすれば良いか考え、努めて参りますのでよろしくお願いいたします😃
