Webサイトをコーディングしたら必ずチェックする項目と確認方法

※このページでは広告のリンクを含みます

Webサイトページのコーディング（実装）が完了したら制作は終わりではありません。必ず制作したページに対してチェックする必要があります。ここでは、コーディングした後のチェック項目と手法を解説します。
これで、質の高いWebページが出来上がるようになります。

Webページに誤字脱字があるとユーザーにとって誤情報を与えてしまう可能性もあります。また、HTMLのコードの書き方（マークアップ）が誤っていると検索エンジンなどに正確に読み取ってもらえない、ユーザーにとって使いにくいものになってしまう可能性もあります。

いくら情報設計やデザインなどでよりクオリティの高いものを作ったとしてもコーディング作業でテキストの誤字脱字やマークアップに不備があると一気にWebサイトは品質の低いものなります。

Webサイトの品質を高めるために、コーディングチェックは必要ですので是非この記事でチェック方法を確認していきましょう。
コーディングチェックには下記の3つの項目において確認をします。

ひとつずつ説明をしていきます。

クライアントから支給された原稿は一旦ワイヤーフレームに落とし込みます。案件によって支給された原稿をそのまま使う場合もあります。
原稿から反映させる項目は下記のとおり。

ひとつずつ説明をしていきます。

ブラウザより右クリックして［ページのソースを表示］からソースを開いてCtrl+Fで検索し、該当箇所にヒットするか確認をします。

ブラウザより右クリックして［ページのソースを表示］からソースを開いてCtrl+Fで検索し、該当箇所にヒットするか確認をします。

テキスト系ファイルの差分比較ツール「WinMerge」を使用します。

目視にて確認します。

一番カンタンな方法はリンクを押して指定しているリンク先のページに飛んでいるかを確認します。

また、リンク切れの確認方法はChromeの拡張機能「Check My Links」を使うと1ページ分のリンクを自動により確認ができます。

正しいマークアップをしておくことでユーザービリティ、アクセシビリティも優れて結果ユーザー体験が向上することになります。コーディング時にマークアップで確認する項目は下記になります。

ひとつずつ説明をしていきます。

HTMLの文法チェッカー「The W3C Markup Validation Service」を使って確認をします。

Web技術の標準化を推進する為に設立された標準化団体、非営利団体「W3C（World Wide Web Consortium）」が提供しているのでこれを参考にして適切な制作を作っていきましょう。

Google Chromeの拡張機能「Alt & Meta viewer」を使ってalt属性を一覧表示させることができます。

ユーザーは色んなブラウザでサイトを閲覧することになります。
クライアントがいるWeb制作ではパソコン、スマホとたくさんのブラウザに対応する必要があります。
（対応するブラウザについては制作仕様書で決めていきます。）

ブラウザ表示で確認すべきことは下記の2点です。

ひとつずつ説明をしていきます。

目視にて確認します。

目視にて確認します。

下記のページではよりチェックするツールの使い方も解説していますので、こちらも読んでもらえると良いと思います。

Webサイトのコーディングチェックの確認方法と手順を詳しく解説（チェックの考え方、ツールの使い方）

Webサイトを制作完了後クライアントに納品をする前に一度、コーディングしたページをチェックする作業が必然です。 本記事ではコーディングチェックを行うための確認方法を詳細に解説しています。この記事でコーディングチェックに必要なツールやWebサービスなどが把握でき誰でも確認作業することが可能になります。

公開直前まで制作したWebサイトに対して最終的なチェックをすることを重要と捉えている制作会社が少ないように感じます。また、制作方法の書籍など詳細には明記していないと思います。
テキストの誤字脱字、HTMLの記述エラーなどクライアントにとっての信頼にも関わりますので、把握すべき項目をまとめてみました。

原稿と同じかを確認します

• ページタイトル
• メタ情報
• テキスト
• 図版
• リンク

マークアップに問題はないかを確認します

• 文章構造
• 代替テキスト

ブラウザ表示で問題はないかを確認します

• ブラウザ
• JavaScript

Webデザインの学習をしていた時に、デザイン、コーディングを学んでも作業最終項目のコーディングチェックは学べませんでした。学ぶ教材もありませんでした。
しかし、現場に出てみるとコーディングチェックが大事だということを思い知らされましたが、チェックする項目など体系化してはいませんでした。最初は原稿通りになっているか否かを確認するだけでしたね。

なので、Webデザインを学んでいる方にこのようなまとまった記事があったらいいなと思うものが出来たので、是非参考にして貰えれば嬉しいです。

「Webサイト制作実践」カテゴリー内ページではお好きなページから読んでも問題ありませんが、ステップ順に読んでいただけるとより理解できるようになります。

• Step1：Webサイトが出来るまでの制作の流れ【現場レベルでお伝えするよ】
• Step2：Webサイト制作でヒアリングシートを活用すべき理由とヒアリング項目【ヒアリングシート付き】
• Step3：Web制作で失敗しないために必要な制作仕様書の作り方【テンプレートあり】
• Step4：Webサイト制作に必要なペルソナシートの作り方と例題を解説【ペルソナシート付き】
• Step5：ユーザーシナリオを活用してサイトコンテンツを作る【テンプレートあり】
• Step6：Webサイトリニューアルの提案書の作成方法を解説します
• Step7：Webサイトリニューアルのためコンテンツマップの作り方と使い方
• Step8：Webサイトリニューアルに必要不可欠なディレクトリマップの書き方を解説【テンプレートあり】
• Step9：戦略的なWebサイト制作するためのワイヤーフレームの作成方法
• Step10：Webデザイナーの必須スキル！Photoshopで学ぶデザインカンプ制作の方法
• Step11：WebサイトのHTML/CSSコーディングの手順を解説
• Step12：Webサイトをコーディングしたら必ずチェックする項目と確認方法←今ココ