株式会社ウィッシュポケット Web制作規定
ホームページ制作における、当社のガイドライン・規定をまとめました。
尚、下記の内容はこちらよりドキュメントとしてダウンロードできます。
はじめに
ホームページ・Web制作に携わる制作者が増え、各制作者が、それぞれ独自のルール・見解でWeb制作を行っています。
例えばWebサイトのリニューアル時、他の業者が制作したデータを引き継ぐような場合があり、その際、以前のサイト設計やデータ構造の関係から、作業効率が著しく損なわれることがあります。
また、発注者側が思っていた仕様と、制作者側が思っていた仕様に誤解が生じ、トラブルとなることも想定されます。
この基本ガイドライン（規定）は、発注者・制作者間での相互認識の差異をなくし、業務の効率化をはかり、一定品質の作業が行えるようサービス・製品の品質を一定に保つことを目的としています。
そのため、定期的に内容を見直し、より一層の業務効率、サービスの品質向上をめざします。
※以下規定はのサイト仕様に応じて柔軟に対応させ、必ずしも守るべき規則ではないことを前提とします。
2011年6月1日策定
株式会社ウィッシュポケット
1. 制作基本ガイドライン
1.1. 閲覧環境
1.1.1. 出力メディア
PCスクリーンを対象とする。携帯電話などのメディアに関しては都度別途。
印刷対応にする場合は別途印刷用のCSSを用意する。
1.1.2. ディスプレイ
1024×768pxのディスプレイを最小対象とする。
コンテンツ幅は800～1000pxを基本とする。
閲覧環境のトレンドに合わせ、Yahoo!Japanを参照（ブラウザにより若干差異有）とし、
横サイズは900 ～1000px、縦500pxまでに重要コンテンツを収めることを推奨する。
1.1.3. 対象ブラウザ
制作時点での日本国内ブラウザシェアを考慮するものとする。[参照元 StatCounter]
※97%以上のシェアを基準とする
【Windows】
InternetExplorer6.0（以下、IE6）以上、FireFoxs最新版（4.0）、GoogleChrome最新版(11.0)
【Macintosh】
Safari最新版（5.0）、FireFoxs最新版（4.0）、GoogleChrome最新版(11.0)
尚、確認を行うブラウザは初期設定で行うものとする。
1.2. 基本コーディングルール
1.2.1. 文字コード
原則 UTF-8とする。CSSやJavascriptもHTMLに準拠する。
［理由］CMS等スクリプト要件にあわせるため。案件に応じShift-JISやEUC-JPに。
1.2.2. 改行とインデント
原則 CR+LF（Windows）とする。
インデントは『tab』を使用し、全角・半角スペースは使用しない。
ソースの改行は見易さ管理のため適宜行う。※場合による
2. (X)HTMLガイドライン
2.1. 基本ガイドライン
2.1.1. DOCTYPE(文書型)
原則 XHTML1.0 transitional を採用
［理由］「a要素でのtarget属性を使用」、「font要素の使用」、「iframe」が｛strict｝では認められていないため。
2.1.2. XML宣言に関して
XML宣言はつけない。
［理由］IE6.0とOpera7.0を後方互換モードに変えてしまうため。
2.1.3. マークアップ全般
文書内容に適したマークアップを行う。
W3Cが勧告するXHTML1.0の仕様書に準拠したマークアップを行う。
W3Cによるマークアップ検証サービス
「Markup validator」→ http://validator.w3.org/ をパス（クリア）すること。
2.1.4. id属性、class属性に関して
全頁に共通して記述されるものには『id属性』 それ以外は原則『class属性』を使う。
id属性とclass属性は同一の要素に関して設定可能であることを考慮する
class属性は同一の要素内に複数設定可能であることを考慮する。
2.2. 書式に関するルール
原則以下のとおりの書式で統一するが案件や場合により適宜対応する。
- インデントによる階層表示は行わず、左詰めとする。
- スペーサーやは極力使用せずCSSで間隔余白を設定する。
- コメントは可能な限りソース内に分かりやすく記述する。適宜幅なども記載する。
2.3. ＜head要素内＞に関する共通ルール
2.3.1. ＜meta http-equiv=” ”＞ title要素の前に記述。
『Content-Type』『Content-Language』『Content-Style-Type』『Content-Script-Type』
2.3.2. ＜title＞タグ （ページのタイトル）
SEOを意識して各ページ以下のように記述する。※全角25字以内が理想。
【トップページ】 提供する主要サービスワード｜法人（サイト）名｜地域など
【第二階層】 製品情報｜提供する主要サービスワード｜法人（サイト）名｜地域など
【第三階層】 製品情報｜製品名｜提供する主要サービスワード｜法人（サイト）名｜地域など
2.3.3. ＜meta name=”description”＞ (ページの概要文)
SEOを意識した、ページの内容に即した簡単な説明文。
全角100字目安。2～3のキーワードを1回以上含むようにする。
また、各ページごと則した説明文に。（全ページ共通にしない）
2.3.4. ＜meta name=”keyword”＞ (ページのキーワード)
SSEOを意識した、ページの内容に即したキーワード。2～7個を『,』区切りで。
また、各ページごと則したキーワードに。（全ページ共通にしない）
2.3.5. link要素やscript要素
＜head＞要素内の一番最後に記述する。
2.4. ＜body要素内＞に関する共通ルール/主なタグ
2.4.1. ＜body＞要素
最も大きくコンテンツを内包する要素であるため、bodyにidやclassを振って、ページ毎にスタイルを切り替える。この手法を『CSSシグネイチャ』という。
このため初期テンプレートの段階で下記のように記述し、任意の属性名を割当てることにする。
<body class"DIRNAME" id="PAGENAME">
複数のページで共通のレイアウトやスタイルを指定したい場合に便利。
2.4.2. <h●>要素 （見出し）<h1> <h2> <h3> <h4> <h5> <h6>
<h1>から順に出現させること。順番をとばし
<h1>はSEOの観点からページ最上部にリード文として出現させることを基本とする。
<h1>は場合によりサイトロゴに記述する。
各要素になるたけキーワードを盛り込むようにする。※画像の場合はalt属性に記述する。
2.4.3. <div>要素 ブロック要素を包括する要素（ブロックレベル要素）
レイアウト上もっとも重宝する要素であるが、多用を避け、入れ子構造などが煩雑にならないようにする。
divが多くなるとソースの概要が把握しづらくなるため適宜コメントや改行を挿入する。
2.4.4. <img>要素 画像（インライン要素）
必ずサイズ属性（width、heights）を指定する。
［理由］ページ読み込みを早くするため
必ず『alt属性』にて代替テキストを記述する。※意味の無い画像は『alt=””』にする。
2.4.5. <p>要素 段落（ブロックレベル要素）
主に本文に使用する。頻出タグなので『class属性』を使うなど子孫セレクタをうまく利用してレイアウトする。
<p>大きな<span style="font-size:12px; color:#666666">ノッポの古時計</span></p>
2.4.6. <table>要素 表組み（ブロックレベル要素）
汎用性が高いが、サイズおよび寄せ（align）が変動する場合が多いタグのため、CSSでの管理を考え、各々に『class属性』をつけるようにする。
2.4.7. <ul><ol>、<li>要素 リスト（ブロックレベル要素）
サイト内で共通するものに関しては各々に『id属性』をつけるが、場合により子孫セレクタとして上位の<div>の『id属性』で管理する。
汎用性が高いが、サイズおよび寄せ（align）が変動する場合が多いタグのため、CSSでの管理を考え、各々に『class属性』をつけるようにする。
2.4.8 .<a>要素 アンカー（インライン要素）
サイト内リンクに関しては特に指定なし。サイト外へのリンクは（target属性を_blancにし別タブ・窓で開く）指定をする。
ページ内アンカーリンクは『id属性』と『name属性』をつける。
『a:hover と a:active』の擬似クラスの設定でマウスオンの指定を行う。
3. CSSガイドライン
現在広く利用・ブラウザサポートされているCSS（Cascading Style Sheets、カスケーディングスタイルシート）のバージョン「CSS2.1」を採用します。
3.1. 基本ガイドライン
3.1.1. CSSの初期化
リセット用のCSSを用意し、マージンなどの設定を初期化する。（別記）
基本的にコーディングの際に変更しないものとし、編集権限は弊社ディレクターのみにあるものとし編集した際には更新したことを記述する。
3.1.2. 書式
一行目に必ず『@charset』の記述をする。HTMLにあわせ基本はutf-8にする。
インデントなどはDreamweaverでCSSタブより記述したものに準ずる。
適用対象ごとに後の管理を考え、区別しやすいようにコメントで区切る。
3.1.3. 記述の場所
基本的に外部CSSに記述するものとするが、部分的な文字装飾は直接styleで指定する。
その際、メンテナンス性を損なわないようにする。
3.1.4. 子孫セレクタの使用
idやclassを直接使う場合は限定し、子孫セレクタを積極的に使用する。
3.1.5. 子孫セレクタの書き方
子孫セレクタで示すツリー構造は不必要な表現（セレクタ）を省く。
CSSシグネイチャを使用する場合はbody要素の『id,class属性』→必要な上位セレクタ→対象のタグの順で書く。
Dreamweaverの記入ボックスから記述する場合によく考えて編集する。書き方次第で優先順位が変わるので注意が必要。
3.1.6. id/class名の規則
idやclass名はアルファベット小文字からはじめ、２語以上続く場合は２語目の頭文字を大文字にする。
例） 『searchBox』『headerLogo』『footerLink』など
類似した識別名の場合は連番をふる。この際番号は２桁にする
例） 『arrowLink01』『leadText03』など
3.1.7. フォントに関して
特に指定が無ければ以下のようにする
“メイリオ”, “Meiryo”, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, Osaka, “ＭＳ Ｐゴシック”, “MS P Gothic”, Arial, Helvetica, Verdana, sans-serif
文字の大きさを可変にするセレクタをつける場合は『％』でサイズ指定をする。
それ以外はbody要素に11～16pxを指定し、要素ごとにCSSで『px指定』する。
3.2. CSS設計
3.2.1. 共通（テンプレート用）CSS 【common】
CSSは分割して管理し、以下のようなファイル構造設計にする。
| ファイル名 | 内容 |
|---|---|
| import.css | 下記の共通するCSSを読み込むファイル 読み込む優先順位も指定する。 |
| reset.css | 共通するレイアウトに対し、タグのリセットなどの初期化、およびハックを指定するファイル。 基本的に編集しない。 |
| cmn-layout.css | ヘッダーやフッター、レイアウト段組、包括ブロックなど共通レイアウトを管理するファイル |
| cmn-header.css | ヘッダー部分に内包されるコンテンツすべて ※グローバルナビが水平な場合はこの中に含む。 |
| cmn-footer.css | フッターに内包される共通出現コンテンツすべて。 |
| cmn-main.css | メインエリア内で共通して必要なコンテンツ。 ※パンくずリスト、見出し、ページ送り、よくあるブロックなど |
| cmn-side.css | サイドエリア内で共通して必要なコンテンツ。 ※グローバルナビが垂直な場合はこの中に含む。 |
| cmn-style.css | サイト制作時にテンプレート的に頻出するclassを設定したCSS。 ※ 数値を編集することのみのもの。 ※ テキストのフォントやテキストリンクも |
| table.css | テーブル要素に関する設定。 |
| list.css | 汎用リスト要素に関する設定。 |
| parts.css | 汎用的なコンテンツパーツに関する設定 |
| other.css | その他上記以外で特例的なものに関する設定。 |
3.2.2. 各コンテンツ別CSS 【each】
コンテンツのタイプに応じてその都度読み込むCSS。
| ファイル名 | 内容 |
|---|---|
| home.css | トップページのみに使用されるコンテンツのレイアウト設定CSSファイル。 |
| news.css | ニュース一覧、ニュース詳細のレイアウト設定CSS。 |
| faq.css | よくあるご質問全般に関するレイアウト設定CSS。/td> |
| pageIndex.css | 階層トップ、カテゴリーページなどの一覧ページのレイアウト設定CSS。 |
| pageDetail.css | 商品や実績の詳細ページのレイアウトを設定するときのCSS。 |
| document.css | 個人情報保護方針および利用規約などテキスト文書中心のテンプレートページに関するレイアウト設定CSS。 |
| form.css | フォームおよび問い合わせフォームなどのレイアウトに関する設定をするCSS。 |
| sitemap.css | サイトマップページ専用のCSS。 |
ほか、わかりやすいようにファイルを作成する。
