【初心者ガイド】Webサイト構築チェックシートを作成しよう！

Webサイト制作を行う際に、初心者であっても抜け漏れなくチェックできるようなチェックシートを作成することで、品質の高いWebサイトを構築できるようになります。この記事では、Web制作のプロフェッショナルとして、Webサイトの品質担保ができるチェックシートの各項目を紹介します。

プランニング・ディレクションのチェック項目

1. プロジェクト計画

1.1 目的共有

• プロジェクトの目的や目標を明確にし、全ての関係者と共有することで、判断基準がブレることを防ぎます。

1.2 工数設計

• プロジェクトの工数を見積もり、適切なスケジュールを立てることで、効率的なプロジェクト進行が可能になります。

1.3 プロジェクト進行

• アジャイル開発の考え方を取り入れ、タスクの可視化を行いながら作業に取り組みます。可能であればスプリント運用も検討しましょう。

1.4 必要資料の共有

• 資料不足による判断基準のブレを防ぐため、関係者が常に参照できる場所に資料を共有しましょう。

2. プロジェクトファシリテーション

2.1 MTG

• 定期的にミーティングを開催し、進捗報告や課題共有を行いましょう。

2.2 完了の定義

• タスクの完了基準を明確にし、将来的な負債を避けるようにしましょう。

2.3 情報共有

• プロジェクト進行に伴い増える資料は、随時まとめ、共有することでスムーズな進行が可能になります。

2.4 テキストコミュニケーション

• コミュニケーション方法を統一し、履歴の検索性を高めることで、情報伝達の効果を上げましょう。

3. 要件定義

3.1 開発スコープ

• やること・やらないことを明確にし、無駄のないスピーディーな開発を目指しましょう。

3.2 制作要件

• 作成段階で納品を考慮した開発を行うことで、スムーズな引き渡しが可能になります。

3.3 要件定義書

• クライアントへの説明が必要な場合や、開発を進める上での約束事を明記しましょう。開発要件、品質、パフォーマンスの定義も含めます。

3.4 ワイヤーフレーム

• デザイン前にどのような形になるか、どうするべきかを検討しましょう。場合によっては、ワイヤーフレームが原稿そのものになることもあります。

3.5 動作環境

• 動作環境を決めることで、使用可能な技術や対応範囲が明確になります。

4. 進行管理

4.1 タスク管理

• タスク管理はプロジェクト進行の要であり、効率的な進行を目指しましょう。

4.2 タスク粒度

• 大きすぎるタスクは範囲が曖昧になり、進捗が見えづらくなるため、適切な粒度でタスクを設定しましょう。

4.3 時間計測

• 計画と実働の差を分析することで、スキル面やスケジュール面の改善が可能になります。

4.4 バックログ

• 今後やるべきことも計画性が必要であり、スケジュールを組む上で考慮しましょう。

5. 開発環境

5.1 構築設計

• 設計のすり合わせは、不要な手戻りを防ぐために重要です。

5.2 開発環境の整備

• 各案件によって開発環境が異なるため、制作者が自由に行うのではなく、開発環境の共有を行い合意を取りましょう。

5.3 本番環境の有無

• 本番環境がどのようになるのかを必ず確認しましょう。

5.4 サイトマップの有無

• サイトマップがあるかどうかを確認し、詳細が明記されているサイトマップがあれば尚望ましいです。

5.5 バージョン管理

• バージョン管理を行い、プロジェクトの進行を円滑に進めましょう。

5.6 コーディングルールの定義

• チーム内での共通認識を持ち、個人差を埋めるためにコーディングルールを定義しましょう。

5.7 質問管理・課題管理・修正管理

• プロジェクトで発生する問題や課題、質問をストックし、適切に対応することで円滑な進行が可能になります。

5.8 http/https

• ドメインの影響を確認し、適切な設定を行いましょう。

5.9 外部サービスの利用

• APIやASPなどの外部サービスを利用する場合の対応を検討しましょう。

5.10 .htaccess

• サーバー側で特別な設定を行いたい場合は、.htaccessの確認が必要です。

5.11 JSライブラリの実装

• jQueryなどのJavaScriptライブラリを使用する場合の対応を検討しましょう。

5.12 JSの実装

• ページ固有のJavaScriptの実装が必要な場合の対応を検討しましょう。

5.13 フレームワークの採用

• Bootstrapなどのフレームワークを使用する場合の対応を検討しましょう。

6. 品質管理

6.1 テスト計画

• 作成するものの定義と同時に、テストも計画しましょう。これにより品質の高いWebサイトが構築できます。

デザインフェーズのチェック項目

1. デザイン実施前

1.1 設計の確認

• 設計からデザインデータ（psd、ai、png、sketchなど）の内容を確認できる状態にしましょう。

1.2 実装可否の確認

• 実装をする際、不可能なことはほとんどないが要素に応じて相談が必要な箇所が存在します。

1.3 各端末の挙動について

• リキッド、レスポンシブ対応などを確認しましょう。

1.4 デザイン・イラスト・画像・写真データの支給の有無

• 使用可能なデータの確認をしましょう。

1.5 デザイン・イラスト・画像・写真データの著作権、肖像権の確認

• 支給されるデータの著作権、肖像権に問題がないか、または制作側に不備がないか確認しましょう。

1.6 デザインガイドラインの有無

• デザインガイドラインが存在するか、または作成が必要か確認しましょう。

1.7 モジュール・コンポーネントの有無

• 共通のパーツを用いてデザインが構成されているか確認しましょう。

1.8 余白の指定

• 余白は機能であり、バラバラと都度設定、勝手に判断・変更しないようにしましょう。

1.9 エラー箇所と修正方法を明示

• ユーザーがエラーを認識し、どこをどのように修正すれば良いか設計されているか確認しましょう。

1.10 動画の取り扱い確認

• 動画がある場合、支給されるか、どのように取り扱うかを確認しましょう。

1.11 動画のキャプション（字幕）を提供するか

• 動画がある場合、音声を聞くことができなくてもコンテンツを理解できるか確認しましょう。

1.12 ホバー・アニメーションの有無

• 何らかのインタラクションが存在する場合は指示をもらうこと。

2. デザイン品質

2.1 全体のデザイン確認

• デザインを確認し、Webでの再現性があることを前提としましょう。

2.2 全体のサイズ確認

• デザインのサイズを確認し、指定のサイズ及び統一されていることを前提としましょう。

2.3 文字サイズ

• 各種文字サイズが実装可能か、改行をしても耐えられるデザインか確認しましょう。

2.4 余白

• 余白に矛盾がないか、CSSフレームワーク、グリッドシステムなどと矛盾がないか確認しましょう。

2.5 カラー

• 文字色、リンク色（デフォルト、ホバー、アクティブ、アウトライン）、背景色に不備がないか確認しましょう。文字色、背景色のコントラスト比に注意し、コントラスト比を 3:1 以上にすること。

2.6 情報を伝える色の使い方に注意する

• 色だけで情報を伝えようとしていないか（グラフなど、色のみで差別化している、など）確認しましょう。フォームなどのエラーで色のみで必須などを伝えようとしていないか。

2.7 要素の抜け漏れ

• 設計から要素の抜け漏れがないか確認しましょう。制作者側で要素を勝手に削らないこと。

2.8 繰り返し処理

• 繰り返し処理をするような箇所がないか確認しましょう。繰り返した場合に表示が崩れる可能性があるかなど。リスト、サムネイル表示、文章表示がこれに該当する。

2.9 クリック範囲

• デザインだけではどこがクリックできる箇所なのか、判断できない場合がある。明らかなボタンなどは良いが、画像にリンクを貼るのか、テキストはリンクなのか。リストのクリック範囲はどこなのか、などを確認しましょう。

2.10 CSS

• CSSで再現が可能な角丸、ボーダー、グラデーションなどは可能な限り実装することを確認し、背景画像、アイコン、透過が必要な画像などを区別をつけておくこと。

2.11 RWD (Responsive Web Design)

• 対応しない場合、もしくはRWDか、リキッドかの確認し、ブレイクポイントまで確認をしておくこと。

2.12 コンテンツの拡大縮小がされても問題がないか

• コンテンツが拡大されると表示が崩れるなど発生しないか確認が必要です。

2.13 画像の書き出し品質

• Webに適した形で書き出しができているか。画像の出し分けができているのか確認をすること。

RWDチェックポイント

3.1 画像比率

• 各デバイスで画像の比率があっているか。画像の出し分けをどのようにするのか確認しましょう。

3.2 背景画像の扱い

• 背景画像の出し分けが必要か、ある程度画像がはみ出ても問題ないレイアウトか確認しましょう。

3.3 情報設計の矛盾

• デザインを確認し、情報設計に矛盾がないか確認しましょう。HTML＋CSSのワンソース・マルチユースで成立しない場合はソースの二重表記が許容されるか確認すること。

3.4 PC、SPの要素出し分け

• PCのときだけ、SPのときだけなど、各デバイス限定で表示する要素の有無を確認しましょう。場合によってはアコーディオン、ハンバーガーメニュー、カルーセルなどの切り替えが必要です。

3.5 レイアウトの切り替えが3パターン程度耐えられるか

• PC、SPだけではなく、タブレット、または縦横比率が逆転した際など、最低でも3パターン程度の切り替えが考えられる。工数の問題で、2パターンが限界なことが多いためすり合わせが必要です。

3.6 固定サイズではなく、コンテンツ量が常に変動する前提のデザインか

• メニュー、リスト、テーブル、カラムなど、テキストの量や画像サイズが統一されない場合を考えられているか確認しましょう。

3.7 改行位置

• よくよく見るとPC、SPのデザインで改行位置が違うことがよくある。確認し、適切な改行位置が設定されているかチェックしましょう。

3.8 コンテキストの矛盾

• デバイス変更時、文章や状況に矛盾がないか確認しましょう。例えば、文中に「左側」と言いつつ、SP時には画像が上にある場合などです。

3.9 テーブルのレイアウトに無理がないか

• テーブルはレイアウトの変更に弱いため、SPからデザインした方が良いです。表の情報がクライアント支給の場合は紙媒体、セルのマージがされることを前提に考えることが重要です。

3.10 JSの動作確認

• PCで動作した後にSPサイズにすると表示が崩れることがよくある。逆もまた然り。デバイス間でのJavaScriptの動作確認をしっかり行いましょう。

コーディングフェーズのチェック項目

HTML開発

1. 文字コードと改行コードの設定
2. ファイル名と拡張子の決定
3. HTML規格とDOCTYPE宣言
4. ブレイクポイントの設定
5. ページタイトル、META Description、META Keywordsの指定
6. Viewportの指定
7. アクセス解析タグ、ソーシャルタグ関連の設定
8. ディレクトリ構成
9. 画像の代替テキスト
10. リンクの設定
11. フォームコントロールのマークアップ
12. 音声ブラウザ対応
13. バリデーションチェック

CSS開発

1. 命名規則
2. CSS格納ルール
3. CSSスプライトの使用可否
4. フォントサイズ、フォント指定、Webフォントの指定
5. 行間の指定
6. 調整用CSS
7. 名前空間を利用しない
8. 繰り返し現れるブロック要素の設定
9. sectionにスタイルを指定しない
10. アウトライン無効化の確認
11. ベンダープレフィックス
12. リセットCSS
13. プリントCSS
14. CSSハック

JS開発

1. jQueryやライブラリについての確認
2. ライブラリ、プラグインの使用可否
3. JSの記述位置
4. 共通のJSファイル
5. フォーカスについての確認
6. No Script対応
7. ウィンドウ幅切り替えによる誤動作の確認
8. 解析タグや計測ツールの動作確認

テストフェーズのチェック項目

これらの項目をチェックすることで、Webサイトの品質が向上します。また、SEO対策や保守管理の効率化にもつながり、長期的な運用においても効果が期待できます。業務に最適なチェックリストを遵守し、あらゆる品質を追求しましょう。