Skip to content

要件定義

ma-san
ma-san(鈴木正行)

Webサイト構築の要件定義を纏めています。ma-san web designが提供するデフォルトの要件定義になります。

Webサイトを構築する上で要件定義を作成する場合、基本項目として纏めている項目を紹介します。

HTML技術要件定義#

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バージョン jQuary3.6
文字コード/言語 UTF-8/日本語(ja)
改行コード CR+LF
インデント インデントは半角スペース2個を1インデントとして挿入する

印刷対応#

印刷機能はブラウザの標準機能を使用し、推奨されているブラウザ以外での印刷対応はしないものとする。

  • 印刷用に特別な対応はしないものとする。
  • 個々の環境による差異は許容とする。
  • 微小な行間やユーザーが情報取得する様種にならない程度の誤差は許容とする。
  • ユーザー個別の設定「背景色の指定」「背景画像の表示」の切り替えによる差異は許容とする。

推奨環境/検証環境について#

以下の端末、ブラウザ、OSを検証対象/推奨環境として定義する。

推奨環境基本方針
  • サポート期間が終了したブラウザは非推奨環境とする
  • 最新版の定義は本資料の定義した2022年XX月時点のものと定義し、以降に大きなバージョンアップがある前提としない
  • サポート期間の明示がないものは、セキュリティの観点から最新OSメジャーバージョンを対象とし、最新のシェア状況を鑑みて推奨環境を決定する
  • スマートフォンサイズの検証はPCブラウザでのエミュレーター機能を使用し、実機検証は最低限とする。
Windows
Chrome最新版 実機重点環境
Firefox最新版 実機
IE11以下 非推奨環境
Edge 実機準重点環境
Mac
Safari最新版 実機重点環境
Chrome最新版 実機
Firefox最新版 実機
iOS(iPhone)
Chrome最新版 エミュレーター
Safari最新版 実機
Android
Chrome最新版 エミュレーター

品質担保について#

各環境による表示の担保については下記の方針とする。

  • 必要最低限な情報が表示されている。
  • テキストまたは画像が表示されない、クリック(タップ)または遷移できない、レイアウトが大きく崩れるものをエラーとする。
  • マージン(余白)、リストスタイル、フォントサイズ、リンクの下線などについてはデバイスのデフォルトブラウザによって表示が異なるものについては許容とする。
  • Webアクセシビリティを損なう実装がされていないか確認(キーボードトラップなど)。
  • 操作性に影響がある表示の差異については、ベストエフォートで対応するものとする。
  • 太文字については環境によって表現の可否が発生するため、各環境に準拠する。

その他 制作上のルール#

お世話になっている地域、住んできた地域を中心に貢献。

  • iframe要素は使用しない。SNSなどのモジュール利用、GoogleMapなど外部サービスを利用する場合は許容する。
  • Flashは使用しない。
  • Style属性を使用してHTMLソースに直接スタイルの記述は行わない。
  • 例外として、他サイトの引用やWebサービスの引用は許容する。
  • 不要なJavaScriptの記述は行わない。各種プラグインに伴う記述は許容する。
  • XHTMLによる記述は禁止とする(例:
    など)
  • W3C非推奨のタグ属性、及び定めたマークアップ言語の規格外タグは使用禁止とする。
  • 英数字は半角を使用し、全角は使用しない。(例:123,abc NG例:123,abc)
  • 要素名及び属性名はすべて小文字で記述する。
    例)要素:div,p,input,img / 属性:id,class,type,src
  • 終了タグは省略しない。
    例)</p>,</div>,</tr>,</li>,</option>
  • CSSでの再現が困難な場合を除き、必要性のない(レイアウトの実現を目的とした)tableコーディング及びdivを重ねたコーディングは行わない。

お仕事・当サイトへ興味を持っていただいた方

お問い合わせはこちらから

お問い合わせを頂く際はご確認ください

プライバシーポリシー

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san web design」の管理者。東京都・千葉県(千葉市・四街道市・浦安市・佐倉市)・宮城県(仙台市)を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

るり
気軽にご相談ください。
千葉県四街道市を中心に、Webサイト制作を通じてサポートいたします。
Accessible Web Design.

Recommendation

るり

Webアクセシビリティの重要性について 当サイトが最も注力したい「Webアクセシビリティ」について、ぜひ多様な方々と共に学びながら充実化させ、普及活動に勤しみたいと考えています。

るり

初めて依頼を検討している方 初めてWebサイト制作を依頼する方へ。Webサイトを作りたいと思ったときに参考にしていただけると幸いです。

るり

Webサイトの基本 サーバーの準備からドメイン契約。Webサイトに必要なデータや情報を一通り纏めることで初めてWebサイト制作に携わる方々の学習の一助になれば幸いです。