テキスト構造をHTMLで表記

HTMLとはコンテンツの構造をブラウザに伝える役割があります。
どこがタイトルでどこが文章を表しているのかをブラウザが理解できるようします。
これらの構造の正しさは、SEO対策にも影響します。

画像などの素材をHTMLに埋め込む

テキストで表現できない画像や動画などを上で作成したテキストの構造に埋め込みます。
現在は画像の内容まではブラウザが理解できないことから、代替テキスト（alt)というものを設定し、どの様な画像が掲載されているのかをブラウザに伝える必要があります。

装飾を施す

HTMLは構造を表す言語のため、現在ではCSS（カスケードスタイルシート）と呼ばれる装飾だけを施す言語のようなもので、ブラウザでの装飾を実装します。
※スタイルシートだけでは実現できない表現は画像素材として反映する場合があります。

動作やアニメーションを実装する

デザインでは表現されていない動きの部分を実装します。
ここでの動作は、装飾で利用したCSSやJavaScriptという言語でコーディングを行うことになります。
JavaScriptとはWebブラウザ上で動作するプログラミング言語であり、アニメーションを実行するだけでなく、様々なシステムで活躍する言語です。

見た目がデザインとあっているか？

デザインデータと画面上のWebサイトを照らし合わせて差異がないことを確認します。
確認する項目は主に以下の3つになります。

フォント

使用されているフォントやサイズがデザインと同じか確認しましょう。欧文と和文でフォントが分かれている場合もあるのでコンテンツごとにしっかり確認する必要があります。また、テキストに誤字や脱字がないかも一緒に確認しましょう。

カラー

Webサイトの色情報は主に６桁のカラーコードで表現されています。
デザインデータのカラーを抽出してWebサイト上のフォントカラーや背景色などと照らし合わせながら確認しましょう。

構成・配置

コンテンツの配置やコンテンツ同士の距離がデザイン通りかを確認しましょう。
レスポンシブ対応のサイトの場合は端末ごとの表示にもデザインデータと差異がないかピクセル単位で確認する必要があります。

対象ブラウザで閲覧した際に崩れがないか？

Webサイトを表示するブラウザはGoogle ChromeやSafariなど複数あります。
Webサイトを閲覧するターゲットが使用するブラウザを想定しながらどのブラウザでもエラーや崩れが生じないことを確認しましょう。

リンク先など動作部分に誤りがないか？

Webサイト内でリンクによるページ移動がある場合はリンク情報や動作に誤りがないかをチェックする必要があります。アニメーションなどのページ移動をする際の挙動も指示通りの内容になっているか確認しましょう。

SEO対策関連のチェック

SEO対策と聞くとコンテンツの設定や内容が重視されがちですが、コーディングの書き方によってのWebサイトの最適化も重要になります。コーディングによるSEO対策がしっかりされているか確認しましょう。

タグの構造に誤りはないか？

HTMLでのコーディングでは、主にh1〜h4の見出しタグを使用します。h1が一番大きな大見出しとなりh4が小見出しとなります。そのためh1タグの次は必ずh2タグになっているなど構造的なコーディングがされているかを確認しましょう

メタ情報は適切に設定されているか？

HTMLのheadタグ内にはページタイトルや概要文などSEOに関わるメタ情報が多く入力されています。特にそのWebサイトのページタイトルを決めるタイトルタグはSEO対策に大きく関わるためしっかりチェックしましょう。

ユーザビリティチェック

デザインで見るのとブラウザで遷移しながら見るページは全く印象が異なります。デザインではよいと思っていたが使いずらい点や、読みづらい点がないかをチェックしましょう。