株式会社antsのホームページへようこそ。

Web制作ガイドラインをつくろう!

0
Posted in Lab. By Yuko Tsutsumi

はじめまして!Webを担当しているcocoと申します。
サイトに訪れるユーザーさんにも検索ロボットにも、運営する人にも優しいサイト制作をモットーに、Web制作をしています。

数回にわたって、現在研究中のWeb制作ガイドライン「アリンコWeb標準」をご紹介していく予定です。
記念すべき第1回目は、ガイドラインを作成することになった、そもそもの発端からお話ししましょう。

  • なぜにWeb標準?
  • ガイドラインの必要性
  • ガイドラインをつくる7つのメリット


なぜにWeb標準?

「Web標準」とは、Webページの文書構造と視覚表現を完全に分離し、正しい文法でWebページを制作しましょうというものです。

4~5年くらい前は、HTMLにテーブルレイアウトが主流!ブラウザもWindowsなら、Internet ExplorerとNetscapeがメジャーどころでした。

しかし、ここ数年で一気に「Web標準」の波が押し寄せてきました。そして多様なブラウザが現れ、メジャーブラウザの数、そして対応すべきバージョンまで含めるとすごい数になります。またAjaxが注目され、HTML DOMアクセスを行うことが一般的になりました。

この状況下、全ての対象ブラウザで同じように表示され、正常に動作するWebページを作るとなると・・・Web標準化せざるを得ないわけです。

ガイドラインの必要性

しかし、突然「Web標準に則ったサイトにしましょう!」といっても、何もルールがないと結局、メンテナンス性は向上しません。

  • 制作者自身のスキルに依存 → 一定の品質を保持できない
  • コーディングスタイルは各人さまざま → コーディングの書式が統一されていないので読みづらい
  • クライアントによって独自の仕様がある → 情報共有できていないため、あとで修正作業が発生

そこでガイドラインが必要になってきます。

まずガイドラインは、守る以前に読んでもらうことが大事なので、下記の点に注意して作成しましょう。

  • ガイドラインのガイドラインを決める → 書式、構成、バージョン管理方法など
  • 自社の制作フローにあったガイドラインにする → 例えば、作業者別にガイドラインを作るなど
  • ガイドラインは、読み手を意識し、シンプルかつ明確で読みやすく
  • 文字だけでは伝わらない情報は、読み手の理解が深まるよう図を挿入する

ガイドラインをつくる7つのメリット

ガイドラインをつくることで、下記のようなメリットがあります。
ガイドラインは、Web制作ルールを決めるだけのものではなく、各人の持っている情報を共有し、社内にノウハウを蓄積することができるのです。
デメリットは、ガイドラインをつくるのが大変ということくらいでしょうか。

  1. 一定の品質を保持

    ガイドラインに沿って作業することで各作業者のスキルに依存しない、一定の品質のWebページが作成できる。

  2. サーバー負荷軽減

    スクリプトやスタイルシートは外部化することで、Webページのファイルが軽くなり、サーバーの負荷軽減になります。

  3. メンテナンス性の向上

    ページ毎にスクリプトやスタイルシートを記述していると、サイト更新時にページ毎の修正が発生するため、メンテナンス性が悪くなります。外部化しておけば、1ファイル修正するだけで全てのページに適用されます。

  4. レイアウトの統一化

    スタイルシートを外部化することで、サイト全体のレイアウトを統一させることが容易になります。

  5. DOMアクセスのエラー回避

    Ajaxを使ってHTMLのDOMにアクセスするとき、タグの入れ子がおかしいなど文法エラーがあると、正しく動作しない原因になることもあります。

  6. ソースの可視性および作業効率アップ

    複雑なテーブルレイアウトや、要素に直接スタイルシートが記述してあると、どこからどこまでが要素の区切りなのか分かりづらく、ちょっとした修正でも時間がかかってしまいます。

  7. 社内のノウハウ蓄積

    各人が持っていたノウハウをガイドラインにすることで、知識を共有できる。

次回からは、Web制作に関するガイドラインを順次、ご紹介していきます。
お楽しみに。