WEBサイト制作ガイドライン

はじめに

本ガイドラインの目的と位置づけ
株式会社テイクフォー(以下「当社」)で制作した際の対応範囲に関してわかりやすく表記し、webサイト制作全般においての品質保持を目的とし、以後の品質管理を行いやすくするために定めたものである。
本ガイドラインの適用範囲
当社で制作したすべての制作物において適用範囲とする。
本ガイドラインについての問い合わせ先
株式会社テイクフォー
田邊 剛
TEL:06-7650-3335

対応原則

ユーザビリティ対応原則

ユーザーが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等の動画アップロードサイトからのリンクで対応すること。

最近の記事

  1. HTMLコーディング

    cssでグラデーションを描いてみよう
  2. WEBデザイン

    Photoshopでオシャレなネオンサインのような文字を作る方法
  3. WEBデザイン

    投稿記事を複製しよう!Duplicate Postの使い方
  4. WEBデザイン

    【illustrator】簡単トレース方法
  5. Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法

    WEBデザイン

    Photoshopで部分的にカラーにしたモノクロ画像を手軽に作る方法
PAGE TOP