SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

そこが知りたい! Web標準サイトの活かし方

Webサイトの制作/運用の効率化を図る
「ガイドライン策定」のすすめ(前編)

そこが知りたい! Web標準サイトの活かし方(1)


  • X ポスト
  • このエントリーをはてなブックマークに追加

 Web標準に従うことは、SEO効果、ユーザービリティ、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従ってWebサイトを制作しようとすると、制作者の頭を悩ませる多くの問題が待っています。本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Web標準に従うことは、SEO効果、アクセシビリティ、ユーザービリティ、相互運用性、互換性、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従って「正しい(X)HTML+CSS」でWebサイトを制作しようとすると、制作者の頭を悩ませる多くの問題が待っています。

 本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。

 本連載の最初のテーマは、制作時には設計図として、更新時には説明書として威力を発揮する「ガイドライン策定」についてです。今回と次回の前後編に分けて解説していきます。ここで言うガイドラインとは制作/更新時に指針となるローカルルールを定めたもので、Web標準の仕様書には書かれていない部分や曖昧な部分をクリアにし、「作業の効率化を図ると共に、一定の品質を確保する」という目的があります。

対象読者

  • XHTMLとCSSの基本を理解している方。
  • Web標準サイトの実践的な作り方に興味のある方。

必要な環境

 特別な環境は必要ありませんが、ガイドラインの作成にPowerPointのようなプレゼンテーション作成ツールや文書作成ツールがあれば便利だと思います。

ガイドラインの必要性

 Webサイトの制作にかかわらず、複数人で共同作業を行う場合、コンセンサスをとりながら一定のルールに従って仕事を進める必要があります。このとき、共通のルールを「ガイドライン」としてドキュメント化しておけば、現場で起こり得るあらゆる無駄の発生を抑えることができます。

ガイドラインの目的

 ガイドラインには、主に「制作/更新時の無駄をなくし効率化を図る」「一定の品質を確保する」といった2つの目的があります。

 Webサイト制作では、ディレクター、プログラマー、デザイナー、コーダーなどが集まってプロジェクトを組み、作業を分担することも珍しくありません。仕事の進め方や思考の異なる人たちが集まって共同作業を行うのですから、それぞれが好き勝手に作業していては、ワークフローが滞るどころか、一貫性のあるWebサイトを構築できるはずもありません。Webサイトの方向性や制作のルールがきちんと明文化されたガイドラインがあれば、プロジェクトメンバー全員が同じ目標に向かって進むことができ、スムーズなワークフローを実現することができます。

 また、Webサイトの場合は、制作して終わりではなく運用してこそ価値があります。明文化されたガイドラインがあれば、運用の担当者にルールを伝えることができます。Webサイトの制作から運用までのすべてを、ひとりの個人が担当する場合であっても、日々更新されるWebサイトの品質を保つのは容易ではないはずです。ガイドラインがあれば、「情報」そのものの品質保持に注力することができます。誰が運用を担当しても、一定の品質を保ったままWebサイトを維持/管理することが可能になるのです。

ガイドライン策定の手順

 ガイドライン策定の手順としては、プロジェクトメンバーにヒアリングを行って、どのような内容を盛り込むかについての意見を集い、ミーティングを繰り返して内容を詰めていくことになります。メンバーから意見を集うことで、コミュニケーションの促進につながりますし、プロジェクトメンバーとしての参加意識が生まれます。メーリングリストやグループウェアなどを活用すれば、メンバーから出された意見を目に見える形で確認できるのでおすすめです。

ガイドラインの種類

 Webサイト制作で必要となるガイドラインの種類は、案件によって異なりますが、特に利用価値の高いガイドラインとして、本連載では、前後編に分けて、次の3つのガイドラインを中心に取り上げたいと思います。

  • 制作運用ガイドライン
  • (X)HTMLガイドライン
  • CSSガイドライン

 他に、スケジュールや作業工程を管理する「進捗管理表」や、テキストや画像などのパーツを管理する「素材管理表」、Webサイト全体で統一すべき用語をまとめた「用語表記ガイドライン」などのドキュメントもあれば便利です。今回は「制作運用ガイドライン」と「(X)HTMLガイドライン」について説明し、「CSSガイドライン」および他のガイドラインについては、次回の記事にて取り扱う予定です。

 なお、どのガイドラインであっても、

 そのWebサイトが、どのようなルールで構築されているのか、制作者以外の人が見ても理解できる形で明文化しておく

 ことが大切です。また、せっかく作ったガイドラインが徐々に色褪せていくことのないように、次のような対策をとっておくと良いでしょう。

  • ガイドラインの冒頭に、なぜこのガイドラインが必要なのか、ガイドラインの目的を定義しておく
  • ガイドラインには、バージョン番号、担当者、改訂日、変更履歴を明記する
  • 過去のバージョンをいつでも参照できる状態にしておく

 ガイドラインは、一度決めたら永遠にそれに従わなければならないというものではなく、運用の過程で進化させていくものです。現場からの意見をオープンに受け付け、適宜バージョンアップを行って精度を上げていくようにしましょう。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
制作運用ガイドライン

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
そこが知りたい! Web標準サイトの活かし方連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3289 2009/06/22 18:37

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング