以前勤めていて、今はつぶれてしまったWeb制作会社で、僕がチームリーダーしていた時に作った資料です。
XHTMLが全盛だった時代なので今は古い情報ですが、まあこのまま削除してしまうのも勿体ないので、資料として公開します。
制定日:2009-03-04 Ver.1.00
改訂日:2009-10-23 Ver.1.11
更新履歴
- Ver.1.11 (2009-10-23)
- サイト構造とディレクトリ/ファイルにおいて、imgフォルダ表記をimagesに変更
- Ver.1.10 (2009-04-22)
- 制作運用ガイドラインの制作環境設定についてを追加
ガイドラインについて
ガイドラインの必要性
- 誰が作っても一定の品質を確保できる
- キーパーソンが抜けても比較的スムーズに穴埋めできる
- 新しいスタッフが一定の品質のサイトを構築できるようになるまでの期間を短くできる
- 社内にノウハウが残すことができ、またノウハウを体系化し蓄積できる
ガイドラインの基本設計
- 目的：SEO効果、アクセシビリティ、ユーザビリティ、メンテナンス性、互換性などの確保が基本
- 例外：制作物によってはすべての項目に準拠するのが難しい場合はこの限りではない
- 改訂：ガイドラインの表紙にバージョン番号（Ver.1.01など） と最終改訂日を明記しておく
変更履歴記載し、ガイドラインに対する意見を常にオープンに受けつけ、速やかに反映する
ガイドラインの内容
コーディング、アクセシビリティについてのガイドラインは、別途資料を参照すること。
制作運用ガイドライン
用語表記ガイドライン
制作運用ガイドライン
W3Cに準拠したWebデザイン
原則として、HTML文書は［XHTML1.0 Strict］, CSSは［CSS2.0］に準拠したコーディングをおこなうこと。
すなわち、HTMLは文書の構造を示すことを目的とし、見た目の装飾はCSSで制御をおこなうようにする。
ただし、古いブラウザ（スタイルシート未対応など）でも表示可能にしなけらばならないなど、ユーザーの要望や事情がある場合はこの限りではない。
［参考サイト］XHTMLの書き方と留意点, CSS2の概要
コーディングについて
W3Cに準拠したコーディングを行う。
詳細はHTML+CSSコーディング規約を参照のこと。
チェックについて
コーディングのチェックはバリデータでおこなう。
下記のチェックサイトを使用するか、もしくはFirefoxのアドオン機能を使用するのが望ましい。
コーディングチェックサイト
Firefoxのアドオン機能
ユーザー環境
すべてのユーザー環境を考慮してページを制作するのは困難である。そこで、ターゲットとして設定したユーザー環境に焦点をしぼり、ターゲット以外の環境は最低限のアクセシビリティを確保すること。
また、最新のブラウザに合わせたスタイルシートを適用すると、レイアウトが大きく崩れてしまうようなブラウザを使用しているユーザー環境も考慮して、HTMLのマークアップだけでも情報を伝えることが可能なコーディングを行うこと。
Webブラウザ
基本的に以下のWebブラウザで閲覧する際に、情報入手に極端な不具合を起こさないことを最優先すること。
- Microsoft Internet Explorer ver.6 以降
- Firefox 1.5 以降
画面サイズ
出来るだけ多くの人が閲覧できるように以下のサイズにて制作すること。しかしユーザの意向による場合はこの限りではない。
- （必須）800×600（SVGA）サイズで問題なく閲覧できること。
- （推奨）640×480（VGA）サイズでも極端な不具合なく閲覧できることが望ましい。
制作環境設定について
サムネイルキャッシュを生成しない
納品時に、Thumbs.dbファイルが混じる事があるので、Thumbs.dbファイルは生成しないように設定すること。
画像や写真データの縮小イメージを保存するThumbs.dbファイルを作成させないようにするには、エクスプローラの［ツール］－［フォルダ オプション］メニューを実行し、フォルダ・オプション・ダイアログで［表示］タブを選択。
［縮小版をキャッシュしない］のチェック・ボックスをオンにすれば、以後、Thumbs.dbファイルは作成されなくなる。
サイト構造とディレクトリ/ファイル
制作ファイルの管理について
基本、案件ごとに以下フォルダ構成（フォルダ名）で管理し、Version Cueサーバーにてプロジェクトごとに一元管理を行う。また、常にVersion Cueサーバー上のファイルは最新とし、プロジェクト稼動時のバックアップは毎日に設定すること。
案件フォルダ以下の構成（フォルダ名）
- 作業データ
- 制作時に使用する元データを格納（psd、テキスト、加工済み、元画像・写真など）
- html
- 作成したサイトデータ（HTML、CSS、Javascriptなど）を格納
- 仕様
- 仕様書や資料（サイトマップ、フォルダ構成表など）を格納
- 先方からのデータ
- お客様から頂いたデータを格納
- お客様サイトデータ
- 作業前のお客様のサイトのデータを格納（リニューアルのみ）
- プレゼン用
- プレゼン時に使用したファイルを格納
- 納品データ
- 納品時にお客様に提出したファイルを圧縮して格納する。
段階的に納品した場合は、それぞれの年月日をファイル名の後ろに追記すること。（例：*_090303）
ファイル名・フォルダ名・拡張子
ファイル名・フォルダ名の表記について
ファイル名は見てすぐに認識できる表記を採用する。記述はヘボン式ローマ字とする。
基本的に言語は英語で記載。マイナーな名称になるばあいは、日本語でローマ字表記も可。
| 対象項目 | 命名規則 | 備考 |
|---|---|---|
| フォルダ | お問い合わせ contact 会社情報 company |
※ヘボン式ローマ字（shi,tsu）を使用 |
| ナビゲーション画像 | ロールオーバー *_on.拡張子 通常 *_off.拡張子 |
navigation_on.gif navigation_off.gif |
| 見出し画像 | h1_title, h2_title, h3_title ... | 例）会社概要 h2_company.gif |
| 写真・イラスト画像 | img_title_01 | 同一タイトルで複数存在する場合は連番をふる |
拡張子
以下を標準とする
- 必ず半角英字表記。例）JPG ⇒ .jpg
- HTMLファイルの拡張子は、基本サーバーに従うが、「.html」「.htm」のどちらでもよい場合は、拡張子は「.html」で統一。
フォルダ構成・ディレクトリ概要
適用範囲
- 最終的にアップロードされるウェブサイトのデータファイルとディレクトリ（フォルダ）
- ローカルにおける作業時は、基本的にサーバー上のものと同様とする
ディレクトリ構成の概要
基本的なサイトのディレクトリ構成は以下のものとする
| ルートディレクトリ | 第2階層 | 第3階層 |
|---|---|---|
| index.html sitemap.html privacy.html /images（ルートにあるhtmlで使用） |
||
| /common （全頁共通のものは全てこのフォルダ内） |
/css /images /js |
css/common.css css/default.css css/layout.css css/decorate.css css/print.css など |
| /sample | index.html /css（このフォルダ内のみで使用の場合） /images（このフォルダ内のみで使用の場合） /sample |
index.html /images |
ディレクトリ構成詳細説明
ルートディレクトリ
トップページ以外では、基本的にフォルダ分けする必要の無い単一のhtmlをおく 例）sitemap.html
ルートディレクトリにあるimgフォルダにはトップページに使用する画像を格納する。
commonディレクトリ
全ページにおいて共通で使用するCSS、画像、Javascriptなどを格納する。
- ページ全体の背景、ヘッダ・フッタ、ナビゲーションや見出し、透明GIF画像など
- 基本的なページ構造の定義（ページ全体、ヘッダ、フッタ、ナビゲーションなど）やサイト共通の装飾の定義など
- ページ全体で使用する可能性のあるJavascript 例）ナビゲーションのロールオーバー動作など
下層ディレクトリ
ディレクトリは、各コンテンツの分類ごとに適宜作成する。
また、そのコンテンツだけで使用される画像は、そのディレクトリ内にimgディレクトリを作成しその中に格納する。
下層ディレクトリ名称サンプル
以下のディレクトリは適宜必要に応じて追加するが、基本的なコンテンツ名としては以下の名前を推奨する。
- CGIファイルの格納（cgi-bin）
- 会社概要（company）
- お問い合せ（contact）
- 製品情報（products）
- 採用情報（recruit）
- ごあいさつ（greeting.html）
- 沿革（history.html）
- 組織図（chart.html）
- プライバシーポリシー（privacy.html）
注意点
- ファイル名・ディレクトリ名は、半角英数字のみを使用し、英数字に大文字を使用してはならない
- ファイル名・ディレクトリ名は、_（アンダーバー）以外の記号を使用してはならない
- ファイル名・ディレクトリ名は、数字から始まる名前になってはならない
- CGIテストなどによる一時的なバックアップを除いて、サーバー上に.bak, .zipファイルなど不要なファイルをアップロードしてはならない
- 制作元ファイル（.psd, .ai, .png, .fla など）をアップロードしてはならない
画像の取り扱いについて
使用ソフトについて
基本Fireworksを使用してデザインラフを制作。Photoshopやillustraterは補助的に使用する。（画像補正、コラージュ、地図のトレースなど）
しかしながら、デザイン重視の案件や作業効率面で有用でない場合はこの限りではない。
初期段階で行う作業
- 元画像を最大限に綺麗にする事に注力し、そのための補正作業は必ず行う。（ゴミとり、傾き）
- 本来の対象物が一番よくみえる状態にする。
画像の書き出しについて
画像ファイルのデータ容量よりも、画質優先とする。綺麗に見える状態で書き出しを行い、以下を基本とする。
- jpg：書き出し品質80以上（使用画像：写真、グラデーションがかかったもの）
- gif,png8：アダプティブ、ディザなし、256色（使用画像：テキスト主体のもの、単一色、透過画像）
- png24,png32：設定なし（使用画像：品質を維持しつつ、背景画像上に被せる必要のある透過画像の場合）
ユーザビリティ／アクセシビリティへの配慮
ユーザビリティ（使いやすさ）に配慮する。
内容
- トップページには、そのサイトの内容を最もよく表す説明を入れる
- 重要な情報は、ページの上部に置く
- 問い合わせ先を明記する
画面
- 内容を簡潔にし、スクロールは最小限にする
- ページが長くなるときは、適切なナビゲーション（ページ内リンクなど）を設ける
- 800×600 の画面を基準として標準でブラウザを表示したときに、横スクロールなしでも内容が読めるようにする
- ウィンドウのステータスエリアにメッセージを表示しない
アクセシビリティ（利用しやすさ）に配慮する。
詳細はアクセシビリティ・ガイドラインを参照のこと
SEOについて
アルゴリズム更新の問題
検索エンジンでは、検索精度をより高めるため、日々スパムを排除しようとアルゴリズムを更新している。
当然のごとく、このアルゴリズムについての情報は一切公表されておらず、現在あるSEOテクニックと呼ばれているものは、推測によって導き出されているものである。このことからSEOテクニックは、現在はよくても将来にわたって保障されるものでなく、逆にいつでもSEOスパムと判定される可能性があるものである事を知っておくこと。
よって、検索エンジンにスパムと判定されず、アルゴリズムが変わっても影響を受けないようなページを作成することが重要である。これらは、W3Cの標準規格に従うことや、アクセシビリティを考慮することで、期待通りのページを作成することができる。
主要な検索エンジン
以下の検索エンジンを主要な検索エンジンと定義し、特にGoogle、Yahoo!においては綿密に対策を施すこと。
用語表記ガイドライン
漢字・仮名の表記統一
原則として、お客様の原稿、パンフレットと異なる場合は要確認。
コンテンツ内に違った表記を混在させないこと。必ず表記は統一する。
| 取扱い・使い分け | 備考 | |
|---|---|---|
| 表記の統一 | 漢字書きとひらがな書きの統一 | （殆ど）→ほとんど，（予め）→あらかじめ |
| 送り仮名の取扱い | 行なう/行う，現われる/現れる | |
| 外来語のカタカナ表記 | インターフェイス/インタフェース | |
| 意味の使い分け | 読みが同じ漢字の使い分け | 作る/造る，対象/対照/対称，製作/制作，極小/極少 |
| 意味が似ている（あるいは実用上同じ）語の使い分け | 製造/作成/製作/制作，比べる/比較する |
機種依存文字の使い方
基本的に機種依存文字は使用しない
NG例：
- JIS 標準コードにない漢字（人名や地名など）
- アルファベットの組み合わせでできている単位記号（㎝、㎏など）
- ローマ数字（Ⅰ、Ⅱなど）
- 丸数字（①、②など）
- 文字記号（㈱、㈲など）
ただし、HTML文字コードを使用する場合は可とする。
OK例：
- 読みをひらがな、カタカナなどで記述する
- 類似の別の漢字や算用数字などを代用する
- 漢字や記号を画像で作成して配置し、読みを代替テキスト（alt 属性など）で記述する
- 一文字ずつ書き下す（cm、(株)など）
英数字の使い方
表記は以下を基準とする
| 項目 | 表記の説明 | 具体例 |
|---|---|---|
| 日時／営業時間 | 半角英数字を使用。 「：（コロン）」は全角。 時間の幅指定は、「～（ニョロ）」を使用。 注）西暦もしくは元号はお客様に選択してもらう。 |
9：00～14：00 / AM9：00～PM2：00 |
| 郵便番号／住所 | 半角英数字を使用。 | 〒541-0056 大阪市中央区久太郎町1丁目9-18 |
| 電話番号／FAX | 半角英数字を使用。 | TEL (078)222-2122 FAX (078)222-2123 |
| 金額 | 半角アラビア数字のみ使用。 数字が5桁以上になる場合は、単位語を使う。 カンマは半角 |
200円 1,000円 10万円 5億6,200万円 |
| 英字 | 1～2文字の場合は全角。 3文字以上は半角。 隣り合っている全角文字との距離が詰まっているようであれば半角スペースを入れる |
Yahoo! JAPANは、日本で最も利用されている Search Engine といってよい。 |
| 単位 | 半角英数字を使用。 機種依存文字の単位は使用しない。 |
cm, mm, kg |
| 文章中 | アラビア半角数字のみ使用。 （ただし、ことわざや慣用句などには漢数字を使用する） |
昨年6月に創立100周年になりました。 「一石一鳥」「三度目の正直」 |
| 新着情報・更新履歴 | 半角数字。1桁の年月日は「01年01月01日」とする。 ・半角スラッシュで区切る。 ・半角ピリオドで区切る。 ・半角数字と漢字 注）西暦もしくは元号はお客様に選択してもらう。 |
2009/01/01 2009.01.01 2009年01月01日 |
括弧・記号の使い方
表記は以下を基準とする。
| 項目 | 表記の説明 | 具体例 |
|---|---|---|
| 括弧 | 全角表記 |
|
| 記号 | 全角表記 ※と*は同様の使い方をされるが※で統一する。 |
|
タイトルタグについて
「コンテンツ名｜カテゴリ｜サイト名」の順に記述する。例）沿革｜会社概要｜株式会社●●
コピーライト
明確な決まりがないため、表記についてはお客様に確認すること。
特に指定が無い場合は、以下のように記述すること。画像で作成する場合は、年号は記述しない。
Copyright(C) 年号 サイト名 All Rights Reserved.
