コーディングガイドラインとは？ポイントと注意点

WebディレクターとしてWebサイトを制作していると、デザインの段階では良いものができていたのに、実際にできあがったWebサイトはイメージといまひとつ違う。あるいは逆に、デザインは地味だったけどすごく良いWebサイトに仕上がったなど、ギャップを感じることが頻繁に起こり頭を悩ませます。

コーディングが思ったほどの出来ではなかったというのは、Webコーディングに対する指示の適切さによっても大きく左右されます。この「コーダー」への指示というのはデザインに対して「ここはどういうコードにしてください！」と細かく指し、これらの指示を1つにまとめて指示書を作成します。このコーダーに対するコーディングについての指示書のことを一般的に「コーディングガイドライン」と呼びます。今回はこのコーディングガイドラインの作成とそのポイントについて解説いたします。

コーディングガイドラインとは

Webサイトのデザイン案が通ってからコーディングを始めるまでに、Web制作会社のWebディレクターはコーダーに渡すための多くのデータを準備します。どのくらいきめ細かな指示出しが必要かは、担当するコーダーの経験値次第です。

デザインデータと口頭での打ち合わせだけでOKの場合もありますが、複雑なレスポンシブWebデザインが主流の今、 デザインデータだけでWebデザイナーの意図を100％理解せよというのは不可能な状況になってきています。

そこで制作会社のWebディレクターは、デザインデータのほぼ全てのパーツに指示を書き入れたコーダー専用の指示書を作成することが増えています。この指示書のことをコーディングガイドラインと呼びます。

では、コーディングガイドラインに入れるべき項目を紹介していきます。

コーディングガイドラインに入れるべき項目

①コーディング種別
コーディングするサイトがPCサイトか、スマートフォンか。またCMSを使用するのか、jQueryを使用するのかといった細かい種別を伝えます。

②文字コード・改行コード
通常は最もポピュラーなUTF-8を使いますが、企業によってはShift-JISやEUC-JPにしてほしいといった要望もあります。

③コーディング言語のバージョン

使用するhtmlやcssのバージョンを指定します。

④対象ブラウザ・OS

どこまでのブラウザを対象とするかによって、コーディングにかかる費用が大きく変わってきます。古いブラウザに対応するほど、多くの追加料金が必要になります。

⑤パスルール・ディレクトリ構成の指示

CMSの中で使用することを想定したうえで相対パスで書くか、パーツによっては絶対パスやサイトルート相対パスで書いておくことがよいケースもあります。間違えると後でトラブルになる部分ですので、最も気をつけて指示出しをします。

⑥テンプレート部位の管理

EJSやSSIを使ってインクルードさせるか、PHPを使ってインクルードさせるかといった仕様も、利用するサーバーによって機能が異なるので注意を払います。

⑦統一表記・表現のルール

クラス名やIDの命名方法など、後のちの更新性を考慮して、命名のルールを決めておきます。

⑧使用フォント

Webサイトのコンセプトに合ったフォントを指定します。

⑨画像の切り出し方

見た目上は同じようにみえるページも、書き出し方の違いによってSEO上の効果や、運用中における更新性に大きな差が出ます。

コーディングガイドラインの意義

大規模なWebサイトに新しい機能を追加するときはに最優先すべきは、システムの中に入れやすいかどうかという点です。1ページから数ページのみのWebページ、いわゆるランディングページを作るときとはコーディングの際の方針が異なります。どのようなサイトを制作するのかによって、コーディングの方針をガイドラインに示すことが重要です。

また、できるだけわかりやく統一されたルールのもとでシンプルなコードにしておくことは、今後、別の誰かがページの追加や修正を加えても、問題を起こりにくくするということにつながります。問題を避けるためにもコーディングガイドラインである一定の基準を設けておき、正確に指示を伝える必要があります。

Webディレクターのチェック力

ここまでコーディングガイドラインについて説明をしてきましたが、良いWebサイトを制作するにあたって多くの要因があります。Webサイト制作をディレクションするWebディレクターにとって、コーダー個人個人のコーディングの癖や、スキルの差を吸収して、一定のクオリティに保つことも理想のWebサイトを作るための重要な要素です。

コーディングガイドラインを渡してコーディングが完了したら、指示通りにできあがっているかどうか、Webディレクターが１つ１つチェックするのが通常です。Web制作を行っている弊社ITRAのベテランコーダーでも1〜2回は修正に差し戻しをしてから、クライアントのチェックに回しています。

まとめ

優れたWeb制作会社かどうかの判断の重要な材料の1つになるのが、コーディングの品質といえます。Webサーバーやシステムとの連携を含め、表には見えない部分までWebサイトへの気配りがされているコーディングができるかなどが制作会社選びのポイントになるでしょう。そのためにもWeb制作会社としては、より細かいコーディングガイドラインを持っていた方が良いでしょう。

ITRAでは、お客様のご要望に真摯に向きあってWeｂサイト制作を行ってきました。お客様のご要望に沿ったサイト制作につながるコーディングガイドラインで、期待にお応えします。お気軽にお問い合わせください。