Webサイト制作において、要件定義は非常に重要です。この記事では、Web制作のプロフェッショナルとして、技術要件定義やディレクトリ構成、リンク設定定義など、Webサイト制作に必要な基本要素を解説します。初心者にも理解できるように専門用語の説明も交えながら解説していきます。
技術要件定義
Webサイト制作における開発技術要件の基本要素を以下のように規定します。
- HTML規格: HTML5
- 文字コード/言語: UTF-8/日本語（ja）
- 改行コード: CR+LF
- 文字コード指定方法:
<meta charset="UTF-8"> - HTML拡張子:
.html※htmは使用しない。 - DOCTYPE宣言:
<!DOCTYPE html> - フォント形式: Windows、Macなど各種デバイスに存在するフォントを使用する。
- 文字規格: 半角カタカナ、機種依存文字は使用しない。
- インデント: インデントは半角スペース2個を1インデントとして挿入する
- 画像形式: 写真（jpg/png）イラスト（gif/png）アイコン（gif/png/svg）
ディレクトリ構成
Webサイトにおけるディレクトリ構成を以下のように規定します。
| 種別 | ディレクトリ名称 | 格納例 |
|---|---|---|
| CSS | ドメイン/assets/css/ファイル | /assets/css/common.css |
| JavaScript | ドメイン/assets/js/ファイル | /assets/js/common.js |
| 画像 | ドメイン/assets/images/ファイル | /assets/images/photo.jpg |
| 共通読込 | ドメイン/assets/inc/ファイル | /assets/inc/header.inc |
各ページ（カテゴリ）に使用するファイルのディレクトリ構成を以下のように規定する
| 種別 | ディレクトリ名称 | 格納例 |
|---|---|---|
| CSS | ドメイン/各ページ名（カテゴリ）/assets/css/ファイル | /category/assets/css/common.css |
| JavaScript | ドメイン/各ページ名（カテゴリ）/assets/js/ファイル | /category/assets/js/common.js |
| 画像 | ドメイン/各ページ名（カテゴリ）/assets/images/ファイル | /category/assets/images/photo.jpg |
| 共通読込 | インクルードファイルは可能な限り使用しない | /category/assets/inc/header.inc |
リンク設定定義
リンクの設定について定義します。
| 種別 | 記述方法 | 設定例 |
|---|---|---|
| 同ドメインへのリンク | ルートパスで記述 | <a href="/category/page01.html"> |
| http ↔ httpsへのリンク | 絶対パスで記述（フォームのみSSL化してる等） | <a href="https://ドメイン/category/page01.html"> |
| 外部サイトへのリンク | 絶対パスで記述 | <a href="https://ドメイン/" target="_blank" rel="noopener noreferrer"> |
| indexファイルへのリンク | ルートパスで記述（※ファイル名は不要） | <a href="/"> |
CSS/JavaScript技術要件定義
CSSにおける基本要素を以下のように規定します。
- CSS規格: CSS3
- 文字コード/言語: UTF-8/日本語（ja）
- 改行コード: CR+LF
- インデント: インデントは半角スペース2個を1インデントとして挿入する
JavaScriptにおける基本要素を以下のように規定します。
- JavaScriptバージョン: ECMAScript(ES6)
- 使用ライブラリ/jQueryバージョン: jQuery3.6
- 文字コード/言語: UTF-8/日本語（ja）
- 改行コード: CR+LF
- インデント: インデントは半角スペース2個を1インデントとして挿入する
印刷対応
印刷機能はブラウザの標準機能を使用し、推奨されているブラウザ以外での印刷対応はしないものとします。
- 印刷用に特別な対応はしないものとする。
- 個々の環境による差異は許容とする。
- 微小な行間やユーザーが情報取得する様種にならない程度の誤差は許容とする。
- ユーザー個別の設定「背景色の指定」「背景画像の表示」の切り替えによる差異は許容とする。
推奨環境／検証環境について
以下の端末、ブラウザ、OSを検証対象／推奨環境として定義します。
推奨環境基本方針
- サポート期間が終了したブラウザは非推奨環境とする
- 最新版のブラウザを推奨環境とする
- サポート期間内のブラウザバージョンは検証環境として対応する
検証環境／推奨環境
| デバイス | OS | ブラウザ |
|---|---|---|
| PC | Windows | Google Chrome (最新版) |
| PC | Windows | Mozilla Firefox (最新版) |
| PC | Windows | Microsoft Edge (最新版) |
| PC | macOS | Google Chrome (最新版) |
| PC | macOS | Mozilla Firefox (最新版) |
| PC | macOS | Safari (最新版) |
| モバイル | iOS | Safari (最新版) |
| モバイル | Android | Google Chrome (最新版) |
レスポンシブデザイン対応
本プロジェクトではレスポンシブデザインを採用し、複数のデバイスで適切なデザインが表示されるようにします。具体的なブレークポイントは以下の通りです。
- モバイル: 〜767px
- タブレット: 768px～1023px
- PC: 1024px～
画像フォーマットについて
画像フォーマットには、以下のフォーマットを使用します。
- JPEG: 写真やグラデーションが多い画像
- PNG: ロゴやアイコン、背景透過が必要な画像
- SVG: ベクター画像（ロゴやアイコン）
フォントについて
以下のフォントを使用します。
- 本文用フォント: Noto Sans JP
- タイトル用フォント: Noto Serif JP
上記のフォントはGoogle Fontsから読み込みます。
アクセシビリティについて
本プロジェクトでは、以下のアクセシビリティ対応を行います。
- W3C Web Content Accessibility Guidelines (WCAG) 2.1 Level Aの基準に準拠する
- キーボード操作によるアクセスを可能とする
- セマンティックなHTML構造を用いる
- 画像に適切なaltテキストを設定する
- リンクやボタンに明確なテキストを設定する
以上が、ウェブサイトの基本的な技術要件定義です。これらの要件を満たすことで、機能的かつアクセシブルなウェブサイトを構築することが可能になります。
