ユーザーがwebサイトを利用したときに感じるストレスや、操作にかかる時間や手間を最小限に抑えながら、webサイト制作者（運営者）の目的を果たすために、構造、レイアウト、デザイン、機能の設計を行う。

ユーザビリティ定義

• 「有効さ」
• 「効率」
• 「満足度」

ウェブコンテンツJIS(JIS X 8341-3)の達成等級「A」に準拠することを目指し、webサイトの障がい者・高齢者対応の基準を本書に定め、他の事情に優先してその実現を図る。

アクセシビリティの定義

• 「知覚可能」どんなコンテンツがあるか、だれでも分かるようにする
• 「操作可能」だれでも必要な時にコンテンツを操作できるようにする
• 「理解可能」だれでもコンテンツの内容を理解できるようにする
• 「堅牢性」幅広いデバイス・ブラウザで利用できるようにする

ディスプレイ

基準は以下とするが、制作時点での日本国内シェアを考慮し、状況に応じて対応する。
PCでのディスプレイは1280×800pxを最小対象とし、コンテンツ幅は900～1080pxを基本とする。
スマートフォンについては、画面解像度320×480pxを最小対象とし、原則Retinaディスプレイに対応する。

対象ブラウザ

基本は以下の主要ブラウザの最新版について対応し、制作時点での日本国内ブラウザシェアを考慮する。
参考URL：http://gs.statcounter.com/
Chrome、Firefox、Edge、Safari、IE11～
※IEについてはクライアントと相談の上で対応するバージョンを決定する。

スマートフォン対応

PCとスマートフォンでの表示を、HTMLの構造は変更せずCSSのメディアクエリで行うレスポンシブでの対応とし、リサイズに耐えられるレイアウトとする。

• css/ — css格納フォルダ(パフォーマンス上、CSSのインポートは基本的には行わない)
  • ress.css — CSSリセット＆デフォルトCSS
  • common.css — 全ページ共通パーツのデフォルトスタイルを管理
  • style.css — PC用スタイルシート(ウィンドウ幅[1024px～]の場合に適用)
  • tablet.css — タブレット端末用スタイルシート(ウィンドウ幅[641～1023px]の場合に適用)
  • phone.css — スマートフォン用スタイルシート(ウィンドウ幅[0～640px]の場合に適用)
• images/ — 画像格納フォルダ
  • common — 全ページ共通で使用する画像格納フォルダ
  • index — トップページ(index.php)で使用する画像格納フォルダ
  • xxx — 各ページごとに使用する画像格納フォルダ
• include/ — 全ページ共通パーツのインクルードphpフォルダ
  • config.php — php設定ファイル
  • ga.php — GoogleAnalyticsタグファイル
  • header.php — 共通ヘッダーソースファイル
  • nav.php — 共通ナビゲーションソースファイル
  • sidebar.php — 共通サイドバーソースファイル
  • footer.php — 共通フッタソースファイル
• js/ — JavaScriptファイル格納フォルダ
  • common.js — 共通JS(JQuery)ファイル
  • xxx.js — 必要に応じてjsファイルを入れる
• index.php トップページファイル
• xxx.php 各ページファイル(状況に応じてフォルダ分けも行う)

基本ルール

ディレクトリ、ファイルともに下記の基本ルールに則って付ける。

• 区切り文字はアンダースコア(_)を使用する。
• 大文字は使用せず、すべて小文字で付ける。
• できるかぎり、英訳されたもので命名する。
• 第三者が見てもわかりやすい命名とする。

ディレクトリ

各ページで使用するものについては、ディレクトリ名を見てどこのページのものかが判断できるように付ける。
[例]会社概要ページ(company.php)・・・company/

ファイル

phpファイルに関しては、各ページがどのような内容なのかが判断できるように付ける。
[例]お問い合わせページ・・・contact.php

画像

画像ファイルについては、下記のルールに則って付ける。
[部位]_[種類]_[詳細]_[連番]_[状態].[拡張子]

• [部位]

  どの部分で使用しているか

  • 新着情報で使用している > news_img.png
  • サイドバーで使用している > side_img.png

  部位のリスト

  新着情報	news
  お問い合わせ	contact
  ヘッダー	header
  サイドバー	side
  フッタ	footer
  次へ	next
  前へ	prev
  お知らせ	info
  リスト	lst

• [種類]

  どのような種類の画像なのか

  • 写真画像 > img.png
  • ヘッダーで使用しているロゴ画像 > header_logo.png

  種類のリスト

  画像、図、写真	img
  サムネイル	thumb
  バナー	bnr
  ボタン	btn
  ロゴ	logo
  ナビ	nav
  見出し	ttl
  テキスト	txt
  アイコン	ico
  背景	bg
  矢印	arrow
  線	bdr

• [詳細]

  [種類]に対して詳細な説明があれば入れる

  • 送信ボタン > btn_submit.png
  • 丸いアイコン > ico_circle.png

• [連番]

  同じ用途の画像が複数あった場合

• [状態]

  ロールオーバーやカレントなどの状態を表す必要がある場合

  • ロールオーバーするボタン画像 > btn_ov.png
  • レスポンシブの際、スマートフォンでのみ使用する画像 > img_main_sp.png

画像のサイズについて

レスポンシブ対応のコーディングの際、高解像度の画像をPCとスマホ両サイトで使いまわす場合、必ず、widthとheightを「偶数」サイズで保存する。

基本的にはメンテナンス性を考慮しデザインやコーディングを行う。
各ブロックのモジュール化を意識し、CSSの記述と合わせて別ページへ移動したり、要素が変更されたりしても(ulをolへ等)、レイアウトが崩れないようにする。

マークアップ言語仕様

HTMLマークアップの基本仕様を以下の通りに定義する。

HTML規格	HTML5
XML宣言	なし
DOCTYPE宣言	＜!DOCTYPE html＞
HTML要素　名前空間	＜html lang=”ja”＞
文字コード	UTF-8
改行コード	CR+LF
拡張子	php(includeによるテンプレート仕様のため)
CSS	CSS3

文書内容に適したマークアップを行う。
W3Cによるマークアップ検証サービス

パスの記述について

サイト内リンク、画像へのパス等、指定がない場合は原則「相対パス」とする。
CMS等の都合上「ルート相対パス」で記述する場合は担当者と相談の上で決定する。

id属性、class属性

• id属性とclass属性の使い分けについて、以下の基本ルールに則って使用する。
  

  id属性	大枠のレイアウトを構成する要素(ヘッダー、ナビゲーション、コンテンツ、サイドバー、フッタ等)
  class属性	id属性の中に入る子要素

• id属性、class属性の名前は、命名後にも流用可能な名前にする。(redやleftなど、デザインを表してしまっている名前は付けない)
  [例]
  あるコンテンツの一部テキストについて赤字にするために.box_redを指定。しかし、クライアントから色を変える指示があったため、赤字ではなくなったのに.box_redはそのままとなってしまった。

• デザイン上、1つの要素では再現できない場合は[inner]を利用する。(背景が2つ重なる等)
  ※before,after等の議事要素で再現できるものはそれで再現する。無意味に不要な要素を増やさないこと。

• 「構造の意味の判断がつかないもの」「構造の意味がないもの」に関しては汎用的なid、classを付ける。
• 推奨するid・class名
  

  ページ全体	main,container
  コンテンツ	contents
  ヘッダー	header
  タイトル	ttl
  ロゴ	logo
  キャッチコピー	catch,slogan
  ナビゲーション	nav
  ぱんくず	breadcrumb
  サイドバー	side,sidebar
  フッタ	footer
  記事	article
  セクション	sec,section
  入れ子構造の内側	inner
  案内	guide
  話題、トピックス	topics
  新着	news
  次へ	next
  前へ	prev
  ページトップ	pagetop
  続きを見る	more
  お知らせ	info
  日付	data
  リスト	lst
  アイテム	itm
  バナー	bnr
  ボタン	btn
  お問い合わせ	contact

書式に関するルール

原則以下の通りの書式で統一する。

• インデントによる階層表示は行わず、左詰めとする。
• スペーサーや＜br /＞は極力使用せず、CSSで間隔や余白を設定する。
• コメントは可能な限りソース内に分かりやすく記述する。
• ￥マークは全角で統一する。
• 英数字は半角で統一する。
• ＜img src=”” /＞タグについて、width、height、altの指定を行う。
• 静的サイト制作の場合、header、footer、nav、side等、各ページ共通で使用するパーツはphpのincludeで呼び出すものとする。
• 静的サイト制作時は、当社指定のHTML5テンプレートを使用し制作する。

表記のゆれについて

表記のゆれがないよう、以下の文言について統一する。

• お問い合わせ
• メールアドレス
• 英数字は原則半角、URLや数値、英単語を全角にしない
• 文章内のスペースは全角

その他の表現について

• 文字色と背景色のコントラストについて、読みやすいように配慮しコントラストの比率を決定する
• リンクテキストは、リンクしていないテキストと識別しやすくする。
• リンク画像は視認性を考慮し作成し、クリックできると判断できるデザインにする。

プラグイン・その他技術について

必要に応じて、CMSやJavaScript、JQuery等の利用も可能とする。
CMSの選定は、クライアントからの指定がない限り、制作時点で最適なものを選択する。

CMS

CMSの選定は慎重に行う。
基本はwordpressで構築するが、クライアントからの指定があればEC-CUBEやMovableTypeでも構築する。
プラグイン使用については特に限定はしないが、メンテナンスが継続されていることやバージョンアップが随時行われているなど、脆弱性や不具合への対応が適切に行われていることを重視して選択する。
プラグインのバージョンアップがないために、wordpress本体のバージョンアップができないといったようなことがないようにする。
wordpressについては下記のものを推奨する。

Duplicate Post	記事の複製ができるようになる。
Contact Form 7	お問い合わせフォーム設置

フォーム

• CMSを使用しないサイトの場合、株式会社テイクフォー規定のメールフォームテンプレートを使用する。
• WordPress使用時は、「Contact Form 7」プラグインを使用する。

その他、状況に応じて最適と思われるものを使用すること。

音声・動画

特に指定がない限り、YouTube等の動画アップロードサイトからのリンクで対応すること。