2023年版 ウェブサイト制作のコーディングで納品前にセルフチェック

ウェブサイト制作のコーディングするにあたり正確なコーディングが出来いるか、制作担当者は不安に思うことはないでしょうか？
納品直前に不具合が見つかったりすると時間のロスもありますが、精神的にもしんどい思いをすると思います。
特にWordPressなどCMSを利用する場合、お客様がページを更新することもあり、制作者の想定外の入力をされる場合もあります。
例えば、想定外の画像サイズ、テキストの文字数など、そのような場合でも表示が崩れが無いようにする必要があります。
特に弊社の場合格安ホームページサービス提供しているので、お客様が更新することも多いので特に注意深く行う必要があります。
そのため、不具合を無くす為に納品前のチェックが大事になってきます。
具体的にどこをチェックしていけばいいのかチェックシート作成することで大きなトラブルは防ぐ事ができます。
一部ですがチェック項目をご紹介します。

チェック内容

リンク切れのチェック

ページ内リンク、外部リンク、メインスライド画像のリンク設定、アンカーリンクが意図した通りリンクしているか各ページをチェックします。
ヘッダーやフッター等の各ページ共通部分は1ページのみのチェックをします。

strong、em、引用、リスト、ハイライト、打消し線、上付き、下付きのタグの設定

コーディングをする時、ブラウザごとの差異を無くため、ブラウザがデフォルトで持っているCSSをリセットをおこないます。
リセットを行うと、テキストのイタリックやstrongなど太文字などが効かなくなるので必要に応じて再設定が必要になります。

ブログ記事（投稿ページ）の.aligncenter　.alignright　.alignleftの設定

ブログの投稿はお客様が特に行う作業になります。
画像を挿入する場合、画像を左寄せ、中央、右寄せを選択される場合があります。
その場合テキストの回り込みなどの設定が必要になります。

スマホ表示時のページ崩れをチェック

最近のサイトはレスポンシブウェブデザインが基本となります。
PCブラウザのチェックだけでなくスマートフォンやタブレットでの表示チェックが必要がなります。

スマホ表示時の電話番号リンクチェック

スマホ表示になった場合は電話番号には、電話が出来るようにリンクを設定する必要があります。
また、iPhone、Androidなど場合、電話番号にリンクを設定していなくても自動で作成する機能がありその場合、意図しないaタグが入る為、aタグの文字色やアンダーラインなどのチェックが必要です。

その他チェック項目

• メイン、フッターナビゲーションはWPデフォルトのcss名で作成
• メインのテキストカラーは、WPの追加スタイルで変更
• 背景色は、WPの追加スタイルで変更
• 基本の余白はbottomで設定
• 3段カラムなど表示数が減った時の処理
• h1が画像、テキストの場合の処理
• 左右画像のボックス設定
• 左右画像のボックス画像が小さい時の処理
• 左右画像のボックス画像が無い時のテキストの横幅を100%にする処理
• テキスト量が少ない時の処理
• テキスト量が多い時の処理
• ブログ記事h2からh6の設定
• ブログ記事挿入画像の　.aligncenter　.alignright　.alignleftの設定
• ブログ記事の内と固定ページのリンクのアンダーライン設定
• ブログ記事と固定ページの内のテーブル設定
• ブログ記事と固定ページのstrong、em、引用、リスト、ハイライト、打消し線、上付き、下付きの設定
• お問い合わせの設定
• スマホ表示時のヘッダーロゴとバーガーメニューのチェック
• 404ページの作成

まとめ

一部ですがチェック内容をご紹介致しました。
実際チェック作業をやっている色々と気づく点が出てくると思います。
その都度必要なチェック項目を追加することで精度の高いコーディングが完成することが出来ます。

おすすめ記事

ホームページ制作でも取り入れたいトピッククラスタのまとめ

ホームページ制作で成功するための重要な7つポイント