SHOEISHA iD

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

連載記事

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

CodeZine BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
そこが知りたい! 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
" ); }

おすすめ

アクセスランキング

  1. 1
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  2. 2
    「CUDA」 ~マンガでプログラミング用語解説
  3. 3
    デスクトップアプリを開発しよう! 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  4. 4
    2024年の提示年収が高いプログラミング言語は? paiza調査によるランキングが発表
  5. 5
    計測と改善をひたすら繰り返したら、年間コストを1億円削減した──不確実性の高いプロジェクトに挑む
  1. 6
    ガートナー、日本企業が2025年に向けて押さえておくべきインフラストラクチャとオペレーションのトップトレンドを発表
  2. 7
    「VRAM」 ~マンガでプログラミング用語解説
  3. 8
    AWS、「Data Exports for FOCUS 1.0」の一般提供を開始
  4. 9
    VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説
  5. 10
    健全なソフトウェア設計の第一歩! 既存のPHPソースコードからクラス図を自動生成しよう

アクセスランキング

  1. 1
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  2. 2
    「CUDA」 ~マンガでプログラミング用語解説
  3. 3
    デスクトップアプリを開発しよう! 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  4. 4
    2024年の提示年収が高いプログラミング言語は? paiza調査によるランキングが発表
  5. 5
    計測と改善をひたすら繰り返したら、年間コストを1億円削減した──不確実性の高いプロジェクトに挑む
  6. 6
    ガートナー、日本企業が2025年に向けて押さえておくべきインフラストラクチャとオペレーションのトップトレンドを発表
  7. 7
    「VRAM」 ~マンガでプログラミング用語解説
  8. 8
    AWS、「Data Exports for FOCUS 1.0」の一般提供を開始
  9. 9
    VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説
  10. 10
    健全なソフトウェア設計の第一歩! 既存のPHPソースコードからクラス図を自動生成しよう
  1. 1
    ITエンジニア本大賞2025、投票締切直前! みんなで選んだ歴代の大賞本を振り返って一挙紹介
  2. 2
    Python 3.13の新機能、対話型インタプリタの機能強化や高速化などを解説
  3. 3
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  4. 4
    デスクトップアプリを開発しよう! 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  5. 5
    「CUDA」 ~マンガでプログラミング用語解説
  6. 6
    VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説
  7. 7
    今後生成AIとどう向き合うべきなのか? 現場のエンジニアと研究者が最新研究事例から語り合う
  8. 8
    2024年12月に開催される注目のITエンジニア向けカンファレンス5選
  9. 9
    日本在住の英語を話すソフトウェア開発者、年収の中央値は950万円に
  10. 10
    Vue.js3.4~3.5の新機能をまとめて紹介! 新しいAPIやSSRの改善

イベント

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

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

メールバックナンバー

アクセスランキング

  1. 1
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  2. 2
    「CUDA」 ~マンガでプログラミング用語解説
  3. 3
    デスクトップアプリを開発しよう! 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  4. 4
    2024年の提示年収が高いプログラミング言語は? paiza調査によるランキングが発表
  5. 5
    計測と改善をひたすら繰り返したら、年間コストを1億円削減した──不確実性の高いプロジェクトに挑む
  1. 6
    ガートナー、日本企業が2025年に向けて押さえておくべきインフラストラクチャとオペレーションのトップトレンドを発表
  2. 7
    「VRAM」 ~マンガでプログラミング用語解説
  3. 8
    AWS、「Data Exports for FOCUS 1.0」の一般提供を開始
  4. 9
    VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説
  5. 10
    健全なソフトウェア設計の第一歩! 既存のPHPソースコードからクラス図を自動生成しよう

アクセスランキング

  1. 1
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  2. 2
    「CUDA」 ~マンガでプログラミング用語解説
  3. 3
    デスクトップアプリを開発しよう! 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  4. 4
    2024年の提示年収が高いプログラミング言語は? paiza調査によるランキングが発表
  5. 5
    計測と改善をひたすら繰り返したら、年間コストを1億円削減した──不確実性の高いプロジェクトに挑む
  6. 6
    ガートナー、日本企業が2025年に向けて押さえておくべきインフラストラクチャとオペレーションのトップトレンドを発表
  7. 7
    「VRAM」 ~マンガでプログラミング用語解説
  8. 8
    AWS、「Data Exports for FOCUS 1.0」の一般提供を開始
  9. 9
    VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説
  10. 10
    健全なソフトウェア設計の第一歩! 既存のPHPソースコードからクラス図を自動生成しよう
  1. 1
    ITエンジニア本大賞2025、投票締切直前! みんなで選んだ歴代の大賞本を振り返って一挙紹介
  2. 2
    Python 3.13の新機能、対話型インタプリタの機能強化や高速化などを解説
  3. 3
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  4. 4
    デスクトップアプリを開発しよう! 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  5. 5
    「CUDA」 ~マンガでプログラミング用語解説
  6. 6
    VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説
  7. 7
    今後生成AIとどう向き合うべきなのか? 現場のエンジニアと研究者が最新研究事例から語り合う
  8. 8
    2024年12月に開催される注目のITエンジニア向けカンファレンス5選
  9. 9
    日本在住の英語を話すソフトウェア開発者、年収の中央値は950万円に
  10. 10
    Vue.js3.4~3.5の新機能をまとめて紹介! 新しいAPIやSSRの改善