ホームページを作成する時、自分1人だけでなく、チームを組んで役割を分担する場合がほとんどでしょう。
その際、コーディングガイドラインを決めておくことによって、複数人での作業をスムーズに進めやすくなり、仕事を効率化し、ミスも防ぐことができます。

今回は、コーディングを行なうときにおさえておきたい基本的なコーディングガイドラインをご紹介します。

ホームページの全体的な仕組みを理解する

ホームページを作成するためには様々な手順が必要になりますが、まずは対象のフォルダディレクトリを作り、その中に使用する画像やHTML,CSSを収納していきます。
そして、最終段階ではそのホームページがきちんと機能するかをチェックします。その一連の流れをガイドラインに基づいて作成していきます。

フォルダ階層の利用

デザイナーやディレクター、コーダーなど、担当者によってフォルダ階層やソースの名前の付け方は異なると、サイトルートが違うといったミスが起こってしまうため、事前にルールを決めましょう。
　
例えばcssフォルダの場合、「common」と共通cssとネーム付けする人もいれば「style」、「layout」と付ける人もいます。
特に画像は使用量も多くなる場合があるので、「image」なのか「img」なのか細かいところまでルールを決めたほうが記述もわかりやすくなります。

そして、フォルダ階層はpublic_htmlの中からどのような階層で、どこになにが収納されているか全員で正しく理解する必要があります。

HTMLの記述に関して

HTMLの記述に関して、細かいところまで決めていくとチームで複数のページを作成するときにページが組み立てやすくなります。特に注意したいのは以下の7点です。

・HTMLシートのバージョン
・文字コートと改行コード
・引用符
・インデントの記述をどうするか
・各ブロック割をするのであれば、id名をどうするか（#header, #nav, #contents, #main, #sub, #footerなど）
・「\」,「/」,「*」,「:」,「?」,「<」,「>」,「|」,「＄」これらの文字の使用禁止にするかどうか。
・類似のページが複数ある場合、シート名を連番使用にしてもいいかどうか。

CSSの記述に関して

CSSの記述に関しても、外部スタイルシートを使用するのか、それともインラインで記述をしていくのかを決めた上で、下記のようなルール決めをします。

・文字コードをHTMLに合わる（基本はUTF-8になります）
・id とclassの命名規則の統一
・区切り記号はアンダースコアを使用するのか（main_conts,left_nav など）
・複数のCSSを使用する場合、そのページのプロパティ記述順を決める
・文法チェックをどうするか（http://jigsaw.w3.org/css-validator/の利用の可否）

画像管理

多様な画像をどのページで利用するのか、画像の保存場所などしっかりとした取り決めをしましょう。

・保存形式をどうするか（jpg、gif、pngなど）
・ディレクトリをどうするか（共通画像は/img/commonフォルダ、トップは/img/top/に収納なのか等）
・画像の命名規則を考える

まとめ

コーディングガイドラインはとても細かく、ルール付けは慣れないうちは難しく感じるかもしれません。
しかし一度ルールを決めてしまえば誰がコーディングを行なってもわかりやすく、コードがきれいに揃うためミスも防げます。

ホームページ公開時に何らかの不具合が出ても発見が早く、すぐ修正が出来るのでユーザーのストレス軽減にもつながります。

上記のコーディングガイドを参考に、自分でルールを決めて仕事効率を向上させてみましょう。

このニュースを読んだあなたにおすすめ

Webマーケティングとは
Webマーケティングの基礎～3C分析を使ってみよう
マーケティングの基本である市場分析とポジション

このニュースに関連するカリキュラム

戦略基礎一覧
Webマーケティング戦略の基礎について説明しています。