コーディング(マークアップ)を確認する際のポイント

最終更新日 2020/10/16
コーディング(マークアップ)を確認する際のポイント

サイトのデザインをブラウザで見られるようにするコーディング。公開前に必ずコーディングチェックを行いますが、Web制作を行ったことがない方にはなじみのない工程だと思います。 近年では、ただブラウザでWebページが見れるようにするだけでなく、パソコンや、スマートフォンといった様々な端末で閲覧ができるようにするレスポンシブ対応や、動きを付けた情緒的なサイトなど、コーディングの業務とそのチェックポイントは複雑さを増しています。 今回は、その複雑なコーディング作業を効率よくチェックするポイントをご紹介します。

コーディング(マークアップ)を確認する際のポイント

コーディング(マークアップ)とは?

コーディングとはコード(プログラミングコード)を書くことを意味しており、デザインしたカンプデータ(画像データ)をWebブラウザで閲覧できる形式にコードを書いて変換する作業のことをコーディングといいます。
このWebブラウザで閲覧できるようにする言語をHTML(ハイパーテキストマークアップランゲージ)ということからマークアップと表現する場合もあります。

コーディング作業の実務

コーディング作業の結果、Webブラウザで閲覧できることは理解ができたと思います。次は、実際にどの様な作業なのかを説明します。
実際に作業ができなくても、作業内容を理解しているだけで、適切な指示ができます。
大まかで結構なので理解を進めましょう。

テキスト構造をHTMLで表記

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

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

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


装飾を施す

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


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

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

テストアップ時のチェックポイント

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

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

フォント

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

カラー

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

構成・配置

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

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

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

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

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

SEO対策関連のチェック

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

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

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

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

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

ユーザビリティチェック

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

コーディングチェックシートの紹介

コーディングを行う前に対象ブラウザなどを設定し、チェック項目をいれた表を用意することで、エンジニアはそのチェックシートを見ながらセルフチェックを行うことができます。また、最終チェックの効率も上がり制作時間の短縮にもつながります。

まとめ

ユーザーが閲覧するWebサイトと同じ形にするコーディング。作業内容を理解してチェックを行うことでクオリティがぐっと上がります。また、見た目だけでなく構造のチェックも併せて行うことで検索で閲覧されやすくなり流入増加の効果も見込めるため、SEO対策のチェックも必須です。

<関連ページ>
Webサイト制作の流れと進め方~企画立案から公開までの5ステップhttps://goodproductionsjp.com/posts/website-guide/how-to-create/

おすすめの記事