WEB標準でコーディングするメリット - ホームページ・Web制作 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

注目のQ&AランキングRSS

対象:ホームページ・Web制作

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

法人・ビジネス ホームページ・Web制作 2007/06/27 05:32

都内で小さなWEB制作会社に勤めています。コーディングの際、WEB標準でコーディングすることが求められていますが、具体的なメリットはどういったことなのでしょうか?

実作業するにあたり、コツやポイントなども教えていただけたらと思います。

donaさん ( 東京都 / 女性 / 27歳 )

回答:10件

誰からもわかりやすくなる

2007/06/27 09:13 詳細リンク

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

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

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

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

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

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

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

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

などがメリットです。

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

回答専門家

運営 事務局
運営 事務局
(東京都 / 編集部)
専門家プロファイル 
03-6869-6825
※お電話の際は「"プロファイル"を見た」とお伝え下さい。

登録している専門家やQ&Aやコラムといったコンテンツをご紹介

専門家プロファイルに登録をしている皆様の記事や、Q&A、まとめ記事など編集部でピックアップしたものを定期的に配信していきます。よろしくお願いいたします。

運営 事務局が提供する商品・サービス

レッスン・教室

記事制作に関するご相談

記事制作に関するご相談

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。

web標準のメリットなど

2007/06/27 09:41 詳細リンク

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

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

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

回答専門家

運営 事務局
運営 事務局
(東京都 / 編集部)
専門家プロファイル 
03-6869-6825
※お電話の際は「"プロファイル"を見た」とお伝え下さい。

登録している専門家やQ&Aやコラムといったコンテンツをご紹介

専門家プロファイルに登録をしている皆様の記事や、Q&A、まとめ記事など編集部でピックアップしたものを定期的に配信していきます。よろしくお願いいたします。

運営 事務局が提供する商品・サービス

レッスン・教室

記事制作に関するご相談

記事制作に関するご相談

WEB標準のメリットと、実作業上のポイント

2007/06/27 13:00 詳細リンク

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

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

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

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

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

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

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

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

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

回答専門家

運営 事務局
運営 事務局
(東京都 / 編集部)
専門家プロファイル 
03-6869-6825
※お電話の際は「"プロファイル"を見た」とお伝え下さい。

登録している専門家やQ&Aやコラムといったコンテンツをご紹介

専門家プロファイルに登録をしている皆様の記事や、Q&A、まとめ記事など編集部でピックアップしたものを定期的に配信していきます。よろしくお願いいたします。

運営 事務局が提供する商品・サービス

レッスン・教室

記事制作に関するご相談

記事制作に関するご相談

志水 雅眉 専門家

志水 雅眉
Webプロデューサー

- good

WEB標準のコーディングも大切ですが

2007/06/28 00:59 詳細リンク

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

回答専門家

志水 雅眉
志水 雅眉
(愛知県 / Webプロデューサー)
コンテンツ庵 クリエイティブ・プロデューサー

効果的なコミュニケーションのために先進性あるコンテンツを企画

世の中よりも少し先行くエンターテイメント性の高い企画に自信があります。企業ブランディングの過程には、ワクワクする仕掛けや表現が必要となります。ゲームや動画などだけでなく、新しい仕掛けをご提供いたします。

実作業のコツ

2007/06/28 02:21 詳細リンク

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

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

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

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

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

回答専門家

運営 事務局
運営 事務局
(東京都 / 編集部)
専門家プロファイル 
03-6869-6825
※お電話の際は「"プロファイル"を見た」とお伝え下さい。

登録している専門家やQ&Aやコラムといったコンテンツをご紹介

専門家プロファイルに登録をしている皆様の記事や、Q&A、まとめ記事など編集部でピックアップしたものを定期的に配信していきます。よろしくお願いいたします。

運営 事務局が提供する商品・サービス

レッスン・教室

記事制作に関するご相談

記事制作に関するご相談

他の方々が答えているように

2007/06/28 15:38 詳細リンク

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

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

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

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

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

頑張って覚えましょう

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

回答専門家

運営 事務局
運営 事務局
(東京都 / 編集部)
専門家プロファイル 
03-6869-6825
※お電話の際は「"プロファイル"を見た」とお伝え下さい。

登録している専門家やQ&Aやコラムといったコンテンツをご紹介

専門家プロファイルに登録をしている皆様の記事や、Q&A、まとめ記事など編集部でピックアップしたものを定期的に配信していきます。よろしくお願いいたします。

運営 事務局が提供する商品・サービス

レッスン・教室

記事制作に関するご相談

記事制作に関するご相談

正しい文章を書くことから始めましょう

2007/06/29 01:47 詳細リンク

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

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

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

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

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

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

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

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

回答専門家

運営 事務局
運営 事務局
(東京都 / 編集部)
専門家プロファイル 
03-6869-6825
※お電話の際は「"プロファイル"を見た」とお伝え下さい。

登録している専門家やQ&Aやコラムといったコンテンツをご紹介

専門家プロファイルに登録をしている皆様の記事や、Q&A、まとめ記事など編集部でピックアップしたものを定期的に配信していきます。よろしくお願いいたします。

運営 事務局が提供する商品・サービス

レッスン・教室

記事制作に関するご相談

記事制作に関するご相談

WEB標準のメリット

2007/06/29 10:48 詳細リンク

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

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

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

回答専門家

運営 事務局
運営 事務局
(東京都 / 編集部)
専門家プロファイル 
03-6869-6825
※お電話の際は「"プロファイル"を見た」とお伝え下さい。

登録している専門家やQ&Aやコラムといったコンテンツをご紹介

専門家プロファイルに登録をしている皆様の記事や、Q&A、まとめ記事など編集部でピックアップしたものを定期的に配信していきます。よろしくお願いいたします。

運営 事務局が提供する商品・サービス

レッスン・教室

記事制作に関するご相談

記事制作に関するご相談

岩井迫 泰行

岩井迫 泰行
ITコンサルタント

- good

主には4つのメリットが有ります。

2007/06/27 09:55 詳細リンク

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

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

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

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

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


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

北窓 喜一郎

北窓 喜一郎
Webプロデューサー

- good

実作業でのポイント

2007/06/29 20:08 詳細リンク

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

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

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

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

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

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

(現在のポイント:-pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

ウェブ制作契約を打ち切られました。 tg201さん  2012-06-01 23:05 回答2件
順位下降時の対処について こつこつがんばさん  2014-06-18 03:07 回答1件
PHP&MySQLによる会員制サイトの構築について こつこつがんばさん  2014-05-01 18:22 回答1件
夫が独立した(web会社)妻です。 もっち吉さん  2013-06-23 03:37 回答5件
ウェブデザイナーとして新卒で就職するには? ろごろえさん  2012-07-12 18:09 回答1件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

対面相談

後継者がいない!事業承継安心相談

事業承継に備えて、早めに準備しましょう

大黒たかのり

大手町会計事務所

大黒たかのり

(税理士)

対面相談

自社株式の相続税・贈与税をゼロに!

本当に税金かからないの?新事業承継税制について疑問に思っていることなど気軽に相談してみませんか。

大黒たかのり

大手町会計事務所

大黒たかのり

(税理士)

セミナー

リーダー育成研修 ただ聴くだけの研修なんかじゃない!

考えて行動するリーダーのための考えて 行動する研修

丸本 敏久

株式会社メンタル・パワー・サポート

丸本 敏久

(心理カウンセラー)