WEB標準でコーディングするメリット

こんにちは。環の小坂です。

弊社もweb標準でコーディングしています。

一言で言えば「正しい文法で書くことでわかりやすくなる」といえます。

例えば、
・複数の人で作業を行う場合、もしくは引き継ぐ場合にルールがわかりやすいので、関係者が理解しやすい。→スムーズに作業が出来る。

・検索エンジンからも読みやすいので、ＳＥＯ的にもよい。

・コーディングルールが明確になるので、整合性を取りやすい。（例えばリンクや見出しなどのルールをサイト全体で統一する必要がありますが、それが自然に出来るようになる。）

・ソースがきれいなので、顧客にも説明しやすい。
（またソースが一般的には短くなるので、読み込みも早い）

・人によって文字の大きさを切り替えるとか、ＰＣ版と携帯版を同じ内容を元に表示内容を変えるなども行いやすい。

などがメリットです。

こつとしてはサイト全体を考えた上で、設計することが後々管理しやすいと思う。

おはようございます。(株)マイ.ビジネスサービス.北折と申します。
まず、web標準のメリットについてですが、検索エンジンはXHTMLの適切にマークアップしたソースを好みます。また、デザイン処理をすべてCSS(スタイルシート)で行うため、ソースを軽量化でき、より多くのキーワードをロボットに読ませることができます。
CSSファイルを外すことで、制御しているデザインが解除され、情報のみが羅列され、デザイン情報を外部ファイルに持たせるため、XHTMLソースがシンプルになり、検索エンジンからみて非常にスリムでクールなページとなり、よりSEOの高価が高いといわれています。
SEOの他、アクセシビリティに配慮したWebサイトという意味合いで、高く評価されています。

デメリットとしては、web標準の専門知識が必要で、ページ作成および更新作業について、今までよりも工数が増えると考えます。
制作後、クライアント様へ納品しますが、簡単に更新しずらい面があると思いますので、その辺を十分、説明した上でクアイアント様合意の元、制作されるとよろしいかと思います。

又、ご存じかとは思いますが、７月15-16日に「Web標準の日々」というイベントが盛大に開催されます。（参考 http://cssnite.jp/）
先日、関連セミナーに参加しました際には、株式会社サイバーガーデンの益子貴寛さんや株式会社ビジネスアーキテクツの小久保さんの愛のあるコーディングのお話も非常に興味深く、感動しました。
有料ではありますが、具体的な実務の実演もあると思いますし、勉強になると思いますので、出かけてみるのもよろしいかと思います。弊社のスタッフは、４名参加を予定しています。

メリットをごくごく簡潔に書きますと、

●保守運営に関するメリット
HTMLソースやタグが簡略化され、ファイルサイズが小さくなる
メインテナンスが楽

●SEO面でのメリット
文書の構造が検索エンジンにわかりやすく、SEO対策になる

●社会福祉上のメリット
目の不自由な方が利用している読み上げソフトなどにも対応できる

などが挙げられます。逆にデメリットとしては、ブラウザによってレイアウトが変わってしまうことが挙げられます。

実作業上でのポイントは大きなものから小さなものまで色々ですが、これまたごくごく簡潔に書きますと、

●トータルでのサイトコンセプトを明確にする
●デザインパターンを事前にしっかり詰めておく
●XHTMLを極力均一化（例外をつくらない）する

といったところでしょうか。要は、古い温泉宿のような、増築に増築を重ねてあちらこちらに段差があったり、壁がつぎはぎになっていたり、という建物にならないように、事前にしっかり計画を立てて、出入り口はどこか、窓はどこか、柱の太さはどのくらいか、といった大きなことから、水道の蛇口の形状、コンセントの位置、カーテンレールの種類といった小さなことまで、全て決めておき、なるべく例外を作らないということです。

また、作業にあたる人の中で、きちんとこれらの決め事について意思統一しておくことも重要です。

みなさんがすでにWEB標準のメリット、デメリットについてすでに回答されているので、あえて別の視点で回答させていただくと、コーディング以前にコンテンツ（コピー等）が正しい文法で書かれているか、日本語が正しいか、検索の組み合わせに配慮されているかをみることが重要だと思います。
いくらweb標準のコーディングをしても情報自体、また情報の構造に問題があれば、意味がないかと思います。
コーディングする方もあえて、そのあたりを疑ってみてはどうでしょうか。すでにデザインやコピーができあがっていることが多いかと思いますが、実際、正しく日本語が使えてなかったり、説明が下手くそなコピーも多いですから。

テーブルレイアウトからWEB標準に切り替える時はちょっと苦労しますね。

CSSのコツとしては
１．「float」のクセをしっかり理解する
２．ブラウザによってマージン、パディングの考え方が違うので、モジラ系とIE系のクセを理解する
３．各タグに設定するセレクタを少なくするよう子孫セレクタを上手に使う
４．制作時の画面サイズが横幅740pic以上であれば、表示用とプリント用にCSSを分けておくことで、プリントアウト時に右側が切れることが回避しやすくなる。(A4サイズ時）

XHTMLのコツとしては
１．ページの内容で、見出し・本文・リスト等の文章構造をしっかりと決めておく。
２．<div></div>内で背景に画像をリピートさせた場合、入れ子の<div></div>等にfloat指定をしっぱなしにすると、Firefoxで背景が途中切れすることがあるので、終了タグ（</div>）の手前ではfloatをクリアしておく。
３．HTMLとXHTMLでは使えるタグの種類が違うので、間違えないように。
４．CGIの引数などによく出てくる「&」は「＆amp;(変換されてしまうので＆が全角になってます）」で記載するなどの細かいルールを見落とさないようにする。
５．フラッシュを配置するための「embed」タグはXHTMLでは使用不可なので、フラッシュは外部JavaScriptで呼び出すようにしておく。

まだまだ沢山あるんですけど、書ききれないです！
慣れてしまえばTABLEレイアウトより楽なので頑張ってください！
テストサーバーにアップしたらここでチェックするといいですよ。
http://validator.w3.org/

あ、CSSハックは最近あまりしないムードです。

こんにちは！！
鈴木＠クロスウェーブです

弊社でもWEB標準化でのコーディングを心がけています。
一番のメリットとして最近感じたのはHTMLのソースが簡素になることで後々のメンテナンスがやりやすい事でしたね。
ページの更新や追加もデザイン要素をCSSにしていることで、ページの追加や更新が非常に楽になったことでした。

イベント等でサイトのデザインを一時期だけ変えたいとき等、HTMLの中身はそのままでCSSを入れ替えるだけでデザインが変わるなどというクライアントからは「なんでこんなに早くできるの！？」と驚かれ喜ばれるほどでしたし、自分たちもCSSだけの書き換えですんだので、結果としてやりやすいというメリットもありました。

ただ、ブラウザによって違う部分等もあったりするので、そのあたりを注意していかなければならなかったりもしますが。。。。

web制作をやっていく上で必須の知識です

頑張って覚えましょう

最初は遊びのつもりでいろんなページをつくってみるといいですよ。
CSSを入れ替えるだけでデザインが変わったときの驚きはすごく新鮮で今でも覚えています。

カラー・ウェブコンサルタントの山崎です。

先の志水さんのご意見同様、ウェブ標準よりも先に、きちんとした文章力、構成力が大事と私も考えています。

メリットしては、他の方々も回答されているようにメンテナンス性や、共同作業のスムーズさ、SEO的な効果などがありますが、最近は言葉だけのウェブ標準が先行しているような気がします。それ自体は、きちんとした規約があるから、覚えようと思えばすぐにでも覚えることが出来るでしょう。

弊社では、アクセシビリティなどにも配慮して制作を進めているのですが、最後に音声ブラウザによるテストなどを行うと、いくらきちんとしたコーディングであっても意味不明な文章になっていることがあります。

MS-Wordでレポートなどを書いたことがあるかと思いますが、同じ文章をテキストエディタで書くのと比べると見出しを付けられたり、段区切を付けられたりと読みやすくすることが出来ます。ただし、基本的に読める文章があるからこそ、MS-Wordでの表現が可能なのです。

もし意味不明の単語の羅列だけがレポートで出された場合、それを書いた人以外に意味がわかる人が何人いるでしょうか？

これが、HTMLに変わった場合でも同じです。きちんとした文章、構成が基本にあり、その上で規約に沿ったマークアップをおこなってこそ、ウェブ標準の意味があります。

後は、それをCSSでビジュアル的な部分の要求に応えていくことになります。でも、先の要素がきちんと出来ていれば、CSSの組み方もシンプルになりますし、全体の作業も非常に楽ですよ。Hackなどもあまりしないで済みますしね。

こんにちは、Deep Arms Designs Co.の林です。

web標準コーディングでのメリットは、SEO対策も兼ねることが出来る。
またデザイン部分をCSSで記述する事により、一括管理が出来て表示関連の管理がとてもラクになります。
テーブルタグが無くなるので、ページのソースが非常に軽くなり全体の構造を把握するのが容易になります。

CSSで記述する際には、各プロパティをしっかり把握してIE等で発生するバグをしっかりと理解した上で記述していかないと、とても大変になります。
各プロパティを理解しておくと、最小限で記述し手構築することが可能です。
また、各プロパティをしっかりと理解しておくとハック等も少なくてすみます。

株式会社スイムの岩井迫です。

１）サーチエンジンへの最適化
WEB標準では、(x)HTMLの構造を適切にするための勧告がなされています。
サーチエンジン業界もこの勧告に従っていることや、文章構造とデザイン情報が別になっている為に該当ページのコンテンツの把握をしやすいことがサーチエンジンへの最適化に繋がっています。
※単純に、ソースを見ると構造コードと日本語の比率で、日本語比率が増える事が見て取れると思います。

２）メンテナンス性
WEB標準では、文章構造とデザイン情報が別になります。
デザイン情報は、部位（例えばサイドメニュー部）毎にデザイン・レイアウトを指定するCSSを置くことになります。
よって、該当の部位の改修が非常に行いやすなります。

３）アクセシビリティー
WEB標準は、ブラウザ業界でも勧告に従っています。
昨今では、ブラウザはPCだけのものではなく、様々な情報端末でブラウジングが出来るようになってきており、その傾向はよりすすんでいます。
文章構造とデザインが分かれているWEB標準では、CSSの使い分けを含め、CSSに対応していないブラウザでも、文章構造が解釈されるため内容を閲覧することが可能となります

４）軽量化による高速表示
レイアウトをtableタグなどに頼らないWEB標準では、HTML自体にデザイン情報を持たせる必要が無く、軽量化することが可能です。
また、同じCSSを用いているページでは、CSSはブラウザにキャッシュされるために、より高速な表示が可能となります。


実作業へのコツは、御社にとっての標準CSSを作ってしまうことです。
各デザイナー（コーダー）がバラバラのCSSを作ってしまうとメンテナンス時に困ってしまいますし、一度標準CSSを作ってしまうと、そのパターンに従って可変させれば使い回しも可能になってきます。
※標準が有ると言うことは、新人さんを育てるのも楽になります。

ブレスの北窓と申します。

「WEB標準でコーディングするメリット」ですが、回答はだいたい出揃っていますので、私が作業する上で最低限確認していることを言います。

1）実機のブラウザで確認
コーディング作業が完了した後は必ず異なる環境のPCのブラウザ（WIN、MACでも）で確認するようにしています。（当たり前かと思いますが・・・）
色々なCSSハック等ありますが、きちんと理解せずハックしてもその通りには大抵なりません（私も理解出来ない時になんとなくしてみましたが？？？の連続でした）
それならば、ハックをするのではなく、ページ内の文章構造など見直しする方が良いと思います。

2）ソース内に必ずコメントを入れる
いくらWEB標準でコーディング出来るようになったとしても、他の誰かが見たとき、しばらく経って自分で見直した時など、どのように書いたのかが分かるように処理前と後にタイトルを入れるようにした方がいいと思います。

3）コーディングの度にルールを変えない
CSSで使用する名前（div名やclass名など）や文法を制作する度に換えないことで、ある程度ルールを決めれば制作者が変わっても移行がスムーズに行えます。

色々あるとは思いますが、なぜ標準化するのかをよく考えて制作をすれば良いと思います。